feat(v8.2): UX — Guide-Tabs, Begriffe oben, Mobile, Download-Links
- GuidesPanel: "Begriffe kurz erklärt" jetzt ganz oben (vor Guide-Karten) - GuidesPanel: Tab-Navigation mit Kategorie-Chips + Active-Highlighting; Klick scrollt zur jeweiligen Guide-Gruppe - ConnectPanel: Download-Links für Zed (zed.dev) und Cline (VS Code + JetBrains Marketplace) ergänzt - base.css: Mobile-Breakpoint ≤520px — Sidebar wird zur Bottom-Nav, Content-Padding reduziert, Touch-freundliche Button-Höhen (min 40px), Topbar kompaktiert, Guide-Tabs horizontal scrollbar Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
+52
-2
@@ -130,10 +130,60 @@ a{color:var(--accent);text-decoration:none}
|
||||
.split{display:grid;gap:var(--sp-4);grid-template-columns:1.05fr 1fr}
|
||||
@media(max-width:1180px){.grid-3{grid-template-columns:1fr 1fr}.kpis{grid-template-columns:repeat(2,1fr)}}
|
||||
@media(max-width:900px){.split{grid-template-columns:1fr}}
|
||||
@media(max-width:760px){.grid-3,.grid-2,.kpis{grid-template-columns:1fr}
|
||||
@media(max-width:760px){
|
||||
.grid-3,.grid-2,.kpis{grid-template-columns:1fr}
|
||||
.sidebar{width:60px;flex-basis:60px}
|
||||
.ni-tx,.brand-tx{display:none}
|
||||
.nav-item{justify-content:center}.brand{justify-content:center}}
|
||||
.nav-item{justify-content:center}.brand{justify-content:center}
|
||||
}
|
||||
|
||||
/* ---- Mobile (≤ 520px): Bottom-Nav, kompaktes Layout ---- */
|
||||
@media(max-width:520px){
|
||||
:root{ --side:0px }
|
||||
|
||||
/* Sidebar → unsichtbar, Navigation nach unten */
|
||||
.sidebar{
|
||||
position:fixed;bottom:0;left:0;right:0;top:auto;
|
||||
width:100%;height:56px;flex-basis:auto;z-index:30;
|
||||
flex-direction:row;padding:0;
|
||||
border-right:none;border-top:1px solid var(--line);
|
||||
background:var(--bg2);
|
||||
overflow-x:auto;gap:0;
|
||||
}
|
||||
.brand{display:none}
|
||||
.side-nav{flex-direction:row;gap:0;flex:1;overflow-x:auto}
|
||||
.nav-cap,.side-foot{display:none}
|
||||
.nav-item{
|
||||
flex-direction:column;gap:2px;padding:6px 8px;
|
||||
font-size:9px;min-width:52px;flex:1;border-radius:0;
|
||||
justify-content:center;align-items:center;border:none;
|
||||
}
|
||||
.ni-tx{display:block;font-size:9px;line-height:1;color:inherit}
|
||||
.ni-ic svg{width:20px;height:20px}
|
||||
|
||||
/* Main-Bereich: Bottom-Padding für die Nav */
|
||||
.main{ padding-bottom:56px }
|
||||
|
||||
/* Topbar kompakter */
|
||||
.topbar{padding:var(--sp-2) var(--sp-3);gap:var(--sp-2)}
|
||||
.top-clock,.sec-chip{display:none}
|
||||
#update-badges .upd-badge{font-size:10px;padding:3px 7px}
|
||||
|
||||
/* Content-Padding reduzieren */
|
||||
.content{padding:var(--sp-3) var(--sp-3) var(--sp-6)}
|
||||
|
||||
/* Karten kompakter */
|
||||
.card{padding:var(--sp-3) var(--sp-3)}
|
||||
.modal-card{padding:var(--sp-4)}
|
||||
.modal-overlay{padding:12px}
|
||||
|
||||
/* Buttons: mindestens 44px Höhe für Touch */
|
||||
button{min-height:40px}
|
||||
button.ghost{min-height:34px}
|
||||
|
||||
/* Tabs in Guides horizontal scrollbar */
|
||||
.guide-tabs{flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px}
|
||||
}
|
||||
|
||||
/* Alert-Banner */
|
||||
.alert{
|
||||
|
||||
Reference in New Issue
Block a user