From ed4f65804c8aef47367241d57caa5ac39fe0ce8f Mon Sep 17 00:00:00 2001
From: Wolfgang Müller
Date: Mon, 22 Jul 2024 13:54:13 +0200
Subject: frontend/reader: Add simple page indicator

---
 frontend/src/lib/reader/Reader.svelte                   | 4 ++++
 frontend/src/lib/reader/components/PageIndicator.svelte | 9 +++++++++
 2 files changed, 13 insertions(+)
 create mode 100644 frontend/src/lib/reader/components/PageIndicator.svelte

(limited to 'frontend')

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>
-- 
cgit v1.2.3-2-gb3c3