DogFatherGit/vans-diy-bastelbedarf
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

Konto-Navigation: Klick zeigt jetzt wirklich NUR den passenden Bereich

Browse Source 
Die Schnellnav-Leiste sprang bisher nur zum Abschnitt (der Rest blieb
sichtbar). Jetzt sind es echte Filter-Tabs: Klick auf "Bestellungen" /
"Wunschliste" / "Offene Sendungen" blendet alle anderen Bereiche komplett
aus und zeigt nur den ausgewählten. "Offene Sendungen" filtert zusätzlich
innerhalb der Bestellungen auf noch nicht abgeschlossene. Der aktive Tab
bleibt farbig hinterlegt und unterstrichen erkennbar. Start-Ansicht:
Bestellungen-Tab aktiv.

Co-Authored-By: Claude Sonnet 5 <[email protected]>
This commit is contained in:
qcigano
2026-08-03 13:33:31 +02:00
co-authored by Claude Sonnet 5
parent fd7b5f4ea5
commit b5be6e0e61
6 changed files with 206 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/global.css
+14 -4
View File
@@ -1332,10 +1332,11 @@ a:focus-visible, button:focus-visible {
}
@media (max-width: 500px) { .account-head-identity { flex-wrap: wrap; } }
/* Kontobereich-Schnellnavigation: statt drei einzelner, loser Kästchen EINE zusammenhängende
Leiste direkt über den zugehörigen Abschnitten — jedes Segment ist ein echter Sprunglink zum
passenden Bereich weiter unten (Bestellungen/Wunschliste), mit eigener Akzentfarbe und Icon,
die zur jeweiligen Abschnittsüberschrift passen (📦/🩵/🚚 wie schon bei den Bestellstatus-
Icons). Auf Hover/Fokus füllt sich ein farbiger Unterstrich, damit klar ist: das ist klickbar. */
Leiste direkt über den zugehörigen Abschnitten — jedes Segment ist ein echter Filter-Knopf:
Klick zeigt NUR den passenden Bereich (Bestellungen/Wunschliste/nur offene Sendungen) und
blendet den Rest aus, mit eigener Akzentfarbe und Icon passend zur jeweiligen Abschnitts-
überschrift (📦/🩵/🚚 wie schon bei den Bestellstatus-Icons). Der aktive Knopf bleibt farbig
unterstrichen und hinterlegt, damit immer klar ist, welcher Filter gerade aktiv ist. */
.account-nav {
display: flex;
margin-top: 1.2rem;
@@ -1357,6 +1358,13 @@ a:focus-visible, button:focus-visible {
position: relative;
scroll-margin-top: 1.5rem;
transition: background 0.2s var(--ease);
/* Reset, da jetzt <button> statt <a> — soll optisch identisch bleiben. */
border-top: none;
border-right: none;
border-bottom: none;
background-color: transparent;
font: inherit;
cursor: pointer;
}
.account-nav-item + .account-nav-item { border-left: 1px solid rgba(244, 241, 247, 0.12); }
.account-nav-item::after {
@@ -1372,6 +1380,8 @@ a:focus-visible, button:focus-visible {
}
.account-nav-item:hover { background: color-mix(in srgb, var(--nav-color, var(--c-accent)) 14%, transparent); }
.account-nav-item:hover::after, .account-nav-item:focus-visible::after { transform: scaleX(1); }
.account-nav-item.is-active { background: color-mix(in srgb, var(--nav-color, var(--c-accent)) 20%, transparent); }
.account-nav-item.is-active::after { transform: scaleX(1); }
.account-nav-icon { font-size: 1.35rem; }
.account-nav-value { font-family: var(--font-head); font-size: 1.7rem; font-weight: 700; color: var(--nav-color, var(--c-accent)); line-height: 1; }
.account-nav-label { font-size: 0.82rem; color: var(--c-text-muted); text-align: center; }