Skip to content

S
SkuciSe
Commit 56bced2d by Milovan Samardzic
Options

mojiZahteviStyleFinished

parent d10c5251
Showing with 103 additions and 150 deletions
SkuciSe/src/main/resources/static/css/oglasiStyle.css
...@@ -336,48 +336,23 @@ h3{ ...@@ -336,48 +336,23 @@ h3{
.gradient-bg { .gradient-bg {
background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(251,251,251,1) 10%, rgba(251,251,251,1) 91%, rgba(255,255,255,1) 100%); background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(251,251,251,1) 10%, rgba(251,251,251,1) 91%, rgba(255,255,255,1) 100%);
} }
.starrating > input {display: none;} /* Remove radio buttons */
input.star { display: none; } .starrating > label:before {
content: "\f005"; /* Star */
label.star { margin: 2px;
font-size: 1em;
float: right; font-family: FontAwesome;
display: inline-block;
padding: 10px;
font-size: 36px;
color: #grey;
transition: all .2s;
}
input.star:checked ~ label.star:before {
content: '\f005';
color: #FD4;
transition: all .25s;
} }
input.star-5:checked ~ label.star:before { .starrating > label
{
color: #FE7; color: #222222; /* Start color when not clicked */
text-shadow: 0 0 20px #952;
} }
input.star-1:checked ~ label.star:before { color: #F62; } .starrating > input:checked ~ label
{ color: #ffca08 ; } /* Set yellow color when star checked */
label.star:hover { transform: rotate(-15deg) scale(1.3); }
label.star:before {
content: '\f006';
font-family: FontAwesome;
} .starrating > input:hover ~ label
\ No newline at end of file { color: #ffca08 ; } /* Set yellow color when star hover */
\ No newline at end of file
SkuciSe/src/main/resources/templates/moji-zahtevi.html
...@@ -10,18 +10,9 @@ ...@@ -10,18 +10,9 @@
<link href='https://fonts.googleapis.com/css?family=Jost' rel='stylesheet'> <link href='https://fonts.googleapis.com/css?family=Jost' rel='stylesheet'>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css"/> <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css"/>
<!-- Favicon-->
<link rel="icon" type="image/x-icon" href="assets/favicon.ico"/>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous"> integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<!-- Core theme CSS (includes Bootstrap)-->
<link href="/css/oglasiStyle.css" rel="stylesheet"/> <link href="/css/oglasiStyle.css" rel="stylesheet"/>
</head> </head>
<body th:object="${loggedUser}" class="pozadinaSVG"> <body th:object="${loggedUser}" class="pozadinaSVG">
...@@ -107,98 +98,96 @@ ...@@ -107,98 +98,96 @@
th:object="${zahtevi}" style="min-height: 600px"> th:object="${zahtevi}" style="min-height: 600px">
<h1>Spisak zahteva za obilazak</h1> <h1>Spisak zahteva za obilazak</h1>
<div class="row w-100 h-50" style="margin-top:50px;"> <div class="row w-100 h-50" style="margin-top:50px;">
<div> <div class="row">
<div class="row"> <h2 th:if="${oglasi.size() == 0}" class="text-center">Jos niste poslali nijedan zahtev!</h2>
<div class="col ps-md-4"> <div class="card mb-3" th:each="oglas: ${oglasi}" style="background: transparent">
<div class="row"> <div class="row">
<h2 th:if="${oglasi.size() == 0}" class="text-center">Jos niste poslali nijedan zahtev!</h2> <div class="col-lg-2 col-md-3 col-sm-2 col-xs-2 d-flex justify-content-center align-items-center">
<div class="card mb-3" th:each="oglas: ${oglasi}" style="background: transparent"> <img
<div class="row no-gutters"> th:if="${zahtevi[oglasStat.count - 1].status.toString() == 'POTVRDJEN'}"
<div class="col-md-2 d-flex justify-content-center align-items-center"> th:src="@{'data:image/png;charset=utf-8;base64,'+${slike[oglasStat.count - 1].slikaCode}}"
<img alt="slika korisnika"
th:if="${zahtevi[oglasStat.count - 1].status.toString() == 'POTVRDJEN'}" style="width: 150px;height: 150px;border-radius: 50%;object-fit: cover; border: green 3px solid">
th:src="@{'data:image/png;charset=utf-8;base64,'+${slike[oglasStat.count - 1].slikaCode}}" <img
alt="slika korisnika" th:if="${zahtevi[oglasStat.count - 1].status.toString() == 'CEKANJE'}"
style="width: 150px;height: 150px;border-radius: 50%;object-fit: cover; border: green 5px solid"> th:src="@{'data:image/png;charset=utf-8;base64,'+${slike[oglasStat.count - 1].slikaCode}}"
<img alt="slika korisnika"
th:if="${zahtevi[oglasStat.count - 1].status.toString() == 'CEKANJE'}" style="width: 150px;height: 150px;border-radius: 50%;object-fit: cover; border: yellow 3px solid">
th:src="@{'data:image/png;charset=utf-8;base64,'+${slike[oglasStat.count - 1].slikaCode}}" <img
alt="slika korisnika" th:if="${zahtevi[oglasStat.count - 1].status.toString() == 'ZAVRSEN'}"
style="width: 150px;height: 150px;border-radius: 50%;object-fit: cover; border: yellow 5px solid"> th:src="@{'data:image/png;charset=utf-8;base64,'+${slike[oglasStat.count - 1].slikaCode}}"
<img alt="slika korisnika"
th:if="${zahtevi[oglasStat.count - 1].status.toString() == 'ZAVRSEN'}" style="width: 150px;height: 150px;border-radius: 50%;object-fit: cover; border: blue 3px solid"
th:src="@{'data:image/png;charset=utf-8;base64,'+${slike[oglasStat.count - 1].slikaCode}}" class="w-sm-50">
alt="slika korisnika" <img
style="width: 150px;height: 150px;border-radius: 50%;object-fit: cover; border: blue 5px solid"> th:if="${zahtevi[oglasStat.count - 1].status.toString() == 'ODBIJEN'}"
<img th:src="@{'data:image/png;charset=utf-8;base64,'+${slike[oglasStat.count - 1].slikaCode}}"
th:if="${zahtevi[oglasStat.count - 1].status.toString() == 'ODBIJEN'}" alt="slika korisnika"
th:src="@{'data:image/png;charset=utf-8;base64,'+${slike[oglasStat.count - 1].slikaCode}}" style="width: 150px;height: 150px;border-radius: 50%;object-fit: cover; border: red 3px solid">
alt="slika korisnika" </div>
style="width: 150px;height: 150px;border-radius: 50%;object-fit: cover; border: red 5px solid"> <div class="col-lg-3 col-md-4 col-sm-2 col-xs-3">
</div> <div class="card-body">
<div th:class="${zahtevi[oglasStat.count - 1].status.toString() == 'ZAVRSEN'} ? 'col-md-4' : 'col-md-7'"> <h2 class="card-title"
<div class="card-body"> th:text="${oglas.naslov}">
<h2 class="card-title" </h2>
th:text="${oglas.naslov}"> <h4 class="card-title"
</h2> th:text="${oglas.lokacija}">
<h4 class="card-title" </h4>
th:text="${oglas.lokacija}"> <p th:text="'Vlasnik: ' + ${vlasnici[oglasStat.index].ime}"></p>
</h4> <button class="btn btn-dark"
</div> th:onclick="window.open('/chat?email='+[[${vlasnici[oglasStat.count - 1].email}]],'mywindow','menubar=1,width=650,height=900')">
</div> <i class="fas fa-sms"></i> Chat
<div class="col-md-2 d-flex flex-column justify-content-around align-items-center" </button>
th:if="${zahtevi[oglasStat.count - 1].status.toString() != 'ZAVRSEN'}"> </div>
<h4 th:text="${zahtevi[oglasStat.count - 1].datum + ' ' + zahtevi[oglasStat.count - 1].vreme}" </div>
th:if="${zahtevi[oglasStat.count - 1].status.toString() == 'POTVRDJEN'}"></h4> <div class="col-lg-7 col-md-7 col-sm-7 col-xs-7 d-flex flex-column justify-content-around align-items-end"
<form method="GET" th:if="${zahtevi[oglasStat.count - 1].status.toString() != 'ZAVRSEN'}">
th:if="${zahtevi[oglasStat.count - 1].status.toString() != 'POTVRDJEN'}" <h4 th:text="${zahtevi[oglasStat.count - 1].datum + ' ' + zahtevi[oglasStat.count - 1].vreme}"
th:action="@{/oglas-edit/{oglasId}/obrisi-zahtev/{zahtevId}(oglasId=${oglas.oglasId}, zahtevId=${zahtevi[oglasStat.count - 1].zahtevId})}"> th:if="${zahtevi[oglasStat.count - 1].status.toString() == 'POTVRDJEN'}"></h4>
<button type="submit" class="btn btn-danger" <form method="GET" class="w-50 h-50 d-flex justify-content-center align-items-center"
th:if="${zahtevi[oglasStat.count - 1].status.toString() == 'CEKANJE'}"> th:if="${zahtevi[oglasStat.count - 1].status.toString() != 'POTVRDJEN'}"
Otkazi zahtev th:action="@{/oglas-edit/{oglasId}/obrisi-zahtev/{zahtevId}(oglasId=${oglas.oglasId}, zahtevId=${zahtevi[oglasStat.count - 1].zahtevId})}">
</button> <button type="submit" class="btn btn-danger"
<button type="submit" class="btn btn-danger" th:if="${zahtevi[oglasStat.count - 1].status.toString() == 'CEKANJE'}">
th:if="${zahtevi[oglasStat.count - 1].status.toString() == 'ODBIJEN'}"> Otkazi zahtev
Obrisi zahtev </button>
</button> <button type="submit" class="btn btn-danger"
</form> th:if="${zahtevi[oglasStat.count - 1].status.toString() == 'ODBIJEN'}">
Obrisi zahtev
</button>
</form>
</div>
<div class="col-lg-7 col-md-5 col-sm-7 col-xs-7 d-flex align-items-center flex-row justify-content-center" th:if="${zahtevi[oglasStat.count - 1].status.toString() == 'ZAVRSEN'}">
<form method="get" class="row w-100 h-100 flex-wrap flex-row"
th:action="@{/profile/moji-zahtevi/sacuvaj-komentar}"
th:if="${zahtevi[oglasStat.index].status.toString() == 'ZAVRSEN'}">
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-9 d-flex justify-content-center align-items-center flex-column">
<div class="w-100 d-flex justify-content-center align-items-center h-100 mt-2">
<textarea class="form-control h-100" id="exampleFormControlTextarea1" rows="3"
name="komentar"></textarea>
<input th:value="${loggedUser.korisnik.korisnikId}" name="korisnikId"
style="display: none">
<input th:value="${oglas.oglasId}" name="oglasId" style="display: none">
<input th:value="${zahtevi[oglasStat.count - 1].zahtevId}"
name="zahtevId" style="display: none">
</div> </div>
<div class="col-5 d-flex align-items-center flex-row justify-content-center"> <div class="starrating risingstar d-flex justify-content-center flex-row-reverse">
<form method="get" th:action="@{/profile/moji-zahtevi/sacuvaj-komentar}" th:if="${zahtevi[oglasStat.count - 1].status.toString() == 'POTVRDJEN'}"> <input type="radio" id="star5" name="ocenaRadio" value="5"/><label
<div class="col-4 h-100"> for="star5" title="5 star"></label>
<div class="w-100 h-100 d-flex justify-content-center align-items-center"> <input type="radio" id="star4" name="ocenaRadio" value="4"/><label
<input type="text" name="komentar"/> for="star4" title="4 star"></label>
<input th:value="${loggedUser.korisnik.korisnikId}" name="korisnikId" style="display: none"> <input type="radio" id="star3" name="ocenaRadio" value="3"/><label
<input th:value="${oglas.oglasId}" name="oglasId" style="display: none"> for="star3" title="3 star"></label>
<input th:value="${zahtevi[oglasStat.count - 1].zahtevId}" name="zahtevId" style="display: none"> <input type="radio" id="star2" name="ocenaRadio" value="2"/><label
</div> for="star2" title="2 star"></label>
</div> <input type="radio" id="star1" name="ocenaRadio" value="1"/><label
<div class="col-4"> for="star1" title="1 star"></label>
<!--<input type="radio" name="ocenaRadio" value="1"/>
<input type="radio" name="ocenaRadio" value="2"/>
<input type="radio" name="ocenaRadio" value="3"/>
<input type="radio" name="ocenaRadio" value="4"/>
<input type="radio" name="ocenaRadio" value="5"/>-->
<select name="ocenaRadio">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
<div class="col-4">
<button type="submit" class="btn btn-secondary">Postavi komentar</button>
</div>
</form>
</form>
<div>
<p th:text="'Vlasnik: ' + ${vlasnici[oglasStat.count - 1].ime}"></p>
<button class="btn btn-primary" th:onclick="window.open('/chat?email='+[[${vlasnici[oglasStat.count - 1].email}]],'mywindow','menubar=1,width=650,height=900')">Posaljite poruku</button>
</div>
</div> </div>
</div> </div>
</div> <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 d-flex justify-content-center align-items-center">
<button type="submit" class="btn btn-secondary text-wrap w-100 h-md-50">Komentarisi</button>
</div>
</form>
</div> </div>
</div> </div>
</div> </div>
...@@ -258,25 +247,14 @@ ...@@ -258,25 +247,14 @@
</div> </div>
</footer> </footer>
</div> </div>
<!-- JavaScript Bundle with Popper -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script> crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/51d1fadef3.js" crossorigin="anonymous"></script>
<script src="/js/main.js"></script> <script src="/js/main.js"></script>
<script src="https://unpkg.com/aos@next/dist/aos.js"></script> <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-star-rating/4.1.2/js/star-rating.min.js"></script> <script src="https://kit.fontawesome.com/51d1fadef3.js" crossorigin="anonymous"></script>
<script> <script>
AOS.init(); AOS.init();
</script> </script>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment