Changeset 3fe36de in Git for src/main/resources


Ignore:
Timestamp:
02/09/22 03:14:08 (3 years ago)
Author:
Petar Partaloski <ppartaloski@…>
Branches:
main
Children:
967b414
Parents:
c02189f
Message:

Added User profiles, improved clarity, improved UI

Location:
src/main/resources
Files:
1 added
9 edited

Legend:

Unmodified
Added
Removed

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

    rc02189f r3fe36de  
    164164.genres-listing ul li{
    165165    background-color: rgba(192,128,128,0.7);
    166     text-decoration: none !important;
     166    text-decoration: none;
    167167}
    168168
    … …  
    214214    display: none;
    215215}
     216
     217.user-text{
     218    font-size: 95%;
     219    text-decoration: none !important;
     220    text-decoration-color: transparent;
     221    text-align: justify;
     222}
     223
     224.user-text-small{
     225    font-size: 85%;
     226    text-decoration: none !important;
     227    text-decoration-color: transparent;
     228    text-align: justify;
     229}
     230
     231
     232.user-movies-list{
     233    margin: auto;
     234    margin-top: 20px;
     235    padding: 10px;
     236    width: 80%;
     237    background-color: rgba(52, 58, 64, 0.7);
     238    border-radius: 10px;
     239    transition: 200ms;
     240    margin-right: 15px;
     241    color: white;
     242    transition: 200ms;
     243}
     244
     245.user-movies-list:hover{
     246    background-color: rgba(52, 58, 64, 1);
     247}
     248
     249.user-movies-list ul{
     250    list-style-type: none;
     251    width: 99%;
     252    margin: auto;
     253    display: none;
     254}
     255
     256.hidden-class{
     257    background-color: rgba(192,255,192,0.6);
     258    color: black;
     259}
     260
     261.hidden-class:hover{
     262    background-color: rgba(128,255,128,1) !important;
     263
     264}
     265
     266.user-movies-list ul li{
     267    color:black;
     268    background-color: rgba(255,255,255,0.7);
     269    padding: 12px;
     270    font-size: 80%;
     271    width: 90%;
     272    text-align: center;
     273    margin: auto;
     274    transition: 200ms;
     275    border-radius: 10px;
     276    margin-bottom: 5px;
     277    text-decoration: none;
     278    float: left;
     279}
     280
     281.user-movies-list hr{
     282    color: white;
     283    background-color: white;
     284    border-color: white;
     285}
     286
     287
     288.user-movies-list ul li:hover{
     289    background-color: rgba(255,255,255,1);
     290}
     291
     292.rate-title{
     293    font-size: 130%;
     294}
     295
     296#buttons-person{
     297    margin-top: 10px;
     298}
     299
     300#buttons-person li{
     301    float: left;
     302    margin-right: 10px;
     303}

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

    rc02189f r3fe36de  
    8888        else
    8989            $("#filters_div").fadeToggle();
     90    })
     91
     92    $(".user-movies-list").on("click", function (){
     93        children = $(this).children()
     94        first = true
     95        for (let item of children){
     96            if(first){
     97                first = !first
     98            }
     99            else{
     100                $(item).fadeToggle();
     101            }
     102        }
     103        $(this).toggleClass("hidden-class")
    90104    })
    91105

  • src/main/resources/templates/discussion.html

    rc02189f r3fe36de  
    1919        <br>
    2020        <h6 style="width: 60%; float:left;">
     21            <a th:href="@{'/profiles/{id}' (id=${disc.getUser().getUserId()})}" >
    2122            <span th:text="${'Поставено од: '+disc.getUser().getUsername()}"></span>
     23            </a>
    2224            <span th:text="${', на датум '+ disc.getDate()}"></span>
    2325            <br>
    … …  
    4850            <td th:text="${reply.getText()}"></td>
    4951            <td th:text="${reply.getDate()}"></td>
    50             <td th:text="${reply.getUser().getUsername()}"></td>
     52            <td >
     53                <a th:href="@{'/profiles/{id}' (id=${reply.getUser().getUserId()})}" th:text="${reply.getUser().getUsername()}"></a>
     54            </td>
    5155            <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>
    5256            <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

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

  • src/main/resources/templates/movieShow.html

    rc02189f r3fe36de  
    7878        <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;">
    7979                <div style="width: 60%; float:left;">
     80                    <a th:href="@{'/profiles/{id}' (id=${rating.getUser().getUserId()})}">
     81                        <h4 th:text="${'Oд: '+rating.getUser().getName() + ' ' + rating.getUser().getSurname()}"> </h4>
     82                    </a>
    8083                    <p th:text="${rating.getReason()}" style="text-align: justify"></p>
    8184                </div>
    … …  
    9396        <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;">
    9497            <div style="width: 100%; float:left;">
    95                 <h3  style="text-align: center">
    96                     <span th:text="${liked.getUser().getName() + ' ' + liked.getUser().getSurname()}"></span>
    97                     <span style="color: green; font-size: 100%" >✔</span>
    98                 </h3>
     98                <a th:href="@{'/profiles/{id}' (id=${liked.getUser().getUserId()})}" >
     99                    <h3  style="text-align: center">
     100                        <span th:text="${liked.getUser().getName() + ' ' + liked.getUser().getSurname()}"></span>
     101                        <span style="color: green; font-size: 100%" >✔</span>
     102                    </h3>
     103                </a>
    99104            </div>
    100105        </div>

  • src/main/resources/templates/moviesListPaged.html

    rc02189f r3fe36de  
    3030
    3131    <div class="container mb-4">
    32         <a  sec:authorize="isAuthenticated()" th:href="@{/movies/add}">Додади нов филм</a>
     32        <a  sec:authorize="isAuthenticated()" th:href="@{/movies/add}" class="btn btn-secondary">Додади нов филм</a>
    3333    </div>
    3434
    … …  
    4646                        </span>
    4747                        <th:block sec:authorize="isAuthenticated()">
    48                             <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>
    49                             <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>
     48                            <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>
     49                            <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>
    5050                        </th:block>
    5151                    </div>

  • src/main/resources/templates/personShow.html

    rc02189f r3fe36de  
    55            <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>
    66            <hr>
    7             <h3 th:text="${'Роден на: ' + person.getDateFormatted()}"></h3>
     7            <h3 th:text="${'Роден/а на: ' + person.getDateFormatted()}"></h3>
    88            <div style="background-color: rgba(200,200,200,0.5); border-radius: 10px; padding:15px; ">
    99                <h3>Краток Опис:</h3>
    … …  
    2424                    <li th:each="movie: ${person.getMovieActors()}" ><a th:text="${movie.getMovie().getTitle()}" th:href="@{'/movies/{id}' (id=${movie.getMovie().getMovieId()})}" ></a></li>
    2525                </ul>
    26             </div>
     26            </div><br>
     27            <ul style="list-style-type: none; width: 100%; margin: auto" id="buttons-person">
     28                <li><a class="btn btn-primary" th:href="@{'discussions/all/{id}?type=P' (id=${person.getPersonId()})}" >Прегледај дискусии</a></li>
     29                <th:block sec:authorize="isAuthenticated()">
     30                    <li><a class="btn btn-secondary button-add-grade-person" th:person-id="${person.getPersonId()}" th:if="${!person.hasGradeFromUser(user)}">Остави оценка</a></li>
     31                    <li><a class="btn btn-secondary button-add-grade-person" th:person-id="${person.getPersonId()}" th:if="${person.hasGradeFromUser(user)}">Промени оценка</a></li>
     32                    <li><a class="btn btn-warning" th:href="@{'persons/edit/{personId}' (personId = ${person.getPersonId()})}">Промени</a></li>
     33                    <li><a class="btn btn-danger button-delete-actor" th:person-id="${person.getPersonId()}">Избриши</a></li>
     34                </th:block>
     35            </ul>
    2736        </div>
    2837        <div style="width: 30%; margin-left: 10px; padding:20px; border-left: 3px solid black; border-radius: 10px; float:right">
    … …  
    3948        <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;">
    4049            <div style="width: 60%; float:left;">
     50                <a th:href="@{'/profiles/{id}' (id=${rating.getUser().getUserId()})}">
     51                    <h4 th:text="${'Oд: '+rating.getUser().getName() + ' ' + rating.getUser().getSurname()}"> </h4>
     52                </a>
    4153                <p th:text="${rating.getReason()}" style="text-align: justify"></p>
    4254            </div>

  • src/main/resources/templates/personsList.html

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

  • src/main/resources/templates/template.html

    rc02189f r3fe36de  
    1616</head>
    1717<body>
    18 <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 ">
    19     <div class="container" >
    20         <h1 class="jumbotron-heading" style="z-index: -1"></h1>
    21     </div>
    22 </section>
     18<a href="/movies">
     19
     20    <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 ">
     21        <div class="container" >
     22            <h1 class="jumbotron-heading" style="z-index: -1"></h1>
     23        </div>
     24    </section>
     25</a>
    2326
    2427<header th:replace="fragments/header"></header>
Note: See TracChangeset for help on using the changeset viewer.