Changeset 2efe93e in Git for target/classes/templates


Ignore:
Timestamp:
02/06/22 20:01:15 (2 years ago)
Author:
Petar Partaloski <ppartaloski@…>
Branches:
main
Children:
42d565b
Parents:
f25e8dd
Message:

Improved Front-End, added card view of movies

Location:
target/classes/templates
Files:
3 edited

Legend:

Unmodified
Added
Removed

  • target/classes/templates/favoriteList.html

    rf25e8dd r2efe93e  
    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     }
     1<div class="container mb-4" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.w3.org/1999/xhtml">
     2    <div class="row" th:each="row: ${movie_rows}" >
     3        <div class="col-md-3" th:each="movie: ${row}" >
     4            <a class="card-text-center" th:href="@{'/movies/{id}' (id=${movie.getMovieId()})}" >
     5                    <div class="card-body card bg-image" th:style="'background:url(' + ${movie.getImageUrl()} + ') no-repeat center #eee;'">
     6                        <h3 class="card-title title" th:text="${movie.getTitle()}"></h3>
     7                        <h3 class="card-text bottom" th:text="${'Rated '+movie.getImdbRating()}"></h3>
     8                    </div>
     9            </a>
     10        </div>
     11    </div>
    1412
    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">
    35     <div class="row">
     13    <!--<div class="row">
    3614        <div class="col-12" th:if="${movies.size() > 0}">
    3715            <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>
    4416                <table class="table table-striped">
    4517                    <thead>
    … …  
    7850            </div>
    7951        </div>
    80     </div>
     52    </div>-->
    8153</div>

  • target/classes/templates/movieShow.html

    rf25e8dd r2efe93e  
    4949    </div>
    5050    <div id="admin-buttons">
     51        <a class="btn btn-primary" th:href="@{'/discussions/all/{id}?type=M' (id=${movie.getMovieId()})}" >Прегледај дискусии</a>
    5152        <th:block sec:authorize="isAuthenticated()" >
    5253            <a class="btn btn-success button-add-favourite-list" th:movie-id="${movie.getMovieId()}" th:user-id="${user.getUserId()}" th:if="${!likedMovies.contains(movie)}">Додади во омилена листа</a>
    5354            <a class="btn btn-warning button-remove-favourite-list" th:movie-id="${movie.getMovieId()}" th:user-id="${user.getUserId()}" th:if="${likedMovies.contains(movie)}">Избриши од омилена листа</a>
    54             <a class="btn btn-primary button-add-grade-movie" th:movie-id="${movie.getMovieId()}">Остави оценка</a>
     55            <a class="btn btn-success button-add-grade-movie" th:movie-id="${movie.getMovieId()}">Остави оценка</a>
    5556            <a class="btn btn-warning" th:href="@{'/movies/{id}/edit' (id=${movie.getMovieId()})}">Промени</a>
    5657            <a class="btn btn-danger button-delete-movie" th:movie-id="${movie.getMovieId()}">Избриши филм</a>

  • target/classes/templates/moviesList.html

    rf25e8dd r2efe93e  
    1111
    1212    <div class="container mb-4">
     13        <div class="row" th:each="row: ${movie_rows}" >
     14            <div class="col-md-3" th:each="movie: ${row}" >
     15                    <div class="card-body card bg-image" th:style="'background:url(' + ${movie.getImageUrl()} + ') no-repeat center #eee;'">
     16                        <a class="card-text-center" style="color: white" th:href="@{'/movies/{id}' (id=${movie.getMovieId()})}" >
     17                        <h3 class="card-title title" th:text="${movie.getTitle()}"></h3>
     18                        </a>
     19                        <h3 class="card-text bottom" th:text="${'Rated '+movie.getImdbRating()}"></h3>
     20                        <th:block sec:authorize="isAuthenticated()">
     21                            <a class="bottom-heart btn btn-success button-add-favourite-list" th:movie-id="${movie.getMovieId()}" th:user-id="${user.getUserId()}" th:if="${!likedMovies.contains(movie)}">❤</a>
     22                            <a class="bottom-heart btn btn-danger button-remove-favourite-list" th:movie-id="${movie.getMovieId()}" th:user-id="${user.getUserId()}" th:if="${likedMovies.contains(movie)}">💔</a>
     23                        </th:block>
     24                    </div>
     25            </div>
     26        </div>
     27    </div>
     28    <!--<div class="container mb-4">
    1329        <div class="row">
    1430            <div class="col-12" th:if="${movies.size() > 0}">
    … …  
    1834                        <tr>
    1935                            <th scope="col">Наслов</th>
    20                             <!--<th scope="col">Опис</th>-->
     36                            <th scope="col">Опис</th>
    2137                            <th scope="col">Датум издавање</th>
    2238                            <th scope="col">Допаѓања</th>
    … …  
    4056                        <tr th:each="movie : ${movies}" class="elements">
    4157                            <td><a th:text="${movie.getTitle()}" th:href="@{'/movies/{id}' (id=${movie.getMovieId()})}"></a></td>
    42                             <!--<td th:text="${movie.getDescription()}"></td>-->
     58                            <td th:text="${movie.getDescription()}"></td>
    4359                            <td th:text="${movie.getAiringDate()}"></td>
    4460                            <td th:text="${movie.getLikes() != null  ? movie.getLikes().size() : 0}">
    … …  
    6682                                <a class="btn btn-success button-add-favourite-list" th:movie-id="${movie.getMovieId()}" th:user-id="${user.getUserId()}" th:if="${!likedMovies.contains(movie)}">Додади во омилена листа</a>
    6783                                <a class="btn btn-warning button-remove-favourite-list" th:movie-id="${movie.getMovieId()}" th:user-id="${user.getUserId()}" th:if="${likedMovies.contains(movie)}">Избриши од омилена листа</a>
    68 
    6984                            </td>
    7085                            <td>
    … …  
    8499            </div>
    85100        </div>
    86     </div>
     101    </div>-->
    87102
    88103</div>
Note: See TracChangeset for help on using the changeset viewer.