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>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<!-- Kompakte Action-Toolbar: gruppiert (Kalender · Teilen · Anzeigen) mit Separatoren -->
|
<!-- 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">
|
Auf Mobile bleiben Label+Buttons pro Gruppe via inline-flex zusammen,
|
||||||
<!-- Kalender-Aktionen -->
|
umgebrochen wird nur zwischen Gruppen. -->
|
||||||
<span class="px-1.5 text-[10px] uppercase tracking-wide text-stein-400">Kalender</span>
|
<div class="flex flex-wrap items-center gap-x-2 gap-y-1 rounded-md border border-stein-200 bg-stein-50 p-1">
|
||||||
<button
|
<!-- Gruppe: Kalender -->
|
||||||
type="button"
|
<div class="inline-flex items-center gap-1">
|
||||||
onclick={() => downloadICS(toICS(item), fileSlug(title))}
|
<span class="px-1.5 text-[10px] uppercase tracking-wide text-stein-400">Kalender</span>
|
||||||
class="inline-flex items-center gap-1 rounded px-1.5 py-1 text-[11px] text-stein-700 hover:bg-white"
|
<button
|
||||||
title={t(T.calendar_download_ics)}
|
type="button"
|
||||||
aria-label={t(T.calendar_download_ics)}
|
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"
|
||||||
<Icon icon="mdi:download" class="size-3.5" />
|
title={t(T.calendar_download_ics)}
|
||||||
ICS
|
aria-label={t(T.calendar_download_ics)}
|
||||||
</button>
|
>
|
||||||
<a
|
<Icon icon="mdi:download" class="size-3.5" />
|
||||||
href={googleCalUrl(toICS(item))}
|
ICS
|
||||||
target="_blank"
|
</button>
|
||||||
rel="noopener noreferrer"
|
<a
|
||||||
class="inline-flex items-center gap-1 rounded px-1.5 py-1 text-[11px] text-stein-700 no-underline hover:bg-white"
|
href={googleCalUrl(toICS(item))}
|
||||||
title={t(T.calendar_add_to_google)}
|
target="_blank"
|
||||||
>
|
rel="noopener noreferrer"
|
||||||
<Icon icon="mdi:google" class="size-3.5" />
|
class="inline-flex items-center gap-1 rounded px-1.5 py-1 text-[11px] text-stein-700 no-underline hover:bg-white"
|
||||||
Google
|
title={t(T.calendar_add_to_google)}
|
||||||
</a>
|
>
|
||||||
|
<Icon icon="mdi:google" class="size-3.5" />
|
||||||
|
Google
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
{#if feedHost}
|
{#if feedHost}
|
||||||
{@const shareKey = item._slug ?? String(item.start.getTime())}
|
{@const shareKey = item._slug ?? String(item.start.getTime())}
|
||||||
{@const copied = copyToastKey === shareKey}
|
{@const copied = copyToastKey === shareKey}
|
||||||
{@const shared = shareToastKey === shareKey}
|
{@const shared = shareToastKey === shareKey}
|
||||||
<span class="mx-1 h-4 w-px bg-stein-300" aria-hidden="true"></span>
|
<!-- Gruppe: Teilen -->
|
||||||
<span class="px-1.5 text-[10px] uppercase tracking-wide text-stein-400">Teilen</span>
|
<div class="inline-flex items-center gap-1 border-l border-stein-300 pl-2">
|
||||||
<button
|
<span class="px-1.5 text-[10px] uppercase tracking-wide text-stein-400">Teilen</span>
|
||||||
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}
|
|
||||||
<button
|
<button
|
||||||
type="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"
|
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"
|
title={t(T.post_action_copy)}
|
||||||
aria-label="Social-Bild Vorschau"
|
aria-label={t(T.post_action_copy)}
|
||||||
>
|
>
|
||||||
<Icon icon="mdi:image-outline" class="size-3.5" />
|
<Icon icon={copied ? "mdi:check" : "mdi:link-variant"} class="size-3.5" />
|
||||||
Bild
|
{copied ? t(T.post_action_copied) : "Link"}
|
||||||
</button>
|
</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}
|
{/if}
|
||||||
|
|
||||||
<span class="ml-auto"></span>
|
<!-- Gruppe: Anzeigen (rechts auf Desktop, eigene Zeile auf Mobile wenn nötig) -->
|
||||||
<button
|
<div class="inline-flex items-center gap-1 sm:ml-auto">
|
||||||
type="button"
|
<button
|
||||||
onclick={() => jumpToEventInGrid(item)}
|
type="button"
|
||||||
class="inline-flex items-center gap-1 rounded px-1.5 py-1 text-[11px] text-stein-500 hover:bg-white"
|
onclick={() => jumpToEventInGrid(item)}
|
||||||
title={t(T.calendar_jump_to_month)}
|
class="inline-flex items-center gap-1 rounded px-1.5 py-1 text-[11px] text-stein-500 hover:bg-white"
|
||||||
aria-label={t(T.calendar_jump_to_month)}
|
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
|
<Icon icon="mdi:calendar-search" class="size-3.5" />
|
||||||
</button>
|
Im Grid
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user