source: Git/src/main/resources/templates/movieShow.html@ 2efe93e

main
Last change on this file since 2efe93e was 2efe93e, checked in by Petar Partaloski <ppartaloski@…>, 3 years ago

Improved Front-End, added card view of movies

  • Property mode set to 100644
File size: 5.1 KB
Line 
1<style>
2 #admin-buttons button{
3 float:left;
4 margin: 20px !important;
5 }
6
7 #admin-buttons{
8 width: 60%;
9 margin: auto;
10 }
11</style>
12
13<div xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.w3.org/1999/xhtml" style="width: 80%; margin: auto">
14 <div>
15 <div style="width: 30%; margin-right: 10px; padding:20px; border-right: 3px solid black; border-radius: 10px; float:left">
16 <img th:src="${movie.getImageUrl()}" style="width: 90%; height: auto">
17 </div>
18
19 <div style="width: 60%; margin-left: 10px; padding:20px; float:left">
20 <h1 th:text="${movie.getTitle()}" style="text-align: center; padding:10px; background-color: rgba(64,64,64,0.5); color:white; border-radius: 10px 0px"></h1>
21 <hr>
22 <h3>
23 <span>Режисер:</span>
24 <a th:if="${movie.getDirector() != null}" th:text="${movie.getDirector().getName() + ' ' + movie.getDirector().getSurname()}" th:href="@{'/persons/{id}' (id=${movie.getDirector().getPersonId()})}"></a>
25 <span th:if="${movie.getDirector() == null}"> / </span>
26 </h3>
27 <h3 th:text="${'IMDB оцена: ' + movie.getImdbRating()}"></h3>
28 <h3 th:text="${'Прикажан на: ' + movie.getAiringDate()}"></h3>
29
30 <div style="background-color: rgba(200,200,200,0.5); border-radius: 10px; padding:15px; ">
31 <h3>Краток опис:</h3>
32 <p th:text="${movie.getDescription()}" style="text-align: justify"></p>
33 </div>
34
35 <div>
36 <h3>Жанрови:</h3>
37 <ul>
38 <li th:each="genre: ${movie.getGenres()}" th:text="${genre.getGenre().getGenreType()}"></li>
39 </ul>
40 </div>
41 <div>
42 <h3>Актери:</h3>
43 <ul>
44 <li th:each="actor: ${movie.getActors()}"><a th:text="${actor.getPerson().getName() + ' ' + actor.getPerson().getSurname()}" th:href="@{'/persons/{id}' (id=${actor.getPerson().getPersonId()})}" ></a></li>
45 </ul>
46 </div>
47
48 </div>
49 </div>
50 <div id="admin-buttons">
51 <a class="btn btn-primary" th:href="@{'/discussions/all/{id}?type=M' (id=${movie.getMovieId()})}" >Прегледај дискусии</a>
52 <th:block sec:authorize="isAuthenticated()" >
53 <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>
54 <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>
55 <a class="btn btn-success button-add-grade-movie" th:movie-id="${movie.getMovieId()}">Остави оценка</a>
56 <a class="btn btn-warning" th:href="@{'/movies/{id}/edit' (id=${movie.getMovieId()})}">Промени</a>
57 <a class="btn btn-danger button-delete-movie" th:movie-id="${movie.getMovieId()}">Избриши филм</a>
58 </th:block>
59 </div>
60 <hr>
61 <div style="width: 45%; margin: 25px; float:left; background-color: rgb(200,200,200); padding: 10px; border-radius: 5px">
62 <h2>
63 <span>Бројот на оцени кои филмот ги добил:</span>
64 <span th:text="${movie.getRates().size()}"></span>
65 </h2>
66 <hr>
67 <div th:each="rating: ${movie.getRates()}" style="margin-bottom: 10px; border: 2px solid gray; border-radius: 10px; background-color: lightblue; padding: 10px; border-radius: 10px; min-height: 130px;">
68 <div style="width: 60%; float:left;">
69 <p th:text="${rating.getReason()}" style="text-align: justify"></p>
70 </div>
71 <div style="width: 30%; float:right; background-color: darkorange; border-radius: 10px 30px; color: whitesmoke; padding: 10px;">
72 <h2 style="text-align: center">Rated:</h2>
73 <p th:text="${rating.getStarsRated() + ' out of 10 stars'}" style="text-align: center"></p>
74 </div>
75 </div>
76 </div>
77 <div style="width: 45%; margin: 25px; float:left; background-color: rgb(200,200,200); padding: 10px; border-radius: 5px">
78 <h2>
79 <span>Бројот на лајкови кои филмот ги добил:</span>
80 <span th:text="${movie.getLikes().size()}"></span>
81 </h2>
82 <hr>
83 <div th:each="liked: ${movie.getLikes()}" style="margin-bottom: 10px; border: 2px solid gray; border-radius: 10px; background-color: lightblue; padding: 10px; border-radius: 10px; min-height: 60px;">
84 <div style="width: 100%; float:left;">
85 <h3 style="text-align: center">
86 <span th:text="${liked.getUser().getName() + ' ' + liked.getUser().getSurname()}"></span>
87 <span style="color: green; font-size: 100%" >✔</span>
88 </h3>
89 </div>
90 </div>
91 </div>
92</div>
Note: See TracBrowser for help on using the repository browser.