Ignore:
Timestamp:
02/05/22 22:48:19 (3 years ago)
Author:
Petar Partaloski <ppartaloski@…>
Branches:
main
Children:
2efe93e
Parents:
5b447b0
Message:

Fixed and added a better front end, improved clarity

File:
1 edited

Legend:

Unmodified
Added
Removed
  • target/classes/templates/favoriteList.html

    r5b447b0 rf25e8dd  
    1 <div class="container mb-4">
     1<style>
     2    .card{
     3        background-size: 200px 300px;
     4        background-repeat: no-repeat;
     5        float:left;
     6        margin: 7px;
     7        min-height: 270px;
     8        border-radius: 10px;
     9        padding: 20px;
     10        color: white;
     11        -webkit-text-stroke-width: 1px;
     12        -webkit-text-stroke-color: black;
     13    }
     14
     15    .card h4{
     16        text-align: center;
     17        background-color: rgba(255,255,255,0.7);
     18        border-radius: 5px;
     19    }
     20
     21    .card h3{
     22        position: absolute;
     23        top: 85%;
     24        margin:auto;
     25        width: 100%;
     26        left: 0%;
     27        border-radius: 10px;
     28        text-align: center;
     29        background-color: rgba(255,255,255,0.7);
     30    }
     31</style>
     32
     33
     34<div class="container mb-4" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.w3.org/1999/xhtml">
    235    <div class="row">
    336        <div class="col-12" th:if="${movies.size() > 0}">
    437            <div class="table-responsive">
     38                <a th:each="movie: ${movies}" th:href="@{'/movies/{id}' (id=${movie.getMovieId()})}" >
     39                    <div class="col-2 card" th:style="'background:url(' + ${movie.getImageUrl()} + ');'">
     40                        <h4 th:text="${movie.getTitle()}"></h4>
     41                        <h3 th:text="${movie.getImdbRating()}"></h3>
     42                    </div>
     43                </a>
    544                <table class="table table-striped">
    645                    <thead>
Note: See TracChangeset for help on using the changeset viewer.