Remove chapter date from chapter page; show 50 chapters per page on mobile, 100 on desktop
Some checks failed
Deploy / Deploy Production (push) Has been skipped
Deploy / Cleanup Preview (push) Has been skipped
Deploy / Deploy Preview (push) Failing after 1s
CI / Scraper / Lint (pull_request) Successful in 11s
CI / Scraper / Test (pull_request) Successful in 20s
CI / UI / Build (pull_request) Successful in 21s
CI / Scraper / Build (pull_request) Successful in 9s
Some checks failed
Deploy / Deploy Production (push) Has been skipped
Deploy / Cleanup Preview (push) Has been skipped
Deploy / Deploy Preview (push) Failing after 1s
CI / Scraper / Lint (pull_request) Successful in 11s
CI / Scraper / Test (pull_request) Successful in 20s
CI / UI / Build (pull_request) Successful in 21s
CI / Scraper / Build (pull_request) Successful in 9s
This commit is contained in:
@@ -32,15 +32,23 @@
|
||||
|
||||
const genres = $derived(parseGenres(data.book.genres));
|
||||
|
||||
// Paginate chapter list — show 100 at a time
|
||||
const PAGE_SIZE = 100;
|
||||
// Paginate chapter list — 50 on mobile, 100 on sm+ (≥640px)
|
||||
let pageSize = $state(50);
|
||||
|
||||
onMount(() => {
|
||||
const mq = window.matchMedia('(min-width: 640px)');
|
||||
pageSize = mq.matches ? 100 : 50;
|
||||
const handler = (e: MediaQueryListEvent) => { pageSize = e.matches ? 100 : 50; };
|
||||
mq.addEventListener('change', handler);
|
||||
return () => mq.removeEventListener('change', handler);
|
||||
});
|
||||
|
||||
// Start on the page that contains the current chapter (if any)
|
||||
function pageForChapter(chapterNum: number | null, list: typeof chapterList): number {
|
||||
if (!chapterNum || list.length === 0) return 0;
|
||||
const idx = list.findIndex((c) => c.number === chapterNum);
|
||||
if (idx === -1) return 0;
|
||||
return Math.floor(idx / PAGE_SIZE);
|
||||
return Math.floor(idx / pageSize);
|
||||
}
|
||||
|
||||
let page = $state(pageForChapter(data.lastChapter, data.inLib ? data.chapters : (data.previewChapters ?? [])));
|
||||
@@ -51,9 +59,9 @@
|
||||
? data.chapters
|
||||
: (data.previewChapters ?? [])
|
||||
);
|
||||
const totalPages = $derived(Math.ceil(chapterList.length / PAGE_SIZE));
|
||||
const totalPages = $derived(Math.ceil(chapterList.length / pageSize));
|
||||
const visibleChapters = $derived(
|
||||
chapterList.slice(page * PAGE_SIZE, (page + 1) * PAGE_SIZE)
|
||||
chapterList.slice(page * pageSize, (page + 1) * pageSize)
|
||||
);
|
||||
|
||||
// ── Chapter list polling ──────────────────────────────────────────────────
|
||||
@@ -354,7 +362,7 @@
|
||||
←
|
||||
</button>
|
||||
<span class="text-zinc-500 text-xs tabular-nums">
|
||||
{page * PAGE_SIZE + 1}–{Math.min((page + 1) * PAGE_SIZE, chapterList.length)} of {chapterList.length}
|
||||
{page * pageSize + 1}–{Math.min((page + 1) * pageSize, chapterList.length)} of {chapterList.length}
|
||||
</span>
|
||||
<button
|
||||
onclick={() => (page = Math.min(totalPages - 1, page + 1))}
|
||||
|
||||
@@ -89,9 +89,7 @@
|
||||
<h1 class="text-xl font-bold text-zinc-100">
|
||||
{data.chapter.title || `Chapter ${data.chapter.number}`}
|
||||
</h1>
|
||||
{#if data.chapter.date_label}
|
||||
<p class="text-zinc-600 text-xs mt-1">{data.chapter.date_label}</p>
|
||||
{/if}
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Audio player -->
|
||||
|
||||
Reference in New Issue
Block a user