From 4ff204c89b9d5c8e7c37b1c54a34cb3bc6407b5d Mon Sep 17 00:00:00 2001
From: Alexander Roidl <34438048+alexanderroidl@users.noreply.github.com>
Date: Tue, 18 Jun 2024 16:01:07 +0200
Subject: [PATCH] feat: Beautified Frontend exposes section

---
 flathunter/web/static/style.css       | 79 +++++++++++++++++----------
 flathunter/web/templates/exposes.html | 22 +++-----
 2 files changed, 59 insertions(+), 42 deletions(-)

diff --git a/flathunter/web/static/style.css b/flathunter/web/static/style.css
index 1de9eb1d..c5e3ef5c 100644
--- a/flathunter/web/static/style.css
+++ b/flathunter/web/static/style.css
@@ -1,6 +1,3 @@
-* {
-}
-
 body {
   background-image: linear-gradient(-90deg,#1251AE 0,#0074FF 50%,#1251AE 100%);
   font-family: 'Roboto';
@@ -13,14 +10,8 @@ h1 {
   font-weight: 500;
 }
 
-a {
-  color: white;
-}
-
-a:visited {
-  color: white;
-}
-
+a,
+a:visited,
 a:hover {
   color: white;
 }
@@ -78,37 +69,72 @@ form label {
   cursor: not-allowed;
 }
 
+.exposes {
+  display: grid;
+  gap: 1.5rem;
+}
+
 .expose {
-  background-color: #bdbdf847;
-  display: flex;
-  align-items: center;
-  flex-direction: column;
+  border-radius: 5px;
+  background: rgba(48, 130, 244, 0.6);
+
   text-align: center;
+  text-decoration: none;
+
+  display: grid;
+  gap: inherit;
+  padding: 1rem;
+}
+.expose:hover {
+  text-decoration: none;
+}
+
+.expose h3,
+.expose p,
+.expose img {
+  margin: 0;
 }
 
 .expose img {
   width: 150px;
   height: 150px;
   object-fit: cover;
-  padding: 0 16px 0 16px;
+  margin-left: auto;
+  margin-right: auto;
 }
 
 .expose h3 {
   font-size: 1rem;
   font-weight: 300;
-  margin: 10px;
-  color: white;
-}
-
-.expose h3 a {
-  text-decoration: none;
 }
 
 .expose p {
   font-size: 0.8rem;
-  color: white;
-  margin: 10px;
-  text-align: center;
+}
+
+@media (min-width: 576px) {
+  .exposes {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .expose {
+    grid-template-rows: subgrid;
+    grid-row: span 3;
+  }
+}
+
+@media (min-width: 992px) {
+  .exposes {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  .expose {
+    transition: all 0.25s ease;
+  }
+  .expose:hover {
+    background: rgba(48, 130, 244, 1);
+    transform: scale(1.05);
+  }
 }
 
 div.center_button {
@@ -129,9 +155,6 @@ button {
   vertical-align: top;
 }
 
-button.login_telegram {
-}
-
 button.set_search_criteria {
   margin-top: 20px;
 }
diff --git a/flathunter/web/templates/exposes.html b/flathunter/web/templates/exposes.html
index 2fad35ff..3576307e 100644
--- a/flathunter/web/templates/exposes.html
+++ b/flathunter/web/templates/exposes.html
@@ -1,17 +1,11 @@
-<div class="exposes row">
+<div class="exposes">
   {% for expose in exposes %}
-    <div class="col-md-4">
-      <div class="expose mx-1 my-3">
-        <p>{{ expose['price'] }}, {{expose['rooms']}} rooms, {{expose['size']}} from {{expose['from']}}</p>
-        <a href="{{ expose['url'] }}" target="_blank">
-          {% if expose['image'] %}
-            <img src="{{ expose['image'] }}">
-          {% else %}
-            <img src="/static/placeholder.png">
-          {% endif %}
-        </a>
-        <h3><a href="{{ expose['url'] }}" rel="noreferrer" target="_blank">{{ expose['title'] }}</a></h3>
-      </div>
-    </div>
+    <a class="expose" href="{{ expose['url'] }}" rel="noreferrer" target="_blank">
+      <p>{{ expose['price'] }}, {{expose['rooms']}} rooms, {{expose['size']}} from {{expose['from']}}</p>
+
+      <img src="{{ expose['image'] if expose['image'] else url_for('static', filename='placeholder.png') }}">
+
+      <h3>{{ expose['title'] }}</h3>
+    </a>
   {% endfor %}
 </div>