From 350e0d817a831169e32d28f22376d191432d5213 Mon Sep 17 00:00:00 2001 From: filoor Date: Wed, 28 May 2025 08:03:34 +0200 Subject: [PATCH] refactor(ui): vervang `huidig-gebed` met `huidig-gebed-bottom` en verbeter layout MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit De huidige gebedssectie is verplaatst naar de onderkant van het scherm met absolute positionering. De oude `huidig-gebed` CSS is verwijderd en vervangen door de nieuwe `huidig-gebed-bottom` klasse. Dit zorgt voor een consistentere en responsieve gebruikersinterface. Daarnaast zijn flexbox layouts geïntroduceerd om de tijds- en weersinformatie naast elkaar weer te geven, waardoor de interface op verschillende schermformaten beter functioneert. JavaScript is bijgewerkt om de juiste klasse te selecteren voor de naamweergave in de countdown. --- adhan-webapp/static/countdown.js | 2 +- adhan-webapp/static/style.css | 196 +++++++++++++++++++++++++----- adhan-webapp/templates/index.html | 48 ++++---- done | 4 + 4 files changed, 195 insertions(+), 55 deletions(-) diff --git a/adhan-webapp/static/countdown.js b/adhan-webapp/static/countdown.js index e36005d..919efdc 100644 --- a/adhan-webapp/static/countdown.js +++ b/adhan-webapp/static/countdown.js @@ -71,7 +71,7 @@ function startCountdown(targetTimeStr, prayerName, isNextDay = false) { // Update de naam met "morgen" indicator als nodig const displayName = isNextDay ? `${prayerName} (morgen)` : prayerName; - document.querySelector('.huidig-gebed .naam').textContent = displayName; + document.querySelector('.huidig-gebed-bottom .naam').textContent = displayName; function update() { const now = new Date(); diff --git a/adhan-webapp/static/style.css b/adhan-webapp/static/style.css index 7c14af0..a2c125f 100644 --- a/adhan-webapp/static/style.css +++ b/adhan-webapp/static/style.css @@ -81,12 +81,14 @@ body.settings-page { flex: 1; background: url('/static/moskee.png') center/cover no-repeat; position: relative; + display: flex; + flex-direction: column; } .overlay { background: rgba(0, 0, 0, 0.3); color: #fff; - height: 100%; + flex: 1; padding: 2rem; display: flex; flex-direction: column; @@ -97,6 +99,7 @@ body.settings-page { .tijdstip { margin-bottom: 2rem; + flex: 0 0 auto; } .tijdstip #current-time { @@ -180,34 +183,7 @@ body.settings-page { text-shadow: 1px 1px 4px rgba(0,0,0,0.5); } -.huidig-gebed { - margin-top: auto; - width: 100%; - max-width: 100%; - box-sizing: border-box; - display: flex; - flex-direction: column; - align-items: flex-start; - z-index: 2; - padding-bottom: 2rem; -} - -.huidig-gebed .naam { - font-family: 'Cairo', Arial, sans-serif; - font-size: 4rem; - font-weight: 700; - margin-bottom: 0.5rem; - color: #fff; - text-shadow: 2px 2px 8px #000; -} - -#countdown { - font-size: 6rem; - font-weight: bold; - margin-top: 0.5rem; - color: #fff; - text-shadow: 2px 2px 8px #000; -} +/* Oude huidig-gebed CSS verwijderd - nu huidig-gebed-bottom gebruikt */ .right { flex: 1; @@ -389,16 +365,93 @@ blockquote footer { flex-wrap: wrap; justify-content: center; } + + /* Tijd-weer layout voor tablets */ + .tijd-weer-row { + gap: 2rem; + } + + .weather-section-left { + max-width: 250px; + } + .left { min-height: 40vh; } + + .overlay { + min-height: 40vh; + } + + /* Tijd-weer layout responsive */ + .tijd-weer-row { + flex-direction: column; + gap: 1rem; + align-items: flex-start; + } + + .weer-column { + margin-top: 0; + width: 100%; + } + + /* Weer sectie links responsive */ + .weather-section-left { + padding: 1rem; + max-width: none; + } + + .weather-section-left .weather-temp { + font-size: 1.5rem; + } + + .weather-section-left .weather-desc { + font-size: 0.9rem; + } + + .weather-section-left .weather-details { + flex-direction: column; + gap: 0.5rem; + } + + .weather-section-left .weather-detail { + font-size: 0.8rem; + text-align: left; + } + + /* Huidig gebed bottom responsive */ + .huidig-gebed-bottom { + padding: 1.5rem; + } + + .huidig-gebed-bottom .naam { + font-size: 2rem; + } + + .huidig-gebed-bottom #countdown { + font-size: 3rem; + } +} + +@media (max-width: 768px) { + .tijd-weer-row { + gap: 1.5rem; + } + + .weather-section-left { + max-width: 220px; + } + + .weather-section-left .weather-temp { + font-size: 1.8rem; + } } @media (max-width: 600px) { .tijdstip #current-time, #countdown { font-size: 2.2rem; } - .huidig-gebed .naam { + .huidig-gebed-bottom .naam { font-size: 1.2rem; } .right { @@ -423,10 +476,22 @@ blockquote footer { font-size: 0.9rem; } + /* Tijd-weer layout responsive */ + .tijd-weer-row { + flex-direction: column; + gap: 1rem; + align-items: flex-start; + } + + .weer-column { + margin-top: 0; + width: 100%; + } + /* Weer sectie links responsive */ .weather-section-left { - margin-top: 1.5rem; padding: 1rem; + max-width: none; } .weather-section-left .weather-temp { @@ -446,6 +511,19 @@ blockquote footer { font-size: 0.8rem; text-align: left; } + + /* Huidig gebed bottom responsive */ + .huidig-gebed-bottom { + padding: 1.5rem; + } + + .huidig-gebed-bottom .naam { + font-size: 2rem; + } + + .huidig-gebed-bottom #countdown { + font-size: 3rem; + } } .right.new-layout { @@ -1105,13 +1183,15 @@ html.dark .hadith-center { /* Weer sectie in linker overlay */ .weather-section-left { - margin-top: 2rem; - padding: 1.5rem; + margin-top: 0; + padding: 1.2rem; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 8px; font-family: 'Cairo', Arial, sans-serif; backdrop-filter: blur(10px); + width: 100%; + max-width: 300px; } .weather-section-left .weather-info { @@ -1162,3 +1242,53 @@ html.dark .hadith-center { font-family: 'Lato', sans-serif; text-shadow: 1px 1px 3px rgba(0,0,0,0.5); } + +.tijd-weer-row { + display: flex; + align-items: flex-start; + gap: 3rem; + margin-bottom: 1rem; +} + +.tijd-column { + flex: 0 0 auto; +} + +.weer-column { + flex: 1; + display: flex; + align-items: flex-start; + margin-top: 1rem; +} + +/* Huidig gebed sectie onderaan het scherm */ +.huidig-gebed-bottom { + position: absolute; + bottom: 0; + left: 0; + right: 0; + padding: 2rem; + background: rgba(0, 0, 0, 0.4); + color: #fff; + display: flex; + flex-direction: column; + align-items: flex-start; + z-index: 10; +} + +.huidig-gebed-bottom .naam { + font-family: 'Cairo', Arial, sans-serif; + font-size: 4rem; + font-weight: 700; + margin-bottom: 0.5rem; + color: #fff; + text-shadow: 2px 2px 8px #000; +} + +.huidig-gebed-bottom #countdown { + font-size: 6rem; + font-weight: bold; + margin-top: 0.5rem; + color: #fff; + text-shadow: 2px 2px 8px #000; +} diff --git a/adhan-webapp/templates/index.html b/adhan-webapp/templates/index.html index 37b28b7..66fb56d 100644 --- a/adhan-webapp/templates/index.html +++ b/adhan-webapp/templates/index.html @@ -15,34 +15,40 @@
-
--:--
+
+
+
--:--
+
+
+ +
+
+
+ {{ weather.temperature }}°C + {{ weather.description }} +
+
+ Voelt als {{ weather.feels_like }}°C + Vochtigheid {{ weather.humidity }}% + Wind {{ weather.wind_speed }} km/h +
+
+
+
+
{{ date_info.gregorian_full }}
{{ date_info.hijri_arabic }}
{{ date_info.hijri_dutch }}
- - -
-
-
- {{ weather.temperature }}°C - {{ weather.description }} -
-
- Voelt als {{ weather.feels_like }}°C - Vochtigheid {{ weather.humidity }}% - Wind {{ weather.wind_speed }} km/h -
-
-
-
- -
-
{{ next_name }}
-
--:--:--
+ + +
+
{{ next_name }}
+
--:--:--
+
diff --git a/done b/done index b587da7..7c1dd36 100644 --- a/done +++ b/done @@ -55,3 +55,7 @@ Wed May 28 07:49:43 CEST 2025: Zijmenu layout gerepareerd - compact sidebar toeg Wed May 28 07:51:11 CEST 2025: Scheiding hersteld - hadith sectie terug naar rechts met witte achtergrond, behoud van scheiding tussen links (tijd/countdown) en rechts (hadith + zijmenu) Wed May 28 07:52:07 CEST 2025: Hadith sectie theme-responsive gemaakt - gebruikt nu var(--card-bg) en var(--text-color) voor correcte dark/light mode ondersteuning Wed May 28 07:53:43 CEST 2025: Weer sectie verplaatst van rechts naar links naast de tijd - nu in overlay met glasmorphism effect en witte tekst met schaduw +Wed May 28 07:56:25 CEST 2025: Weer sectie verplaatst naast de tijd op dezelfde hoogte - nieuwe tijd-weer-row layout met flexbox, responsive voor alle schermformaten +Wed May 28 07:58:00 CEST 2025: Huidig-gebed sectie gefixeerd onderaan scherm - margin-top: auto en flex layout aangepast voor correcte positionering +Wed May 28 08:02:14 CEST 2025: Huidig-gebed sectie echt onderaan scherm geplaatst - absolute positioning bottom:0, oude CSS verwijderd, nieuwe huidig-gebed-bottom klasse +Wed May 28 08:02:50 CEST 2025: Countdown gerepareerd - JavaScript aangepast om huidig-gebed-bottom klasse te gebruiken in plaats van huidig-gebed