diff options
| author | Wolfgang Müller | 2024-07-22 13:54:13 +0200 |
|---|---|---|
| committer | Wolfgang Müller | 2024-07-22 14:08:40 +0200 |
| commit | ed4f65804c8aef47367241d57caa5ac39fe0ce8f (patch) | |
| tree | 095198e23eb5604e306eeebf89df633c09531f97 | |
| parent | 9ef47358926216695f6443fd7b48ef0c5d17b15d (diff) | |
| download | hircine-ed4f65804c8aef47367241d57caa5ac39fe0ce8f.tar.gz | |
frontend/reader: Add simple page indicator
| -rw-r--r-- | frontend/src/lib/reader/Reader.svelte | 4 | ||||
| -rw-r--r-- | frontend/src/lib/reader/components/PageIndicator.svelte | 9 |
2 files changed, 13 insertions, 0 deletions
diff --git a/frontend/src/lib/reader/Reader.svelte b/frontend/src/lib/reader/Reader.svelte index a8f9440..15ebdf4 100644 --- a/frontend/src/lib/reader/Reader.svelte +++ b/frontend/src/lib/reader/Reader.svelte @@ -4,6 +4,7 @@ import { fadeDefault, slideXDefault } from '$lib/Transitions'; import { fade, slide } from 'svelte/transition'; import CloseReaderButton from './components/CloseReaderButton.svelte'; + import PageIndicator from './components/PageIndicator.svelte'; import ReaderMenuButton from './components/ReaderMenuButton.svelte'; const reader = getReaderContext(); @@ -30,6 +31,9 @@ {/if} <CloseReaderButton /> </div> + <div class="absolute bottom-0 right-0 z-10 flex p-1 text-lg"> + <PageIndicator /> + </div> <div class="flex grow"> <slot /> diff --git a/frontend/src/lib/reader/components/PageIndicator.svelte b/frontend/src/lib/reader/components/PageIndicator.svelte new file mode 100644 index 0000000..f79fc00 --- /dev/null +++ b/frontend/src/lib/reader/components/PageIndicator.svelte @@ -0,0 +1,9 @@ +<script lang="ts"> + import { getReaderContext } from '$lib/Reader'; + + const reader = getReaderContext(); +</script> + +<div class="floating !p-2"> + {$reader.page + 1}/{$reader.pages.length} +</div> |