Revert "fix(calendar): stack layout, cap block at 1000px, restore events scroll"
This reverts commit bf6ca475db.
This commit is contained in:
@@ -397,7 +397,7 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class="{layoutClasses} w-full max-w-[1000px] mx-auto min-w-0 calendar-block border border-stein-200 overflow-hidden"
|
class="{layoutClasses} w-full min-w-0 calendar-block border border-stein-200 overflow-hidden"
|
||||||
data-block="Calendar" data-block-type="calendar"
|
data-block="Calendar" data-block-type="calendar"
|
||||||
data-block-slug={block._slug}
|
data-block-slug={block._slug}
|
||||||
>
|
>
|
||||||
@@ -597,10 +597,9 @@
|
|||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<div class="calendar-grid-wrapper flex w-full flex-col">
|
<div class="calendar-grid-wrapper grid w-full grid-cols-1 md:grid-cols-2 gap-0">
|
||||||
<!-- Links: Kalender -->
|
<!-- Links: Kalender -->
|
||||||
<div class="calendar-column p-4 flex flex-col bg-himmel-800 text-himmel-100 shadow-sm">
|
<div class="calendar-column min-h-full p-4 flex flex-col bg-himmel-800 text-himmel-100 shadow-sm">
|
||||||
<div class="w-full max-w-[480px] mx-auto">
|
|
||||||
<div class="flex items-center justify-between gap-2 mb-4">
|
<div class="flex items-center justify-between gap-2 mb-4">
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
@@ -677,15 +676,14 @@
|
|||||||
{/each}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Rechts: alle zukünftigen Termine als Accordion. Datum + Headline
|
<!-- Rechts: alle zukünftigen Termine als Accordion. Datum + Headline
|
||||||
im summary, Beschreibung + Aktionen im body. Kalender-Klick
|
im summary, Beschreibung + Aktionen im body. Kalender-Klick
|
||||||
filtert auf einen Tag; ohne Filter zeigt Liste alles ab heute,
|
filtert auf einen Tag; ohne Filter zeigt Liste alles ab heute,
|
||||||
gruppiert nach Tag mit großzügigem header. -->
|
gruppiert nach Tag mit großzügigem header. -->
|
||||||
<div class="calendar-events-wrapper flex flex-col" bind:this={panelEl}>
|
<div class="calendar-events-wrapper min-h-0 flex flex-col" bind:this={panelEl}>
|
||||||
<div
|
<div
|
||||||
class="calendar-events-panel border-t border-stein-200 bg-stein-0 flex flex-col"
|
class="calendar-events-panel border-t md:border-t-0 md:border-l border-stein-200 bg-stein-0 flex flex-col overflow-hidden flex-1 min-h-0"
|
||||||
>
|
>
|
||||||
{#if items.length === 0}
|
{#if items.length === 0}
|
||||||
<p class="text-sm text-stein-500 p-4">{t(T.calendar_no_events)}</p>
|
<p class="text-sm text-stein-500 p-4">{t(T.calendar_no_events)}</p>
|
||||||
@@ -707,7 +705,7 @@
|
|||||||
{t(T.calendar_clear_filter)}
|
{t(T.calendar_clear_filter)}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<ul class="m-0! p-0! list-none max-h-[600px] overflow-auto">
|
<ul class="m-0! p-0! list-none flex-1 min-h-0 overflow-auto">
|
||||||
{#each selectedDayEvents as item}
|
{#each selectedDayEvents as item}
|
||||||
{@render eventAccordion(item, true, false)}
|
{@render eventAccordion(item, true, false)}
|
||||||
{/each}
|
{/each}
|
||||||
@@ -721,7 +719,7 @@
|
|||||||
{t(T.calendar_event_count, { n: futureEvents.length })}
|
{t(T.calendar_event_count, { n: futureEvents.length })}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<ul class="m-0! p-0! list-none max-h-[600px] overflow-auto">
|
<ul class="m-0! p-0! list-none flex-1 min-h-0 overflow-auto">
|
||||||
{#each futureEventsByDay as group, gIdx}
|
{#each futureEventsByDay as group, gIdx}
|
||||||
<li class="day-group">
|
<li class="day-group">
|
||||||
<div class="px-3 py-1 bg-himmel-50/60 text-[11px] uppercase tracking-wide font-medium text-stein-600 sticky top-0 z-10 backdrop-blur-sm">
|
<div class="px-3 py-1 bg-himmel-50/60 text-[11px] uppercase tracking-wide font-medium text-stein-600 sticky top-0 z-10 backdrop-blur-sm">
|
||||||
@@ -759,7 +757,7 @@
|
|||||||
<span class="font-medium uppercase tracking-wide">{t(T.calendar_past_events)}</span>
|
<span class="font-medium uppercase tracking-wide">{t(T.calendar_past_events)}</span>
|
||||||
<span class="text-stein-500 tabular-nums">· {pastEvents.length}</span>
|
<span class="text-stein-500 tabular-nums">· {pastEvents.length}</span>
|
||||||
</summary>
|
</summary>
|
||||||
<ul class="m-0! p-0! list-none opacity-80">
|
<ul class="m-0! p-0! list-none flex-1 min-h-0 overflow-auto opacity-80">
|
||||||
{#each pastEvents as item}
|
{#each pastEvents as item}
|
||||||
{@render eventAccordion(item, false, false)}
|
{@render eventAccordion(item, false, false)}
|
||||||
{/each}
|
{/each}
|
||||||
@@ -845,8 +843,7 @@
|
|||||||
.calendar-block .day-group {
|
.calendar-block .day-group {
|
||||||
break-inside: avoid;
|
break-inside: avoid;
|
||||||
}
|
}
|
||||||
.calendar-block .calendar-events-panel,
|
.calendar-block .calendar-events-panel {
|
||||||
.calendar-block .calendar-events-panel ul {
|
|
||||||
overflow: visible !important;
|
overflow: visible !important;
|
||||||
max-height: none !important;
|
max-height: none !important;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user