rehlert/bea-edit
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

rotate + hover on start-page
Build and Push Docker Image / build (push) Successful in 1m26s
Details

Browse Source
This commit is contained in:
rehlert committed 2026-08-29 12:04:29 +02:00
1 parent ea21fc000f
commit 09cc5c06fb
7 files changed
+402 -58
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/lib/components/PdfPageGrid.svelte
+81 -26
View File
@@ -1,4 +1,5 @@
<script lang="ts">
import type { Snippet } from 'svelte';
import type { PdfThumbnail } from '$lib/pdf-thumbnails';
import { cn } from '$lib/utils';
@@ -8,6 +9,8 @@
onPageClick?: (pageNumber: number) => void;
thumbnailWidth?: number;
class?: string;
pageActions?: Snippet<[pageNumber: number]>;
cardClass?: (pageNumber: number) => string;
};
let {
@@ -15,7 +18,9 @@
selectedPages = new Set<number>(),
onPageClick,
thumbnailWidth = 120,
class: className = ''
class: className = '',
pageActions,
cardClass
}: Props = $props();
</script>
@@ -25,30 +30,80 @@
>
{#each thumbnails as thumb}
{@const isSelected = selectedPages.has(thumb.pageNumber)}
<button
type="button"
class={cn(
'group relative flex flex-col items-center gap-2 rounded-xl border-2 p-2 transition focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-400',
isSelected
? 'border-primary bg-primary/5'
: 'border-transparent hover:border-primary-200 hover:bg-primary-50/50'
)}
onclick={() => onPageClick?.(thumb.pageNumber)}
>
<img
src={thumb.imageUrl}
alt="Seite {thumb.pageNumber}"
class="w-full rounded border border-primary-100 bg-white object-contain"
style="aspect-ratio: {thumb.width} / {thumb.height};"
/>
<span class="text-[12px] font-medium text-primary-700">Seite {thumb.pageNumber}</span>
{#if isSelected}
<div
class="absolute top-1 right-1 flex h-5 w-5 items-center justify-center rounded-full bg-primary text-[10px] font-bold text-white"
>
✓
</div>
{/if}
</button>
{#if onPageClick}
<button
type="button"
class={cn(
'group relative flex flex-col items-center gap-2 rounded-xl border-2 p-2 transition focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-400',
isSelected
? 'border-primary bg-primary/5'
: 'border-transparent hover:border-primary-200 hover:bg-primary-50/50'
)}
onclick={() => onPageClick(thumb.pageNumber)}
>
{#if cardClass}
<div
class={cn(
'flex aspect-square w-full items-center justify-center',
cardClass(thumb.pageNumber)
)}
>
<img
src={thumb.imageUrl}
alt="Seite {thumb.pageNumber}"
class="max-h-full max-w-full rounded border border-primary-100 bg-white object-contain"
/>
</div>
{:else}
<img
src={thumb.imageUrl}
alt="Seite {thumb.pageNumber}"
class="w-full rounded border border-primary-100 bg-white object-contain"
style="aspect-ratio: {thumb.width} / {thumb.height};"
/>
{/if}
<span class="text-[12px] font-medium text-primary-700">Seite {thumb.pageNumber}</span>
{#if isSelected}
<div
class="absolute top-1 right-1 flex h-5 w-5 items-center justify-center rounded-full bg-primary text-[10px] font-bold text-white"
>
✓
</div>
{/if}
</button>
{:else}
<div
class={cn(
'group relative flex flex-col items-center gap-2 rounded-xl border-2 border-transparent p-2',
isSelected && 'border-primary bg-primary/5'
)}
>
{#if cardClass}
<div
class={cn(
'flex aspect-square w-full items-center justify-center',
cardClass(thumb.pageNumber)
)}
>
<img
src={thumb.imageUrl}
alt="Seite {thumb.pageNumber}"
class="max-h-full max-w-full rounded border border-primary-100 bg-white object-contain"
/>
</div>
{:else}
<img
src={thumb.imageUrl}
alt="Seite {thumb.pageNumber}"
class="w-full rounded border border-primary-100 bg-white object-contain"
style="aspect-ratio: {thumb.width} / {thumb.height};"
/>
{/if}
<span class="text-[12px] font-medium text-primary-700">Seite {thumb.pageNumber}</span>
{#if pageActions}
{@render pageActions(thumb.pageNumber)}
{/if}
</div>
{/if}
{/each}
</div>