Konto-Navigation: Klick zeigt jetzt wirklich NUR den passenden Bereich
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
co-authored by
Claude Sonnet 5
Claude Sonnet 5
parent
fd7b5f4ea5
commit
b5be6e0e61
@@ -225,6 +225,7 @@ export const ui = {
|
||||
logout: "Abmelden",
|
||||
navLabel: "Kontobereich-Navigation",
|
||||
statOrders: "Bestellungen", statWishlist: "Wunschliste", statOpen: "Offene Sendungen",
|
||||
noOpenOrders: "Aktuell keine offenen Sendungen — alle Bestellungen sind schon angekommen. 🎉",
|
||||
ordersTitle: "📦 Meine Bestellungen",
|
||||
orderNo: "Bestellung", orderDate: "Bestellt am", orderTotal: "Gesamt", orderItems: "Artikel",
|
||||
trackingLabel: "Sendungsverfolgung", trackingBtn: "Sendung verfolgen →", invoiceBtn: "Rechnung (PDF)", reorderBtn: "Nochmal bestellen",
|
||||
@@ -457,6 +458,7 @@ export const ui = {
|
||||
logout: "Sign out",
|
||||
navLabel: "Account section navigation",
|
||||
statOrders: "Orders", statWishlist: "Wishlist", statOpen: "Open shipments",
|
||||
noOpenOrders: "No open shipments right now — every order has already arrived. 🎉",
|
||||
ordersTitle: "📦 My orders",
|
||||
orderNo: "Order", orderDate: "Ordered on", orderTotal: "Total", orderItems: "Items",
|
||||
trackingLabel: "Tracking", trackingBtn: "Track shipment →", invoiceBtn: "Invoice (PDF)", reorderBtn: "Order again",
|
||||
@@ -689,6 +691,7 @@ export const ui = {
|
||||
logout: "Abmälde",
|
||||
navLabel: "Kontobereich-Navigation",
|
||||
statOrders: "Bstellige", statWishlist: "Wunschlischte", statOpen: "Offni Sändige",
|
||||
noOpenOrders: "Momentan kei offni Sändige — alli Bstellige sind scho aacho. 🎉",
|
||||
ordersTitle: "📦 Mini Bstellige",
|
||||
orderNo: "Bstellig", orderDate: "Bstellt am", orderTotal: "Total", orderItems: "Artikel",
|
||||
trackingLabel: "Sändigsverfolgig", trackingBtn: "Sändig verfolge →", invoiceBtn: "Rächnig (PDF)", reorderBtn: "Nomal bstelle",
|
||||
@@ -921,6 +924,7 @@ export const ui = {
|
||||
logout: "Se déconnecter",
|
||||
navLabel: "Navigation de l'espace client",
|
||||
statOrders: "Commandes", statWishlist: "Liste de souhaits", statOpen: "Envois en cours",
|
||||
noOpenOrders: "Aucun envoi en cours pour le moment — toutes les commandes sont déjà arrivées. 🎉",
|
||||
ordersTitle: "📦 Mes commandes",
|
||||
orderNo: "Commande", orderDate: "Commandé le", orderTotal: "Total", orderItems: "Articles",
|
||||
trackingLabel: "Suivi", trackingBtn: "Suivre l'envoi →", invoiceBtn: "Facture (PDF)", reorderBtn: "Commander à nouveau",
|
||||
|
||||
@@ -80,21 +80,21 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
|
||||
"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">
|
||||
<button type="button" class="account-nav-item account-nav-orders" data-tab="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">
|
||||
</button>
|
||||
<button type="button" class="account-nav-item account-nav-wishlist" data-tab="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">
|
||||
</button>
|
||||
<button type="button" class="account-nav-item account-nav-open" data-tab="offene">
|
||||
<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>
|
||||
</button>
|
||||
</nav>
|
||||
</div>
|
||||
</section>
|
||||
@@ -102,7 +102,8 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
|
||||
<section class="section-tight" id="bestellungen">
|
||||
<div class="container">
|
||||
<h2>{t.accountDash.ordersTitle}</h2>
|
||||
<div class="order-list">
|
||||
<p class="small" id="orders-empty-note" style="display:none;">{t.accountDash.noOpenOrders}</p>
|
||||
<div class="order-list" id="order-list">
|
||||
{beispielBestellungen.map((b) => (
|
||||
<div class={`card order-card order-card-${b.status}`}>
|
||||
<div class="order-card-head">
|
||||
@@ -215,6 +216,45 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
|
||||
<script define:vars={{ loginPath: "/ch/konto/", fallbackName: "Kundin", greetingTemplate: t.accountDash.greeting("{name}"), reviewedBadgeText: t.accountDash.reviewedBadge }}>
|
||||
window.__accountDashVars = { loginPath, fallbackName, greetingTemplate, reviewedBadgeText };
|
||||
</script>
|
||||
<script>
|
||||
// Schnellnavigation als echte Filter-Tabs: Klick zeigt NUR den passenden Bereich, blendet den
|
||||
// Rest aus (statt nur hinzuspringen). "Offene Sendungen" filtert zusätzlich innerhalb von
|
||||
// "Meine Bestellungen" auf noch nicht abgeschlossene Bestellungen.
|
||||
const OFFENE_STATUS = ["bezahlt", "bearbeitung", "versandVorbereitet", "versendet"];
|
||||
const navItems = Array.from(document.querySelectorAll(".account-nav-item")) as HTMLButtonElement[];
|
||||
const bestellungenSection = document.getElementById("bestellungen");
|
||||
const wunschlisteSection = document.getElementById("wunschliste");
|
||||
const orderCards = Array.from(document.querySelectorAll(".order-card"));
|
||||
const emptyNote = document.getElementById("orders-empty-note");
|
||||
|
||||
function setActiveTab(tab: string) {
|
||||
navItems.forEach((item) => item.classList.toggle("is-active", item.dataset.tab === tab));
|
||||
|
||||
if (tab === "wunschliste") {
|
||||
if (bestellungenSection) bestellungenSection.style.display = "none";
|
||||
if (wunschlisteSection) wunschlisteSection.style.display = "";
|
||||
return;
|
||||
}
|
||||
|
||||
if (bestellungenSection) bestellungenSection.style.display = "";
|
||||
if (wunschlisteSection) wunschlisteSection.style.display = "none";
|
||||
|
||||
let visibleCount = 0;
|
||||
orderCards.forEach((card) => {
|
||||
const status = OFFENE_STATUS.find((s) => card.classList.contains("order-card-" + s));
|
||||
const show = tab === "bestellungen" || (tab === "offene" && !!status);
|
||||
(card as HTMLElement).style.display = show ? "" : "none";
|
||||
if (show) visibleCount++;
|
||||
});
|
||||
if (emptyNote) emptyNote.style.display = tab === "offene" && visibleCount === 0 ? "block" : "none";
|
||||
}
|
||||
|
||||
navItems.forEach((item) => {
|
||||
item.addEventListener("click", () => { if (item.dataset.tab) setActiveTab(item.dataset.tab); });
|
||||
});
|
||||
|
||||
setActiveTab("bestellungen");
|
||||
</script>
|
||||
<script>
|
||||
import { getAccount, isLoggedIn, logout, setName, setUsername, setPhoto, hatBestellungBewertet, anzeigeName } from "../../../scripts/account";
|
||||
const { loginPath, fallbackName, greetingTemplate, reviewedBadgeText } = (window as any).__accountDashVars;
|
||||
|
||||
@@ -80,21 +80,21 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
|
||||
"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">
|
||||
<button type="button" class="account-nav-item account-nav-orders" data-tab="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">
|
||||
</button>
|
||||
<button type="button" class="account-nav-item account-nav-wishlist" data-tab="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">
|
||||
</button>
|
||||
<button type="button" class="account-nav-item account-nav-open" data-tab="offene">
|
||||
<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>
|
||||
</button>
|
||||
</nav>
|
||||
</div>
|
||||
</section>
|
||||
@@ -102,7 +102,8 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
|
||||
<section class="section-tight" id="bestellungen">
|
||||
<div class="container">
|
||||
<h2>{t.accountDash.ordersTitle}</h2>
|
||||
<div class="order-list">
|
||||
<p class="small" id="orders-empty-note" style="display:none;">{t.accountDash.noOpenOrders}</p>
|
||||
<div class="order-list" id="order-list">
|
||||
{beispielBestellungen.map((b) => (
|
||||
<div class={`card order-card order-card-${b.status}`}>
|
||||
<div class="order-card-head">
|
||||
@@ -215,6 +216,45 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
|
||||
<script define:vars={{ loginPath: "/en/konto/", fallbackName: "Customer", greetingTemplate: t.accountDash.greeting("{name}"), reviewedBadgeText: t.accountDash.reviewedBadge }}>
|
||||
window.__accountDashVars = { loginPath, fallbackName, greetingTemplate, reviewedBadgeText };
|
||||
</script>
|
||||
<script>
|
||||
// Schnellnavigation als echte Filter-Tabs: Klick zeigt NUR den passenden Bereich, blendet den
|
||||
// Rest aus (statt nur hinzuspringen). "Offene Sendungen" filtert zusätzlich innerhalb von
|
||||
// "Meine Bestellungen" auf noch nicht abgeschlossene Bestellungen.
|
||||
const OFFENE_STATUS = ["bezahlt", "bearbeitung", "versandVorbereitet", "versendet"];
|
||||
const navItems = Array.from(document.querySelectorAll(".account-nav-item")) as HTMLButtonElement[];
|
||||
const bestellungenSection = document.getElementById("bestellungen");
|
||||
const wunschlisteSection = document.getElementById("wunschliste");
|
||||
const orderCards = Array.from(document.querySelectorAll(".order-card"));
|
||||
const emptyNote = document.getElementById("orders-empty-note");
|
||||
|
||||
function setActiveTab(tab: string) {
|
||||
navItems.forEach((item) => item.classList.toggle("is-active", item.dataset.tab === tab));
|
||||
|
||||
if (tab === "wunschliste") {
|
||||
if (bestellungenSection) bestellungenSection.style.display = "none";
|
||||
if (wunschlisteSection) wunschlisteSection.style.display = "";
|
||||
return;
|
||||
}
|
||||
|
||||
if (bestellungenSection) bestellungenSection.style.display = "";
|
||||
if (wunschlisteSection) wunschlisteSection.style.display = "none";
|
||||
|
||||
let visibleCount = 0;
|
||||
orderCards.forEach((card) => {
|
||||
const status = OFFENE_STATUS.find((s) => card.classList.contains("order-card-" + s));
|
||||
const show = tab === "bestellungen" || (tab === "offene" && !!status);
|
||||
(card as HTMLElement).style.display = show ? "" : "none";
|
||||
if (show) visibleCount++;
|
||||
});
|
||||
if (emptyNote) emptyNote.style.display = tab === "offene" && visibleCount === 0 ? "block" : "none";
|
||||
}
|
||||
|
||||
navItems.forEach((item) => {
|
||||
item.addEventListener("click", () => { if (item.dataset.tab) setActiveTab(item.dataset.tab); });
|
||||
});
|
||||
|
||||
setActiveTab("bestellungen");
|
||||
</script>
|
||||
<script>
|
||||
import { getAccount, isLoggedIn, logout, setName, setUsername, setPhoto, hatBestellungBewertet, anzeigeName } from "../../../scripts/account";
|
||||
const { loginPath, fallbackName, greetingTemplate, reviewedBadgeText } = (window as any).__accountDashVars;
|
||||
|
||||
@@ -80,21 +80,21 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
|
||||
"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">
|
||||
<button type="button" class="account-nav-item account-nav-orders" data-tab="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">
|
||||
</button>
|
||||
<button type="button" class="account-nav-item account-nav-wishlist" data-tab="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">
|
||||
</button>
|
||||
<button type="button" class="account-nav-item account-nav-open" data-tab="offene">
|
||||
<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>
|
||||
</button>
|
||||
</nav>
|
||||
</div>
|
||||
</section>
|
||||
@@ -102,7 +102,8 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
|
||||
<section class="section-tight" id="bestellungen">
|
||||
<div class="container">
|
||||
<h2>{t.accountDash.ordersTitle}</h2>
|
||||
<div class="order-list">
|
||||
<p class="small" id="orders-empty-note" style="display:none;">{t.accountDash.noOpenOrders}</p>
|
||||
<div class="order-list" id="order-list">
|
||||
{beispielBestellungen.map((b) => (
|
||||
<div class={`card order-card order-card-${b.status}`}>
|
||||
<div class="order-card-head">
|
||||
@@ -215,6 +216,45 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
|
||||
<script define:vars={{ loginPath: "/fr/konto/", fallbackName: "Cliente", greetingTemplate: t.accountDash.greeting("{name}"), reviewedBadgeText: t.accountDash.reviewedBadge }}>
|
||||
window.__accountDashVars = { loginPath, fallbackName, greetingTemplate, reviewedBadgeText };
|
||||
</script>
|
||||
<script>
|
||||
// Schnellnavigation als echte Filter-Tabs: Klick zeigt NUR den passenden Bereich, blendet den
|
||||
// Rest aus (statt nur hinzuspringen). "Offene Sendungen" filtert zusätzlich innerhalb von
|
||||
// "Meine Bestellungen" auf noch nicht abgeschlossene Bestellungen.
|
||||
const OFFENE_STATUS = ["bezahlt", "bearbeitung", "versandVorbereitet", "versendet"];
|
||||
const navItems = Array.from(document.querySelectorAll(".account-nav-item")) as HTMLButtonElement[];
|
||||
const bestellungenSection = document.getElementById("bestellungen");
|
||||
const wunschlisteSection = document.getElementById("wunschliste");
|
||||
const orderCards = Array.from(document.querySelectorAll(".order-card"));
|
||||
const emptyNote = document.getElementById("orders-empty-note");
|
||||
|
||||
function setActiveTab(tab: string) {
|
||||
navItems.forEach((item) => item.classList.toggle("is-active", item.dataset.tab === tab));
|
||||
|
||||
if (tab === "wunschliste") {
|
||||
if (bestellungenSection) bestellungenSection.style.display = "none";
|
||||
if (wunschlisteSection) wunschlisteSection.style.display = "";
|
||||
return;
|
||||
}
|
||||
|
||||
if (bestellungenSection) bestellungenSection.style.display = "";
|
||||
if (wunschlisteSection) wunschlisteSection.style.display = "none";
|
||||
|
||||
let visibleCount = 0;
|
||||
orderCards.forEach((card) => {
|
||||
const status = OFFENE_STATUS.find((s) => card.classList.contains("order-card-" + s));
|
||||
const show = tab === "bestellungen" || (tab === "offene" && !!status);
|
||||
(card as HTMLElement).style.display = show ? "" : "none";
|
||||
if (show) visibleCount++;
|
||||
});
|
||||
if (emptyNote) emptyNote.style.display = tab === "offene" && visibleCount === 0 ? "block" : "none";
|
||||
}
|
||||
|
||||
navItems.forEach((item) => {
|
||||
item.addEventListener("click", () => { if (item.dataset.tab) setActiveTab(item.dataset.tab); });
|
||||
});
|
||||
|
||||
setActiveTab("bestellungen");
|
||||
</script>
|
||||
<script>
|
||||
import { getAccount, isLoggedIn, logout, setName, setUsername, setPhoto, hatBestellungBewertet, anzeigeName } from "../../../scripts/account";
|
||||
const { loginPath, fallbackName, greetingTemplate, reviewedBadgeText } = (window as any).__accountDashVars;
|
||||
|
||||
@@ -80,21 +80,21 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
|
||||
"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">
|
||||
<button type="button" class="account-nav-item account-nav-orders" data-tab="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">
|
||||
</button>
|
||||
<button type="button" class="account-nav-item account-nav-wishlist" data-tab="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">
|
||||
</button>
|
||||
<button type="button" class="account-nav-item account-nav-open" data-tab="offene">
|
||||
<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>
|
||||
</button>
|
||||
</nav>
|
||||
</div>
|
||||
</section>
|
||||
@@ -102,7 +102,8 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
|
||||
<section class="section-tight" id="bestellungen">
|
||||
<div class="container">
|
||||
<h2>{t.accountDash.ordersTitle}</h2>
|
||||
<div class="order-list">
|
||||
<p class="small" id="orders-empty-note" style="display:none;">{t.accountDash.noOpenOrders}</p>
|
||||
<div class="order-list" id="order-list">
|
||||
{beispielBestellungen.map((b) => (
|
||||
<div class={`card order-card order-card-${b.status}`}>
|
||||
<div class="order-card-head">
|
||||
@@ -215,6 +216,45 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
|
||||
<script define:vars={{ loginPath: "/konto/", fallbackName: "Kundin", greetingTemplate: t.accountDash.greeting("{name}"), reviewedBadgeText: t.accountDash.reviewedBadge }}>
|
||||
window.__accountDashVars = { loginPath, fallbackName, greetingTemplate, reviewedBadgeText };
|
||||
</script>
|
||||
<script>
|
||||
// Schnellnavigation als echte Filter-Tabs: Klick zeigt NUR den passenden Bereich, blendet den
|
||||
// Rest aus (statt nur hinzuspringen). "Offene Sendungen" filtert zusätzlich innerhalb von
|
||||
// "Meine Bestellungen" auf noch nicht abgeschlossene Bestellungen.
|
||||
const OFFENE_STATUS = ["bezahlt", "bearbeitung", "versandVorbereitet", "versendet"];
|
||||
const navItems = Array.from(document.querySelectorAll(".account-nav-item")) as HTMLButtonElement[];
|
||||
const bestellungenSection = document.getElementById("bestellungen");
|
||||
const wunschlisteSection = document.getElementById("wunschliste");
|
||||
const orderCards = Array.from(document.querySelectorAll(".order-card"));
|
||||
const emptyNote = document.getElementById("orders-empty-note");
|
||||
|
||||
function setActiveTab(tab: string) {
|
||||
navItems.forEach((item) => item.classList.toggle("is-active", item.dataset.tab === tab));
|
||||
|
||||
if (tab === "wunschliste") {
|
||||
if (bestellungenSection) bestellungenSection.style.display = "none";
|
||||
if (wunschlisteSection) wunschlisteSection.style.display = "";
|
||||
return;
|
||||
}
|
||||
|
||||
if (bestellungenSection) bestellungenSection.style.display = "";
|
||||
if (wunschlisteSection) wunschlisteSection.style.display = "none";
|
||||
|
||||
let visibleCount = 0;
|
||||
orderCards.forEach((card) => {
|
||||
const status = OFFENE_STATUS.find((s) => card.classList.contains("order-card-" + s));
|
||||
const show = tab === "bestellungen" || (tab === "offene" && !!status);
|
||||
(card as HTMLElement).style.display = show ? "" : "none";
|
||||
if (show) visibleCount++;
|
||||
});
|
||||
if (emptyNote) emptyNote.style.display = tab === "offene" && visibleCount === 0 ? "block" : "none";
|
||||
}
|
||||
|
||||
navItems.forEach((item) => {
|
||||
item.addEventListener("click", () => { if (item.dataset.tab) setActiveTab(item.dataset.tab); });
|
||||
});
|
||||
|
||||
setActiveTab("bestellungen");
|
||||
</script>
|
||||
<script>
|
||||
import { getAccount, isLoggedIn, logout, setName, setUsername, setPhoto, hatBestellungBewertet, anzeigeName } from "../../scripts/account";
|
||||
const { loginPath, fallbackName, greetingTemplate, reviewedBadgeText } = (window as any).__accountDashVars;
|
||||
|
||||
+14
-4
@@ -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; }
|
||||
|
||||
Reference in New Issue
Block a user