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

fix(book): move description to full-width section below header

Browse Source 
The description was crammed into the narrow right column beside the cover,
creating a wall of text on mobile. Now it renders full-width below the
cover+title row with better line-height, 5-line collapse, gradient fade,
and a chevron-annotated show-more button.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Admin
2026-04-05 23:11:49 +05:00
parent a0404cea57
commit 150eb2a2af
1 changed files with 28 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -633,22 +633,6 @@
{/if}
</div>
<!-- Summary with expand toggle -->
{#if book.summary}
<div class="mt-1">
<p class="text-(--color-muted) text-sm leading-relaxed break-words {summaryExpanded ? '' : 'line-clamp-3'}">
{book.summary}
</p>
{#if book.summary.length > 220}
<button
onclick={() => (summaryExpanded = !summaryExpanded)}
class="text-xs text-(--color-brand)/70 hover:text-(--color-brand) mt-1 transition-colors"
>
{summaryExpanded ? m.book_detail_less() : m.book_detail_more()}
</button>
{/if}
</div>
{/if}
<!-- CTA buttons — desktop only -->
<div class="hidden sm:flex gap-2 mt-3 items-center flex-wrap">
@@ -825,6 +809,34 @@
</div>
</div>
<!-- ── Book description ──────────────────────────────────────────────────────── -->
{#if book.summary}
<div class="mb-6">
<div class="relative">
<p
class="text-(--color-muted) text-sm leading-7 break-words whitespace-pre-line {summaryExpanded ? '' : 'line-clamp-5'}"
>
{book.summary}
</p>
{#if !summaryExpanded && book.summary.length > 300}
<!-- gradient fade over the last line when collapsed -->
<div class="absolute bottom-0 left-0 right-0 h-10 bg-gradient-to-t from-(--color-surface) to-transparent pointer-events-none"></div>
{/if}
</div>
{#if book.summary.length > 300}
<button
onclick={() => (summaryExpanded = !summaryExpanded)}
class="mt-2 text-xs text-(--color-brand)/70 hover:text-(--color-brand) transition-colors inline-flex items-center gap-1"
>
{summaryExpanded ? m.book_detail_less() : m.book_detail_more()}
<svg class="w-3 h-3 transition-transform {summaryExpanded ? 'rotate-180' : ''}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
</svg>
</button>
{/if}
</div>
{/if}
<!-- ══════════════════════════════════════════════════ Download row ══ -->
{#if data.inLib && chapterList.length > 0}
<div class="flex items-center gap-3 border border-(--color-border) rounded-xl px-4 py-3 mb-4">