Konto-Dashboard: Statistik-Kästchen zu klickbarer Schnellnavigations-Leiste
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
co-authored by
Claude Sonnet 5
Claude Sonnet 5
parent
3c0747eb5b
commit
4b78ebb270
@@ -223,6 +223,7 @@ export const ui = {
|
||||
previewNote: "Phase 1: Deine Anmeldung, dein Profil und deine Rezensionen werden schon jetzt echt auf diesem Gerät gespeichert. Nur die Bestellungen unten sind Beispieldaten zur Gestaltung — echte Bestellungen kommen in Phase 2 mit Zahlungsanbindung und Datenbank (Cloudflare Worker + D1).",
|
||||
notLoggedIn: "Du bist nicht angemeldet — du wirst zur Anmeldung weitergeleitet …",
|
||||
logout: "Abmelden",
|
||||
navLabel: "Kontobereich-Navigation",
|
||||
statOrders: "Bestellungen", statWishlist: "Wunschliste", statOpen: "Offene Sendungen",
|
||||
ordersTitle: "📦 Meine Bestellungen",
|
||||
orderNo: "Bestellung", orderDate: "Bestellt am", orderTotal: "Gesamt", orderItems: "Artikel",
|
||||
@@ -454,6 +455,7 @@ export const ui = {
|
||||
previewNote: "Phase 1: your sign-in, your profile and your reviews are already genuinely saved on this device. Only the orders below are example data for design purposes — real orders arrive in Phase 2 with payment integration and a database (Cloudflare Worker + D1).",
|
||||
notLoggedIn: "You're not signed in — redirecting you to sign in …",
|
||||
logout: "Sign out",
|
||||
navLabel: "Account section navigation",
|
||||
statOrders: "Orders", statWishlist: "Wishlist", statOpen: "Open shipments",
|
||||
ordersTitle: "📦 My orders",
|
||||
orderNo: "Order", orderDate: "Ordered on", orderTotal: "Total", orderItems: "Items",
|
||||
@@ -685,6 +687,7 @@ export const ui = {
|
||||
previewNote: "Phase 1: dini Aamäldig, dis Profil und dini Bewärtige werde scho jetzt echt uf däm Gerät gspeicheret. Nume d'Bstellige unde sind Bispieldate für d'Gstaltig — echti Bstellige chöme i Phase 2 mit Zahligsaabindig und Datebank (Cloudflare Worker + D1).",
|
||||
notLoggedIn: "Du bisch nid aagmäldet — du wirsch zur Aamäldig wytergleitet …",
|
||||
logout: "Abmälde",
|
||||
navLabel: "Kontobereich-Navigation",
|
||||
statOrders: "Bstellige", statWishlist: "Wunschlischte", statOpen: "Offni Sändige",
|
||||
ordersTitle: "📦 Mini Bstellige",
|
||||
orderNo: "Bstellig", orderDate: "Bstellt am", orderTotal: "Total", orderItems: "Artikel",
|
||||
@@ -916,6 +919,7 @@ export const ui = {
|
||||
previewNote: "Phase 1 : votre connexion, votre profil et vos avis sont déjà réellement enregistrés sur cet appareil. Seules les commandes ci-dessous sont des exemples destinés à la conception — les vraies commandes arriveront en phase 2 avec le paiement et une base de données (Cloudflare Worker + D1).",
|
||||
notLoggedIn: "Vous n'êtes pas connecté(e) — redirection vers la connexion …",
|
||||
logout: "Se déconnecter",
|
||||
navLabel: "Navigation de l'espace client",
|
||||
statOrders: "Commandes", statWishlist: "Liste de souhaits", statOpen: "Envois en cours",
|
||||
ordersTitle: "📦 Mes commandes",
|
||||
orderNo: "Commande", orderDate: "Commandé le", orderTotal: "Total", orderItems: "Articles",
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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">
|
||||
|
||||
+51
-4
@@ -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; }
|
||||
|
||||
Reference in New Issue
Block a user