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));
|
const genres = $derived(parseGenres(data.book.genres));
|
||||||
|
|
||||||
// Paginate chapter list — show 100 at a time
|
// Paginate chapter list — 50 on mobile, 100 on sm+ (≥640px)
|
||||||
const PAGE_SIZE = 100;
|
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)
|
// Start on the page that contains the current chapter (if any)
|
||||||
function pageForChapter(chapterNum: number | null, list: typeof chapterList): number {
|
function pageForChapter(chapterNum: number | null, list: typeof chapterList): number {
|
||||||
if (!chapterNum || list.length === 0) return 0;
|
if (!chapterNum || list.length === 0) return 0;
|
||||||
const idx = list.findIndex((c) => c.number === chapterNum);
|
const idx = list.findIndex((c) => c.number === chapterNum);
|
||||||
if (idx === -1) return 0;
|
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 ?? [])));
|
let page = $state(pageForChapter(data.lastChapter, data.inLib ? data.chapters : (data.previewChapters ?? [])));
|
||||||
@@ -51,9 +59,9 @@
|
|||||||
? data.chapters
|
? data.chapters
|
||||||
: (data.previewChapters ?? [])
|
: (data.previewChapters ?? [])
|
||||||
);
|
);
|
||||||
const totalPages = $derived(Math.ceil(chapterList.length / PAGE_SIZE));
|
const totalPages = $derived(Math.ceil(chapterList.length / pageSize));
|
||||||
const visibleChapters = $derived(
|
const visibleChapters = $derived(
|
||||||
chapterList.slice(page * PAGE_SIZE, (page + 1) * PAGE_SIZE)
|
chapterList.slice(page * pageSize, (page + 1) * pageSize)
|
||||||
);
|
);
|
||||||
|
|
||||||
// ── Chapter list polling ──────────────────────────────────────────────────
|
// ── Chapter list polling ──────────────────────────────────────────────────
|
||||||
@@ -354,7 +362,7 @@
|
|||||||
←
|
←
|
||||||
</button>
|
</button>
|
||||||
<span class="text-zinc-500 text-xs tabular-nums">
|
<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>
|
</span>
|
||||||
<button
|
<button
|
||||||
onclick={() => (page = Math.min(totalPages - 1, page + 1))}
|
onclick={() => (page = Math.min(totalPages - 1, page + 1))}
|
||||||
|
|||||||
@@ -89,9 +89,7 @@
|
|||||||
<h1 class="text-xl font-bold text-zinc-100">
|
<h1 class="text-xl font-bold text-zinc-100">
|
||||||
{data.chapter.title || `Chapter ${data.chapter.number}`}
|
{data.chapter.title || `Chapter ${data.chapter.number}`}
|
||||||
</h1>
|
</h1>
|
||||||
{#if data.chapter.date_label}
|
|
||||||
<p class="text-zinc-600 text-xs mt-1">{data.chapter.date_label}</p>
|
|
||||||
{/if}
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Audio player -->
|
<!-- Audio player -->
|
||||||
|
|||||||
Reference in New Issue
Block a user