Skip to content

S
SkuciSe
Commit 56bced2d by Milovan Samardzic
Options

mojiZahteviStyleFinished

parent d10c5251
Showing with 56 additions and 103 deletions
SkuciSe/src/main/resources/static/css/oglasiStyle.css
......@@ -336,48 +336,23 @@ h3{
.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%);
}
.starrating > input {display: none;} /* Remove radio buttons */
input.star { display: none; }
label.star {
float: right;
padding: 10px;
font-size: 36px;
color: #grey;
transition: all .2s;
}
input.star:checked ~ label.star:before {
content: '\f005';
color: #FD4;
transition: all .25s;
.starrating > label:before {
content: "\f005"; /* Star */
margin: 2px;
font-size: 1em;
font-family: FontAwesome;
display: inline-block;
}
input.star-5:checked ~ label.star:before {
color: #FE7;
text-shadow: 0 0 20px #952;
.starrating > label
{
color: #222222; /* Start color when not clicked */
}
input.star-1:checked ~ label.star:before { color: #F62; }
label.star:hover { transform: rotate(-15deg) scale(1.3); }
.starrating > input:checked ~ label
{ color: #ffca08 ; } /* Set yellow color when star checked */
label.star:before {
content: '\f006';
font-family: FontAwesome;
}
\ No newline at end of file
.starrating > input:hover ~ label
{ 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 @@
<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 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"
integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<!-- Core theme CSS (includes Bootstrap)-->
<link href="/css/oglasiStyle.css" rel="stylesheet"/>
</head>
<body th:object="${loggedUser}" class="pozadinaSVG">
......@@ -107,36 +98,34 @@
th:object="${zahtevi}" style="min-height: 600px">
<h1>Spisak zahteva za obilazak</h1>
<div class="row w-100 h-50" style="margin-top:50px;">
<div>
<div class="row">
<div class="col ps-md-4">
<div class="row">
<h2 th:if="${oglasi.size() == 0}" class="text-center">Jos niste poslali nijedan zahtev!</h2>
<div class="card mb-3" th:each="oglas: ${oglasi}" style="background: transparent">
<div class="row no-gutters">
<div class="col-md-2 d-flex justify-content-center align-items-center">
<div class="row">
<div class="col-lg-2 col-md-3 col-sm-2 col-xs-2 d-flex justify-content-center align-items-center">
<img
th:if="${zahtevi[oglasStat.count - 1].status.toString() == 'POTVRDJEN'}"
th:src="@{'data:image/png;charset=utf-8;base64,'+${slike[oglasStat.count - 1].slikaCode}}"
alt="slika korisnika"
style="width: 150px;height: 150px;border-radius: 50%;object-fit: cover; border: green 5px solid">
style="width: 150px;height: 150px;border-radius: 50%;object-fit: cover; border: green 3px solid">
<img
th:if="${zahtevi[oglasStat.count - 1].status.toString() == 'CEKANJE'}"
th:src="@{'data:image/png;charset=utf-8;base64,'+${slike[oglasStat.count - 1].slikaCode}}"
alt="slika korisnika"
style="width: 150px;height: 150px;border-radius: 50%;object-fit: cover; border: yellow 5px solid">
style="width: 150px;height: 150px;border-radius: 50%;object-fit: cover; border: yellow 3px solid">
<img
th:if="${zahtevi[oglasStat.count - 1].status.toString() == 'ZAVRSEN'}"
th:src="@{'data:image/png;charset=utf-8;base64,'+${slike[oglasStat.count - 1].slikaCode}}"
alt="slika korisnika"
style="width: 150px;height: 150px;border-radius: 50%;object-fit: cover; border: blue 5px solid">
style="width: 150px;height: 150px;border-radius: 50%;object-fit: cover; border: blue 3px solid"
class="w-sm-50">
<img
th:if="${zahtevi[oglasStat.count - 1].status.toString() == 'ODBIJEN'}"
th:src="@{'data:image/png;charset=utf-8;base64,'+${slike[oglasStat.count - 1].slikaCode}}"
alt="slika korisnika"
style="width: 150px;height: 150px;border-radius: 50%;object-fit: cover; border: red 5px solid">
style="width: 150px;height: 150px;border-radius: 50%;object-fit: cover; border: red 3px solid">
</div>
<div th:class="${zahtevi[oglasStat.count - 1].status.toString() == 'ZAVRSEN'} ? 'col-md-4' : 'col-md-7'">
<div class="col-lg-3 col-md-4 col-sm-2 col-xs-3">
<div class="card-body">
<h2 class="card-title"
th:text="${oglas.naslov}">
......@@ -144,13 +133,18 @@
<h4 class="card-title"
th:text="${oglas.lokacija}">
</h4>
<p th:text="'Vlasnik: ' + ${vlasnici[oglasStat.index].ime}"></p>
<button class="btn btn-dark"
th:onclick="window.open('/chat?email='+[[${vlasnici[oglasStat.count - 1].email}]],'mywindow','menubar=1,width=650,height=900')">
<i class="fas fa-sms"></i> Chat
</button>
</div>
</div>
<div class="col-md-2 d-flex flex-column justify-content-around align-items-center"
<div class="col-lg-7 col-md-7 col-sm-7 col-xs-7 d-flex flex-column justify-content-around align-items-end"
th:if="${zahtevi[oglasStat.count - 1].status.toString() != 'ZAVRSEN'}">
<h4 th:text="${zahtevi[oglasStat.count - 1].datum + ' ' + zahtevi[oglasStat.count - 1].vreme}"
th:if="${zahtevi[oglasStat.count - 1].status.toString() == 'POTVRDJEN'}"></h4>
<form method="GET"
<form method="GET" class="w-50 h-50 d-flex justify-content-center align-items-center"
th:if="${zahtevi[oglasStat.count - 1].status.toString() != 'POTVRDJEN'}"
th:action="@{/oglas-edit/{oglasId}/obrisi-zahtev/{zahtevId}(oglasId=${oglas.oglasId}, zahtevId=${zahtevi[oglasStat.count - 1].zahtevId})}">
<button type="submit" class="btn btn-danger"
......@@ -163,42 +157,37 @@
</button>
</form>
</div>
<div class="col-5 d-flex align-items-center flex-row justify-content-center">
<form method="get" th:action="@{/profile/moji-zahtevi/sacuvaj-komentar}" th:if="${zahtevi[oglasStat.count - 1].status.toString() == 'POTVRDJEN'}">
<div class="col-4 h-100">
<div class="w-100 h-100 d-flex justify-content-center align-items-center">
<input type="text" name="komentar"/>
<input th:value="${loggedUser.korisnik.korisnikId}" name="korisnikId" style="display: none">
<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">
<input th:value="${zahtevi[oglasStat.count - 1].zahtevId}"
name="zahtevId" style="display: none">
</div>
<div class="starrating risingstar d-flex justify-content-center flex-row-reverse">
<input type="radio" id="star5" name="ocenaRadio" value="5"/><label
for="star5" title="5 star"></label>
<input type="radio" id="star4" name="ocenaRadio" value="4"/><label
for="star4" title="4 star"></label>
<input type="radio" id="star3" name="ocenaRadio" value="3"/><label
for="star3" title="3 star"></label>
<input type="radio" id="star2" name="ocenaRadio" value="2"/><label
for="star2" title="2 star"></label>
<input type="radio" id="star1" name="ocenaRadio" value="1"/><label
for="star1" title="1 star"></label>
</div>
<div class="col-4">
<!--<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 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>
</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>
......@@ -258,25 +247,14 @@
</div>
</footer>
</div>
<!-- JavaScript Bundle with Popper -->
<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="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"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/51d1fadef3.js" crossorigin="anonymous"></script>
<script src="/js/main.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>
AOS.init();
</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