Changeset 2efe93e in Git for src/main/resources


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

Improved Front-End, added card view of movies

Location:
src/main/resources
Files:
5 edited

Legend:

Unmodified
Added
Removed

  • src/main/resources/static/css/shared.css

    rf25e8dd r2efe93e  
    22    max-width: 5vw;
    33}
     4
     5.row{
     6    height: 300px;
     7    margin-bottom: 15px;
     8}
     9
     10.row div{
     11    height: 100%;
     12}
     13
     14.row div div{
     15    height: 100%;
     16}
     17
     18.card{
     19    background-size: 100vh auto;
     20    float:left;
     21    margin: 7px;
     22    border-radius: 10px;
     23    padding: 20px;
     24    color: white;
     25    -webkit-text-stroke-width: 1px !important;
     26    -webkit-text-stroke-color: black !important;
     27    width: 90%;
     28    height: 90%;
     29    box-shadow: 4px 4px 4px rgba(128,128,128,1);
     30}
     31
     32.card a h3{
     33    -webkit-text-stroke-width: 1px;
     34    -webkit-text-stroke-color: black;
     35    color:white;
     36    transition: 100ms;
     37}
     38
     39.card:hover a h3{
     40    transition: 400ms;
     41    color:black;
     42    -webkit-text-stroke-color: white;
     43}
     44
     45.title{
     46    text-align: center;
     47    background-color: rgba(0,0,0,0.25);
     48    border-radius: 10px 10px 0px 0px;
     49    padding: 10px;
     50}
     51
     52.bottom{
     53    position: absolute;
     54    top: 80%;
     55    margin:auto;
     56    width: 100%;
     57    left: 0%;
     58    border-radius: 0px;
     59    text-align: center;
     60    background-color: rgba(0,0,0,0.25);
     61}
     62
     63
     64.bottom-heart{
     65    top: 60%;
     66    left: auto;
     67    position: absolute;
     68    margin: auto;
     69    width: 20%;
     70    text-align: center;
     71}

  • src/main/resources/static/js/sharedScript.js

    rf25e8dd r2efe93e  
    146146                let movieId=$(button).attr("movie-id")
    147147                if (type==='like') {
    148                     $(button).parent().append("<a class='btn btn-warning button-remove-favourite-list' movie-id=" + movieId + " user-id=" + userId + ">Избриши од омилена листа</a>")
     148                    $(button).parent().append("<a class='bottom-heart btn btn-danger button-remove-favourite-list' movie-id=" + movieId + " user-id=" + userId + ">💔</a>")
    149149                    console.log("da")
    150150                }
    151151                else{
    152                     $(button).parent().append("<a class='btn btn-success button-add-favourite-list' movie-id=" + movieId + " user-id=" + userId + ">Додади во омилена листа</a>")
     152                    $(button).parent().append("<a class='bottom-heart btn btn-success button-add-favourite-list' movie-id=" + movieId + " user-id=" + userId + ">❤</a>")
    153153
    154154                }

  • src/main/resources/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>

  • src/main/resources/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>

  • src/main/resources/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.