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

fix 綜藝表年份列整列置中與欄位對齊

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
jekkinoopy
2026-05-17 16:18:58 +08:00
co-authored by Cursor
parent 124c2af1b9
commit 3dd7e99d69
1 changed files with 80 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
variety/variety-shows.html
+65 -32
View File
@@ -133,13 +133,27 @@
transition: background-color 0.15s ease; transition: background-color 0.15s ease;
} }
body.variety-shows-page .variety-table__year-toggle { body.variety-shows-page .variety-table__year-bar {
display: flex; padding: 0;
align-items: center; vertical-align: middle;
justify-content: flex-start; }
gap: 12px;
body.variety-shows-page .variety-table__year-bar-inner {
position: relative;
display: block;
width: 100%; width: 100%;
min-height: 48px; min-height: 48px;
box-sizing: border-box;
}
body.variety-shows-page .variety-table__year-toggle {
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0; margin: 0;
padding: 12px 16px; padding: 12px 16px;
border: none; border: none;
@@ -148,14 +162,22 @@
cursor: pointer; cursor: pointer;
font: inherit; font: inherit;
color: #333; color: #333;
text-align: left; text-align: center;
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 {
padding: 12px 16px; position: absolute;
text-align: right; right: 16px;
vertical-align: middle; top: 50%;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 0;
padding: 0;
transform: translateY(-50%);
white-space: nowrap; white-space: nowrap;
cursor: pointer; cursor: pointer;
} }
@@ -173,6 +195,7 @@
font-weight: 800; font-weight: 800;
font-size: clamp(1rem, 2vw, 1.12rem); font-size: clamp(1rem, 2vw, 1.12rem);
color: #333; color: #333;
white-space: nowrap;
} }
body.variety-shows-page .variety-table__year-meta { body.variety-shows-page .variety-table__year-meta {
@@ -188,7 +211,7 @@
transition: transform 0.2s ease; transition: transform 0.2s ease;
} }
body.variety-shows-page .variety-table__year-row.is-open .variety-table__year-chevron { body.variety-shows-page .variety-table__year-row.is-open .variety-table__year-tail .variety-table__year-chevron {
transform: rotate(180deg); transform: rotate(180deg);
} }
@@ -301,6 +324,13 @@
<section id="variety-shows" class="variety-shows-archive" aria-label="全員發瘋"> <section id="variety-shows" class="variety-shows-archive" aria-label="全員發瘋">
<div class="variety-shows-archive-card"> <div class="variety-shows-archive-card">
<table class="variety-table" id="captain-brothers" data-show-tabs="all captain"> <table class="variety-table" id="captain-brothers" data-show-tabs="all captain">
<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>
<thead> <thead>
<tr> <tr>
<th scope="col">播出日期</th> <th scope="col">播出日期</th>
@@ -310,23 +340,18 @@
<th scope="col">集數</th> <th scope="col">集數</th>
</tr> </tr>
</thead> </thead>
<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 class="variety-table__year-list"> <tbody class="variety-table__year-list">
<tr class="variety-table__year-row" data-year="2016"> <tr class="variety-table__year-row" data-year="2016">
<td colspan="4" class="variety-table__year-head"> <td colspan="5" class="variety-table__year-bar">
<div class="variety-table__year-bar-inner">
<button type="button" class="variety-table__year-toggle" aria-expanded="false" id="captain-year-2016-btn"> <button type="button" class="variety-table__year-toggle" aria-expanded="false" id="captain-year-2016-btn">
<span class="variety-table__year-label">2016</span> <span class="variety-table__year-label">2016</span>
</button> </button>
</td> <div class="variety-table__year-tail">
<td class="variety-table__year-tail">
<span class="variety-table__year-meta">6 檔</span> <span class="variety-table__year-meta">6 檔</span>
<i class="fa-solid fa-chevron-down variety-table__year-chevron" aria-hidden="true"></i> <i class="fa-solid fa-chevron-down variety-table__year-chevron" aria-hidden="true"></i>
</div>
</div>
</td> </td>
</tr> </tr>
<tr class="variety-table__show-row" data-year="2016" hidden> <tr class="variety-table__show-row" data-year="2016" hidden>
@@ -414,14 +439,16 @@
aria-hidden="true"></i>&nbsp;02</td> aria-hidden="true"></i>&nbsp;02</td>
</tr> </tr>
<tr class="variety-table__year-row" data-year="2017"> <tr class="variety-table__year-row" data-year="2017">
<td colspan="4" class="variety-table__year-head"> <td colspan="5" class="variety-table__year-bar">
<div class="variety-table__year-bar-inner">
<button type="button" class="variety-table__year-toggle" aria-expanded="false" id="captain-year-2017-btn"> <button type="button" class="variety-table__year-toggle" aria-expanded="false" id="captain-year-2017-btn">
<span class="variety-table__year-label">2017</span> <span class="variety-table__year-label">2017</span>
</button> </button>
</td> <div class="variety-table__year-tail">
<td class="variety-table__year-tail">
<span class="variety-table__year-meta">4 檔</span> <span class="variety-table__year-meta">4 檔</span>
<i class="fa-solid fa-chevron-down variety-table__year-chevron" aria-hidden="true"></i> <i class="fa-solid fa-chevron-down variety-table__year-chevron" aria-hidden="true"></i>
</div>
</div>
</td> </td>
</tr> </tr>
<tr class="variety-table__show-row" data-year="2017" hidden> <tr class="variety-table__show-row" data-year="2017" hidden>
@@ -481,14 +508,16 @@
aria-hidden="true"></i>&nbsp;05＋導演版</td> aria-hidden="true"></i>&nbsp;05＋導演版</td>
</tr> </tr>
<tr class="variety-table__year-row" data-year="2018"> <tr class="variety-table__year-row" data-year="2018">
<td colspan="4" class="variety-table__year-head"> <td colspan="5" class="variety-table__year-bar">
<div class="variety-table__year-bar-inner">
<button type="button" class="variety-table__year-toggle" aria-expanded="false" id="captain-year-2018-btn"> <button type="button" class="variety-table__year-toggle" aria-expanded="false" id="captain-year-2018-btn">
<span class="variety-table__year-label">2018</span> <span class="variety-table__year-label">2018</span>
</button> </button>
</td> <div class="variety-table__year-tail">
<td class="variety-table__year-tail">
<span class="variety-table__year-meta">3 檔</span> <span class="variety-table__year-meta">3 檔</span>
<i class="fa-solid fa-chevron-down variety-table__year-chevron" aria-hidden="true"></i> <i class="fa-solid fa-chevron-down variety-table__year-chevron" aria-hidden="true"></i>
</div>
</div>
</td> </td>
</tr> </tr>
<tr class="variety-table__show-row" data-year="2018" hidden> <tr class="variety-table__show-row" data-year="2018" hidden>
@@ -536,14 +565,16 @@
aria-hidden="true"></i>&nbsp;05＋導演版</td> aria-hidden="true"></i>&nbsp;05＋導演版</td>
</tr> </tr>
<tr class="variety-table__year-row" data-year="2019"> <tr class="variety-table__year-row" data-year="2019">
<td colspan="4" class="variety-table__year-head"> <td colspan="5" class="variety-table__year-bar">
<div class="variety-table__year-bar-inner">
<button type="button" class="variety-table__year-toggle" aria-expanded="false" id="captain-year-2019-btn"> <button type="button" class="variety-table__year-toggle" aria-expanded="false" id="captain-year-2019-btn">
<span class="variety-table__year-label">2019</span> <span class="variety-table__year-label">2019</span>
</button> </button>
</td> <div class="variety-table__year-tail">
<td class="variety-table__year-tail">
<span class="variety-table__year-meta">5 檔</span> <span class="variety-table__year-meta">5 檔</span>
<i class="fa-solid fa-chevron-down variety-table__year-chevron" aria-hidden="true"></i> <i class="fa-solid fa-chevron-down variety-table__year-chevron" aria-hidden="true"></i>
</div>
</div>
</td> </td>
</tr> </tr>
<tr class="variety-table__show-row" data-year="2019" hidden> <tr class="variety-table__show-row" data-year="2019" hidden>
@@ -617,14 +648,16 @@
aria-hidden="true"></i>&nbsp;11</td> aria-hidden="true"></i>&nbsp;11</td>
</tr> </tr>
<tr class="variety-table__year-row" data-year="2020"> <tr class="variety-table__year-row" data-year="2020">
<td colspan="4" class="variety-table__year-head"> <td colspan="5" class="variety-table__year-bar">
<div class="variety-table__year-bar-inner">
<button type="button" class="variety-table__year-toggle" aria-expanded="false" id="captain-year-2020-btn"> <button type="button" class="variety-table__year-toggle" aria-expanded="false" id="captain-year-2020-btn">
<span class="variety-table__year-label">2020</span> <span class="variety-table__year-label">2020</span>
</button> </button>
</td> <div class="variety-table__year-tail">
<td class="variety-table__year-tail">
<span class="variety-table__year-meta">2 檔</span> <span class="variety-table__year-meta">2 檔</span>
<i class="fa-solid fa-chevron-down variety-table__year-chevron" aria-hidden="true"></i> <i class="fa-solid fa-chevron-down variety-table__year-chevron" aria-hidden="true"></i>
</div>
</div>
</td> </td>
</tr> </tr>
<tr class="variety-table__show-row" data-year="2020" hidden> <tr class="variety-table__show-row" data-year="2020" hidden>