admin/windwiderstand
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(calendar): EventDateBox skaliert proportional zur Quadratgröße
Deploy / verify (push) Successful in 1m13s
Details
Deploy / deploy (push) Successful in 1m34s
Details

Browse Source 
Feste px-Schriftgrößen + h-20 verursachten auf Mobile Overflow ("Jun"
rutschte raus). Jetzt eine CSS-Var --s (Kantenlänge, responsive clamp);
alle Innenmaße per calc() abgeleitet. Range-Box nur breiter, gleiche
Höhe → identische Schrift wie Einzel-Box.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Peter Meier
2026-06-22 21:55:03 +02:00
parent ccf500fc62
commit 93fcf79f86
1 changed files with 10 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/blocks/EventDateBox.svelte
+10 -17
View File
@@ -18,28 +18,21 @@
const isRange = $derived(multiDay && !!end);
</script>
<!-- --s = Kantenlänge des Quadrats (responsive). Alle Innenmaße per calc()
davon abgeleitet → skalieren proportional mit der Box, nie Overflow.
Range-Box nur breiter; Schrift-Referenz bleibt --s (Höhe). -->
<div
class="event-date-box shrink-0 h-20 min-w-20 px-2.5 flex flex-col items-center justify-center gap-1 overflow-hidden leading-none bg-himmel-800 rounded-sm"
class="[--s:clamp(3.5rem,18vw,5rem)] shrink-0 flex flex-col items-center justify-center h-[var(--s)] min-w-[var(--s)] gap-[calc(var(--s)*0.05)] px-[calc(var(--s)*0.12)] overflow-hidden leading-none whitespace-nowrap bg-himmel-800 rounded-sm {isRange ? '' : 'w-[var(--s)]'}"
>
{#if isRange && end}
<div class="text-[11px] uppercase tracking-wide text-himmel-300 whitespace-nowrap">
{wd(start)}–{wd(end)}
</div>
<div class="text-lg font-bold tracking-tight text-himmel-50 tabular-nums whitespace-nowrap">
<div class="text-[calc(var(--s)*0.14)] uppercase tracking-wide text-himmel-300">{wd(start)}–{wd(end)}</div>
<div class="text-[calc(var(--s)*0.23)] font-bold tracking-tight text-himmel-50 tabular-nums">
{start.getDate()}–{end.getDate()}
</div>
<div class="text-[11px] uppercase tracking-wide text-himmel-300">
{mon(start)}
</div>
<div class="text-[calc(var(--s)*0.14)] uppercase tracking-wide text-himmel-300">{mon(start)}</div>
{:else}
<div class="text-[11px] uppercase tracking-wide text-himmel-300">
{wd(start)}
</div>
<div class="text-3xl font-bold text-himmel-50 tabular-nums">
{start.getDate()}
</div>
<div class="text-[11px] uppercase tracking-wide text-himmel-300">
{mon(start)}
</div>
<div class="text-[calc(var(--s)*0.14)] uppercase tracking-wide text-himmel-300">{wd(start)}</div>
<div class="text-[calc(var(--s)*0.38)] font-bold text-himmel-50 tabular-nums">{start.getDate()}</div>
<div class="text-[calc(var(--s)*0.14)] uppercase tracking-wide text-himmel-300">{mon(start)}</div>
{/if}
</div>