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

fix(bulk-upload): form layout polish and drop zone sizing

Browse Source 
- Drop zone box doubled: max-w-xl, larger icon (80px), bigger padding and text
- Title field wrapped in its own card (matches WhoWhenSection/DescriptionSection)
- Removed double-wrapping outer card around WhoWhenSection + DescriptionSection
- Added space-y-4 between form sections for consistent breathing room
- ScopeCard per-file label: text-accent → text-primary for legible contrast in light theme

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-04-24 19:26:22 +02:00
committed by marcel
parent 539842e849
commit 76c14ea604
3 changed files with 21 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
frontend/src/lib/components/document/BulkDropZone.svelte
View File

@@ -30,15 +30,15 @@ let isDragging = $state(false);
>
<div
class={[
'flex w-full max-w-sm flex-col items-center gap-3 rounded-md border-2 border-dashed px-6 py-9 text-center transition-colors',
'flex w-full max-w-xl flex-col items-center gap-5 rounded-md border-2 border-dashed px-12 py-16 text-center transition-colors',
isDragging ? 'border-accent bg-accent/10' : 'border-accent/50 bg-white/[0.04]'
].join(' ')}
>
<!-- Circular mint icon -->
<div class="flex h-14 w-14 items-center justify-center rounded-full bg-accent text-primary">
<div class="flex h-20 w-20 items-center justify-center rounded-full bg-accent text-primary">
<svg
width="22"
height="22"
width="32"
height="32"
viewBox="0 0 32 32"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
@@ -51,10 +51,10 @@ let isDragging = $state(false);
</div>
<!-- Serif title -->
<p class="font-serif text-sm font-bold text-ink">{m.bulk_drop_hint()}</p>
<p class="font-serif text-base font-bold text-ink">{m.bulk_drop_hint()}</p>
<!-- Sub description -->
<p class="text-xs leading-relaxed text-ink-2">
<p class="text-sm leading-relaxed text-ink-2">
Für jede Datei wird ein eigenes Dokument erstellt.<br />
<strong class="text-ink">Der Titel</strong> wird aus dem Dateinamen vorausgefüllt —
<strong class="text-ink">alle anderen Felder</strong> gelten für alle gemeinsam.
@@ -62,7 +62,7 @@ let isDragging = $state(false);
<!-- CTA button -->
<label
class="flex min-h-[44px] cursor-pointer items-center rounded-sm bg-primary px-4 py-2 text-xs font-bold tracking-widest text-primary-fg uppercase transition-opacity hover:opacity-90"
class="flex min-h-[44px] cursor-pointer items-center rounded-sm bg-primary px-6 py-2 text-xs font-bold tracking-widest text-primary-fg uppercase transition-opacity hover:opacity-90"
>
Dateien auswählen
<input
@@ -78,6 +78,6 @@ let isDragging = $state(false);
</label>
<!-- Format hint -->
<p class="text-[11px] text-ink-3">{m.bulk_drop_sub()}</p>
<p class="text-xs text-ink-3">{m.bulk_drop_sub()}</p>
</div>
</div>