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
@@ -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";
|
||||
|
||||
Reference in New Issue
Block a user