nik/watch-party
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(archive): enhance archive page with scrollable table and responsive design

Browse Source
This commit is contained in:
Nik Afiq 2025-12-17 23:13:40 +09:00
parent 77c0c1586b
commit f17905eeff
2 changed files with 30 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/index.css
View File

@ -517,6 +517,13 @@ kbd {
padding: 10px 12px;
border-radius: 10px;
}
.archive-scroll {
width: 100%;
overflow: auto;
}
.archive-table {
min-width: 860px;
}
.archive-header {
font-weight: 800;
color: var(--subtle);
@ -537,6 +544,7 @@ kbd {
}
.archive-header span:nth-child(3),
.archive-row span:nth-child(3) { grid-column: span 2; }
.archive-table { min-width: 100%; }
}
.scrape-card {

42
frontend/src/pages/ArchivePage.tsx
View File

@ -74,27 +74,29 @@ export default function ArchivePage() {
)}
{items.length > 0 && (
<div className="archive-table">
<div className="archive-header">
<span>ID</span>
<span>話数</span>
<span>タイトル</span>
<span>開始時刻</span>
<span>再生時間</span>
<span>登録</span>
<span>アーカイブ</span>
</div>
{items.map((it) => (
<div key={it.id} className="archive-row">
<span>#{it.id}</span>
<span>第{it.ep_num}話</span>
<span>{it.ep_title}</span>
<span>{it.start_time.slice(0, 5)}</span>
<span>{it.playback_length.slice(0, 5)}</span>
<span className="subtle">{formatTimestamp(it.date_created)}</span>
<span className="subtle">{formatTimestamp(it.date_archived)}</span>
<div className="archive-scroll">
<div className="archive-table">
<div className="archive-header">
<span>ID</span>
<span>話数</span>
<span>タイトル</span>
<span>開始時刻</span>
<span>再生時間</span>
<span>登録</span>
<span>アーカイブ</span>
</div>
))}
{items.map((it) => (
<div key={it.id} className="archive-row">
<span>#{it.id}</span>
<span>第{it.ep_num}話</span>
<span>{it.ep_title}</span>
<span>{it.start_time.slice(0, 5)}</span>
<span>{it.playback_length.slice(0, 5)}</span>
<span className="subtle">{formatTimestamp(it.date_created)}</span>
<span className="subtle">{formatTimestamp(it.date_archived)}</span>
</div>
))}
</div>
</div>
)}
</div>