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

fix(reader): clean up focus mode footer
All checks were successful
Release / Test backend (push) Successful in 39s
Details
Release / Check ui (push) Successful in 1m35s
Details
Release / Docker / caddy (push) Successful in 41s
Details
Release / Docker / backend (push) Successful in 2m45s
Details
Release / Docker / runner (push) Successful in 2m32s
Details
Release / Upload source maps (push) Successful in 1m31s
Details
Release / Docker / ui (push) Successful in 2m48s
Details
Release / Gitea Release (push) Successful in 45s
Details

Browse Source 
- Hide the global site footer on chapter pages (not useful mid-reading)
- Merge the three separate floating nav pills into a single unified pill
  with dividers, removing the visual clutter of multiple bordered bubbles
- Float the pill lower (bottom-6) when the mini-player is not active
This commit is contained in:
root
2026-04-06 15:42:45 +05:00
parent 5dd9dd2ebb
commit b70fed5cd7
2 changed files with 38 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
ui/src/routes/+layout.svelte
View File

@@ -721,7 +721,9 @@
{/key}
</main>
<footer class="border-t border-(--color-border) mt-auto">
<footer class="border-t border-(--color-border) mt-auto"
class:hidden={/\/books\/[^/]+\/chapters\//.test(page.url.pathname)}
>
<div class="max-w-6xl mx-auto px-4 py-6 flex flex-col items-center gap-4 text-xs text-(--color-muted)">
<!-- Top row: site links -->
<nav class="flex flex-wrap items-center justify-center gap-x-5 gap-y-2">

66
ui/src/routes/books/[slug]/chapters/[n]/+page.svelte
View File

@@ -649,40 +649,44 @@
<!-- ── Focus mode floating nav ───────────────────────────────────────────── -->
{#if layout.focusMode}
<div class="fixed bottom-[4.5rem] left-1/2 -translate-x-1/2 z-50 flex items-center gap-2">
{#if data.prev}
<a
href="/books/{data.book.slug}/chapters/{data.prev}"
class="flex items-center gap-1 px-3 py-1.5 rounded-full bg-(--color-surface-2)/90 backdrop-blur border border-(--color-border) text-(--color-muted) hover:text-(--color-text) text-xs transition-colors shadow-md"
<div class="fixed {audioStore.active ? 'bottom-[4.5rem]' : 'bottom-6'} left-1/2 -translate-x-1/2 z-50">
<div class="flex items-center divide-x divide-(--color-border) rounded-full bg-(--color-surface-2)/95 backdrop-blur border border-(--color-border) shadow-lg text-xs text-(--color-muted) overflow-hidden">
{#if data.prev}
<a
href="/books/{data.book.slug}/chapters/{data.prev}"
class="flex items-center gap-1 px-3 py-2 hover:text-(--color-text) hover:bg-(--color-surface-3) transition-colors"
aria-label="Previous chapter"
>
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
</svg>
{m.reader_chapter_n({ n: String(data.prev) })}
</a>
{/if}
<button
type="button"
onclick={() => setLayout('focusMode', false)}
class="flex items-center gap-1 px-3 py-2 hover:text-(--color-brand) hover:bg-(--color-surface-3) transition-colors"
aria-label="Exit focus mode"
>
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
</svg>
{m.reader_chapter_n({ n: String(data.prev) })}
</a>
{/if}
<button
type="button"
onclick={() => setLayout('focusMode', false)}
class="flex items-center gap-1 px-3 py-1.5 rounded-full bg-(--color-surface-2)/90 backdrop-blur border border-(--color-border) text-(--color-muted) hover:text-(--color-brand) text-xs transition-colors shadow-md"
aria-label="Exit focus mode"
>
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
</svg>
Exit focus
</button>
{#if data.next}
<a
href="/books/{data.book.slug}/chapters/{data.next}"
class="flex items-center gap-1 px-3 py-1.5 rounded-full bg-(--color-surface-2)/90 backdrop-blur border border-(--color-border) text-(--color-muted) hover:text-(--color-text) text-xs transition-colors shadow-md"
>
{m.reader_chapter_n({ n: String(data.next) })}
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
</svg>
</a>
{/if}
Exit focus
</button>
{#if data.next}
<a
href="/books/{data.book.slug}/chapters/{data.next}"
class="flex items-center gap-1 px-3 py-2 hover:text-(--color-text) hover:bg-(--color-surface-3) transition-colors"
aria-label="Next chapter"
>
{m.reader_chapter_n({ n: String(data.next) })}
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
</svg>
</a>
{/if}
</div>
</div>
{/if}