diff options
Diffstat (limited to 'frontend/src/lib/reader/PageView.svelte')
| -rw-r--r-- | frontend/src/lib/reader/PageView.svelte | 15 |
1 files changed, 11 insertions, 4 deletions
diff --git a/frontend/src/lib/reader/PageView.svelte b/frontend/src/lib/reader/PageView.svelte index 50c0873..2b61a78 100644 --- a/frontend/src/lib/reader/PageView.svelte +++ b/frontend/src/lib/reader/PageView.svelte @@ -102,13 +102,14 @@ {@render pagesIn(currentChunk)} </SliderMargin> <div class:reverse class="flex w-full bg-gray-400/60 backdrop-blur-2xl"> + <!-- eslint-disable-next-line svelte/require-each-key --> {#each chunks as chunk, index} <button type="button" class:read={index <= lookup[reader.page]} - class="group/page relative grow [&.read]:bg-blue-600/60" + class="group/page relative grow" onclick={() => reader.open(chunk.index)} - aria-label={`Open page ${chunk.index}`} + aria-label={`Open page ${chunk.index + 1}`} > <SliderTooltip> {@render pagesIn(chunk)} @@ -123,13 +124,19 @@ </div> <div class="invisible absolute"> - {#each pagesAround(reader.page) as page} + {#each pagesAround(reader.page) as page (page.id)} <img src={src(page.image, 'full')} alt="" /> {/each} </div> -<style> +<style lang="postcss"> + @reference "tailwindcss/theme"; + .reverse { flex-direction: row-reverse; } + + button.read { + @apply bg-blue-600/60; + } </style> |