From 6bc3ca7032c78c77a6e2b316789938221d686d8b Mon Sep 17 00:00:00 2001
From: Wolfgang Müller
Date: Wed, 19 Feb 2025 15:39:48 +0100
Subject: frontend: Implement a better page indicator

This replaces the very simplistic x/y page indicator with a visual bar
at the bottom of the reader that allows the user quick access to any
arbitrary page. At the margins it shows the current page number(s) and
the total amount of pages.
---
 frontend/src/lib/reader/components/SliderTooltip.svelte | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)
 create mode 100644 frontend/src/lib/reader/components/SliderTooltip.svelte

(limited to 'frontend/src/lib/reader/components/SliderTooltip.svelte')

diff --git a/frontend/src/lib/reader/components/SliderTooltip.svelte b/frontend/src/lib/reader/components/SliderTooltip.svelte
new file mode 100644
index 0000000..9e0322d
--- /dev/null
+++ b/frontend/src/lib/reader/components/SliderTooltip.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	let { children }: { children: Snippet } = $props();
+</script>
+
+<div
+	class="invisible absolute bottom-10 w-20 rounded-xl bg-blue-500 p-1 font-semibold text-white drop-shadow-md group-hover/page:visible"
+>
+	{@render children()}
+</div>
+
+<style lang="postcss">
+	div {
+		left: calc(50% - 2.5rem);
+	}
+</style>
-- 
cgit v1.2.3-2-gb3c3

