marcel/familienarchiv
1
0
Fork 0
Code Issues 119 Pull Requests 2 Actions Packages Projects Releases Wiki Activity

feat(documents): enlarge thumbnail in document-list rows

Browse Source 
Add a `size` prop to DocumentThumbnail (default `sm` keeps the existing
60×84 tile used in person sublists; new `lg` is 120×168) and use `lg`
for the main document-list row, where the previous tile occupied less
than half of the row's vertical space.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-04-23 08:18:50 +02:00
parent 31713c324b
commit 6aae159698
2 changed files with 18 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/lib/components/DocumentRow.svelte
View File

@@ -40,7 +40,7 @@ function safeTagColor(color: string | null | undefined): string {
<a href="/documents/{doc.id}" class="block px-4 py-4 sm:py-5">
<div class="flex gap-3 sm:gap-5">
<!-- Thumbnail tile -->
<DocumentThumbnail doc={doc} />
<DocumentThumbnail doc={doc} size="lg" />
<!-- Left column -->
<div class="flex-1 sm:border-r sm:border-line sm:pr-5">

28
frontend/src/lib/components/DocumentThumbnail.svelte
View File

@@ -7,21 +7,27 @@ type Doc = Pick<
'id' | 'thumbnailKey' | 'thumbnailGeneratedAt' | 'contentType'
>;
let { doc }: { doc: Doc } = $props();
let { doc, size = 'sm' }: { doc: Doc; size?: 'sm' | 'lg' } = $props();
const url = $derived(thumbnailUrl(doc));
const containerClass = $derived(
size === 'lg'
? 'relative h-[168px] w-[120px] flex-shrink-0 overflow-hidden rounded-sm border border-line bg-white'
: 'relative h-[84px] w-[60px] flex-shrink-0 overflow-hidden rounded-sm border border-line bg-white'
);
const iconClass = $derived(size === 'lg' ? 'h-16 w-16' : 'h-8 w-8');
</script>
<!--
Fixed 60x84 tile used wherever a document row appears. When the backend has
generated a thumbnail we render it with `object-cover` + `object-top` so
letter salutations stay visible; otherwise we fall back to the file-type
icon so the row never shows an empty rectangle. Dark mode uses
`mix-blend-multiply` to keep bright paper scans from glaring against the
dark page background.
Fixed-aspect (5:7, ≈A4) tile used wherever a document row appears. `sm` is
60×84 (compact rows, person sublists); `lg` is 120×168 (main document list).
When the backend has generated a thumbnail we render it with `object-cover`
+ `object-top` so letter salutations stay visible; otherwise we fall back
to the file-type icon so the row never shows an empty rectangle. Dark mode
uses `mix-blend-multiply` to keep bright paper scans from glaring against
the dark page background.
-->
<div
class="relative h-[84px] w-[60px] flex-shrink-0 overflow-hidden rounded-sm border border-line bg-white"
>
<div class={containerClass}>
{#if url}
<img
src={url}
@@ -41,7 +47,7 @@ const url = $derived(thumbnailUrl(doc));
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="h-8 w-8"
class={iconClass}
>
<path
stroke-linecap="round"