diff --git a/variety/variety-shows.html b/variety/variety-shows.html index 9af0b3b..d56cdf5 100644 --- a/variety/variety-shows.html +++ b/variety/variety-shows.html @@ -122,12 +122,16 @@ color: #444; } - body.variety-shows-page .variety-table__year-panel>.variety-table__show-row:last-child td { - border-bottom: 1px solid #f0f0f0; + body.variety-shows-page .variety-table__year-panel-cell { + padding: 0; + vertical-align: top; + } + + body.variety-shows-page .variety-table__year-panel-row[hidden] { + display: none; } body.variety-shows-page .variety-table__year-panel { - display: block; overflow: hidden; max-height: 0; opacity: 0; @@ -138,31 +142,27 @@ opacity: 1; } - body.variety-shows-page .variety-table__year-panel tr { - display: table; + body.variety-shows-page .variety-table__inner { width: 100%; - table-layout: fixed; + margin: 0; border-collapse: collapse; + table-layout: fixed; + font-size: inherit; + line-height: inherit; + background: transparent; } - body.variety-shows-page .variety-table__year-panel td:nth-child(1) { - width: 22%; + body.variety-shows-page .variety-table__inner tbody td { + padding: 11px 10px; + border: none; + border-bottom: 1px solid #f0f0f0; + text-align: center; + vertical-align: middle; + color: #444; } - body.variety-shows-page .variety-table__year-panel td:nth-child(2) { - width: 10%; - } - - body.variety-shows-page .variety-table__year-panel td:nth-child(3) { - width: 28%; - } - - body.variety-shows-page .variety-table__year-panel td:nth-child(4) { - width: 22%; - } - - body.variety-shows-page .variety-table__year-panel td:nth-child(5) { - width: 18%; + body.variety-shows-page .variety-table__inner .variety-table__show-row:last-child td { + border-bottom: 1px solid #f0f0f0; } @media (prefers-reduced-motion: reduce) { @@ -184,23 +184,22 @@ } body.variety-shows-page .variety-table__year-bar-inner { - position: relative; - display: block; + display: grid; + grid-template-columns: 22% 10% 28% 22% 18%; + align-items: center; width: 100%; min-height: 48px; box-sizing: border-box; } body.variety-shows-page .variety-table__year-toggle { - position: absolute; - left: 50%; - top: 50%; - z-index: 1; + grid-column: 3; + justify-self: center; display: inline-flex; align-items: center; justify-content: center; margin: 0; - padding: 12px 16px; + padding: 12px 10px; border: none; border-radius: 0; background: transparent; @@ -209,20 +208,16 @@ color: #333; text-align: center; white-space: nowrap; - transform: translate(-50%, -50%); box-sizing: border-box; } body.variety-shows-page .variety-table__year-tail { - position: absolute; - right: 16px; - top: 50%; - z-index: 2; + grid-column: 5; + justify-self: center; display: inline-flex; align-items: center; gap: 0; - padding: 0; - transform: translateY(-50%); + padding: 12px 10px; white-space: nowrap; cursor: pointer; } @@ -399,9 +394,18 @@ - - - + + +
+ + + + + + + + + - - + +
+
+ +
@@ -501,9 +508,18 @@
- - - + + +
+ + + + + + + + + - - + +
+
+ +
@@ -575,9 +594,18 @@
- - - + + +
+ + + + + + + + + - - + +
+
+ +
@@ -637,9 +668,18 @@
- - - + + +
+ + + + + + + + + - - + +
+
+ +
@@ -725,9 +768,18 @@
- - - + + +
+ + + + + + + + + - + +
+
+ + + @@ -822,15 +879,25 @@ return text.includes(q); } - function getYearPanel(slot, year) { + function getYearPanelRow(slot, year) { return slot.querySelector( + `.variety-table__year-panel-row[data-year="${year}"]` + ); + } + + function getYearPanel(slot, year) { + return getYearPanelRow(slot, year)?.querySelector( `.variety-table__year-panel[data-year="${year}"]` ); } - function openYearPanel(panel) { - if (!panel || panel.classList.contains("is-open")) return; - panel.hidden = false; + function openYearPanel(panelRow, panel) { + if (!panelRow || !panel) return; + panelRow.hidden = false; + if (panel.classList.contains("is-open")) { + panel.style.maxHeight = `${panel.scrollHeight}px`; + return; + } panel.style.maxHeight = "0"; panel.classList.add("is-open"); requestAnimationFrame(() => { @@ -838,8 +905,10 @@ }); } - function closeYearPanel(panel) { - if (!panel || !panel.classList.contains("is-open")) return; + function closeYearPanel(panelRow, panel) { + if (!panelRow || !panel || !panel.classList.contains("is-open")) { + return; + } panel.style.maxHeight = `${panel.scrollHeight}px`; requestAnimationFrame(() => { panel.style.maxHeight = "0"; @@ -847,8 +916,8 @@ const onEnd = (e) => { if (e.propertyName !== "max-height") return; panel.classList.remove("is-open"); - panel.hidden = true; panel.style.maxHeight = ""; + panelRow.hidden = true; panel.removeEventListener("transitionend", onEnd); }; panel.addEventListener("transitionend", onEnd); @@ -859,9 +928,10 @@ slot.querySelectorAll(".variety-table__year-row").forEach((yearRow) => { const year = yearRow.dataset.year; const btn = yearRow.querySelector(".variety-table__year-toggle"); + const panelRow = getYearPanelRow(slot, year); const panel = getYearPanel(slot, year); - const detailRows = panel - ? panel.querySelectorAll(".variety-table__show-row") + const detailRows = panelRow + ? panelRow.querySelectorAll(".variety-table__show-row") : []; let anyMatch = false; const yearOpen = yearRow.classList.contains("is-open"); @@ -872,21 +942,21 @@ row.hidden = Boolean(q) && !match; }); - if (yearOpen && panel) { + if (yearOpen && panelRow && panel) { if (q && !anyMatch) { - closeYearPanel(panel); + closeYearPanel(panelRow, panel); yearRow.classList.remove("is-open"); if (btn) btn.setAttribute("aria-expanded", "false"); } else { - openYearPanel(panel); + openYearPanel(panelRow, panel); panel.style.maxHeight = `${panel.scrollHeight}px`; } } - if (q && anyMatch && !yearOpen) { + if (q && anyMatch && !yearOpen && panelRow && panel) { yearRow.classList.add("is-open"); if (btn) btn.setAttribute("aria-expanded", "true"); - openYearPanel(panel); + openYearPanel(panelRow, panel); } yearRow.hidden = Boolean(q) && !anyMatch; @@ -897,14 +967,15 @@ const btn = yearRow.querySelector(".variety-table__year-toggle"); const year = yearRow.dataset.year; const slot = yearRow.closest("table[data-show-tabs]"); + const panelRow = slot ? getYearPanelRow(slot, year) : null; const panel = slot ? getYearPanel(slot, year) : null; - if (!btn || !panel) return; + if (!btn || !panelRow || !panel) return; btn.setAttribute("aria-expanded", open ? "true" : "false"); yearRow.classList.toggle("is-open", open); if (open) { - openYearPanel(panel); + openYearPanel(panelRow, panel); } else { - closeYearPanel(panel); + closeYearPanel(panelRow, panel); } if (slot) syncYearRows(slot); }