refactor(consolidate): IconButton + Badge-solid + @layer base + Massen-Migration
E: app.css Base-h1–h6 in @layer base → text-*!-Hacks in Titeln entfernt. Neue Atoms: IconButton (runde Icon-Buttons), Badge solid-Variante + uppercase. Migrationen (6 parallele Pässe): - IconButton: 19 runde Nav/Close-Buttons (Carousel, Galleries, QuoteCarousel, PostOverview, Organisations, ImageModal). - Badge: Kategorie/Status-Pills (PostCard, BlogOverview, kalender, Comments, CalendarBlock, FilesBlock, SearchableText, Stellingnahme). - ui-Atome: Formular-Inputs (Comments, termin-melden, Stellingnahme) → TextInput/ Textarea/Checkbox/SearchField; dunkle NewsletterInline bewusst raw. - Button-Atom: ~20 inline Buttons in StellingnahmeGeneratorBlock. - Radius-Sweep: Cards→rounded-lg (viele via .card-surface), Buttons/Inputs→rounded-md, Chips→rounded-full; StrommixBlock/Calendar/Files/Adressbuch u.a. svelte-check 0 errors, voller Prod-Build grün. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -11,6 +11,7 @@
|
||||
import Icon from "@iconify/svelte";
|
||||
import { useTranslate } from "$lib/translations";
|
||||
import { T } from "$lib/translations";
|
||||
import IconButton from "$lib/components/IconButton.svelte";
|
||||
|
||||
const t = useTranslate();
|
||||
let { block }: { block: YoutubeVideoGalleryBlockData } = $props();
|
||||
@@ -256,31 +257,10 @@
|
||||
</div>
|
||||
</div>
|
||||
{#if items.length > 1}
|
||||
<button
|
||||
type="button"
|
||||
class="absolute left-2 top-1/2 -translate-y-1/2 inline-flex h-9 w-9 items-center justify-center rounded-full bg-black/50 text-white hover:bg-black/70 focus:outline-none focus:ring-2 focus:ring-white/50"
|
||||
onclick={modalPrev}
|
||||
aria-label={t(T.image_gallery_prev_aria)}
|
||||
>
|
||||
<Icon icon="lucide:chevron-left" class="text-2xl" aria-hidden="true" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="absolute right-2 top-1/2 -translate-y-1/2 inline-flex h-9 w-9 items-center justify-center rounded-full bg-black/50 text-white hover:bg-black/70 focus:outline-none focus:ring-2 focus:ring-white/50"
|
||||
onclick={modalNext}
|
||||
aria-label={t(T.image_gallery_next_aria)}
|
||||
>
|
||||
<Icon icon="lucide:chevron-right" class="text-2xl" aria-hidden="true" />
|
||||
</button>
|
||||
<IconButton icon="lucide:chevron-left" label={t(T.image_gallery_prev_aria)} variant="surface" size="md" onclick={modalPrev} class="absolute left-2 top-1/2 -translate-y-1/2" />
|
||||
<IconButton icon="lucide:chevron-right" label={t(T.image_gallery_next_aria)} variant="surface" size="md" onclick={modalNext} class="absolute right-2 top-1/2 -translate-y-1/2" />
|
||||
{/if}
|
||||
<button
|
||||
type="button"
|
||||
class="absolute -top-2 -right-2 inline-flex h-8 w-8 items-center justify-center rounded-full bg-white text-stein-900 shadow-md hover:bg-stein-100 focus:outline-none focus:ring-2 focus:ring-white/50"
|
||||
onclick={closeModal}
|
||||
aria-label={t(T.image_gallery_close)}
|
||||
>
|
||||
<Icon icon="lucide:x" class="text-lg" aria-hidden="true" />
|
||||
</button>
|
||||
<IconButton icon="lucide:x" label={t(T.image_gallery_close)} variant="ghost" size="md" onclick={closeModal} class="absolute -top-2 -right-2" />
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
@@ -317,22 +297,8 @@
|
||||
</div>
|
||||
|
||||
{#if items.length > 1}
|
||||
<button
|
||||
type="button"
|
||||
class="absolute left-2 top-1/2 -translate-y-1/2 w-8 h-8 flex items-center justify-center rounded-full bg-black/50 text-white hover:bg-black/70 transition-opacity focus:outline-none focus:ring-2 focus:ring-wald-500 lg:opacity-0 lg:group-hover:opacity-100"
|
||||
aria-label={t(T.image_gallery_prev_aria)}
|
||||
onclick={prev}
|
||||
>
|
||||
<Icon icon="lucide:chevron-left" class="text-2xl" aria-hidden="true" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="absolute right-2 top-1/2 -translate-y-1/2 w-8 h-8 flex items-center justify-center rounded-full bg-black/50 text-white hover:bg-black/70 transition-opacity focus:outline-none focus:ring-2 focus:ring-wald-500 lg:opacity-0 lg:group-hover:opacity-100"
|
||||
aria-label={t(T.image_gallery_next_aria)}
|
||||
onclick={next}
|
||||
>
|
||||
<Icon icon="lucide:chevron-right" class="text-2xl" aria-hidden="true" />
|
||||
</button>
|
||||
<IconButton icon="lucide:chevron-left" label={t(T.image_gallery_prev_aria)} variant="surface" size="md" onclick={prev} class="absolute left-2 top-1/2 -translate-y-1/2 transition-opacity lg:opacity-0 lg:group-hover:opacity-100" />
|
||||
<IconButton icon="lucide:chevron-right" label={t(T.image_gallery_next_aria)} variant="surface" size="md" onclick={next} class="absolute right-2 top-1/2 -translate-y-1/2 transition-opacity lg:opacity-0 lg:group-hover:opacity-100" />
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user