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

Konto-Dashboard: Statistik-Kästchen zu klickbarer Schnellnavigations-Leiste

Browse Source 
Die drei losen "Bestellungen/Wunschliste/Offene Sendungen"-Kästchen waren
nur Zahlen ohne Verbindung zu den Abschnitten weiter unten. Jetzt sind sie
eine zusammenhängende Leiste direkt über "Meine Bestellungen" — jedes
Segment ist ein echter Sprunglink zum passenden Abschnitt (📦 Bestellungen,
🩵 Wunschliste, 🚚 Offene Sendungen), mit eigener Akzentfarbe je Segment und
einem Hover-Unterstrich, der die Klickbarkeit deutlich macht.

Co-Authored-By: Claude Sonnet 5 <[email protected]>
This commit is contained in:
qcigano
2026-08-03 13:25:38 +02:00
co-authored by Claude Sonnet 5
parent 3c0747eb5b
commit 4b78ebb270
6 changed files with 143 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/global.css
+51 -4
View File
@@ -1331,10 +1331,57 @@ a:focus-visible, button:focus-visible {
flex-shrink: 0;
}
@media (max-width: 500px) { .account-head-identity { flex-wrap: wrap; } }
.account-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.2rem; }
.account-stat { text-align: center; display: flex; flex-direction: column; gap: 0.25rem; padding: 1.2rem 1rem; }
.account-stat-value { font-family: var(--font-head); font-size: 1.9rem; font-weight: 700; color: var(--c-accent); line-height: 1; }
@media (max-width: 620px) { .account-stats { grid-template-columns: 1fr; } }
/* 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. */
.account-nav {
display: flex;
margin-top: 1.2rem;
border-radius: var(--radius-l);
overflow: hidden;
border: 1.5px solid rgba(244, 241, 247, 0.14);
background: linear-gradient(155deg, var(--c-anthracite-light), var(--c-anthracite));
box-shadow: 0 12px 28px -18px rgba(0, 0, 0, 0.65);
}
.account-nav-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.2rem;
padding: 1.15rem 1rem;
text-decoration: none;
color: var(--c-text);
position: relative;
scroll-margin-top: 1.5rem;
transition: background 0.2s var(--ease);
}
.account-nav-item + .account-nav-item { border-left: 1px solid rgba(244, 241, 247, 0.12); }
.account-nav-item::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 3px;
background: var(--nav-color, var(--c-accent));
transform: scaleX(0);
transition: transform 0.25s var(--ease);
}
.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-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; }
.account-nav-orders { --nav-color: #9b7fd6; }
.account-nav-wishlist { --nav-color: var(--c-sale); }
.account-nav-open { --nav-color: var(--c-accent); }
@media (max-width: 560px) {
.account-nav { flex-direction: column; }
.account-nav-item + .account-nav-item { border-left: none; border-top: 1px solid rgba(244, 241, 247, 0.12); }
}
.order-list { display: flex; flex-direction: column; gap: 1.1rem; }
.order-card { display: flex; flex-direction: column; gap: 0.9rem; }