Sysnaptik/mindflux
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Responsive: mobile Off-Canvas-Navigation + Layout-Anpassungen

Browse Source 
- Sidebar wird auf <=820px nicht mehr ausgeblendet (kein Nav-Verlust), sondern
  zu einem Off-Canvas-Drawer mit Hamburger-Button + Backdrop (theme.js
  injiziert ihn auf allen .mf-shell-Seiten; Styles in theme.css).
- Topbar stapelt/umbricht auf Mobil (dekorativer Puls + Suche ausgeblendet,
  kleinere Begrüßung), HUD-Karten-Grid 3->2->1, breite mf-Tabellen horizontal
  scrollbar. Schließen per Backdrop, Nav-Link oder Escape.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
AliceDarkest
2026-06-29 19:39:33 +02:00
parent 34b050503d
commit 0e4645541d
3 changed files with 57 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/resources/static/css/theme.css
+30 -1
View File
@@ -171,6 +171,35 @@ a { color:var(--secondary); }
.mf-footer a:hover { color:var(--accent); }
.mf-footer a + a::before { content:"·"; position:absolute; left:-.6rem; color:var(--border); }
/* ===== Mobile-Nav (Off-Canvas-Drawer; Button/Backdrop per theme.js injiziert) ===== */
.mf-burger { display:none; position:fixed; top:.7rem; left:.7rem; z-index:1300; width:42px; height:42px; border-radius:10px; border:1px solid var(--border-accent); background:var(--surface); color:var(--accent); align-items:center; justify-content:center; cursor:pointer; box-shadow:0 0 14px var(--glow-w); }
.mf-burger svg { width:20px; height:20px; }
.mf-nav-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.5); opacity:0; pointer-events:none; transition:opacity .28s ease; z-index:1100; }
body.mf-nav-open .mf-nav-backdrop { opacity:1; pointer-events:auto; }
@media (max-width:1180px){ .mf-shell{grid-template-columns:240px 1fr;} .mf-rightbar{display:none;} .mf-topbar{grid-column:2;} .mf-main{grid-column:2;} }
@media (max-width:820px){ .mf-shell{grid-template-columns:1fr;} .mf-sidebar{display:none;} .mf-topbar,.mf-main{grid-column:1;} .mf-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:820px){
/* Shell stapelt; Sidebar wird zum Off-Canvas-Drawer */
.mf-shell, .mf-shell.no-right { display:block; }
.mf-topbar { padding:1.05rem 1rem 0 3.7rem; flex-wrap:wrap; gap:.7rem; }
.mf-main { padding:1.1rem 1rem 1.4rem; }
.mf-rightbar { padding:0 1rem 1.4rem; }
.mf-grid { grid-template-columns:repeat(2,1fr); }
.mf-pulse, .mf-search { display:none; }
.mf-hello h1 { font-size:1.4rem; }
.mf-tools { margin-left:auto; }
.mf-sidebar {
position:fixed; top:0; left:0; height:100dvh; width:min(284px,82vw); z-index:1200;
transform:translateX(-100%); transition:transform .28s ease; overflow-y:auto;
box-shadow:0 18px 50px rgba(0,0,0,.55);
}
body.mf-nav-open .mf-sidebar { transform:translateX(0); }
.mf-burger { display:inline-flex; }
/* breite Tabellen horizontal scrollbar statt überlaufend */
.mf-table { display:block; overflow-x:auto; white-space:nowrap; }
}
@media (max-width:560px){ .mf-grid{grid-template-columns:1fr;} }