diff --git a/variety/variety-shows.html b/variety/variety-shows.html index 2341d6a..479dfa1 100644 --- a/variety/variety-shows.html +++ b/variety/variety-shows.html @@ -87,10 +87,78 @@ color: #303030; } - body.variety-shows-page .variety-wiki-table tbody tr:nth-child(even) td { + body.variety-shows-page .variety-wiki-table--inner tbody tr:nth-child(even) td { background: #fafafa; } + body.variety-shows-page .variety-wiki-table__year-row > td { + padding: 0; + text-align: left; + vertical-align: top; + } + + body.variety-shows-page .variety-wiki-table__year-row:nth-child(even) > td { + background: #fffdf5; + } + + body.variety-shows-page .variety-wiki-table__year-toggle { + display: flex; + align-items: center; + justify-content: space-between; + gap: 12px; + width: 100%; + padding: 12px 14px; + border: none; + background: transparent; + cursor: pointer; + font: inherit; + color: inherit; + text-align: left; + box-sizing: border-box; + } + + body.variety-shows-page .variety-wiki-table__year-toggle:hover, + body.variety-shows-page .variety-wiki-table__year-toggle:focus-visible { + background: rgba(255, 204, 0, 0.12); + outline: none; + } + + body.variety-shows-page .variety-wiki-table__year-label { + font-weight: 700; + font-size: 1.05rem; + color: #5a4a12; + } + + body.variety-shows-page .variety-wiki-table__year-meta { + margin-left: auto; + font-size: 0.82rem; + color: #6a6a6a; + } + + body.variety-shows-page .variety-wiki-table__year-chevron { + color: #b48c00; + font-size: 0.9rem; + transition: transform 0.2s ease; + } + + body.variety-shows-page .variety-wiki-table__year-row.is-open .variety-wiki-table__year-chevron { + transform: rotate(180deg); + } + + body.variety-shows-page .variety-wiki-table__year-panel { + padding: 0 10px 12px; + border-top: 1px solid #ececec; + } + + body.variety-shows-page .variety-wiki-table__year-panel[hidden] { + display: none; + } + + body.variety-shows-page .variety-wiki-table--inner { + margin-top: 8px; + min-width: 0; + } + body.variety-shows-page .variety-wiki-table .variety-wiki-table__program { font-weight: 600; } @@ -110,15 +178,15 @@ font-weight: 600; } - body.variety-shows-page .variety-wiki-table .arrow-icon.variety-wiki-table__range-arrow { - display: inline-block; - transform: rotate(90deg); - margin: 0 0.2em; - vertical-align: middle; - font-size: 0.85em; - line-height: 1; - color: var(--primary); - font-style: normal; + body.variety-shows-page .variety-wiki-table .variety-wiki-table__date { + color: #303030; + } + + body.variety-shows-page .variety-wiki-table .variety-wiki-table__range-arrow { + margin: 0 0.18em; + color: #303030; + font-size: 0.82em; + vertical-align: 0.08em; } body.variety-shows-page .variety-shows-note { @@ -215,140 +283,232 @@ 集數 - - - 16/04/2216/06/17 - tvN - 新西遊記2 - 殷志源 - 0109 + + + + + + - - 16/04/2716/06/22 - Let's GO 時間探險隊3 - 張水院 - 0109 + + + + + - - 16/05/0416/07/20 - K-Star - 真實的帥氣的 - — - 0112 + + + + + - - 16/06/0516/08/21 - JTBC - 天下壯士 - 殷志源 - 0112 + + + + + - - 16/09/0516/11/21 - SBS - 花樣旅行 - 殷志源、李宰鎮 - 0112 - - - 16/10/1216/10/21 - JTBC - 本月的活動王 - 張水院 - 0102 - - - 17/01/0119/06/02 - KBS2 - 超人回來了 - 高志鎔 - 163280 - - - 17/01/0817/03/12 - tvN - 新西遊記3 - 殷志源 - 0109＋導演版 - - - 17/06/1317/08/22 - 新西遊記4 - 0110＋導演版 - - - 17/12/0518/01/09 - 姜食堂 - 0105＋導演版 - - - 18/05/0518/10/27 - MBC - 意外的Q - — - 0125 - - - 18/09/3018/10/28 - tvN - 新西遊記5 - 殷志源 - 0105 - - - 18/10/2818/12/02 - 新西遊記6 - 0005＋導演版 - - - 19/10/2520/01/03 - tvN - 新西遊記7 - 殷志源 - 0111 - - - 19/05/3119/07/05 - tvN - 姜食堂2 - 殷志源 - 0106 - - - 19/06/0819/08/17 - tvN - 高校供餐王 - 殷志源 - 0111 - - - 19/07/0519/08/02 - tvN - 姜食堂3 - 殷志源 - 0004 - - - 19/09/2019/11/22 - tvN - 去冰島的三餐 - 殷志源 - 0110 - - - 20/01/1020/03/27 - tvN - 星期五星期五晚上 - 殷志源 - 0110＋導演版 - - - 20/10/0920/12/18 - tvN - 新西遊記8 - 殷志源 - 0110＋導演版 + + + + + @@ -407,17 +567,44 @@ return hashToTab[id] || "all"; } + function setYearOpen(yearRow, open) { + const btn = yearRow.querySelector(".variety-wiki-table__year-toggle"); + const panel = yearRow.querySelector(".variety-wiki-table__year-panel"); + if (!btn || !panel) return; + btn.setAttribute("aria-expanded", open ? "true" : "false"); + panel.hidden = !open; + yearRow.classList.toggle("is-open", open); + } + function filterVisibleRows() { const q = (input && input.value.trim().toLowerCase()) || ""; slots.forEach((slot) => { if (slot.hidden) return; - slot.querySelectorAll("tbody tr").forEach((row) => { - const text = row.textContent.replace(/\s+/g, " ").trim().toLowerCase(); - row.hidden = Boolean(q) && !text.includes(q); + slot.querySelectorAll(".variety-wiki-table__year-row").forEach((yearRow) => { + const detailRows = yearRow.querySelectorAll( + ".variety-wiki-table--inner tbody tr" + ); + let anyMatch = false; + detailRows.forEach((row) => { + const text = row.textContent.replace(/\s+/g, " ").trim().toLowerCase(); + const match = !q || text.includes(q); + row.hidden = !match; + if (match) anyMatch = true; + }); + if (q && anyMatch) setYearOpen(yearRow, true); + yearRow.hidden = Boolean(q) && !anyMatch; }); }); } + document.querySelectorAll(".variety-wiki-table__year-toggle").forEach((btn) => { + btn.addEventListener("click", () => { + const yearRow = btn.closest(".variety-wiki-table__year-row"); + const open = btn.getAttribute("aria-expanded") !== "true"; + setYearOpen(yearRow, open); + }); + }); + function showTab(tab) { tabBtns.forEach((btn) => { const on = btn.dataset.tab === tab;