Konto-Dashboard: kein Tab beim Laden aktiv, "Meine Daten" jetzt auch ein Tab
Bisher war "Bestellungen" beim Öffnen der Seite automatisch aktiv. Jetzt ist standardmäßig KEIN Knopf gedrückt — man muss selbst auswählen, was man sehen möchte. Solange nichts angeklickt ist, steht direkt "Zuletzt angesehen" da. "Meine Daten" ist jetzt ein vierter, gleichwertiger Tab- Knopf (👤, goldener Akzent) statt permanent sichtbar — genau wie Bestellungen/Wunschliste/Offene Sendungen erscheint das Profilformular erst nach Klick. Co-Authored-By: Claude Sonnet 5 <[email protected]>
This commit is contained in:
qcigano
co-authored by
Claude Sonnet 5
Claude Sonnet 5
parent
b5be6e0e61
commit
f8864b39da
+4
-4
@@ -224,7 +224,7 @@ export const ui = {
|
||||
notLoggedIn: "Du bist nicht angemeldet — du wirst zur Anmeldung weitergeleitet …",
|
||||
logout: "Abmelden",
|
||||
navLabel: "Kontobereich-Navigation",
|
||||
statOrders: "Bestellungen", statWishlist: "Wunschliste", statOpen: "Offene Sendungen",
|
||||
statOrders: "Bestellungen", statWishlist: "Wunschliste", statOpen: "Offene Sendungen", statData: "Meine Daten",
|
||||
noOpenOrders: "Aktuell keine offenen Sendungen — alle Bestellungen sind schon angekommen. 🎉",
|
||||
ordersTitle: "📦 Meine Bestellungen",
|
||||
orderNo: "Bestellung", orderDate: "Bestellt am", orderTotal: "Gesamt", orderItems: "Artikel",
|
||||
@@ -457,7 +457,7 @@ export const ui = {
|
||||
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",
|
||||
statOrders: "Orders", statWishlist: "Wishlist", statOpen: "Open shipments", statData: "My details",
|
||||
noOpenOrders: "No open shipments right now — every order has already arrived. 🎉",
|
||||
ordersTitle: "📦 My orders",
|
||||
orderNo: "Order", orderDate: "Ordered on", orderTotal: "Total", orderItems: "Items",
|
||||
@@ -690,7 +690,7 @@ export const ui = {
|
||||
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",
|
||||
statOrders: "Bstellige", statWishlist: "Wunschlischte", statOpen: "Offni Sändige", statData: "Mini Date",
|
||||
noOpenOrders: "Momentan kei offni Sändige — alli Bstellige sind scho aacho. 🎉",
|
||||
ordersTitle: "📦 Mini Bstellige",
|
||||
orderNo: "Bstellig", orderDate: "Bstellt am", orderTotal: "Total", orderItems: "Artikel",
|
||||
@@ -923,7 +923,7 @@ export const ui = {
|
||||
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",
|
||||
statOrders: "Commandes", statWishlist: "Liste de souhaits", statOpen: "Envois en cours", statData: "Mes données",
|
||||
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",
|
||||
|
||||
@@ -95,6 +95,10 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
|
||||
<span class="account-nav-value">{offeneSendungen}</span>
|
||||
<span class="account-nav-label">{t.accountDash.statOpen}</span>
|
||||
</button>
|
||||
<button type="button" class="account-nav-item account-nav-data" data-tab="daten">
|
||||
<span class="account-nav-icon" aria-hidden="true">👤</span>
|
||||
<span class="account-nav-label">{t.accountDash.statData}</span>
|
||||
</button>
|
||||
</nav>
|
||||
</div>
|
||||
</section>
|
||||
@@ -157,7 +161,7 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
|
||||
</section>
|
||||
|
||||
{zuletztAngesehen.length > 0 && (
|
||||
<section class="section-tight">
|
||||
<section class="section-tight" id="zuletzt-angesehen">
|
||||
<div class="container">
|
||||
<h2>{t.accountDash.recentTitle}</h2>
|
||||
<div class="grid grid-3">{zuletztAngesehen.map((p) => <ProductCard product={p} lang={lang} />)}</div>
|
||||
@@ -165,7 +169,7 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
|
||||
</section>
|
||||
)}
|
||||
|
||||
<section class="section-tight">
|
||||
<section class="section-tight" id="meine-daten">
|
||||
<div class="container">
|
||||
<h2>{t.accountDash.profileTitle}</h2>
|
||||
<div class="card profile-card">
|
||||
@@ -224,21 +228,37 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
|
||||
const navItems = Array.from(document.querySelectorAll(".account-nav-item")) as HTMLButtonElement[];
|
||||
const bestellungenSection = document.getElementById("bestellungen");
|
||||
const wunschlisteSection = document.getElementById("wunschliste");
|
||||
const recentSection = document.getElementById("zuletzt-angesehen");
|
||||
const datenSection = document.getElementById("meine-daten");
|
||||
const orderCards = Array.from(document.querySelectorAll(".order-card"));
|
||||
const emptyNote = document.getElementById("orders-empty-note");
|
||||
|
||||
function setActiveTab(tab: string) {
|
||||
// Beim Laden ist noch KEIN Knopf gedrückt — solange nichts angeklickt wurde, steht direkt
|
||||
// "Zuletzt angesehen" da, alle anderen (per Tab umschaltbaren) Bereiche bleiben versteckt.
|
||||
function setActiveTab(tab: string | null) {
|
||||
navItems.forEach((item) => item.classList.toggle("is-active", item.dataset.tab === tab));
|
||||
|
||||
if (bestellungenSection) bestellungenSection.style.display = "none";
|
||||
if (wunschlisteSection) wunschlisteSection.style.display = "none";
|
||||
if (datenSection) datenSection.style.display = "none";
|
||||
if (recentSection) recentSection.style.display = "none";
|
||||
|
||||
if (tab === null) {
|
||||
if (recentSection) recentSection.style.display = "";
|
||||
return;
|
||||
}
|
||||
|
||||
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";
|
||||
if (tab === "daten") {
|
||||
if (datenSection) datenSection.style.display = "";
|
||||
return;
|
||||
}
|
||||
|
||||
if (bestellungenSection) bestellungenSection.style.display = "";
|
||||
let visibleCount = 0;
|
||||
orderCards.forEach((card) => {
|
||||
const status = OFFENE_STATUS.find((s) => card.classList.contains("order-card-" + s));
|
||||
@@ -253,7 +273,7 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
|
||||
item.addEventListener("click", () => { if (item.dataset.tab) setActiveTab(item.dataset.tab); });
|
||||
});
|
||||
|
||||
setActiveTab("bestellungen");
|
||||
setActiveTab(null);
|
||||
</script>
|
||||
<script>
|
||||
import { getAccount, isLoggedIn, logout, setName, setUsername, setPhoto, hatBestellungBewertet, anzeigeName } from "../../../scripts/account";
|
||||
|
||||
@@ -95,6 +95,10 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
|
||||
<span class="account-nav-value">{offeneSendungen}</span>
|
||||
<span class="account-nav-label">{t.accountDash.statOpen}</span>
|
||||
</button>
|
||||
<button type="button" class="account-nav-item account-nav-data" data-tab="daten">
|
||||
<span class="account-nav-icon" aria-hidden="true">👤</span>
|
||||
<span class="account-nav-label">{t.accountDash.statData}</span>
|
||||
</button>
|
||||
</nav>
|
||||
</div>
|
||||
</section>
|
||||
@@ -157,7 +161,7 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
|
||||
</section>
|
||||
|
||||
{zuletztAngesehen.length > 0 && (
|
||||
<section class="section-tight">
|
||||
<section class="section-tight" id="zuletzt-angesehen">
|
||||
<div class="container">
|
||||
<h2>{t.accountDash.recentTitle}</h2>
|
||||
<div class="grid grid-3">{zuletztAngesehen.map((p) => <ProductCard product={p} lang={lang} />)}</div>
|
||||
@@ -165,7 +169,7 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
|
||||
</section>
|
||||
)}
|
||||
|
||||
<section class="section-tight">
|
||||
<section class="section-tight" id="meine-daten">
|
||||
<div class="container">
|
||||
<h2>{t.accountDash.profileTitle}</h2>
|
||||
<div class="card profile-card">
|
||||
@@ -224,21 +228,37 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
|
||||
const navItems = Array.from(document.querySelectorAll(".account-nav-item")) as HTMLButtonElement[];
|
||||
const bestellungenSection = document.getElementById("bestellungen");
|
||||
const wunschlisteSection = document.getElementById("wunschliste");
|
||||
const recentSection = document.getElementById("zuletzt-angesehen");
|
||||
const datenSection = document.getElementById("meine-daten");
|
||||
const orderCards = Array.from(document.querySelectorAll(".order-card"));
|
||||
const emptyNote = document.getElementById("orders-empty-note");
|
||||
|
||||
function setActiveTab(tab: string) {
|
||||
// Beim Laden ist noch KEIN Knopf gedrückt — solange nichts angeklickt wurde, steht direkt
|
||||
// "Zuletzt angesehen" da, alle anderen (per Tab umschaltbaren) Bereiche bleiben versteckt.
|
||||
function setActiveTab(tab: string | null) {
|
||||
navItems.forEach((item) => item.classList.toggle("is-active", item.dataset.tab === tab));
|
||||
|
||||
if (bestellungenSection) bestellungenSection.style.display = "none";
|
||||
if (wunschlisteSection) wunschlisteSection.style.display = "none";
|
||||
if (datenSection) datenSection.style.display = "none";
|
||||
if (recentSection) recentSection.style.display = "none";
|
||||
|
||||
if (tab === null) {
|
||||
if (recentSection) recentSection.style.display = "";
|
||||
return;
|
||||
}
|
||||
|
||||
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";
|
||||
if (tab === "daten") {
|
||||
if (datenSection) datenSection.style.display = "";
|
||||
return;
|
||||
}
|
||||
|
||||
if (bestellungenSection) bestellungenSection.style.display = "";
|
||||
let visibleCount = 0;
|
||||
orderCards.forEach((card) => {
|
||||
const status = OFFENE_STATUS.find((s) => card.classList.contains("order-card-" + s));
|
||||
@@ -253,7 +273,7 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
|
||||
item.addEventListener("click", () => { if (item.dataset.tab) setActiveTab(item.dataset.tab); });
|
||||
});
|
||||
|
||||
setActiveTab("bestellungen");
|
||||
setActiveTab(null);
|
||||
</script>
|
||||
<script>
|
||||
import { getAccount, isLoggedIn, logout, setName, setUsername, setPhoto, hatBestellungBewertet, anzeigeName } from "../../../scripts/account";
|
||||
|
||||
@@ -95,6 +95,10 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
|
||||
<span class="account-nav-value">{offeneSendungen}</span>
|
||||
<span class="account-nav-label">{t.accountDash.statOpen}</span>
|
||||
</button>
|
||||
<button type="button" class="account-nav-item account-nav-data" data-tab="daten">
|
||||
<span class="account-nav-icon" aria-hidden="true">👤</span>
|
||||
<span class="account-nav-label">{t.accountDash.statData}</span>
|
||||
</button>
|
||||
</nav>
|
||||
</div>
|
||||
</section>
|
||||
@@ -157,7 +161,7 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
|
||||
</section>
|
||||
|
||||
{zuletztAngesehen.length > 0 && (
|
||||
<section class="section-tight">
|
||||
<section class="section-tight" id="zuletzt-angesehen">
|
||||
<div class="container">
|
||||
<h2>{t.accountDash.recentTitle}</h2>
|
||||
<div class="grid grid-3">{zuletztAngesehen.map((p) => <ProductCard product={p} lang={lang} />)}</div>
|
||||
@@ -165,7 +169,7 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
|
||||
</section>
|
||||
)}
|
||||
|
||||
<section class="section-tight">
|
||||
<section class="section-tight" id="meine-daten">
|
||||
<div class="container">
|
||||
<h2>{t.accountDash.profileTitle}</h2>
|
||||
<div class="card profile-card">
|
||||
@@ -224,21 +228,37 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
|
||||
const navItems = Array.from(document.querySelectorAll(".account-nav-item")) as HTMLButtonElement[];
|
||||
const bestellungenSection = document.getElementById("bestellungen");
|
||||
const wunschlisteSection = document.getElementById("wunschliste");
|
||||
const recentSection = document.getElementById("zuletzt-angesehen");
|
||||
const datenSection = document.getElementById("meine-daten");
|
||||
const orderCards = Array.from(document.querySelectorAll(".order-card"));
|
||||
const emptyNote = document.getElementById("orders-empty-note");
|
||||
|
||||
function setActiveTab(tab: string) {
|
||||
// Beim Laden ist noch KEIN Knopf gedrückt — solange nichts angeklickt wurde, steht direkt
|
||||
// "Zuletzt angesehen" da, alle anderen (per Tab umschaltbaren) Bereiche bleiben versteckt.
|
||||
function setActiveTab(tab: string | null) {
|
||||
navItems.forEach((item) => item.classList.toggle("is-active", item.dataset.tab === tab));
|
||||
|
||||
if (bestellungenSection) bestellungenSection.style.display = "none";
|
||||
if (wunschlisteSection) wunschlisteSection.style.display = "none";
|
||||
if (datenSection) datenSection.style.display = "none";
|
||||
if (recentSection) recentSection.style.display = "none";
|
||||
|
||||
if (tab === null) {
|
||||
if (recentSection) recentSection.style.display = "";
|
||||
return;
|
||||
}
|
||||
|
||||
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";
|
||||
if (tab === "daten") {
|
||||
if (datenSection) datenSection.style.display = "";
|
||||
return;
|
||||
}
|
||||
|
||||
if (bestellungenSection) bestellungenSection.style.display = "";
|
||||
let visibleCount = 0;
|
||||
orderCards.forEach((card) => {
|
||||
const status = OFFENE_STATUS.find((s) => card.classList.contains("order-card-" + s));
|
||||
@@ -253,7 +273,7 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
|
||||
item.addEventListener("click", () => { if (item.dataset.tab) setActiveTab(item.dataset.tab); });
|
||||
});
|
||||
|
||||
setActiveTab("bestellungen");
|
||||
setActiveTab(null);
|
||||
</script>
|
||||
<script>
|
||||
import { getAccount, isLoggedIn, logout, setName, setUsername, setPhoto, hatBestellungBewertet, anzeigeName } from "../../../scripts/account";
|
||||
|
||||
@@ -95,6 +95,10 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
|
||||
<span class="account-nav-value">{offeneSendungen}</span>
|
||||
<span class="account-nav-label">{t.accountDash.statOpen}</span>
|
||||
</button>
|
||||
<button type="button" class="account-nav-item account-nav-data" data-tab="daten">
|
||||
<span class="account-nav-icon" aria-hidden="true">👤</span>
|
||||
<span class="account-nav-label">{t.accountDash.statData}</span>
|
||||
</button>
|
||||
</nav>
|
||||
</div>
|
||||
</section>
|
||||
@@ -157,7 +161,7 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
|
||||
</section>
|
||||
|
||||
{zuletztAngesehen.length > 0 && (
|
||||
<section class="section-tight">
|
||||
<section class="section-tight" id="zuletzt-angesehen">
|
||||
<div class="container">
|
||||
<h2>{t.accountDash.recentTitle}</h2>
|
||||
<div class="grid grid-3">{zuletztAngesehen.map((p) => <ProductCard product={p} lang={lang} />)}</div>
|
||||
@@ -165,7 +169,7 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
|
||||
</section>
|
||||
)}
|
||||
|
||||
<section class="section-tight">
|
||||
<section class="section-tight" id="meine-daten">
|
||||
<div class="container">
|
||||
<h2>{t.accountDash.profileTitle}</h2>
|
||||
<div class="card profile-card">
|
||||
@@ -224,21 +228,37 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
|
||||
const navItems = Array.from(document.querySelectorAll(".account-nav-item")) as HTMLButtonElement[];
|
||||
const bestellungenSection = document.getElementById("bestellungen");
|
||||
const wunschlisteSection = document.getElementById("wunschliste");
|
||||
const recentSection = document.getElementById("zuletzt-angesehen");
|
||||
const datenSection = document.getElementById("meine-daten");
|
||||
const orderCards = Array.from(document.querySelectorAll(".order-card"));
|
||||
const emptyNote = document.getElementById("orders-empty-note");
|
||||
|
||||
function setActiveTab(tab: string) {
|
||||
// Beim Laden ist noch KEIN Knopf gedrückt — solange nichts angeklickt wurde, steht direkt
|
||||
// "Zuletzt angesehen" da, alle anderen (per Tab umschaltbaren) Bereiche bleiben versteckt.
|
||||
function setActiveTab(tab: string | null) {
|
||||
navItems.forEach((item) => item.classList.toggle("is-active", item.dataset.tab === tab));
|
||||
|
||||
if (bestellungenSection) bestellungenSection.style.display = "none";
|
||||
if (wunschlisteSection) wunschlisteSection.style.display = "none";
|
||||
if (datenSection) datenSection.style.display = "none";
|
||||
if (recentSection) recentSection.style.display = "none";
|
||||
|
||||
if (tab === null) {
|
||||
if (recentSection) recentSection.style.display = "";
|
||||
return;
|
||||
}
|
||||
|
||||
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";
|
||||
if (tab === "daten") {
|
||||
if (datenSection) datenSection.style.display = "";
|
||||
return;
|
||||
}
|
||||
|
||||
if (bestellungenSection) bestellungenSection.style.display = "";
|
||||
let visibleCount = 0;
|
||||
orderCards.forEach((card) => {
|
||||
const status = OFFENE_STATUS.find((s) => card.classList.contains("order-card-" + s));
|
||||
@@ -253,7 +273,7 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend
|
||||
item.addEventListener("click", () => { if (item.dataset.tab) setActiveTab(item.dataset.tab); });
|
||||
});
|
||||
|
||||
setActiveTab("bestellungen");
|
||||
setActiveTab(null);
|
||||
</script>
|
||||
<script>
|
||||
import { getAccount, isLoggedIn, logout, setName, setUsername, setPhoto, hatBestellungBewertet, anzeigeName } from "../../scripts/account";
|
||||
|
||||
@@ -1388,6 +1388,7 @@ a:focus-visible, button:focus-visible {
|
||||
.account-nav-orders { --nav-color: #9b7fd6; }
|
||||
.account-nav-wishlist { --nav-color: var(--c-sale); }
|
||||
.account-nav-open { --nav-color: var(--c-accent); }
|
||||
.account-nav-data { --nav-color: #e3b23c; }
|
||||
@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); }
|
||||
|
||||
Reference in New Issue
Block a user