Skip to content

S
SkuciSe
Commit 74d0f37b by Milovan Samardzic
Options

filterListaOglasa

parent 9acc86f5
Showing with 124 additions and 91 deletions
SkuciSe/src/main/resources/static/css/oglasiStyle.css
......@@ -159,7 +159,6 @@ h3{
font-size: calc(10px + (12 - 10) * ((100vw - 360px) / (1600 - 360))) !important;
}
.main-section {
margin-top: 20px;
width: 100%;
height: 100%;
}
......@@ -216,4 +215,7 @@ h3{
outline: none !important;
border: none !important;
box-shadow: none;
}
.filterbar{
height: 600px;
}
\ No newline at end of file
SkuciSe/src/main/resources/templates/lista-oglasa.html
......@@ -87,130 +87,160 @@
</ul>
</div>
</nav>
<div class="container main-section mt-5 mb-5 d-flex flew-row ml-0">
<div class="col-4">
<div class="card mt-2" style="min-width: 130px">
<article class="card-group-item">
<header class="card-header">
<h6 class="title">Cena </h6>
</header>
<div class="filter-content">
<div class="card-body">
<div class="form-row">
<div class="form-group col-md-6">
<label>Min</label>
<input type="number" class="form-control" id="inputEmail4" placeholder="$0">
</div>
<div class="form-group col-md-6 text-right">
<label>Max</label>
<input type="number" class="form-control" placeholder="$1,0000">
</div>
</div>
</div> <!-- card-body.// -->
</div>
</article> <!-- card-group-item.// -->
<article class="card-group-item">
<header class="card-header">
<h6 class="title">Selection </h6>
</header>
<div class="filter-content">
<div class="card-body">
<div class="custom-control custom-checkbox">
<span class="float-right badge badge-light round">52</span>
<input type="checkbox" class="custom-control-input" id="Check1">
<label class="custom-control-label" for="Check1">Samsung</label>
</div> <!-- form-check.// -->
<div class="custom-control custom-checkbox">
<span class="float-right badge badge-light round">132</span>
<input type="checkbox" class="custom-control-input" id="Check2">
<label class="custom-control-label" for="Check2">Black berry</label>
</div> <!-- form-check.// -->
<div class="container main-section mt-5 mb-5">
<div class="row" th:each="i : ${#numbers.sequence(0, oglasi.size()-1,3)}">
<div class="row">
<div class="col-lg-4" th:if="${oglasi[i].naslov != null}">
<div class="custom-control custom-checkbox">
<span class="float-right badge badge-light round">17</span>
<input type="checkbox" class="custom-control-input" id="Check3">
<label class="custom-control-label" for="Check3">Samsung</label>
</div> <!-- form-check.// -->
<div class="custom-control custom-checkbox">
<span class="float-right badge badge-light round">7</span>
<input type="checkbox" class="custom-control-input" id="Check4">
<label class="custom-control-label" for="Check4">Other Brand</label>
</div> <!-- form-check.// -->
</div> <!-- card-body.// -->
</div>
</article> <!-- card-group-item.// -->
</div> <!-- card.// -->
</div>
<div class="col-12">
<div class="row w-100" th:each="i : ${#numbers.sequence(0, oglasi.size()-1,3)}">
<div class="col-lg-4 p-2" th:if="${oglasi[i].naslov != null}">
<div class="section border bg-white rounded p-2">
<div class="row">
<div class="col-lg-12 img-section">
<img src="http://nicesnippets.com/demo/re-image6.jpg" class="p-0 m-0 res-ponsive">
<span class="badge badge-danger add-sens p-2 rounded-0" th:text="${oglasi[i].kvadratura + 'm2'}"></span>
</div>
<div class="col-lg-12 sectin-title">
<h1 class="pt-2 pb-2" th:text="${oglasi[i].naslov}"></h1>
<span class="badge badge-danger add-sens p-2 rounded-0"
th:text="${oglasi[i].kvadratura + 'm2'}"></span>
</div>
<div class="col-lg-12">
<div class="row">
<div class="col-lg-2">
<span class="badge badge-success p-2" th:text="${oglasi[i].cena + '$'}"></span>
</div>
<div class="col-lg-10 text-right">
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star-half-alt"></i></span><br>
</div>
<div class="col-lg-12 sectin-title d-flex alignt-items-center p-0">
<div class="col-lg-5 d-flex justify-content-start align-items-center">
<h1 class="pt-2 pb-2 text-nowrap" th:text="${oglasi[i].naslov}"></h1>
</div>
<div class="col-lg-7 d-flex justify-content-end align-items-center p-1">
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star-half-alt"></i></span><br>
</div>
<hr>
</div>
<div class="col-lg-12 section-detail">
<p class="ml-2" th:text="${oglasi[i].opis}"></p>
<hr>
</div>
<div class="col-lg-12 pb-2">
<div class="row">
<div class="col-lg-6">
<a th:href="@{/lista-oglasa/{oglasid}(oglasid=${oglasi[i].getOglasId()})}" class="btn btn-danger btn-block btn-sm">Book Now</a>
<div class="col-lg-12">
<div class="row d-flex justify-content-between">
<div class="col-lg-6 pb-2">
<span class="badge badge-info p-2" th:text="${oglasi[i].cena + '$'}"></span>
</div>
<div class="col-lg-6">
<a href="#" class="btn btn-info btn-block btn-sm">Apply For Rent</a>
<div class="col-lg-6 pb-2 d-flex justify-content-end">
<a th:href="@{/lista-oglasa/{oglasid}(oglasid=${oglasi[i+2].getOglasId()})}"
class="btn btn-danger">Pogledajte oglas</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4" th:if="${oglasi[i+1].naslov != null}">
<div class="col-lg-4 p-2" th:if="${oglasi[i+1].naslov != null}">
<div class="section border bg-white rounded p-2">
<div class="row">
<div class="col-lg-12 img-section">
<img src="http://nicesnippets.com/demo/re-image4.jpg">
<span class="badge badge-danger add-sens p-2 rounded-0" th:text="${oglasi[i+1].kvadratura + 'm2'}"></span>
</div>
<div class="col-lg-12 sectin-title">
<h1 class="pt-2 pb-2" th:text="${oglasi[i + 1].naslov}"></h1>
<img src="http://nicesnippets.com/demo/re-image6.jpg" class="p-0 m-0 res-ponsive">
<span class="badge badge-danger add-sens p-2 rounded-0"
th:text="${oglasi[i+1].kvadratura + 'm2'}"></span>
</div>
<div class="col-lg-12">
<div class="row">
<div class="col-lg-2">
<span class="badge badge-success p-2" th:text="${oglasi[i + 1].cena + '$'}"></span>
</div>
<div class="col-lg-10 text-right">
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star-half-alt"></i></span><br>
</div>
<div class="col-lg-12 sectin-title d-flex alignt-items-center p-0">
<div class="col-lg-5 d-flex justify-content-start align-items-center">
<h1 class="pt-2 pb-2 text-nowrap" th:text="${oglasi[i+1].naslov}"></h1>
</div>
<div class="col-lg-7 d-flex justify-content-end align-items-center p-1">
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star-half-alt"></i></span><br>
</div>
<hr>
</div>
<div class="col-lg-12 section-detail">
<p class="ml-2" th:text="${oglasi[i + 1].opis}"></p>
<hr>
</div>
<div class="col-lg-12 pb-2">
<div class="row">
<div class="col-lg-6">
<a th:href="@{/lista-oglasa/{oglasid}(oglasid=${oglasi[i+1].getOglasId()})}" class="btn btn-danger btn-block btn-sm">Book Now</a>
<div class="col-lg-12">
<div class="row d-flex justify-content-between">
<div class="col-lg-6 pb-2">
<span class="badge badge-info p-2" th:text="${oglasi[i+1].cena + '$'}"></span>
</div>
<div class="col-lg-6">
<a href="#" class="btn btn-info btn-block btn-sm">Apply For Rent</a>
<div class="col-lg-6 pb-2 d-flex justify-content-end">
<a th:href="@{/lista-oglasa/{oglasid}(oglasid=${oglasi[i+1].getOglasId()})}"
class="btn btn-danger">Pogledajte oglas</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4" th:if="${oglasi[i+2].naslov != null}">
<div class="col-lg-4 p-2" th:if="${oglasi[i+2].naslov != null}">
<div class="section border bg-white rounded p-2">
<div class="row">
<div class="col-lg-12 img-section">
<img src="http://nicesnippets.com/demo/re-image5.jpeg">
<span class="badge badge-danger add-sens p-2 rounded-0" th:text="${oglasi[i+2].kvadratura + 'm2'}"></span>
</div>
<div class="col-lg-12 sectin-title">
<h1 class="pt-2 pb-2" th:text="${oglasi[i + 2].naslov}"></h1>
<img src="http://nicesnippets.com/demo/re-image6.jpg" class="p-0 m-0 res-ponsive">
<span class="badge badge-danger add-sens p-2 rounded-0"
th:text="${oglasi[i+2].kvadratura + 'm2'}"></span>
</div>
<div class="col-lg-12">
<div class="row">
<div class="col-lg-2">
<span class="badge badge-success p-2" th:text="${oglasi[i+2].cena + '$'}"></span>
</div>
<div class="col-lg-10 text-right">
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star-half-alt"></i></span><br>
</div>
<div class="col-lg-12 sectin-title d-flex alignt-items-center p-0">
<div class="col-lg-5 d-flex justify-content-start align-items-center">
<h1 class="pt-2 pb-2 text-nowrap" th:text="${oglasi[i+2].naslov}"></h1>
</div>
<div class="col-lg-7 d-flex justify-content-end align-items-center p-1">
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star-half-alt"></i></span><br>
</div>
<hr>
</div>
<div class="col-lg-12 section-detail">
<p class="ml-2" th:text="${oglasi[i + 2].opis}"></p>
<hr>
</div>
<div class="col-lg-12 pb-2">
<div class="row">
<div class="col-lg-6">
<a th:href="@{/lista-oglasa/{oglasid}(oglasid=${oglasi[i+2].getOglasId()})}" class="btn btn-danger btn-block btn-sm">Book Now</a>
<div class="col-lg-12">
<div class="row d-flex justify-content-between">
<div class="col-lg-6 pb-2">
<span class="badge badge-info p-2" th:text="${oglasi[i+2].cena + '$'}"></span>
</div>
<div class="col-lg-6">
<a href="#" class="btn btn-info btn-block btn-sm">Apply For Rent</a>
<div class="col-lg-6 pb-2 d-flex justify-content-end">
<a th:href="@{/lista-oglasa/{oglasid}(oglasid=${oglasi[i+2].getOglasId()})}"
class="btn btn-danger">Pogledajte oglas</a>
</div>
</div>
</div>
......@@ -218,7 +248,7 @@
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid pb-0 mb-0 justify-content-center text-light ">
......
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