From 06b91dc54b5624b0e5fe084a92aee825a9666ca1 Mon Sep 17 00:00:00 2001 From: rene Date: Tue, 26 May 2026 14:24:45 +0200 Subject: [PATCH] Fix: Offline-Pfote als schwebendes Element (Welten verstecken Header), SW by-v1079 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Der Header (#app-header) ist in den Welten per 'display:none !important' ausgeblendet (Welten übernehmen Navigation). Mein Pfötchen saß da drin und war genau dort unsichtbar wo es sichtbar sein sollte. - Button aus dem Header rausgeholt, am Ende vom body als schwebendes Element platziert (position:fixed; top-right; z-index:9000) - Eigener Stil: 40px runder Glas-Hintergrund, blur-Effekt, leichter Schatten — passt zur FAB-Optik unten rechts - Dark-Mode Hintergrund: dunkles Glas - Sichtbar in allen Welten und auf allen Seiten (auch wo Header da ist — sitzt daneben) - 'hidden'-Default raus, Element ist sofort sichtbar (nur Färbung wartet auf refresh()) --- backend/main.py | 2 +- backend/static/css/components.css | 37 ++++++++++++++----- backend/static/index.html | 49 ++++++++++++-------------- backend/static/js/app.js | 2 +- backend/static/js/offline-indicator.js | 3 +- backend/static/sw.js | 2 +- 6 files changed, 54 insertions(+), 41 deletions(-) diff --git a/backend/main.py b/backend/main.py index 00b602e..95ed96c 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 = "1078" # muss mit APP_VER in app.js übereinstimmen +APP_VER = "1079" # 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 24186fe..3127ac3 100644 --- a/backend/static/css/components.css +++ b/backend/static/css/components.css @@ -8867,9 +8867,36 @@ svg.empty-state-icon { } /* ============================================================ - Offline-Bereitschafts-Indikator (Pfote im Header) + Offline-Bereitschafts-Indikator — schwebend oben rechts 5 Pfade — Score 0 (grau) bis 5 (grün, gefüllt) ============================================================ */ +#offline-indicator { + position: fixed; + top: calc(env(safe-area-inset-top, 0px) + 8px); + right: 12px; + width: 40px; + height: 40px; + border-radius: 50%; + background: rgba(255,255,255,0.85); + backdrop-filter: blur(6px); + -webkit-backdrop-filter: blur(6px); + border: 1px solid rgba(0,0,0,0.08); + box-shadow: 0 2px 8px rgba(0,0,0,0.12); + display: flex; + align-items: center; + justify-content: center; + padding: 0; + cursor: pointer; + z-index: 9000; /* unter Modals (~9999), über allem anderen */ + transition: transform 0.12s, box-shadow 0.12s; +} +[data-theme="dark"] #offline-indicator { + background: rgba(31,41,55,0.85); + border-color: rgba(255,255,255,0.08); +} +#offline-indicator:active { transform: scale(0.92); } +#offline-indicator .offline-paw { width: 24px; height: 24px; } + .offline-paw .paw-elem { color: var(--c-text-muted); transition: stroke 0.5s ease, fill 0.5s ease; @@ -8878,14 +8905,6 @@ svg.empty-state-icon { color: var(--c-success); fill: var(--c-success); } -#offline-indicator { - background: none; - border: none; - cursor: pointer; -} -#offline-indicator:hover .paw-elem { - opacity: 0.85; -} .offline-status-row { display: flex; diff --git a/backend/static/index.html b/backend/static/index.html index d26e715..dd16b3c 100644 --- a/backend/static/index.html +++ b/backend/static/index.html @@ -101,9 +101,9 @@ - - - + + + @@ -325,25 +325,6 @@ Ban Yaro
- + @@ -635,11 +630,11 @@ - - - - - + + + + + diff --git a/backend/static/js/app.js b/backend/static/js/app.js index 45215d2..87aec8c 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 = '1078'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen +const APP_VER = '1079'; // ← 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/offline-indicator.js b/backend/static/js/offline-indicator.js index 881a9f6..36d90c4 100644 --- a/backend/static/js/offline-indicator.js +++ b/backend/static/js/offline-indicator.js @@ -71,7 +71,7 @@ window.OfflineIndicator = (() => { // ---------------------------------------------------------- async function refresh() { if (!_btn) return; - if (!('caches' in window)) { _btn.classList.add('hidden'); return; } + if (!('caches' in window)) { _btn.style.display = 'none'; return; } const results = await Promise.all(CHECKS.map(async c => { try { return { ...c, ok: await c.probe() }; } @@ -93,7 +93,6 @@ window.OfflineIndicator = (() => { }); _btn.title = `Offline-Bereitschaft: ${score} von 5`; _btn.setAttribute('aria-label', `Offline-Bereitschaft: ${score} von 5`); - _btn.classList.remove('hidden'); } // ---------------------------------------------------------- diff --git a/backend/static/sw.js b/backend/static/sw.js index 54ba328..711fce0 100644 --- a/backend/static/sw.js +++ b/backend/static/sw.js @@ -4,7 +4,7 @@ ============================================================ */ // ← EINZIGE Stelle für die Version — STATIC_ASSETS und CACHE_VERSION leiten sich ab -const VER = '1078'; +const VER = '1079'; const CACHE_VERSION = `by-v${VER}`; const CACHE_STATIC = `${CACHE_VERSION}-static`; const CACHE_TILES = 'ban-yaro-tiles-v1'; // bleibt über SW-Updates erhalten