Changeset f25e8dd in Git for src/main/resources/templates/favoriteList.html

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:

• src/main/resources/templates/favoriteList.html (modified) (1 diff)

src/main/resources/templates/favoriteList.html

@@ -1 @@
-<div class="container mb-4">
+<style>
+    .card{
+        background-size: 200px 300px;
+        background-repeat: no-repeat;
+        float:left;
+        margin: 7px;
+        min-height: 270px;
+        border-radius: 10px;
+        padding: 20px;
+        color: white;
+        -webkit-text-stroke-width: 1px;
+        -webkit-text-stroke-color: black;
+    }
+
+    .card h4{
+        text-align: center;
+        background-color: rgba(255,255,255,0.7);
+        border-radius: 5px;
+    }
+
+    .card h3{
+        position: absolute;
+        top: 85%;
+        margin:auto;
+        width: 100%;
+        left: 0%;
+        border-radius: 10px;
+        text-align: center;
+        background-color: rgba(255,255,255,0.7);
+    }
+</style>
+
+
+<div class="container mb-4" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.w3.org/1999/xhtml">
     <div class="row">
         <div class="col-12" th:if="${movies.size() > 0}">
             <div class="table-responsive">
+                <a th:each="movie: ${movies}" th:href="@{'/movies/{id}' (id=${movie.getMovieId()})}" >
+                    <div class="col-2 card" th:style="'background:url(' + ${movie.getImageUrl()} + ');'">
+                        <h4 th:text="${movie.getTitle()}"></h4>
+                        <h3 th:text="${movie.getImdbRating()}"></h3>
+                    </div>
+                </a>
                 <table class="table table-striped">
                     <thead>