Fix: Offline-Pfote sichtbar by-default, JS versteckt nur, SW by-v1082

Logik umgedreht: Default ist 'sichtbar', JS setzt .is-hidden nur wenn
explizit nicht in Welten. So robust gegen Sibling-Selektor-Probleme
oder CSS-Compositing-Eigenheiten auf iOS PWA.

Außerdem: Hintergrund prominenter (rgba 0.95 statt 0.85), echter
Border statt Glas-Filter, stärkerer Schatten — bei den vorigen
Versuchen war die Pfote vermutlich auch durch Transparenz schwer zu
erkennen auf grauem Hintergrund.
This commit is contained in:
rene 2026-05-26 14:43:56 +02:00
parent eb0f460304
commit 53c80b9bf6
6 changed files with 23 additions and 23 deletions

View file

@ -410,7 +410,7 @@ async def serve_media(path: str, request: _Request):
raise _HE(404, "Nicht gefunden.") raise _HE(404, "Nicht gefunden.")
return _media_response(filepath) return _media_response(filepath)
APP_VER = "1081" # muss mit APP_VER in app.js übereinstimmen APP_VER = "1082" # muss mit APP_VER in app.js übereinstimmen
@app.get("/.well-known/assetlinks.json") @app.get("/.well-known/assetlinks.json")
async def assetlinks(): async def assetlinks():

View file

@ -8872,28 +8872,24 @@ svg.empty-state-icon {
5 Pfade Score 0 (grau) bis 5 (grün, gefüllt) 5 Pfade Score 0 (grau) bis 5 (grün, gefüllt)
============================================================ */ ============================================================ */
#offline-indicator { #offline-indicator {
display: none; /* Default: aus */ display: flex; /* Default: sichtbar — JS blendet auf Detail-Seiten aus */
position: fixed; position: fixed;
right: 20px; /* gleicher right wie #worlds-fab */ right: 20px; /* gleicher right wie #worlds-fab */
bottom: calc(env(safe-area-inset-bottom, 16px) + 16px + 54px + 12px); /* FAB-Bottom + FAB-Höhe + 12px */ bottom: calc(env(safe-area-inset-bottom, 16px) + 16px + 54px + 12px); /* FAB-Bottom + FAB-Höhe + 12px */
width: 40px; width: 40px;
height: 40px; height: 40px;
border-radius: 50%; border-radius: 50%;
background: rgba(255,255,255,0.85); background: rgba(255,255,255,0.95);
backdrop-filter: blur(6px); border: 2px solid var(--c-border);
-webkit-backdrop-filter: blur(6px); box-shadow: 0 2px 10px rgba(0,0,0,0.18);
border: 1px solid rgba(0,0,0,0.08);
box-shadow: 0 2px 8px rgba(0,0,0,0.12);
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 0; padding: 0;
cursor: pointer; cursor: pointer;
z-index: 61; /* knapp über dem FAB (60), unter Modals */ z-index: 61; /* knapp über dem FAB (60), unter Modals */
transition: transform 0.12s, box-shadow 0.12s; transition: transform 0.12s, opacity 0.2s;
} }
/* Welten aktiv → Indikator sichtbar (CSS-Sibling + JS-Klasse als Fallback) */ #offline-indicator.is-hidden { display: none; } /* JS-gesteuert: in Detail-Seiten */
#worlds-overlay.worlds-visible ~ #offline-indicator,
#offline-indicator.visible { display: flex; }
[data-theme="dark"] #offline-indicator { [data-theme="dark"] #offline-indicator {
background: rgba(31,41,55,0.85); background: rgba(31,41,55,0.85);

View file

@ -101,9 +101,9 @@
</script> </script>
<!-- CSS: Reihenfolge ist wichtig — ?v= zwingt Browser zur Neuladung --> <!-- CSS: Reihenfolge ist wichtig — ?v= zwingt Browser zur Neuladung -->
<link rel="stylesheet" href="/css/design-system.css?v=1081"> <link rel="stylesheet" href="/css/design-system.css?v=1082">
<link rel="stylesheet" href="/css/layout.css?v=1081"> <link rel="stylesheet" href="/css/layout.css?v=1082">
<link rel="stylesheet" href="/css/components.css?v=1081"> <link rel="stylesheet" href="/css/components.css?v=1082">
</head> </head>
<body> <body>
@ -630,11 +630,11 @@
<div id="modal-container"></div> <div id="modal-container"></div>
<!-- JS: Reihenfolge ist wichtig — erst Basis, dann Features --> <!-- JS: Reihenfolge ist wichtig — erst Basis, dann Features -->
<script src="/js/api.js?v=1081"></script> <script src="/js/api.js?v=1082"></script>
<script src="/js/ui.js?v=1081"></script> <script src="/js/ui.js?v=1082"></script>
<script src="/js/app.js?v=1081"></script> <script src="/js/app.js?v=1082"></script>
<script src="/js/worlds.js?v=1081"></script> <script src="/js/worlds.js?v=1082"></script>
<script src="/js/offline-indicator.js?v=1081"></script> <script src="/js/offline-indicator.js?v=1082"></script>
<!-- Feature-Seiten werden lazy geladen --> <!-- Feature-Seiten werden lazy geladen -->

View file

@ -3,7 +3,7 @@
Router, State-Management, Navigation, Initialisierung. Router, State-Management, Navigation, Initialisierung.
============================================================ */ ============================================================ */
const APP_VER = '1081'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen const APP_VER = '1082'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
const APP_VERSION = '1.6.0'; // ← semantische Version, wird bei make release gesetzt const APP_VERSION = '1.6.0'; // ← semantische Version, wird bei make release gesetzt
const IS_STAGING = location.hostname === 'staging.banyaro.app'; const IS_STAGING = location.hostname === 'staging.banyaro.app';
// Cache-Bust-Parameter nach Update-Reload sofort entfernen. // Cache-Bust-Parameter nach Update-Reload sofort entfernen.

View file

@ -190,12 +190,16 @@ window.OfflineIndicator = (() => {
// ---------------------------------------------------------- // ----------------------------------------------------------
// Sichtbarkeit an Welten-Overlay koppeln // Sichtbarkeit an Welten-Overlay koppeln
// — default sichtbar; nur ausblenden wenn explizit auf Detail-Seite
// ---------------------------------------------------------- // ----------------------------------------------------------
function _syncVisibility() { function _syncVisibility() {
if (!_btn) return; if (!_btn) return;
const ov = document.getElementById('worlds-overlay'); const ov = document.getElementById('worlds-overlay');
const inWorlds = !!ov?.classList.contains('worlds-visible'); if (!ov) return; // ohne Welten-Overlay sichtbar lassen
_btn.classList.toggle('visible', inWorlds); const inWorlds = ov.classList.contains('worlds-visible')
|| ov.style.display === 'block'
|| ov.style.display === '';
_btn.classList.toggle('is-hidden', !inWorlds);
} }
// ---------------------------------------------------------- // ----------------------------------------------------------

View file

@ -4,7 +4,7 @@
============================================================ */ ============================================================ */
// ← EINZIGE Stelle für die Version — STATIC_ASSETS und CACHE_VERSION leiten sich ab // ← EINZIGE Stelle für die Version — STATIC_ASSETS und CACHE_VERSION leiten sich ab
const VER = '1081'; const VER = '1082';
const CACHE_VERSION = `by-v${VER}`; const CACHE_VERSION = `by-v${VER}`;
const CACHE_STATIC = `${CACHE_VERSION}-static`; const CACHE_STATIC = `${CACHE_VERSION}-static`;
const CACHE_TILES = 'ban-yaro-tiles-v1'; // bleibt über SW-Updates erhalten const CACHE_TILES = 'ban-yaro-tiles-v1'; // bleibt über SW-Updates erhalten