fix(calendar): EventDateBox simpler flex-center Layout (Safari-fest)
Grid/calc/leading-Experimente raus. Schlichtes flex justify/items-center mit innerem text-center-Block (Wochentag/Tag/Monat) — rendert auf iOS Safari zuverlässig. wald-Farbschema + rounded-br-4xl + shadow. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -20,7 +20,8 @@
|
||||
|
||||
const weekday = (d: Date) =>
|
||||
d.toLocaleDateString("de-DE", { weekday: "short" }).replace(/\.$/, "");
|
||||
const month = (d: Date) => d.toLocaleDateString("de-DE", { month: "short" });
|
||||
const month = (d: Date) =>
|
||||
d.toLocaleDateString("de-DE", { month: "short" });
|
||||
|
||||
// YYYY-MM-DD aus lokalen Feldern (kein UTC-Shift) für <time datetime>.
|
||||
const isoDate = (d: Date) =>
|
||||
@@ -35,35 +36,28 @@
|
||||
});
|
||||
|
||||
const ariaLabel = $derived(
|
||||
isRange && end ? `${fullDate(start)} bis ${fullDate(end)}` : fullDate(start),
|
||||
isRange && end
|
||||
? `${fullDate(start)} bis ${fullDate(end)}`
|
||||
: fullDate(start),
|
||||
);
|
||||
</script>
|
||||
|
||||
<time
|
||||
datetime={isoDate(start)}
|
||||
aria-label={ariaLabel}
|
||||
class="shrink-0 select-none flex flex-col items-center justify-center gap-0.5 leading-none tabular-nums rounded-sm bg-himmel-800 text-himmel-50
|
||||
{isRange
|
||||
? 'h-16 sm:h-20 min-w-16 sm:min-w-20 px-2.5'
|
||||
: 'size-16 sm:size-20'}"
|
||||
>
|
||||
<span
|
||||
class="text-[10px] sm:text-[11px] font-medium uppercase tracking-wider text-himmel-300 whitespace-nowrap"
|
||||
>
|
||||
{#if isRange && end}{weekday(start)}–{weekday(end)}{:else}{weekday(start)}{/if}
|
||||
</span>
|
||||
|
||||
{#if isRange && end}
|
||||
<span class="text-base sm:text-lg font-bold leading-none tracking-tight whitespace-nowrap">
|
||||
{start.getDate()}–{end.getDate()}
|
||||
</span>
|
||||
{:else}
|
||||
<span class="text-2xl sm:text-3xl font-bold leading-none">{start.getDate()}</span>
|
||||
{/if}
|
||||
|
||||
<span
|
||||
class="text-[10px] sm:text-[11px] font-medium uppercase tracking-wider text-himmel-300"
|
||||
class="shrink-0 select-none aspect-square size-20 rounded-sm rounded-br-4xl bg-wald-200 text-wald-500 flex justify-center items-center shadow"
|
||||
>
|
||||
<div class="text-center font-black leading-normal">
|
||||
<div class="text-[10px] uppercase tracking-wider">
|
||||
{#if isRange && end}{weekday(start)}–{weekday(end)}{:else}{weekday(
|
||||
start,
|
||||
)}{/if}
|
||||
</div>
|
||||
<div class="text-[20px] leading-5">
|
||||
{#if isRange && end}{start.getDate()}–{end.getDate()}{:else}{start.getDate()}{/if}
|
||||
</div>
|
||||
<div class="text-[10px] uppercase tracking-wider">
|
||||
{month(start)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</time>
|
||||
|
||||
Reference in New Issue
Block a user