fix: Calendar-Toolbar bricht Mobile-Wrap-Layout pro Gruppe sauber um
Label und Buttons jeder Gruppe (Kalender / Teilen / Anzeigen) in eigene inline-flex-Container gekapselt. Umbruch passiert nur zwischen Gruppen, Labels werden nicht mehr von ihren Buttons getrennt. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Peter Meier
@@ -821,82 +821,90 @@
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Kompakte Action-Toolbar: gruppiert (Kalender · Teilen · Anzeigen) mit Separatoren -->
|
||||
<div class="flex flex-wrap items-center gap-1 rounded-md border border-stein-200 bg-stein-50 p-1">
|
||||
<!-- Kalender-Aktionen -->
|
||||
<span class="px-1.5 text-[10px] uppercase tracking-wide text-stein-400">Kalender</span>
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => downloadICS(toICS(item), fileSlug(title))}
|
||||
class="inline-flex items-center gap-1 rounded px-1.5 py-1 text-[11px] text-stein-700 hover:bg-white"
|
||||
title={t(T.calendar_download_ics)}
|
||||
aria-label={t(T.calendar_download_ics)}
|
||||
>
|
||||
<Icon icon="mdi:download" class="size-3.5" />
|
||||
ICS
|
||||
</button>
|
||||
<a
|
||||
href={googleCalUrl(toICS(item))}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="inline-flex items-center gap-1 rounded px-1.5 py-1 text-[11px] text-stein-700 no-underline hover:bg-white"
|
||||
title={t(T.calendar_add_to_google)}
|
||||
>
|
||||
<Icon icon="mdi:google" class="size-3.5" />
|
||||
Google
|
||||
</a>
|
||||
<!-- Kompakte Action-Toolbar: gruppiert (Kalender · Teilen · Anzeigen) mit Separatoren.
|
||||
Auf Mobile bleiben Label+Buttons pro Gruppe via inline-flex zusammen,
|
||||
umgebrochen wird nur zwischen Gruppen. -->
|
||||
<div class="flex flex-wrap items-center gap-x-2 gap-y-1 rounded-md border border-stein-200 bg-stein-50 p-1">
|
||||
<!-- Gruppe: Kalender -->
|
||||
<div class="inline-flex items-center gap-1">
|
||||
<span class="px-1.5 text-[10px] uppercase tracking-wide text-stein-400">Kalender</span>
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => downloadICS(toICS(item), fileSlug(title))}
|
||||
class="inline-flex items-center gap-1 rounded px-1.5 py-1 text-[11px] text-stein-700 hover:bg-white"
|
||||
title={t(T.calendar_download_ics)}
|
||||
aria-label={t(T.calendar_download_ics)}
|
||||
>
|
||||
<Icon icon="mdi:download" class="size-3.5" />
|
||||
ICS
|
||||
</button>
|
||||
<a
|
||||
href={googleCalUrl(toICS(item))}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="inline-flex items-center gap-1 rounded px-1.5 py-1 text-[11px] text-stein-700 no-underline hover:bg-white"
|
||||
title={t(T.calendar_add_to_google)}
|
||||
>
|
||||
<Icon icon="mdi:google" class="size-3.5" />
|
||||
Google
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{#if feedHost}
|
||||
{@const shareKey = item._slug ?? String(item.start.getTime())}
|
||||
{@const copied = copyToastKey === shareKey}
|
||||
{@const shared = shareToastKey === shareKey}
|
||||
<span class="mx-1 h-4 w-px bg-stein-300" aria-hidden="true"></span>
|
||||
<span class="px-1.5 text-[10px] uppercase tracking-wide text-stein-400">Teilen</span>
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => copyEventLink(item)}
|
||||
class="inline-flex items-center gap-1 rounded px-1.5 py-1 text-[11px] text-stein-700 hover:bg-white"
|
||||
title={t(T.post_action_copy)}
|
||||
aria-label={t(T.post_action_copy)}
|
||||
>
|
||||
<Icon icon={copied ? "mdi:check" : "mdi:link-variant"} class="size-3.5" />
|
||||
{copied ? t(T.post_action_copied) : "Link"}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => shareEvent(item, title, locText)}
|
||||
class="inline-flex items-center gap-1 rounded px-1.5 py-1 text-[11px] text-stein-700 hover:bg-white"
|
||||
title={t(T.calendar_share_aria)}
|
||||
aria-label={t(T.calendar_share_aria)}
|
||||
>
|
||||
<Icon icon={shared ? "mdi:check" : "mdi:share-variant"} class="size-3.5" />
|
||||
{shared ? t(T.calendar_share_copied) : t(T.calendar_share)}
|
||||
</button>
|
||||
{#if item._slug}
|
||||
<!-- Gruppe: Teilen -->
|
||||
<div class="inline-flex items-center gap-1 border-l border-stein-300 pl-2">
|
||||
<span class="px-1.5 text-[10px] uppercase tracking-wide text-stein-400">Teilen</span>
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => openSocial(item)}
|
||||
onclick={() => copyEventLink(item)}
|
||||
class="inline-flex items-center gap-1 rounded px-1.5 py-1 text-[11px] text-stein-700 hover:bg-white"
|
||||
title="Social-Bild Vorschau"
|
||||
aria-label="Social-Bild Vorschau"
|
||||
title={t(T.post_action_copy)}
|
||||
aria-label={t(T.post_action_copy)}
|
||||
>
|
||||
<Icon icon="mdi:image-outline" class="size-3.5" />
|
||||
Bild
|
||||
<Icon icon={copied ? "mdi:check" : "mdi:link-variant"} class="size-3.5" />
|
||||
{copied ? t(T.post_action_copied) : "Link"}
|
||||
</button>
|
||||
{/if}
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => shareEvent(item, title, locText)}
|
||||
class="inline-flex items-center gap-1 rounded px-1.5 py-1 text-[11px] text-stein-700 hover:bg-white"
|
||||
title={t(T.calendar_share_aria)}
|
||||
aria-label={t(T.calendar_share_aria)}
|
||||
>
|
||||
<Icon icon={shared ? "mdi:check" : "mdi:share-variant"} class="size-3.5" />
|
||||
{shared ? t(T.calendar_share_copied) : t(T.calendar_share)}
|
||||
</button>
|
||||
{#if item._slug}
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => openSocial(item)}
|
||||
class="inline-flex items-center gap-1 rounded px-1.5 py-1 text-[11px] text-stein-700 hover:bg-white"
|
||||
title="Social-Bild Vorschau"
|
||||
aria-label="Social-Bild Vorschau"
|
||||
>
|
||||
<Icon icon="mdi:image-outline" class="size-3.5" />
|
||||
Bild
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<span class="ml-auto"></span>
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => jumpToEventInGrid(item)}
|
||||
class="inline-flex items-center gap-1 rounded px-1.5 py-1 text-[11px] text-stein-500 hover:bg-white"
|
||||
title={t(T.calendar_jump_to_month)}
|
||||
aria-label={t(T.calendar_jump_to_month)}
|
||||
>
|
||||
<Icon icon="mdi:calendar-search" class="size-3.5" />
|
||||
Im Grid
|
||||
</button>
|
||||
<!-- Gruppe: Anzeigen (rechts auf Desktop, eigene Zeile auf Mobile wenn nötig) -->
|
||||
<div class="inline-flex items-center gap-1 sm:ml-auto">
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => jumpToEventInGrid(item)}
|
||||
class="inline-flex items-center gap-1 rounded px-1.5 py-1 text-[11px] text-stein-500 hover:bg-white"
|
||||
title={t(T.calendar_jump_to_month)}
|
||||
aria-label={t(T.calendar_jump_to_month)}
|
||||
>
|
||||
<Icon icon="mdi:calendar-search" class="size-3.5" />
|
||||
Im Grid
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user