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.
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).
- Position: bottom-right über dem #worlds-fab (right:20px, bottom-
Berechnung folgt FAB + 12px Abstand). Gleiche horizontale Achse
wie FAB → ergibt eine 'Pfoten-Säule' (Indikator oben, FAB unten)
- Sichtbarkeit per CSS-Sibling-Selektor:
#worlds-overlay.worlds-visible ~ #offline-indicator { display:flex }
→ Indikator nur sichtbar wenn Welten aktiv sind. Auf Detail-Seiten
(Tagebuch, Karte, Admin etc.) bleibt er aus.
- z-index 61 (eine Stufe über dem FAB, unter Modals)
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())
design-system.css: .leaflet-tile-pane bekommt den invert/hue-rotate-Filter
im Dark-Mode — gilt für walks, lost, poison, forum, routes und alle
anderen Seiten mit eingebetteten Leaflet-Karten.
design-system.css ?v=1025, SW by-v1026, APP_VER 1026
- app.js: _applyDesktopWidth() setzt nach Page-Init die Klasse pc-desktop
auf dem ersten Kind-Div aller Standard-Seiten (excl. admin/map/chat/etc.)
- layout.css: .pc-desktop { max-width:860px !important; margin:0 auto }
- layout.css: .page-container ab 768px auf 860px (statt erst 1024px)
- main.py: /force-update Text "Service Worker wird entfernt" →
"Wir besorgen neue Leckerlis 🦴"
- layout.css ?v=1013, components.css ?v=1010, SW by-v1014, APP_VER 1014
Greeting-Karte + Wetter/Route/Übung-Chips stretchen nicht mehr auf volle
Desktopbreite. Chips sind je ~280px breit — deutlich kompakter als vorher.
components.css ?v=1010, SW by-v1013, APP_VER 1013
Das grid blieb wegen Spezifität aktiv. Explizite !important auf display:flex,
flex-wrap:nowrap, grid-template-columns:unset erzwingen die Eine-Zeile-Darstellung.
components.css ?v=1008, SW by-v1009, APP_VER 1009
- .world-chips-grid @768: flex nowrap, alle Chips in einer Zeile (80px Basis,
shrinks bis 60px), justify-content:center — egal wie viele aktiv
- #world-labels bottom: 22px→33px (vertikal zentriert zwischen Chips und Footer)
- components.css ?v=1007, SW by-v1008, APP_VER 1008
- #world-labels: right:80px→right:0 (Nav war durch halbe Breite nach links versetzt)
- @media 768px: Nav bleibt unten statt zurück nach oben — Chips+Nav+Footer
gleiches Layout wie Mobile, nur top-padding 48px und chip-grid max-width 480px
- components.css ?v=1005, SW by-v1006, APP_VER 1006
- #world-dots: ausgeblendet auf Mobile (Labels dienen als Tab-Indikator)
- #world-labels: von top→bottom (safe-area+20px), pill-Style für active
right:80px damit FAB nicht überlappt, backdrop-blur auf active label
- .world-panel top-padding: 58→32px (Info-Karte startet weiter oben)
- Desktop @media 768px: Nav bleibt oben (dots+labels wie vorher)
- components.css ?v=1003, SW by-v1004, APP_VER 1004
- Foto-Challenge der Woche: DB-Tabellen, routes/challenges.py (current/submit/vote/winners),
Scheduler-Job jeden Montag 08:00, walks.js Challenge-Tab mit Banner, Galerie, Voting-Herz
- Gassi-Zeiten-Pool: DB-Tabelle gassi_zeiten, routes/gassi_zeiten.py (CRUD + Umkreis),
walks.js Stamm-Gassis-Tab mit Karten, Wochentag-Selector, Mitmachen→Chat
- Rassen-Treffen-Chip: GET /api/friends/same-breed, dog-profile.js zeigt Chip
wenn andere User gleiche Rasse haben, Klick → Forum mit Rassen-Suche vorausgefüllt
- UI.pageInfo(): generische Hilfe-Funktion — erstes Öffnen zeigt Info-Banner, danach ? Button oben rechts; CSS-Klassen pinfo-*
- Übungen-Seite nutzt UI.pageInfo() als erstes Beispiel
- Karte POI: Mehrfachauswahl (außer Giftköder), Kombi-Typen entfernt, type als comma-separated im Backend
- daily_quotes Tabelle in DB (346 Einträge via import_quotes.py importiert)
- GET /widget/quote — deterministischer Tagesspruch (wechselt täglich)
- worlds-settings Zahnrad komplett entfernt (war auf Mobile sichtbar, auf Desktop schon hidden)
- exp-fab: bottom jetzt calc(--nav-bottom-height + --safe-bottom + --space-2) — kein Overlap mit worlds-back auf iPhone
- Karte POI: neue Typen bank, bank_kotbeutel, bank_kotbeutel_abfall, kotbeutel_abfall (Backend + Frontend)
- Welten-Chip-Config: GET/PUT /profile/world-config, Spalte users.world_config TEXT (Migration), Sync bei Init + Speichern
