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/pages/ch/konto/angemeldet.astro
+22 -16
View File
@@ -76,24 +76,30 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
<button type="button" class="btn btn-outline btn-sm" id="dash-logout-btn">{t.accountDash.logout}</button>
</div>
<div class="account-stats">
<div class="card account-stat">
<span class="account-stat-value">{beispielBestellungen.length}</span>
<span class="small">{t.accountDash.statOrders}</span>
</div>
<div class="card account-stat">
<span class="account-stat-value">0</span>
<span class="small">{t.accountDash.statWishlist}</span>
</div>
<div class="card account-stat">
<span class="account-stat-value">{offeneSendungen}</span>
<span class="small">{t.accountDash.statOpen}</span>
</div>
</div>
{/* Schnellnavigation: eine zusammenhängende Leiste direkt über "Meine Bestellungen" /
"Meine Wunschliste" statt drei loser Kästchen — jedes Segment springt zum passenden
Abschnitt weiter unten, Icon und Akzentfarbe passen zur jeweiligen Überschrift. */}
<nav class="account-nav" aria-label={t.accountDash.navLabel}>
<a class="account-nav-item account-nav-orders" href="#bestellungen">
<span class="account-nav-icon" aria-hidden="true">📦</span>
<span class="account-nav-value">{beispielBestellungen.length}</span>
<span class="account-nav-label">{t.accountDash.statOrders}</span>
</a>
<a class="account-nav-item account-nav-wishlist" href="#wunschliste">
<span class="account-nav-icon" aria-hidden="true">🩵</span>
<span class="account-nav-value">0</span>
<span class="account-nav-label">{t.accountDash.statWishlist}</span>
</a>
<a class="account-nav-item account-nav-open" href="#bestellungen">
<span class="account-nav-icon" aria-hidden="true">🚚</span>
<span class="account-nav-value">{offeneSendungen}</span>
<span class="account-nav-label">{t.accountDash.statOpen}</span>
</a>
</nav>
</div>
</section>
<section class="section-tight">
<section class="section-tight" id="bestellungen">
<div class="container">
<h2>{t.accountDash.ordersTitle}</h2>
<div class="order-list">
@@ -140,7 +146,7 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
</div>
</section>
<section class="section-tight">
<section class="section-tight" id="wunschliste">
<div class="container">
<h2>{t.accountDash.wishlistTitle}</h2>
<div class="card">
src/pages/en/konto/angemeldet.astro
+22 -16
View File
@@ -76,24 +76,30 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
<button type="button" class="btn btn-outline btn-sm" id="dash-logout-btn">{t.accountDash.logout}</button>
</div>
<div class="account-stats">
<div class="card account-stat">
<span class="account-stat-value">{beispielBestellungen.length}</span>
<span class="small">{t.accountDash.statOrders}</span>
</div>
<div class="card account-stat">
<span class="account-stat-value">0</span>
<span class="small">{t.accountDash.statWishlist}</span>
</div>
<div class="card account-stat">
<span class="account-stat-value">{offeneSendungen}</span>
<span class="small">{t.accountDash.statOpen}</span>
</div>
</div>
{/* Schnellnavigation: eine zusammenhängende Leiste direkt über "Meine Bestellungen" /
"Meine Wunschliste" statt drei loser Kästchen — jedes Segment springt zum passenden
Abschnitt weiter unten, Icon und Akzentfarbe passen zur jeweiligen Überschrift. */}
<nav class="account-nav" aria-label={t.accountDash.navLabel}>
<a class="account-nav-item account-nav-orders" href="#bestellungen">
<span class="account-nav-icon" aria-hidden="true">📦</span>
<span class="account-nav-value">{beispielBestellungen.length}</span>
<span class="account-nav-label">{t.accountDash.statOrders}</span>
</a>
<a class="account-nav-item account-nav-wishlist" href="#wunschliste">
<span class="account-nav-icon" aria-hidden="true">🩵</span>
<span class="account-nav-value">0</span>
<span class="account-nav-label">{t.accountDash.statWishlist}</span>
</a>
<a class="account-nav-item account-nav-open" href="#bestellungen">
<span class="account-nav-icon" aria-hidden="true">🚚</span>
<span class="account-nav-value">{offeneSendungen}</span>
<span class="account-nav-label">{t.accountDash.statOpen}</span>
</a>
</nav>
</div>
</section>
<section class="section-tight">
<section class="section-tight" id="bestellungen">
<div class="container">
<h2>{t.accountDash.ordersTitle}</h2>
<div class="order-list">
@@ -140,7 +146,7 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
</div>
</section>
<section class="section-tight">
<section class="section-tight" id="wunschliste">
<div class="container">
<h2>{t.accountDash.wishlistTitle}</h2>
<div class="card">
src/pages/fr/konto/angemeldet.astro
+22 -16
View File
@@ -76,24 +76,30 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
<button type="button" class="btn btn-outline btn-sm" id="dash-logout-btn">{t.accountDash.logout}</button>
</div>
<div class="account-stats">
<div class="card account-stat">
<span class="account-stat-value">{beispielBestellungen.length}</span>
<span class="small">{t.accountDash.statOrders}</span>
</div>
<div class="card account-stat">
<span class="account-stat-value">0</span>
<span class="small">{t.accountDash.statWishlist}</span>
</div>
<div class="card account-stat">
<span class="account-stat-value">{offeneSendungen}</span>
<span class="small">{t.accountDash.statOpen}</span>
</div>
</div>
{/* Schnellnavigation: eine zusammenhängende Leiste direkt über "Meine Bestellungen" /
"Meine Wunschliste" statt drei loser Kästchen — jedes Segment springt zum passenden
Abschnitt weiter unten, Icon und Akzentfarbe passen zur jeweiligen Überschrift. */}
<nav class="account-nav" aria-label={t.accountDash.navLabel}>
<a class="account-nav-item account-nav-orders" href="#bestellungen">
<span class="account-nav-icon" aria-hidden="true">📦</span>
<span class="account-nav-value">{beispielBestellungen.length}</span>
<span class="account-nav-label">{t.accountDash.statOrders}</span>
</a>
<a class="account-nav-item account-nav-wishlist" href="#wunschliste">
<span class="account-nav-icon" aria-hidden="true">🩵</span>
<span class="account-nav-value">0</span>
<span class="account-nav-label">{t.accountDash.statWishlist}</span>
</a>
<a class="account-nav-item account-nav-open" href="#bestellungen">
<span class="account-nav-icon" aria-hidden="true">🚚</span>
<span class="account-nav-value">{offeneSendungen}</span>
<span class="account-nav-label">{t.accountDash.statOpen}</span>
</a>
</nav>
</div>
</section>
<section class="section-tight">
<section class="section-tight" id="bestellungen">
<div class="container">
<h2>{t.accountDash.ordersTitle}</h2>
<div class="order-list">
@@ -140,7 +146,7 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
</div>
</section>
<section class="section-tight">
<section class="section-tight" id="wunschliste">
<div class="container">
<h2>{t.accountDash.wishlistTitle}</h2>
<div class="card">
src/pages/konto/angemeldet.astro
+22 -16
View File
@@ -76,24 +76,30 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
<button type="button" class="btn btn-outline btn-sm" id="dash-logout-btn">{t.accountDash.logout}</button>
</div>
<div class="account-stats">
<div class="card account-stat">
<span class="account-stat-value">{beispielBestellungen.length}</span>
<span class="small">{t.accountDash.statOrders}</span>
</div>
<div class="card account-stat">
<span class="account-stat-value">0</span>
<span class="small">{t.accountDash.statWishlist}</span>
</div>
<div class="card account-stat">
<span class="account-stat-value">{offeneSendungen}</span>
<span class="small">{t.accountDash.statOpen}</span>
</div>
</div>
{/* Schnellnavigation: eine zusammenhängende Leiste direkt über "Meine Bestellungen" /
"Meine Wunschliste" statt drei loser Kästchen — jedes Segment springt zum passenden
Abschnitt weiter unten, Icon und Akzentfarbe passen zur jeweiligen Überschrift. */}
<nav class="account-nav" aria-label={t.accountDash.navLabel}>
<a class="account-nav-item account-nav-orders" href="#bestellungen">
<span class="account-nav-icon" aria-hidden="true">📦</span>
<span class="account-nav-value">{beispielBestellungen.length}</span>
<span class="account-nav-label">{t.accountDash.statOrders}</span>
</a>
<a class="account-nav-item account-nav-wishlist" href="#wunschliste">
<span class="account-nav-icon" aria-hidden="true">🩵</span>
<span class="account-nav-value">0</span>
<span class="account-nav-label">{t.accountDash.statWishlist}</span>
</a>
<a class="account-nav-item account-nav-open" href="#bestellungen">
<span class="account-nav-icon" aria-hidden="true">🚚</span>
<span class="account-nav-value">{offeneSendungen}</span>
<span class="account-nav-label">{t.accountDash.statOpen}</span>
</a>
</nav>
</div>
</section>
<section class="section-tight">
<section class="section-tight" id="bestellungen">
<div class="container">
<h2>{t.accountDash.ordersTitle}</h2>
<div class="order-list">
@@ -140,7 +146,7 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
</div>
</section>
<section class="section-tight">
<section class="section-tight" id="wunschliste">
<div class="container">
<h2>{t.accountDash.wishlistTitle}</h2>
<div class="card">