Changeset 967b414 in Git for src/main/resources

Timestamp:

02/09/22 03:21:13 (3 years ago)

Author:

GitHub <noreply@…>

Branches:

main

Children:

6f91f99

Parents:

0226942 (diff), 3fe36de (diff)
Note: this is a merge changeset, the changes displayed below correspond to the merge itself.
Use the (diff) links above to see all the changes relative to each parent.

git-author:

Mato-77 <56981531+Mato-77@…> (02/09/22 03:21:13)

git-committer:

GitHub <noreply@…> (02/09/22 03:21:13)

Message:

Merge pull request #4 from partaloski/master

Added User profiles, improved clarity, improved UI

Location:

src/main/resources

Files:

• static/css/shared.css (modified) (2 diffs)
• static/js/sharedScript.js (modified) (1 diff)
• templates/discussion.html (modified) (2 diffs)
• templates/discussionsList.html (modified) (1 diff)
• templates/movieShow.html (modified) (2 diffs)
• templates/moviesListPaged.html (modified) (2 diffs)
• templates/personShow.html (modified) (3 diffs)
• templates/personsList.html (modified) (2 diffs)
• templates/template.html (modified) (1 diff)
• templates/usersShow.html (added)

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

@@ -164 +164 @@
 .genres-listing ul li{
     background-color: rgba(192,128,128,0.7);
-    text-decoration: none !important;
+    text-decoration: none;
 }
 
@@ -214 +214 @@
     display: none;
 }
+
+.user-text{
+    font-size: 95%;
+    text-decoration: none !important;
+    text-decoration-color: transparent;
+    text-align: justify;
+}
+
+.user-text-small{
+    font-size: 85%;
+    text-decoration: none !important;
+    text-decoration-color: transparent;
+    text-align: justify;
+}
+
+
+.user-movies-list{
+    margin: auto;
+    margin-top: 20px;
+    padding: 10px;
+    width: 80%;
+    background-color: rgba(52, 58, 64, 0.7);
+    border-radius: 10px;
+    transition: 200ms;
+    margin-right: 15px;
+    color: white;
+    transition: 200ms;
+}
+
+.user-movies-list:hover{
+    background-color: rgba(52, 58, 64, 1);
+}
+
+.user-movies-list ul{
+    list-style-type: none;
+    width: 99%;
+    margin: auto;
+    display: none;
+}
+
+.hidden-class{
+    background-color: rgba(192,255,192,0.6);
+    color: black;
+}
+
+.hidden-class:hover{
+    background-color: rgba(128,255,128,1) !important;
+
+}
+
+.user-movies-list ul li{
+    color:black;
+    background-color: rgba(255,255,255,0.7);
+    padding: 12px;
+    font-size: 80%;
+    width: 90%;
+    text-align: center;
+    margin: auto;
+    transition: 200ms;
+    border-radius: 10px;
+    margin-bottom: 5px;
+    text-decoration: none;
+    float: left;
+}
+
+.user-movies-list hr{
+    color: white;
+    background-color: white;
+    border-color: white;
+}
+
+
+.user-movies-list ul li:hover{
+    background-color: rgba(255,255,255,1);
+}
+
+.rate-title{
+    font-size: 130%;
+}
+
+#buttons-person{
+    margin-top: 10px;
+}
+
+#buttons-person li{
+    float: left;
+    margin-right: 10px;
+}

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

@@ -88 +88 @@
         else
             $("#filters_div").fadeToggle();
+    })
+
+    $(".user-movies-list").on("click", function (){
+        children = $(this).children()
+        first = true
+        for (let item of children){
+            if(first){
+                first = !first
+            }
+            else{
+                $(item).fadeToggle();
+            }
+        }
+        $(this).toggleClass("hidden-class")
     })
 

src/main/resources/templates/discussion.html

@@ -19 +19 @@
         <br>
         <h6 style="width: 60%; float:left;">
+            <a th:href="@{'/profiles/{id}' (id=${disc.getUser().getUserId()})}" >
             <span th:text="${'Поставено од: '+disc.getUser().getUsername()}"></span>
+            </a>
             <span th:text="${', на датум '+ disc.getDate()}"></span>
             <br>
@@ -48 +50 @@
             <td th:text="${reply.getText()}"></td>
             <td th:text="${reply.getDate()}"></td>
-            <td th:text="${reply.getUser().getUsername()}"></td>
+            <td >
+                <a th:href="@{'/profiles/{id}' (id=${reply.getUser().getUserId()})}" th:text="${reply.getUser().getUsername()}"></a>
+            </td>
             <td th:if="${reply.getUser().equals(user)}"><a class="btn btn-warning" th:href="@{'/replies/edit/{discussionId}/{replyId}' (discussionId=${disc.getDiscussionId()},replyId=${reply.getReplyId()})}">Промени</a> </td>
             <td th:if="${reply.getUser().equals(user)}"><a class="btn btn-danger button-delete-reply" th:reply-id="${reply.getReplyId()}" th:dicsussion-id="${disc.getDiscussionId()}">Избриши</a> </td>

src/main/resources/templates/discussionsList.html

@@ -1 +1 @@
 <div xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.w3.org/1999/xhtml">
     <div class="container mb-4">
-        <a sec:authorize="isAuthenticated()" th:href="@{/discussions/add}">Додади нова дискусија</a>
+        <a sec:authorize="isAuthenticated()" th:href="@{/discussions/add}" class="btn btn-secondary">Додади нова дискусија</a>
     </div>
     <div class="container mb-4">

src/main/resources/templates/movieShow.html

@@ -78 +78 @@
         <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;">
                 <div style="width: 60%; float:left;">
+                    <a th:href="@{'/profiles/{id}' (id=${rating.getUser().getUserId()})}">
+                        <h4 th:text="${'Oд: '+rating.getUser().getName() + ' ' + rating.getUser().getSurname()}"> </h4>
+                    </a>
                     <p th:text="${rating.getReason()}" style="text-align: justify"></p>
                 </div>
@@ -93 +96 @@
         <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;">
             <div style="width: 100%; float:left;">
-                <h3  style="text-align: center">
-                    <span th:text="${liked.getUser().getName() + ' ' + liked.getUser().getSurname()}"></span>
-                    <span style="color: green; font-size: 100%" >✔</span>
-                </h3>
+                <a th:href="@{'/profiles/{id}' (id=${liked.getUser().getUserId()})}" >
+                    <h3  style="text-align: center">
+                        <span th:text="${liked.getUser().getName() + ' ' + liked.getUser().getSurname()}"></span>
+                        <span style="color: green; font-size: 100%" >✔</span>
+                    </h3>
+                </a>
             </div>
         </div>

src/main/resources/templates/moviesListPaged.html

@@ -30 +30 @@
 
     <div class="container mb-4">
-        <a  sec:authorize="isAuthenticated()" th:href="@{/movies/add}">Додади нов филм</a>
+        <a  sec:authorize="isAuthenticated()" th:href="@{/movies/add}" class="btn btn-secondary">Додади нов филм</a>
     </div>
 
@@ -46 +46 @@
                         </span>
                         <th:block sec:authorize="isAuthenticated()">
-                            <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>
-                            <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>
+                            <button 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)}">❤</button>
+                            <button 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)}">💔</button>
                         </th:block>
                     </div>

src/main/resources/templates/personShow.html

@@ -5 +5 @@
             <h1 th:text="${person.getName() + ' ' + person.getSurname()}" style="text-align: center; padding:10px; background-color: rgba(64,64,64,0.5); color:white; border-radius: 10px 0px"></h1>
             <hr>
-            <h3 th:text="${'Роден на: ' + person.getDateFormatted()}"></h3>
+            <h3 th:text="${'Роден/а на: ' + person.getDateFormatted()}"></h3>
             <div style="background-color: rgba(200,200,200,0.5); border-radius: 10px; padding:15px; ">
                 <h3>Краток Опис:</h3>
@@ -24 +24 @@
                     <li th:each="movie: ${person.getMovieActors()}" ><a th:text="${movie.getMovie().getTitle()}" th:href="@{'/movies/{id}' (id=${movie.getMovie().getMovieId()})}" ></a></li>
                 </ul>
-            </div>
+            </div><br>
+            <ul style="list-style-type: none; width: 100%; margin: auto" id="buttons-person">
+                <li><a class="btn btn-primary" th:href="@{'discussions/all/{id}?type=P' (id=${person.getPersonId()})}" >Прегледај дискусии</a></li>
+                <th:block sec:authorize="isAuthenticated()">
+                    <li><a class="btn btn-secondary button-add-grade-person" th:person-id="${person.getPersonId()}" th:if="${!person.hasGradeFromUser(user)}">Остави оценка</a></li>
+                    <li><a class="btn btn-secondary button-add-grade-person" th:person-id="${person.getPersonId()}" th:if="${person.hasGradeFromUser(user)}">Промени оценка</a></li>
+                    <li><a class="btn btn-warning" th:href="@{'persons/edit/{personId}' (personId = ${person.getPersonId()})}">Промени</a></li>
+                    <li><a class="btn btn-danger button-delete-actor" th:person-id="${person.getPersonId()}">Избриши</a></li>
+                </th:block>
+            </ul>
         </div>
         <div style="width: 30%; margin-left: 10px; padding:20px; border-left: 3px solid black; border-radius: 10px; float:right">
@@ -39 +48 @@
         <div th:each="rating: ${person.getPersonRates()}" style="margin-bottom: 10px; border: 2px solid gray; border-radius: 10px; background-color: lightblue; padding: 10px; border-radius: 10px; min-height: 130px;">
             <div style="width: 60%; float:left;">
+                <a th:href="@{'/profiles/{id}' (id=${rating.getUser().getUserId()})}">
+                    <h4 th:text="${'Oд: '+rating.getUser().getName() + ' ' + rating.getUser().getSurname()}"> </h4>
+                </a>
                 <p th:text="${rating.getReason()}" style="text-align: justify"></p>
             </div>

src/main/resources/templates/personsList.html

@@ -1 +1 @@
 <div xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.w3.org/1999/xhtml">
 
-    <div>
-        <a sec:authorize="isAuthenticated()" th:href="@{'persons/add'}">Додади актер или режисер</a>
+    <div style="width: 70%; margin: auto;">
+        <a sec:authorize="isAuthenticated()" th:href="@{'persons/add'}" class="btn btn-secondary">Додади актер или режисер</a>
     </div>
     <div class="container mb-4">
@@ -47 +47 @@
                                 <td>
                                     <a class="btn btn-secondary button-add-grade-person" th:person-id="${person.getPersonId()}">Остави оценка</a>
-
                                 </td>
                             <td>

src/main/resources/templates/template.html

@@ -16 +16 @@
 </head>
 <body>
-<section class="jumbotron text-center" style="background: url('/img/cover.jpg') center; background-repeat: no-repeat; background-size: 100% auto; height: 280px; margin-bottom: 0px ">
-    <div class="container" >
-        <h1 class="jumbotron-heading" style="z-index: -1"></h1>
-    </div>
-</section>
+<a href="/movies">
+
+    <section class="jumbotron text-center" style="background: url('/img/cover.jpg') center; background-repeat: no-repeat; background-size: 100% auto; height: 280px; margin-bottom: 0px ">
+        <div class="container" >
+            <h1 class="jumbotron-heading" style="z-index: -1"></h1>
+        </div>
+    </section>
+</a>
 
 <header th:replace="fragments/header"></header>