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

Fix: Offline-Pfote als schwebendes Element (Welten verstecken Header), SW by-v1079

Browse source 
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())
This commit is contained in:
rene 2026-05-26 14:24:45 +02:00
parent 776641fa65
commit 06b91dc54b
6 changed files with 54 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

49
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=1078">
<link rel="stylesheet" href="/css/layout.css?v=1078">
<link rel="stylesheet" href="/css/components.css?v=1078">
<link rel="stylesheet" href="/css/design-system.css?v=1079">
<link rel="stylesheet" href="/css/layout.css?v=1079">
<link rel="stylesheet" href="/css/components.css?v=1079">
</head>
<body>
@ -325,25 +325,6 @@
<span class="header-title" id="header-title">Ban Yaro</span>
</div>
<div id="header-actions"></div>
<button id="offline-indicator" class="header-menu-btn hidden"
aria-label="Offline-Bereitschaft" title="Offline-Bereitschaft"
style="position:relative;padding:0 6px">
<svg class="ph-icon offline-paw" viewBox="0 0 256 256" aria-hidden="true"
style="width:22px;height:22px">
<!-- 4 Zehen + 1 Ballen, jeweils mit data-step für Reihenfolge -->
<path class="paw-elem" data-step="1"
d="M128,104A36,36,0,0,0,93.43,130a43.49,43.49,0,0,1-20.67,25.9,32,32,0,0,0,27.73,57.62,72.49,72.49,0,0,1,55,0,32,32,0,0,0,27.73-57.62A43.46,43.46,0,0,1,162.57,130,36,36,0,0,0,128,104Z"
fill="none" stroke="currentColor" stroke-width="16" stroke-linecap="round" stroke-linejoin="round"/>
<circle class="paw-elem" data-step="2" cx="44" cy="108" r="20"
fill="none" stroke="currentColor" stroke-width="16"/>
<circle class="paw-elem" data-step="3" cx="92" cy="60" r="20"
fill="none" stroke="currentColor" stroke-width="16"/>
<circle class="paw-elem" data-step="4" cx="164" cy="60" r="20"
fill="none" stroke="currentColor" stroke-width="16"/>
<circle class="paw-elem" data-step="5" cx="212" cy="108" r="20"
fill="none" stroke="currentColor" stroke-width="16"/>
</svg>
</button>
<button id="header-user-btn" aria-label="Profil"
style="width:36px;height:36px;border-radius:50%;border:2px solid var(--c-border);
background:var(--c-surface-2);cursor:pointer;flex-shrink:0;
@ -628,6 +609,20 @@
<svg class="ph-icon" style="width:22px;height:22px"><use href="/icons/phosphor.svg#arrow-left"></use></svg>
</div>
<!-- OFFLINE-BEREITSCHAFTS-INDIKATOR — schwebend oben rechts, immer sichtbar -->
<button id="offline-indicator"
aria-label="Offline-Bereitschaft" title="Offline-Bereitschaft wird geprüft …">
<svg class="offline-paw" viewBox="0 0 256 256" aria-hidden="true">
<path class="paw-elem" data-step="1"
d="M128,104A36,36,0,0,0,93.43,130a43.49,43.49,0,0,1-20.67,25.9,32,32,0,0,0,27.73,57.62,72.49,72.49,0,0,1,55,0,32,32,0,0,0,27.73-57.62A43.46,43.46,0,0,1,162.57,130,36,36,0,0,0,128,104Z"
fill="none" stroke="currentColor" stroke-width="16" stroke-linecap="round" stroke-linejoin="round"/>
<circle class="paw-elem" data-step="2" cx="44" cy="108" r="20" fill="none" stroke="currentColor" stroke-width="16"/>
<circle class="paw-elem" data-step="3" cx="92" cy="60" r="20" fill="none" stroke="currentColor" stroke-width="16"/>
<circle class="paw-elem" data-step="4" cx="164" cy="60" r="20" fill="none" stroke="currentColor" stroke-width="16"/>
<circle class="paw-elem" data-step="5" cx="212" cy="108" r="20" fill="none" stroke="currentColor" stroke-width="16"/>
</svg>
</button>
<!-- TOAST CONTAINER (außerhalb der App, immer sichtbar) -->
<div class="toast-container" id="toast-container" role="alert" aria-live="polite"></div>
@ -635,11 +630,11 @@
<div id="modal-container"></div>
<!-- JS: Reihenfolge ist wichtig — erst Basis, dann Features -->
<script src="/js/api.js?v=1078"></script>
<script src="/js/ui.js?v=1078"></script>
<script src="/js/app.js?v=1078"></script>
<script src="/js/worlds.js?v=1078"></script>
<script src="/js/offline-indicator.js?v=1078"></script>
<script src="/js/api.js?v=1079"></script>
<script src="/js/ui.js?v=1079"></script>
<script src="/js/app.js?v=1079"></script>
<script src="/js/worlds.js?v=1079"></script>
<script src="/js/offline-indicator.js?v=1079"></script>
<!-- Feature-Seiten werden lazy geladen -->