diff --git a/variety/variety-shows.html b/variety/variety-shows.html index b26619c..8ec049e 100644 --- a/variety/variety-shows.html +++ b/variety/variety-shows.html @@ -28,22 +28,75 @@ overflow: hidden; } - body.variety-shows-page .variety-shows-heading { - display: block; - margin: 0 0 1.25rem; - font-size: clamp(1.15rem, 2.5vw, 1.5rem); - font-weight: 900; - text-align: center; - color: #333; - letter-spacing: 0.04em; - } - - body.variety-shows-page .variety-shows-tabs { + body.variety-shows-page .variety-shows-toolbar { display: flex; flex-wrap: wrap; - justify-content: center; + align-items: center; + justify-content: flex-start; + gap: 12px 16px; + width: 100%; + max-width: 1200px; + margin: 40px auto; + padding: 0 20px; + box-sizing: border-box; + position: relative; + z-index: 1; + } + + body.variety-shows-page .variety-shows-toolbar .variety-shows-tabs { + display: flex; + flex-wrap: wrap; + justify-content: flex-start; gap: 10px; - margin: 0 0 1.5rem; + margin: 0; + flex: 0 1 auto; + } + + body.variety-shows-page .variety-shows-toolbar .search-input { + width: auto; + flex: 1 1 220px; + max-width: 400px; + min-width: 160px; + margin: 0 0 0 auto; + } + + body.variety-shows-page .variety-shows-year-nav { + display: flex; + flex-wrap: wrap; + justify-content: flex-start; + gap: 8px; + margin: 0 0 1.25rem; + padding: 0; + list-style: none; + } + + body.variety-shows-page .variety-shows-year-nav button { + border: 1px solid #e0e0e0; + background: #fafafa; + color: #333; + font-weight: 700; + font-size: 0.9rem; + padding: 8px 14px; + border-radius: 999px; + cursor: pointer; + font-family: inherit; + } + + body.variety-shows-page .variety-shows-year-nav button:hover, + body.variety-shows-page .variety-shows-year-nav button:focus-visible { + border-color: #ffcc00; + background: #fff9e0; + outline: none; + } + + body.variety-shows-page .variety-shows-year-nav button.is-active { + border-color: #ffcc00; + background: #ffcc00; + color: #2f2f2f; + } + + body.variety-shows-page .variety-shows-year-nav[hidden] { + display: none; } body.variety-shows-page .variety-shows-table-slot[hidden] { @@ -267,24 +320,29 @@ -
+
+
+ + + +
-
+
-

全員發瘋

- -
- - - -
+
@@ -715,6 +773,10 @@ const tabBtns = document.querySelectorAll(".variety-shows-tabs .tab-btn"); const slots = document.querySelectorAll(".variety-shows-table-slot"); const input = document.getElementById("variety-shows-search"); + const yearNav = document.querySelector(".variety-shows-year-nav"); + const yearNavBtns = yearNav + ? yearNav.querySelectorAll("button[data-year]") + : []; const hashToTab = { "captain-brothers": "captain", "each-rampage": "solo", @@ -734,6 +796,35 @@ yearRow.classList.toggle("is-open", open); } + function visibleSlotWithYears() { + return Array.from(slots).find( + (slot) => !slot.hidden && slot.querySelector(".variety-table__year-row") + ); + } + + function setActiveYearNav(year) { + yearNavBtns.forEach((btn) => { + btn.classList.toggle("is-active", btn.dataset.year === year); + }); + } + + function openYear(year) { + const slot = visibleSlotWithYears(); + if (!slot) return; + const yearRow = slot.querySelector( + `.variety-table__year-row[data-year="${year}"]` + ); + if (!yearRow) return; + setYearOpen(yearRow, true); + setActiveYearNav(year); + yearRow.scrollIntoView({ behavior: "smooth", block: "nearest" }); + } + + function updateYearNavVisibility(tab) { + if (!yearNav) return; + yearNav.hidden = tab === "solo"; + } + function filterVisibleRows() { const q = (input && input.value.trim().toLowerCase()) || ""; slots.forEach((slot) => { @@ -767,9 +858,16 @@ const yearRow = btn.closest(".variety-table__year-row"); const open = btn.getAttribute("aria-expanded") !== "true"; setYearOpen(yearRow, open); + if (open && yearRow.dataset.year) { + setActiveYearNav(yearRow.dataset.year); + } }); }); + yearNavBtns.forEach((btn) => { + btn.addEventListener("click", () => openYear(btn.dataset.year)); + }); + function showTab(tab) { tabBtns.forEach((btn) => { const on = btn.dataset.tab === tab; @@ -780,6 +878,8 @@ const keys = (slot.dataset.showTabs || "").split(/\s+/); slot.hidden = !keys.includes(tab); }); + updateYearNavVisibility(tab); + if (tab === "solo") setActiveYearNav(""); filterVisibleRows(); }