diff --git a/src/i18n/ui.ts b/src/i18n/ui.ts index 13a5378..5ccf35c 100644 --- a/src/i18n/ui.ts +++ b/src/i18n/ui.ts @@ -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", diff --git a/src/pages/ch/konto/angemeldet.astro b/src/pages/ch/konto/angemeldet.astro index a0ea298..264aeb8 100644 --- a/src/pages/ch/konto/angemeldet.astro +++ b/src/pages/ch/konto/angemeldet.astro @@ -76,24 +76,30 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend -
-
- - {t.accountDash.statOrders} -
-
- - {t.accountDash.statWishlist} -
-
- - {t.accountDash.statOpen} -
-
+ {/* 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. */} + -
+

{t.accountDash.ordersTitle}

@@ -140,7 +146,7 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
-
+

{t.accountDash.wishlistTitle}

diff --git a/src/pages/en/konto/angemeldet.astro b/src/pages/en/konto/angemeldet.astro index c258b62..6120f07 100644 --- a/src/pages/en/konto/angemeldet.astro +++ b/src/pages/en/konto/angemeldet.astro @@ -76,24 +76,30 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
- + {/* 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. */} +
-
+

{t.accountDash.ordersTitle}

@@ -140,7 +146,7 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
-
+

{t.accountDash.wishlistTitle}

diff --git a/src/pages/fr/konto/angemeldet.astro b/src/pages/fr/konto/angemeldet.astro index 775ecb3..e0bd48e 100644 --- a/src/pages/fr/konto/angemeldet.astro +++ b/src/pages/fr/konto/angemeldet.astro @@ -76,24 +76,30 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
- + {/* 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. */} +
-
+

{t.accountDash.ordersTitle}

@@ -140,7 +146,7 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
-
+

{t.accountDash.wishlistTitle}

diff --git a/src/pages/konto/angemeldet.astro b/src/pages/konto/angemeldet.astro index 2f39ff1..33f69d4 100644 --- a/src/pages/konto/angemeldet.astro +++ b/src/pages/konto/angemeldet.astro @@ -76,24 +76,30 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
- + {/* 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. */} +
-
+

{t.accountDash.ordersTitle}

@@ -140,7 +146,7 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
-
+

{t.accountDash.wishlistTitle}

diff --git a/src/styles/global.css b/src/styles/global.css index f556037..7742a4f 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -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; }