WindAreaPanel: compact key-value rows instead of cards

Label left, value right, divided rows. No more padded bg cards.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Peter Meier
2026-05-18 09:18:38 +02:00
parent 823adde1fa
commit 4a72142555
+13 -13
View File
@@ -76,29 +76,29 @@
<!-- Body -->
<div class="flex-1 space-y-5 px-5 py-4 text-sm">
<!-- Kenndaten -->
<div class="grid grid-cols-1 gap-2">
<div class="flex flex-col divide-y divide-stein-100 border border-stein-100 rounded-lg overflow-hidden text-sm">
{#if area.flaeche_ha != null}
<div class="rounded-lg bg-stein-50 p-3">
<p class="text-xs text-stein-500">{t(T.windkarte_label_flaeche)}</p>
<p class="mt-0.5 font-semibold text-stein-800">{area.flaeche_ha.toFixed(1)} ha</p>
<div class="flex items-center justify-between px-3 py-1.5">
<span class="text-xs text-stein-500">{t(T.windkarte_label_flaeche)}</span>
<span class="font-semibold text-stein-800">{area.flaeche_ha.toFixed(1)} ha</span>
</div>
{/if}
{#if area.anlagen_geplant != null}
<div class="rounded-lg bg-stein-50 p-3">
<p class="text-xs text-stein-500">{t(T.windkarte_label_anlagen_geplant)}</p>
<p class="mt-0.5 font-semibold text-stein-800">{area.anlagen_geplant}</p>
<div class="flex items-center justify-between px-3 py-1.5">
<span class="text-xs text-stein-500">{t(T.windkarte_label_anlagen_geplant)}</span>
<span class="font-semibold text-stein-800">{area.anlagen_geplant}</span>
</div>
{/if}
{#if area.hoehe_max_m != null}
<div class="rounded-lg bg-stein-50 p-3">
<p class="text-xs text-stein-500">{t(T.windkarte_label_hoehe_max)}</p>
<p class="mt-0.5 font-semibold text-stein-800">{area.hoehe_max_m} m</p>
<div class="flex items-center justify-between px-3 py-1.5">
<span class="text-xs text-stein-500">{t(T.windkarte_label_hoehe_max)}</span>
<span class="font-semibold text-stein-800">{area.hoehe_max_m} m</span>
</div>
{/if}
{#if area.investor}
<div class="rounded-lg bg-stein-50 p-3 col-span-2">
<p class="text-xs text-stein-500">{t(T.windkarte_label_investor)}</p>
<p class="mt-0.5 font-semibold text-stein-800">{area.investor}</p>
<div class="flex items-center justify-between px-3 py-1.5">
<span class="text-xs text-stein-500">{t(T.windkarte_label_investor)}</span>
<span class="font-semibold text-stein-800">{area.investor}</span>
</div>
{/if}
</div>