From 721e630a3453fa4718063967632051ea371b9dca Mon Sep 17 00:00:00 2001 From: rene Date: Sat, 16 May 2026 11:11:09 +0200 Subject: [PATCH] Fix: Dark-Mode Karte + Badge-Farben + --c-bg-secondary MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Karte: - Dark-Mode: CartoDB Dark Matter Tiles statt OSM Standard - MutationObserver + matchMedia watchee für Live-Theme-Wechsel - _buildTileLayer() / _applyTileTheme() / _isDarkMode() Badges litters.js: - Hardgekodete dunkle Hintergründe → CSS-Klassen (badge-warning/-success/-muted) - Funktioniert jetzt in Light + Dark Mode korrekt movies.css: - .movie-tag-stirbt/.movie-tag-ueberlebt → CSS-Variablen (danger-/success-subtle) - Kein weißer Hintergrund mehr in Dark Mode --c-bg-secondary: Zoom-Control 30px bleiben aus dem letzten Commit SW by-v1022, APP_VER 1022 --- backend/main.py | 2 +- backend/static/css/components.css | 12 ++++---- backend/static/js/app.js | 2 +- backend/static/js/pages/litters.js | 22 +++++++------- backend/static/js/pages/map.js | 47 +++++++++++++++++++++++++++--- backend/static/sw.js | 2 +- 6 files changed, 63 insertions(+), 24 deletions(-) diff --git a/backend/main.py b/backend/main.py index 9f64867..841e9e9 100644 --- a/backend/main.py +++ b/backend/main.py @@ -410,7 +410,7 @@ async def serve_media(path: str, request: _Request): raise _HE(404, "Nicht gefunden.") return _media_response(filepath) -APP_VER = "1021" # muss mit APP_VER in app.js übereinstimmen +APP_VER = "1022" # muss mit APP_VER in app.js übereinstimmen @app.get("/.well-known/assetlinks.json") async def assetlinks(): diff --git a/backend/static/css/components.css b/backend/static/css/components.css index 6e98651..f492328 100644 --- a/backend/static/css/components.css +++ b/backend/static/css/components.css @@ -5160,9 +5160,9 @@ html.modal-open { /* "Stirbt der Hund?" Tags */ .movie-tag-stirbt { - background: #fef2f2; - color: #dc2626; - border: 1.5px solid #dc2626; + background: var(--c-danger-subtle); + color: var(--c-danger); + border: 1.5px solid var(--c-danger-border); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); font-size: var(--text-xs); @@ -5172,9 +5172,9 @@ html.modal-open { } .movie-tag-ueberlebt { - background: #f0fdf4; - color: #16a34a; - border: 1.5px solid #16a34a; + background: var(--c-success-subtle); + color: var(--c-success); + border: 1.5px solid color-mix(in srgb, var(--c-success) 30%, transparent); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); font-size: var(--text-xs); diff --git a/backend/static/js/app.js b/backend/static/js/app.js index f937b95..90197f0 100644 --- a/backend/static/js/app.js +++ b/backend/static/js/app.js @@ -3,7 +3,7 @@ Router, State-Management, Navigation, Initialisierung. ============================================================ */ -const APP_VER = '1021'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen +const APP_VER = '1022'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen const APP_VERSION = '1.6.0'; // ← semantische Version, wird bei make release gesetzt const IS_STAGING = location.hostname === 'staging.banyaro.app'; // Cache-Bust-Parameter nach Update-Reload sofort entfernen diff --git a/backend/static/js/pages/litters.js b/backend/static/js/pages/litters.js index 8f86a86..63b07eb 100644 --- a/backend/static/js/pages/litters.js +++ b/backend/static/js/pages/litters.js @@ -31,13 +31,13 @@ window.Page_litters = (() => { function _statusBadge(status) { const map = { - geplant: { label: 'Geplant', color: '#6B7280' }, - geboren: { label: 'Geboren', color: '#3B82F6' }, - verfuegbar: { label: 'Verfügbar', color: '#22C55E' }, - abgeschlossen: { label: 'Abgeschlossen', color: '#374151' }, + geplant: { label: 'Geplant', cls: 'badge-warning' }, + geboren: { label: 'Geboren', cls: 'badge-primary' }, + verfuegbar: { label: 'Verfügbar', cls: 'badge-success' }, + abgeschlossen: { label: 'Abgeschlossen', cls: 'badge-muted' }, }; - const s = map[status] || { label: status, color: '#6B7280' }; - return `${_esc(s.label)}`; + const s = map[status] || { label: status, cls: 'badge-muted' }; + return `${_esc(s.label)}`; } function _fmtDate(iso) { @@ -54,12 +54,12 @@ window.Page_litters = (() => { function _puppyStatusBadge(status) { const map = { - verfuegbar: { label: 'Verfügbar', color: '#22C55E' }, - reserviert: { label: 'Reserviert', color: '#F59E0B' }, - abgegeben: { label: 'Abgegeben', color: '#6B7280' }, + verfuegbar: { label: 'Verfügbar', cls: 'badge-success' }, + reserviert: { label: 'Reserviert', cls: 'badge-warning' }, + abgegeben: { label: 'Abgegeben', cls: 'badge-muted' }, }; - const s = map[status] || { label: status, color: '#9CA3AF' }; - return `${_esc(s.label)}`; + const s = map[status] || { label: status, cls: 'badge-muted' }; + return `${_esc(s.label)}`; } // ---------------------------------------------------------- diff --git a/backend/static/js/pages/map.js b/backend/static/js/pages/map.js index 1a97df8..6774e04 100644 --- a/backend/static/js/pages/map.js +++ b/backend/static/js/pages/map.js @@ -11,9 +11,11 @@ window.Page_map = (() => { let _map = null; let _leafletLoaded = false; let _userPos = null; - let _weatherLoaded = false; - let _placingMarker = false; - let _tempMarker = null; + let _weatherLoaded = false; + let _placingMarker = false; + let _tempMarker = null; + let _tileLayer = null; + let _themeObserver = null; // Standort-Tracking let _locationMarker = null; @@ -528,7 +530,13 @@ window.Page_map = (() => { if (!_userPos) { _frankfurtTimer = setTimeout(() => _map.flyTo(center, 14, { duration: 2.5 }), 1200); } - L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19 }).addTo(_map); + _tileLayer = _buildTileLayer(); + _tileLayer.addTo(_map); + + // Theme-Wechsel → Tile-Layer tauschen + _themeObserver = new MutationObserver(() => _applyTileTheme()); + _themeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] }); + window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', _applyTileTheme); setTimeout(() => _map.invalidateSize(), 100); setTimeout(() => _map.invalidateSize(), 600); @@ -614,6 +622,37 @@ window.Page_map = (() => { return _clusterGroups[layerKey]; } + function _isDarkMode() { + const t = document.documentElement.getAttribute('data-theme'); + if (t === 'dark') return true; + if (t === 'light') return false; + return window.matchMedia('(prefers-color-scheme: dark)').matches; + } + + function _buildTileLayer() { + if (_isDarkMode()) { + return L.tileLayer( + 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', + { maxZoom: 19, subdomains: 'abcd' } + ); + } + return L.tileLayer( + 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', + { maxZoom: 19 } + ); + } + + function _applyTileTheme() { + if (!_map || !window.L) return; + const dark = _isDarkMode(); + const url = dark + ? 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png' + : 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'; + if (_tileLayer) { + _tileLayer.setUrl(url); + } + } + function _updateZoomDisplay() { if (!_map) return; const z = Math.round(_map.getZoom()); diff --git a/backend/static/sw.js b/backend/static/sw.js index 233a8c0..3446297 100644 --- a/backend/static/sw.js +++ b/backend/static/sw.js @@ -3,7 +3,7 @@ Offline-Cache + Push Notifications + Tile-Cache ============================================================ */ -const CACHE_VERSION = 'by-v1021'; +const CACHE_VERSION = 'by-v1022'; const CACHE_STATIC = `${CACHE_VERSION}-static`; const CACHE_TILES = 'ban-yaro-tiles-v1'; // bleibt über SW-Updates erhalten const CACHE_API = 'ban-yaro-api-v1'; // API-Response-Cache