diff options
Diffstat (limited to 'frontend/src')
| -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> |