Skip to content

S
SkuciSe
Commit 07e68ab1 by Milovan Samardzic
Options

listaOglasaStyleResponsive

parent ec6abfdd
Showing with 19 additions and 11 deletions
SkuciSe/src/main/resources/static/css/oglasiStyle.css
...@@ -240,4 +240,11 @@ h3{ ...@@ -240,4 +240,11 @@ h3{
hsl(0, 0%, 68.5%) 91.9%, hsl(0, 0%, 68.5%) 91.9%,
hsl(0, 0%, 68%) 100% hsl(0, 0%, 68%) 100%
); );
}
.img-responsive{
width: 100%;
height: 350px;
max-height: 300px;
border-radius: 10px;
text-align: center;
} }
\ No newline at end of file
SkuciSe/src/main/resources/templates/lista-oglasa.html
...@@ -201,20 +201,20 @@ ...@@ -201,20 +201,20 @@
</article> <!-- card-group-item.// --> </article> <!-- card-group-item.// -->
<article class="card-group-item"> <article class="card-group-item">
<div class="card-header d-flex justify-content-between"> <div class="card-header d-flex justify-content-between">
<button type="submit" class="btn btn-primary">Primeni filtere</button>
<a th:href="@{/lista-oglasa}"><button type="button" class="btn btn-primary">Resetuj filtere</button></a> <a th:href="@{/lista-oglasa}"><button type="button" class="btn btn-primary">Resetuj filtere</button></a>
<button type="submit" class="btn btn-primary">Primeni filtere</button>
</div> </div>
</article> </article>
</div> <!-- card.// --> </div>
</div> </div>
<div class="col-8" th:object="${slikeOglasa}"> <div class="col-9" th:object="${slikeOglasa}">
<h1 th:if="${oglasi.size() == 0}" class="text-center">Nema oglasa!</h1> <h1 th:if="${oglasi.size() == 0}" class="text-center">Nema oglasa!</h1>
<div class="row w-100 box " th:each="i : ${#numbers.sequence(0, oglasi.size()-1,3)}"> <div class="row w-100 box " th:each="i : ${#numbers.sequence(0, oglasi.size()-1,3)}">
<div class="col-lg-4 p-2" data-aos="zoom-in" th:if="${oglasi[i].naslov != null}"> <div class="col-lg-4 p-2" data-aos="zoom-in" th:if="${oglasi[i].naslov != null}">
<div class="section border bg-white rounded p-2"> <div class="section border bg-white rounded p-2">
<div class="row"> <div class="row">
<div class="col-lg-12 img-section"> <div class="col-lg-12 img-section">
<img th:src="@{'data:image/png;charset=utf-8;base64,'+${slikeOglasa[i].slikaCode}}" class="p-0 m-0 res-ponsive"> <img th:src="@{'data:image/png;charset=utf-8;base64,'+${slikeOglasa[i].slikaCode}}" class="p-0 m-0 img-responsive">
<span class="badge badge-danger add-sens p-2 rounded-0" <span class="badge badge-danger add-sens p-2 rounded-0"
th:text="${oglasi[i].kvadratura + 'm2'}"></span> th:text="${oglasi[i].kvadratura + 'm2'}"></span>
</div> </div>
...@@ -237,7 +237,7 @@ ...@@ -237,7 +237,7 @@
</div> </div>
<div class="col-lg-6 pb-2 d-flex justify-content-end"> <div class="col-lg-6 pb-2 d-flex justify-content-end">
<a th:href="@{/lista-oglasa/{oglasid}(oglasid=${oglasi[i].getOglasId()})}" <a th:href="@{/lista-oglasa/{oglasid}(oglasid=${oglasi[i].getOglasId()})}"
class="btn btn-danger">Pogledajte oglas</a> class="link-secondary" style="text-decoration: none">Pogledajte oglas</a>
</div> </div>
</div> </div>
</div> </div>
...@@ -248,7 +248,7 @@ ...@@ -248,7 +248,7 @@
<div class="section border bg-white rounded p-2"> <div class="section border bg-white rounded p-2">
<div class="row"> <div class="row">
<div class="col-lg-12 img-section"> <div class="col-lg-12 img-section">
<img th:src="@{'data:image/png;charset=utf-8;base64,'+${slikeOglasa[i+1].slikaCode}}" class="p-0 m-0 res-ponsive"> <img th:src="@{'data:image/png;charset=utf-8;base64,'+${slikeOglasa[i+1].slikaCode}}" class="p-0 m-0 img-responsive">
<span class="badge badge-danger add-sens p-2 rounded-0" <span class="badge badge-danger add-sens p-2 rounded-0"
th:text="${oglasi[i+1].kvadratura + 'm2'}"></span> th:text="${oglasi[i+1].kvadratura + 'm2'}"></span>
</div> </div>
...@@ -271,7 +271,7 @@ ...@@ -271,7 +271,7 @@
</div> </div>
<div class="col-lg-6 pb-2 d-flex justify-content-end"> <div class="col-lg-6 pb-2 d-flex justify-content-end">
<a th:href="@{/lista-oglasa/{oglasid}(oglasid=${oglasi[i+1].getOglasId()})}" <a th:href="@{/lista-oglasa/{oglasid}(oglasid=${oglasi[i+1].getOglasId()})}"
class="btn btn-danger">Pogledajte oglas</a> class="link-secondary" style="text-decoration: none">Pogledajte oglas</a>
</div> </div>
</div> </div>
</div> </div>
...@@ -282,7 +282,7 @@ ...@@ -282,7 +282,7 @@
<div class="section border bg-white rounded p-2"> <div class="section border bg-white rounded p-2">
<div class="row"> <div class="row">
<div class="col-lg-12 img-section"> <div class="col-lg-12 img-section">
<img th:src="@{'data:image/png;charset=utf-8;base64,'+${slikeOglasa[i+2].slikaCode}}" class="p-0 m-0 res-ponsive"> <img th:src="@{'data:image/png;charset=utf-8;base64,'+${slikeOglasa[i+2].slikaCode}}" class="p-0 m-0 img-responsive">
<span class="badge badge-danger add-sens p-2 rounded-0" <span class="badge badge-danger add-sens p-2 rounded-0"
th:text="${oglasi[i+2].kvadratura + 'm2'}"></span> th:text="${oglasi[i+2].kvadratura + 'm2'}"></span>
</div> </div>
...@@ -290,12 +290,12 @@ ...@@ -290,12 +290,12 @@
<div class="col-lg-5 d-flex justify-content-start align-items-center"> <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> <h1 class="pt-2 pb-2 text-nowrap" th:text="${oglasi[i+2].naslov}"></h1>
</div> </div>
<div class="col-lg-7 d-flex justify-content-end align-items-center p-1"> <div class="col-lg-7 col-md-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"></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> <span><i class="fas fa-star-half-alt"></i></span>
</div> </div>
</div> </div>
<div class="col-lg-12"> <div class="col-lg-12">
...@@ -305,7 +305,7 @@ ...@@ -305,7 +305,7 @@
</div> </div>
<div class="col-lg-6 pb-2 d-flex justify-content-end"> <div class="col-lg-6 pb-2 d-flex justify-content-end">
<a th:href="@{/lista-oglasa/{oglasid}(oglasid=${oglasi[i+2].getOglasId()})}" <a th:href="@{/lista-oglasa/{oglasid}(oglasid=${oglasi[i+2].getOglasId()})}"
class="btn btn-danger">Pogledajte oglas</a> class="link-secondary" style="text-decoration: none">Pogledajte oglas</a>
</div> </div>
</div> </div>
</div> </div>
......
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