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

Revert nav: Original-Layout restauriert + overscroll-behavior:none — SW by-v535, APP_VER 512

Browse source
This commit is contained in:
rene 2026-04-30 09:00:30 +02:00
parent 9506eea0d9
commit 5a6ca5496b
4 changed files with 23 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -10,44 +10,30 @@
#app {
display: flex;
flex-direction: column;
height: 100dvh; /* dvh = dynamic viewport inkl. safe areas */
overflow: hidden;
min-height: 100dvh;
}
/* Content-Bereich scrollt intern — kein padding-bottom nötig da Nav Flex-Kind */
/* Content-Bereich: füllt den Raum zwischen Header und Bottom-Nav */
#page-content {
flex: 1;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
padding-bottom: calc(var(--nav-bottom-height) + var(--safe-bottom) + 16px);
-webkit-overflow-scrolling: touch;
overscroll-behavior-y: none;
overscroll-behavior-y: none; /* iOS-Bounce verhindert fixed-Nav-Drift */
}
/* Vollbild-Seiten: #page-content kein Scroll */
body.page-fullscreen #page-content {
overflow: hidden;
}
/* Desktop: window-scroll, Sidebar-Layout */
/* Desktop: Sidebar-Layout */
@media (min-width: 768px) {
#app {
height: auto;
min-height: 100dvh;
overflow: visible;
flex-direction: row;
}
#page-content {
flex: unset;
min-height: unset;
overflow-y: visible;
overflow-x: visible;
padding-bottom: 0;
padding-left: var(--nav-sidebar-width);
}
body.page-fullscreen #page-content {
overflow: visible;
}
}
/* ------------------------------------------------------------
@ -174,19 +160,23 @@ body.page-fullscreen #page-content {
3. BOTTOM NAVIGATION (Mobile)
------------------------------------------------------------ */
#bottom-nav {
/* Flex-Kind von #app{height:100dvh} — kein position:fixed nötig.
100dvh auf iOS inkludiert Safe Areas → Nav endet am physischen Rand. */
flex-shrink: 0;
z-index: 700;
min-height: calc(var(--nav-bottom-height) + var(--safe-bottom));
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 700;
transform: translateZ(0);
-webkit-transform: translateZ(0);
will-change: transform;
min-height: calc(var(--nav-bottom-height) + var(--safe-bottom));
padding-top: var(--space-1);
padding-bottom: calc(var(--safe-bottom) + var(--space-1));
background: var(--c-surface);
border-top: 1px solid var(--c-border-light);
display: flex;
align-items: stretch;
box-shadow: 0 -2px 12px rgba(42, 31, 20, 0.08);
transition: border-top-color 0.4s ease;
background: var(--c-surface);
border-top: 1px solid var(--c-border-light);
display: flex;
align-items: stretch;
box-shadow: 0 -2px 12px rgba(42, 31, 20, 0.08);
transition: border-top-color 0.4s ease;
}
@keyframes nav-alert-pulse {