feat(windkarte): InfoAccordion, anlagen-Hinweis, Tooltip ohne Icons
Deploy / verify (push) Successful in 1m6s
Deploy / deploy (push) Successful in 1m18s

- Disclaimer aus CMS-Feld (hinweis_text) via InfoAccordion statt Hardcode
- info_text-Feld für Block-Fließtext ergänzt
- anlagen_geplant_hinweis-Feld in WindArea + Panel-Anzeige
- Tooltip-Icons entfernt (square-outline/wind-turbine/map-marker inline SVGs)
- Panel: square-outline → ruler-square für Fläche
- Iconify-Subset neu generiert

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Peter Meier
2026-06-11 12:35:29 +02:00
parent 1c63f68c0b
commit 41597f87b5
9 changed files with 146 additions and 33 deletions
+60
View File
@@ -0,0 +1,60 @@
<!--
Reusable disclosure box for short collapsible info notes.
- `title` — always-visible summary line
- `body` — HTML rendered inside the panel ({@html})
- `variant` — colour palette without callers passing raw Tailwind:
stein → neutral data-disclaimer tone
amber → soft warning, used for uncertainty-flagged hints
- `open` — initial state; default closed
-->
<script lang="ts">
import Icon from "@iconify/svelte";
type Variant = "stein" | "amber";
let {
title,
body = "",
variant = "stein",
open = false,
iconName = "mdi:information-outline",
}: {
title: string;
body?: string;
variant?: Variant;
open?: boolean;
iconName?: string;
} = $props();
const palettes = {
stein: {
container: "border-stein-200 bg-stein-50",
summary: "text-stein-700 hover:bg-stein-100",
icon: "text-stein-500",
body: "border-stein-200 text-stein-600",
},
amber: {
container: "border-amber-300 bg-amber-100/70",
summary: "text-amber-800 hover:bg-amber-200/70",
icon: "text-amber-700",
body: "border-amber-200 text-stein-700",
},
} as const;
const p = $derived(palettes[variant]);
</script>
<details class="info-accordion rounded-md border text-xs {p.container}" {open}>
<summary class="flex cursor-pointer items-center gap-1.5 px-3 py-1.5 font-medium leading-snug list-none {p.summary}">
<Icon icon={iconName} class="size-3.5 shrink-0 {p.icon}" />
<span class="flex-1">{title}</span>
<Icon icon="mdi:chevron-down" class="info-accordion-chevron size-3.5 shrink-0 transition-transform {p.icon}" />
</summary>
<div class="markdown prose prose-sm prose-zinc max-w-none border-t px-3 py-2 leading-relaxed {p.body}">{@html body}</div>
</details>
<style>
.info-accordion[open] :global(.info-accordion-chevron) {
transform: rotate(180deg);
}
</style>