rene/banyaro
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix: Offline-Pfote per JS-Klasse sichtbar (Fallback zum CSS-Sibling), SW by-v1081

Browse source 
Der reine CSS-Sibling-Selektor klappte nicht zuverlässig (vermutlich
SW-Cache-Mismatch oder DOM-Reihenfolge im aktuellen Zustand des
Users). Lösung: MutationObserver in offline-indicator.js beobachtet
class/style auf #worlds-overlay und togglet .visible auf
#offline-indicator. CSS akzeptiert jetzt beide Wege:

  #worlds-overlay.worlds-visible ~ #offline-indicator,
  #offline-indicator.visible { display: flex; }

So bleibt das Layout funktional auch wenn CSS-Compositing oder
Cache-Versatz mal nicht greift. console.warn wenn das Element nicht
im DOM ist (z.B. wenn alte index.html aus SW-Cache).
This commit is contained in:
rene 2026-05-26 14:36:27 +02:00
parent 521b7b6bee
commit eb0f460304
6 changed files with 33 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

5
backend/static/css/components.css
View file

@ -8891,8 +8891,9 @@ svg.empty-state-icon {
z-index: 61; /* knapp über dem FAB (60), unter Modals */
transition: transform 0.12s, box-shadow 0.12s;
}
/* Welten aktiv → Indikator sichtbar */
#worlds-overlay.worlds-visible ~ #offline-indicator { display: flex; }
/* Welten aktiv → Indikator sichtbar (CSS-Sibling + JS-Klasse als Fallback) */
#worlds-overlay.worlds-visible ~ #offline-indicator,
#offline-indicator.visible { display: flex; }
[data-theme="dark"] #offline-indicator {
background: rgba(31,41,55,0.85);

16
backend/static/index.html
View file

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

2
backend/static/js/app.js
View file

@ -3,7 +3,7 @@
Router, State-Management, Navigation, Initialisierung.
============================================================ */
const APP_VER = '1080'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
const APP_VER = '1081'; // ← 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.

20
backend/static/js/offline-indicator.js
View file

@ -188,14 +188,32 @@ window.OfflineIndicator = (() => {
await Promise.all(tasks);
}
// ----------------------------------------------------------
// Sichtbarkeit an Welten-Overlay koppeln
// ----------------------------------------------------------
function _syncVisibility() {
if (!_btn) return;
const ov = document.getElementById('worlds-overlay');
const inWorlds = !!ov?.classList.contains('worlds-visible');
_btn.classList.toggle('visible', inWorlds);
}
// ----------------------------------------------------------
// Init
// ----------------------------------------------------------
function init() {
_btn = document.getElementById('offline-indicator');
if (!_btn) return;
if (!_btn) { console.warn('[OfflineIndicator] #offline-indicator nicht im DOM'); return; }
_svg = _btn.querySelector('.offline-paw');
_btn.addEventListener('click', _openModal);
// MutationObserver: Welten-Overlay Klassenänderung → Indikator zeigen/verstecken
const ov = document.getElementById('worlds-overlay');
if (ov) {
_syncVisibility();
new MutationObserver(_syncVisibility).observe(ov, { attributes: true, attributeFilter: ['class', 'style'] });
}
refresh();
// bei SW-Updates und alle 60s neu prüfen

2
backend/static/sw.js
View file

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