summaryrefslogtreecommitdiffstatshomepage
diff options
context:
space:
mode:
authorWolfgang Müller2024-07-22 13:54:13 +0200
committerWolfgang Müller2024-07-22 14:08:40 +0200
commited4f65804c8aef47367241d57caa5ac39fe0ce8f (patch)
tree095198e23eb5604e306eeebf89df633c09531f97
parent9ef47358926216695f6443fd7b48ef0c5d17b15d (diff)
downloadhircine-ed4f65804c8aef47367241d57caa5ac39fe0ce8f.tar.gz
frontend/reader: Add simple page indicator
-rw-r--r--frontend/src/lib/reader/Reader.svelte4
-rw-r--r--frontend/src/lib/reader/components/PageIndicator.svelte9
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>