kamil/libnovel
1
0
Fork 0
Code Issues Pull Requests 3 Actions Packages Projects Releases 162 Wiki Activity

Mobile hero: move CTAs to full-width row below cover; fix chapter dates still showing on mobile
Some checks failed
Deploy / Deploy Production (push) Has been skipped
Details
Deploy / Cleanup Preview (push) Has been skipped
Details
Deploy / Deploy Preview (push) Failing after 1s
Details
CI / Scraper / Test (pull_request) Successful in 9s
Details
CI / Scraper / Lint (pull_request) Successful in 19s
Details
CI / UI / Build (pull_request) Successful in 21s
Details
CI / Scraper / Build (pull_request) Successful in 19s
Details

Browse Source
This commit is contained in:
Admin
2026-03-06 20:17:57 +05:00
parent 09981a5f4d
commit 20c45e2676
1 changed files with 151 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
ui/src/routes/books/[slug]/+page.svelte
View File

@@ -172,13 +172,15 @@
{/if}
<div class="absolute inset-0 bg-gradient-to-b from-zinc-900/60 to-zinc-900/95 pointer-events-none" aria-hidden="true"></div>
<div class="relative flex gap-5 sm:gap-8 p-5 sm:p-7">
<div class="relative flex flex-col p-5 sm:p-7 gap-4">
<!-- Cover + meta row -->
<div class="flex gap-5 sm:gap-8">
<!-- Cover image -->
{#if data.book.cover}
<img
src={data.book.cover}
alt={data.book.title}
class="w-36 sm:w-48 rounded-lg object-cover flex-shrink-0 border border-zinc-700 shadow-xl self-start"
class="w-28 sm:w-48 rounded-lg object-cover flex-shrink-0 border border-zinc-700 shadow-xl self-start"
/>
{/if}
@@ -186,7 +188,7 @@
<div class="flex flex-col gap-2 min-w-0 flex-1">
<!-- Title + "not in library" badge -->
<div class="flex items-start gap-2 flex-wrap">
<h1 class="text-2xl sm:text-3xl font-bold text-zinc-100 leading-tight">{data.book.title}</h1>
<h1 class="text-xl sm:text-3xl font-bold text-zinc-100 leading-tight">{data.book.title}</h1>
{#if !data.inLib}
<span
class="mt-1 text-xs px-2 py-0.5 rounded-full bg-zinc-700 text-zinc-400 border border-zinc-600 shrink-0"
@@ -229,9 +231,8 @@
</div>
{/if}
<!-- CTA buttons -->
<div class="flex gap-2 mt-3 flex-wrap items-center">
<!-- Primary: Continue (shown only when there's a last chapter) -->
<!-- CTA buttons — desktop only (hidden on mobile, shown below on mobile) -->
<div class="hidden sm:flex gap-2 mt-3 items-center flex-wrap">
{#if data.lastChapter}
<a
href="/books/{data.book.slug}/chapters/{data.lastChapter}"
@@ -240,8 +241,6 @@
Continue ch.{data.lastChapter}
</a>
{/if}
<!-- Secondary: Start / Preview ch.1 -->
{#if chapterList.length > 0}
<a
href="/books/{data.book.slug}/chapters/1"
@@ -253,8 +252,6 @@
{data.inLib ? 'Start from ch.1' : 'Preview ch.1'}
</a>
{/if}
<!-- Save: icon-only bookmark button -->
{#if data.inLib}
<button
onclick={toggleSave}
@@ -284,6 +281,56 @@
</div>
</div>
</div>
<!-- CTA buttons — mobile only, full-width row below cover+meta -->
<div class="flex sm:hidden gap-2 items-center">
{#if data.lastChapter}
<a
href="/books/{data.book.slug}/chapters/{data.lastChapter}"
class="flex-1 text-center px-4 py-2.5 bg-amber-400 text-zinc-900 font-semibold rounded-lg text-sm hover:bg-amber-300 transition-colors shadow"
>
Continue ch.{data.lastChapter}
</a>
{/if}
{#if chapterList.length > 0}
<a
href="/books/{data.book.slug}/chapters/1"
class="flex-1 text-center px-4 py-2.5 rounded-lg text-sm font-semibold transition-colors
{data.lastChapter
? 'bg-zinc-700 text-zinc-300 hover:bg-zinc-600'
: 'bg-amber-400 text-zinc-900 hover:bg-amber-300 shadow'}"
>
{data.inLib ? 'Start from ch.1' : 'Preview ch.1'}
</a>
{/if}
{#if data.inLib}
<button
onclick={toggleSave}
disabled={saving}
title={saved ? 'Remove from library' : 'Add to library'}
class="flex items-center justify-center w-10 h-10 flex-shrink-0 rounded-lg border transition-colors disabled:opacity-50
{saved
? 'bg-amber-400/20 text-amber-300 border-amber-400/30 hover:bg-red-500/20 hover:text-red-300 hover:border-red-400/30'
: 'bg-zinc-700 text-zinc-400 border-zinc-600 hover:bg-zinc-600 hover:text-zinc-100'}"
>
{#if saving}
<svg class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
</svg>
{:else if saved}
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
<path d="M5 4a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 20V4z"/>
</svg>
{:else}
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 4a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 20V4z"/>
</svg>
{/if}
</button>
{/if}
</div>
</div>
</div>
<!-- ══════════════════════════════════════════════════ Chapter list ══ -->
@@ -355,7 +402,7 @@
</span>
<!-- Date label — desktop only -->
{#if (chapter as { date_label?: string }).date_label}
<span class="text-xs text-zinc-600 flex-shrink-0 hidden sm:inline">&middot; {(chapter as { date_label?: string }).date_label}</span>
<span class="text-xs text-zinc-600 flex-shrink-0 max-sm:hidden">&middot; {(chapter as { date_label?: string }).date_label}</span>
{/if}
<!-- "reading" badge -->
{#if isCurrent}