jekkinoopy/sechskies
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style 年份與節目名稱欄對齊

Browse Source
This commit is contained in:
jekkinoopy
2026-05-17 19:14:30 +08:00
parent 811e12b6ac
commit d0f76ace74
1 changed files with 148 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files
variety/variety-shows.html
+143 -72
View File
@@ -122,12 +122,16 @@
color: #444; color: #444;
} }
body.variety-shows-page .variety-table__year-panel>.variety-table__show-row:last-child td { body.variety-shows-page .variety-table__year-panel-cell {
border-bottom: 1px solid #f0f0f0; 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 { body.variety-shows-page .variety-table__year-panel {
display: block;
overflow: hidden; overflow: hidden;
max-height: 0; max-height: 0;
opacity: 0; opacity: 0;
@@ -138,31 +142,27 @@
opacity: 1; opacity: 1;
} }
body.variety-shows-page .variety-table__year-panel tr { body.variety-shows-page .variety-table__inner {
display: table;
width: 100%; width: 100%;
table-layout: fixed; margin: 0;
border-collapse: collapse; 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) { body.variety-shows-page .variety-table__inner tbody td {
width: 22%; 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) { body.variety-shows-page .variety-table__inner .variety-table__show-row:last-child td {
width: 10%; border-bottom: 1px solid #f0f0f0;
}
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%;
} }
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
@@ -184,23 +184,22 @@
} }
body.variety-shows-page .variety-table__year-bar-inner { body.variety-shows-page .variety-table__year-bar-inner {
position: relative; display: grid;
display: block; grid-template-columns: 22% 10% 28% 22% 18%;
align-items: center;
width: 100%; width: 100%;
min-height: 48px; min-height: 48px;
box-sizing: border-box; box-sizing: border-box;
} }
body.variety-shows-page .variety-table__year-toggle { body.variety-shows-page .variety-table__year-toggle {
position: absolute; grid-column: 3;
left: 50%; justify-self: center;
top: 50%;
z-index: 1;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin: 0; margin: 0;
padding: 12px 16px; padding: 12px 10px;
border: none; border: none;
border-radius: 0; border-radius: 0;
background: transparent; background: transparent;
@@ -209,20 +208,16 @@
color: #333; color: #333;
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
transform: translate(-50%, -50%);
box-sizing: border-box; box-sizing: border-box;
} }
body.variety-shows-page .variety-table__year-tail { body.variety-shows-page .variety-table__year-tail {
position: absolute; grid-column: 5;
right: 16px; justify-self: center;
top: 50%;
z-index: 2;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 0; gap: 0;
padding: 0; padding: 12px 10px;
transform: translateY(-50%);
white-space: nowrap; white-space: nowrap;
cursor: pointer; cursor: pointer;
} }
@@ -399,9 +394,18 @@
</div> </div>
</td> </td>
</tr> </tr>
</tbody> <tr class="variety-table__year-panel-row" data-year="2016" hidden>
<tbody class="variety-table__year-panel" data-year="2016" hidden> <td colspan="5" class="variety-table__year-panel-cell">
<div class="variety-table__year-panel" data-year="2016">
<table class="variety-table variety-table__inner">
<colgroup>
<col class="variety-table__col-air">
<col class="variety-table__col-channel">
<col class="variety-table__col-program">
<col class="variety-table__col-member">
<col class="variety-table__col-eps">
</colgroup>
<tbody>
<tr class="variety-table__show-row" data-year="2016"> <tr class="variety-table__show-row" data-year="2016">
<td class="variety-table__air-date" data-air-start="2016-04-22" <td class="variety-table__air-date" data-air-start="2016-04-22"
data-air-end="2016-06-17"><span data-air-end="2016-06-17"><span
@@ -487,7 +491,10 @@
aria-hidden="true"></i>&nbsp;02</td> aria-hidden="true"></i>&nbsp;02</td>
</tr> </tr>
</tbody> </tbody>
<tbody class="variety-table__year-list"> </table>
</div>
</td>
</tr>
<tr class="variety-table__year-row" data-year="2017"> <tr class="variety-table__year-row" data-year="2017">
<td colspan="5" class="variety-table__year-bar"> <td colspan="5" class="variety-table__year-bar">
<div class="variety-table__year-bar-inner"> <div class="variety-table__year-bar-inner">
@@ -501,9 +508,18 @@
</div> </div>
</td> </td>
</tr> </tr>
</tbody> <tr class="variety-table__year-panel-row" data-year="2017" hidden>
<tbody class="variety-table__year-panel" data-year="2017" hidden> <td colspan="5" class="variety-table__year-panel-cell">
<div class="variety-table__year-panel" data-year="2017">
<table class="variety-table variety-table__inner">
<colgroup>
<col class="variety-table__col-air">
<col class="variety-table__col-channel">
<col class="variety-table__col-program">
<col class="variety-table__col-member">
<col class="variety-table__col-eps">
</colgroup>
<tbody>
<tr class="variety-table__show-row" data-year="2017"> <tr class="variety-table__show-row" data-year="2017">
<td class="variety-table__air-date" data-air-start="2017-01-01" <td class="variety-table__air-date" data-air-start="2017-01-01"
data-air-end="2019-06-02"><span data-air-end="2019-06-02"><span
@@ -561,7 +577,10 @@
aria-hidden="true"></i>&nbsp;05＋導演版</td> aria-hidden="true"></i>&nbsp;05＋導演版</td>
</tr> </tr>
</tbody> </tbody>
<tbody class="variety-table__year-list"> </table>
</div>
</td>
</tr>
<tr class="variety-table__year-row" data-year="2018"> <tr class="variety-table__year-row" data-year="2018">
<td colspan="5" class="variety-table__year-bar"> <td colspan="5" class="variety-table__year-bar">
<div class="variety-table__year-bar-inner"> <div class="variety-table__year-bar-inner">
@@ -575,9 +594,18 @@
</div> </div>
</td> </td>
</tr> </tr>
</tbody> <tr class="variety-table__year-panel-row" data-year="2018" hidden>
<tbody class="variety-table__year-panel" data-year="2018" hidden> <td colspan="5" class="variety-table__year-panel-cell">
<div class="variety-table__year-panel" data-year="2018">
<table class="variety-table variety-table__inner">
<colgroup>
<col class="variety-table__col-air">
<col class="variety-table__col-channel">
<col class="variety-table__col-program">
<col class="variety-table__col-member">
<col class="variety-table__col-eps">
</colgroup>
<tbody>
<tr class="variety-table__show-row" data-year="2018"> <tr class="variety-table__show-row" data-year="2018">
<td class="variety-table__air-date" data-air-start="2018-05-05" <td class="variety-table__air-date" data-air-start="2018-05-05"
data-air-end="2018-10-27"><span data-air-end="2018-10-27"><span
@@ -623,7 +651,10 @@
aria-hidden="true"></i>&nbsp;05＋導演版</td> aria-hidden="true"></i>&nbsp;05＋導演版</td>
</tr> </tr>
</tbody> </tbody>
<tbody class="variety-table__year-list"> </table>
</div>
</td>
</tr>
<tr class="variety-table__year-row" data-year="2019"> <tr class="variety-table__year-row" data-year="2019">
<td colspan="5" class="variety-table__year-bar"> <td colspan="5" class="variety-table__year-bar">
<div class="variety-table__year-bar-inner"> <div class="variety-table__year-bar-inner">
@@ -637,9 +668,18 @@
</div> </div>
</td> </td>
</tr> </tr>
</tbody> <tr class="variety-table__year-panel-row" data-year="2019" hidden>
<tbody class="variety-table__year-panel" data-year="2019" hidden> <td colspan="5" class="variety-table__year-panel-cell">
<div class="variety-table__year-panel" data-year="2019">
<table class="variety-table variety-table__inner">
<colgroup>
<col class="variety-table__col-air">
<col class="variety-table__col-channel">
<col class="variety-table__col-program">
<col class="variety-table__col-member">
<col class="variety-table__col-eps">
</colgroup>
<tbody>
<tr class="variety-table__show-row" data-year="2019"> <tr class="variety-table__show-row" data-year="2019">
<td class="variety-table__air-date" data-air-start="2019-05-31" <td class="variety-table__air-date" data-air-start="2019-05-31"
data-air-end="2019-07-05"><span data-air-end="2019-07-05"><span
@@ -711,7 +751,10 @@
aria-hidden="true"></i>&nbsp;11</td> aria-hidden="true"></i>&nbsp;11</td>
</tr> </tr>
</tbody> </tbody>
<tbody class="variety-table__year-list"> </table>
</div>
</td>
</tr>
<tr class="variety-table__year-row" data-year="2020"> <tr class="variety-table__year-row" data-year="2020">
<td colspan="5" class="variety-table__year-bar"> <td colspan="5" class="variety-table__year-bar">
<div class="variety-table__year-bar-inner"> <div class="variety-table__year-bar-inner">
@@ -725,9 +768,18 @@
</div> </div>
</td> </td>
</tr> </tr>
</tbody> <tr class="variety-table__year-panel-row" data-year="2020" hidden>
<tbody class="variety-table__year-panel" data-year="2020" hidden> <td colspan="5" class="variety-table__year-panel-cell">
<div class="variety-table__year-panel" data-year="2020">
<table class="variety-table variety-table__inner">
<colgroup>
<col class="variety-table__col-air">
<col class="variety-table__col-channel">
<col class="variety-table__col-program">
<col class="variety-table__col-member">
<col class="variety-table__col-eps">
</colgroup>
<tbody>
<tr class="variety-table__show-row" data-year="2020"> <tr class="variety-table__show-row" data-year="2020">
<td class="variety-table__air-date" data-air-start="2020-01-10" <td class="variety-table__air-date" data-air-start="2020-01-10"
data-air-end="2020-03-27"><span data-air-end="2020-03-27"><span
@@ -757,6 +809,11 @@
aria-hidden="true"></i>&nbsp;10＋導演版</td> aria-hidden="true"></i>&nbsp;10＋導演版</td>
</tr> </tr>
</tbody> </tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table> </table>
<table class="variety-table" id="each-rampage" data-show-tabs="all solo"> <table class="variety-table" id="each-rampage" data-show-tabs="all solo">
@@ -822,15 +879,25 @@
return text.includes(q); return text.includes(q);
} }
function getYearPanel(slot, year) { function getYearPanelRow(slot, year) {
return slot.querySelector( 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}"]` `.variety-table__year-panel[data-year="${year}"]`
); );
} }
function openYearPanel(panel) { function openYearPanel(panelRow, panel) {
if (!panel || panel.classList.contains("is-open")) return; if (!panelRow || !panel) return;
panel.hidden = false; panelRow.hidden = false;
if (panel.classList.contains("is-open")) {
panel.style.maxHeight = `${panel.scrollHeight}px`;
return;
}
panel.style.maxHeight = "0"; panel.style.maxHeight = "0";
panel.classList.add("is-open"); panel.classList.add("is-open");
requestAnimationFrame(() => { requestAnimationFrame(() => {
@@ -838,8 +905,10 @@
}); });
} }
function closeYearPanel(panel) { function closeYearPanel(panelRow, panel) {
if (!panel || !panel.classList.contains("is-open")) return; if (!panelRow || !panel || !panel.classList.contains("is-open")) {
return;
}
panel.style.maxHeight = `${panel.scrollHeight}px`; panel.style.maxHeight = `${panel.scrollHeight}px`;
requestAnimationFrame(() => { requestAnimationFrame(() => {
panel.style.maxHeight = "0"; panel.style.maxHeight = "0";
@@ -847,8 +916,8 @@
const onEnd = (e) => { const onEnd = (e) => {
if (e.propertyName !== "max-height") return; if (e.propertyName !== "max-height") return;
panel.classList.remove("is-open"); panel.classList.remove("is-open");
panel.hidden = true;
panel.style.maxHeight = ""; panel.style.maxHeight = "";
panelRow.hidden = true;
panel.removeEventListener("transitionend", onEnd); panel.removeEventListener("transitionend", onEnd);
}; };
panel.addEventListener("transitionend", onEnd); panel.addEventListener("transitionend", onEnd);
@@ -859,9 +928,10 @@
slot.querySelectorAll(".variety-table__year-row").forEach((yearRow) => { slot.querySelectorAll(".variety-table__year-row").forEach((yearRow) => {
const year = yearRow.dataset.year; const year = yearRow.dataset.year;
const btn = yearRow.querySelector(".variety-table__year-toggle"); const btn = yearRow.querySelector(".variety-table__year-toggle");
const panelRow = getYearPanelRow(slot, year);
const panel = getYearPanel(slot, year); const panel = getYearPanel(slot, year);
const detailRows = panel const detailRows = panelRow
? panel.querySelectorAll(".variety-table__show-row") ? panelRow.querySelectorAll(".variety-table__show-row")
: []; : [];
let anyMatch = false; let anyMatch = false;
const yearOpen = yearRow.classList.contains("is-open"); const yearOpen = yearRow.classList.contains("is-open");
@@ -872,21 +942,21 @@
row.hidden = Boolean(q) && !match; row.hidden = Boolean(q) && !match;
}); });
if (yearOpen && panel) { if (yearOpen && panelRow && panel) {
if (q && !anyMatch) { if (q && !anyMatch) {
closeYearPanel(panel); closeYearPanel(panelRow, panel);
yearRow.classList.remove("is-open"); yearRow.classList.remove("is-open");
if (btn) btn.setAttribute("aria-expanded", "false"); if (btn) btn.setAttribute("aria-expanded", "false");
} else { } else {
openYearPanel(panel); openYearPanel(panelRow, panel);
panel.style.maxHeight = `${panel.scrollHeight}px`; panel.style.maxHeight = `${panel.scrollHeight}px`;
} }
} }
if (q && anyMatch && !yearOpen) { if (q && anyMatch && !yearOpen && panelRow && panel) {
yearRow.classList.add("is-open"); yearRow.classList.add("is-open");
if (btn) btn.setAttribute("aria-expanded", "true"); if (btn) btn.setAttribute("aria-expanded", "true");
openYearPanel(panel); openYearPanel(panelRow, panel);
} }
yearRow.hidden = Boolean(q) && !anyMatch; yearRow.hidden = Boolean(q) && !anyMatch;
@@ -897,14 +967,15 @@
const btn = yearRow.querySelector(".variety-table__year-toggle"); const btn = yearRow.querySelector(".variety-table__year-toggle");
const year = yearRow.dataset.year; const year = yearRow.dataset.year;
const slot = yearRow.closest("table[data-show-tabs]"); const slot = yearRow.closest("table[data-show-tabs]");
const panelRow = slot ? getYearPanelRow(slot, year) : null;
const panel = slot ? getYearPanel(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"); btn.setAttribute("aria-expanded", open ? "true" : "false");
yearRow.classList.toggle("is-open", open); yearRow.classList.toggle("is-open", open);
if (open) { if (open) {
openYearPanel(panel); openYearPanel(panelRow, panel);
} else { } else {
closeYearPanel(panel); closeYearPanel(panelRow, panel);
} }
if (slot) syncYearRows(slot); if (slot) syncYearRows(slot);
} }