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

refactor 綜藝表扁平 DOM 結構

Browse Source
This commit is contained in:
jekkinoopy
2026-05-17 15:08:18 +08:00
parent a6840d0a10
commit f4da5bac6d
1 changed files with 15 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
variety/variety-shows.html
+13 -31
View File
@@ -25,7 +25,8 @@
border: 1px solid rgba(0, 0, 0, 0.02); border: 1px solid rgba(0, 0, 0, 0.02);
position: relative; position: relative;
z-index: 1; z-index: 1;
overflow: hidden; overflow-x: auto;
-webkit-overflow-scrolling: touch;
} }
body.variety-shows-page .variety-shows-toolbar { body.variety-shows-page .variety-shows-toolbar {
@@ -60,27 +61,16 @@
margin: 0 0 0 auto; margin: 0 0 0 auto;
} }
body.variety-shows-page .variety-shows-table-slot[hidden] { body.variety-shows-page .variety-shows-archive-card>.variety-table[data-show-tabs][hidden] {
display: none; display: none;
} }
body.variety-shows-page .variety-shows-table-slot+.variety-shows-table-slot { body.variety-shows-page .variety-shows-archive-card>.variety-table[data-show-tabs]+.variety-table[data-show-tabs] {
margin-top: 2rem; margin-top: 2rem;
padding-top: 2rem; padding-top: 2rem;
border-top: 1px solid #eee; border-top: 1px solid #eee;
} }
body.variety-shows-page .variety-table-wrap {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin: 0;
background: transparent;
border: none;
box-shadow: none;
border-radius: 0;
}
body.variety-shows-page .variety-table { body.variety-shows-page .variety-table {
width: 100%; width: 100%;
min-width: 640px; min-width: 640px;
@@ -269,11 +259,11 @@
<div class="variety-shows-toolbar search-section"> <div class="variety-shows-toolbar search-section">
<div class="variety-shows-tabs" role="tablist" aria-label="綜藝分類"> <div class="variety-shows-tabs" role="tablist" aria-label="綜藝分類">
<button type="button" class="tab-btn active" role="tab" id="variety-tab-all" data-tab="all" <button type="button" class="tab-btn active" role="tab" id="variety-tab-all" data-tab="all"
aria-selected="true" aria-controls="variety-shows-panels">全部</button> aria-selected="true" aria-controls="variety-shows">全部</button>
<button type="button" class="tab-btn" role="tab" id="variety-tab-captain" data-tab="captain" <button type="button" class="tab-btn" role="tab" id="variety-tab-captain" data-tab="captain"
aria-selected="false" aria-controls="variety-shows-panels">隊長帶弟弟</button> aria-selected="false" aria-controls="variety-shows">隊長帶弟弟</button>
<button type="button" class="tab-btn" role="tab" id="variety-tab-solo" data-tab="solo" <button type="button" class="tab-btn" role="tab" id="variety-tab-solo" data-tab="solo"
aria-selected="false" aria-controls="variety-shows-panels">各自暴走</button> aria-selected="false" aria-controls="variety-shows">各自暴走</button>
</div> </div>
<input type="search" id="variety-shows-search" class="search-input" placeholder="搜尋成員或節目…" <input type="search" id="variety-shows-search" class="search-input" placeholder="搜尋成員或節目…"
autocomplete="off" aria-label="搜尋成員或節目"> autocomplete="off" aria-label="搜尋成員或節目">
@@ -282,10 +272,7 @@
<main class="concert-container variety-shows-container"> <main class="concert-container variety-shows-container">
<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">
<div id="variety-shows-panels" class="variety-shows-panels"> <table class="variety-table" id="captain-brothers" data-show-tabs="all captain">
<div class="variety-shows-table-slot" id="captain-brothers" data-show-tabs="all captain">
<div class="variety-table-wrap">
<table class="variety-table" id="variety-captain-table">
<thead> <thead>
<tr> <tr>
<th scope="col">播出日期</th> <th scope="col">播出日期</th>
@@ -630,12 +617,8 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div>
</div>
<div class="variety-shows-table-slot" id="each-rampage" data-show-tabs="all solo"> <table class="variety-table" id="each-rampage" data-show-tabs="all solo">
<div class="variety-table-wrap">
<table class="variety-table" id="variety-solo-table">
<thead> <thead>
<tr> <tr>
<th scope="col">播出日期</th> <th scope="col">播出日期</th>
@@ -652,9 +635,6 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div>
</div>
</div>
<a class="variety-shows-back" href="variety.html#variety"><i class="fa-solid fa-arrow-left" <a class="variety-shows-back" href="variety.html#variety"><i class="fa-solid fa-arrow-left"
aria-hidden="true"></i> 返回瘋子與天才</a> aria-hidden="true"></i> 返回瘋子與天才</a>
@@ -674,7 +654,9 @@
<script> <script>
(function () { (function () {
const tabBtns = document.querySelectorAll(".variety-shows-tabs .tab-btn"); const tabBtns = document.querySelectorAll(".variety-shows-tabs .tab-btn");
const slots = document.querySelectorAll(".variety-shows-table-slot"); const slots = document.querySelectorAll(
".variety-shows-archive-card .variety-table[data-show-tabs]"
);
const input = document.getElementById("variety-shows-search"); const input = document.getElementById("variety-shows-search");
const hashToTab = { const hashToTab = {
"captain-brothers": "captain", "captain-brothers": "captain",
@@ -733,7 +715,7 @@
if (!btn) return; if (!btn) 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);
const slot = yearRow.closest(".variety-shows-table-slot"); const slot = yearRow.closest("table[data-show-tabs]");
if (slot) syncYearRows(slot); if (slot) syncYearRows(slot);
} }