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

Fix: Sidebar/Backdrop aus #app raus, direkt in <body>

Browse source 
#sidebar und #sidebar-backdrop waren Kinder von #app (display:flex),
was auf iOS Safari Stacking-Context-Probleme verursacht. Beide Elemente
sind jetzt direkte Kinder von <body>. _openSidebar() zurueck zur
sauberen .open-Klassen-Methode. will-change:transform entfernt.
SW by-v32 -> by-v33.
This commit is contained in:
rene 2026-04-14 17:44:46 +02:00
parent 3b79efb82b
commit d399cb84cf
4 changed files with 21 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

1
backend/static/css/layout.css
View file

@ -277,7 +277,6 @@
z-index: 1000; /* klar über Backdrop (999) */
transform: translateX(-100%);
transition: transform 0.28s ease;
will-change: transform;
background: var(--c-surface);
box-shadow: none;
}

37
backend/static/index.html
View file

@ -27,26 +27,10 @@
</head>
<body>
<!-- ============================================================
APP SHELL
============================================================ -->
<div id="app">
<!-- Backdrop + Sidebar direkt im body (kein Ancestor-Stacking-Context) -->
<div id="sidebar-backdrop" class="sidebar-backdrop"></div>
<!-- MOBILE HEADER (wird per JS mit Seitentitel befüllt) -->
<header id="app-header">
<button class="header-back hidden" id="header-back" aria-label="Zurück">&#8592;</button>
<div id="header-dog-switcher" class="dog-switcher">
<span class="header-title" id="header-title">Ban Yaro</span>
</div>
<div id="header-actions"></div>
<button class="header-menu-btn" id="header-menu-btn" aria-label="Menü">☰</button>
</header>
<!-- Backdrop für mobile Sidebar-Drawer -->
<div id="sidebar-backdrop" class="sidebar-backdrop"></div>
<!-- DESKTOP SIDEBAR -->
<nav id="sidebar" role="navigation" aria-label="Hauptnavigation">
<nav id="sidebar" role="navigation" aria-label="Hauptnavigation">
<div class="sidebar-logo" id="sidebar-dog-switcher">
<img class="sidebar-logo-img" src="/icons/icon-180.png" alt="Ban Yaro">
<span class="sidebar-logo-text">Ban Yaro</span>
@ -111,6 +95,21 @@
</div>
</nav>
<!-- ============================================================
APP SHELL
============================================================ -->
<div id="app">
<!-- MOBILE HEADER -->
<header id="app-header">
<button class="header-back hidden" id="header-back" aria-label="Zurück">&#8592;</button>
<div id="header-dog-switcher" class="dog-switcher">
<span class="header-title" id="header-title">Ban Yaro</span>
</div>
<div id="header-actions"></div>
<button class="header-menu-btn" id="header-menu-btn" aria-label="Menü">☰</button>
</header>
<!-- HAUPT-INHALTSBEREICH -->
<main id="page-content" role="main">

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

@ -193,32 +193,12 @@ const App = (() => {
}
function _openSidebar() {
const sidebar = document.getElementById('sidebar');
if (!sidebar) return;
// Inline-Styles: unabhängig vom CSS-Cache-Stand
// Inline-Styles: unabhängig vom CSS-Cache; Farben als Fallback hardcoded
const bg = getComputedStyle(document.documentElement)
.getPropertyValue('--c-surface').trim() || '#ffffff';
sidebar.style.cssText = [
'display:flex',
'position:fixed',
'top:0', 'left:0', 'bottom:0',
'width:240px',
'z-index:2000',
`background:${bg}`,
'flex-direction:column',
'overflow:hidden',
'box-shadow:4px 0 24px rgba(0,0,0,0.22)',
'border-right:1px solid #e5e7eb',
'transform:translateX(0)', // CSS hat translateX(-100%) → muss überschrieben werden
].join(';');
document.getElementById('sidebar')?.classList.add('open');
document.getElementById('sidebar-backdrop')?.classList.add('visible');
}
function _closeSidebar() {
const sidebar = document.getElementById('sidebar');
if (!sidebar) return;
sidebar.style.cssText = ''; // alle Inline-Styles weg → CSS übernimmt wieder
document.getElementById('sidebar')?.classList.remove('open');
document.getElementById('sidebar-backdrop')?.classList.remove('visible');
}

2
backend/static/sw.js
View file

@ -3,7 +3,7 @@
Offline-Cache + Push Notifications
============================================================ */
const CACHE_VERSION = 'by-v32';
const CACHE_VERSION = 'by-v33';
const CACHE_STATIC = `${CACHE_VERSION}-static`;
// index.html wird NICHT pre-gecacht (immer Network-First)