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 --> <!-- Body -->
<div class="flex-1 space-y-5 px-5 py-4 text-sm"> <div class="flex-1 space-y-5 px-5 py-4 text-sm">
<!-- Kenndaten --> <!-- 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} {#if area.flaeche_ha != null}
<div class="rounded-lg bg-stein-50 p-3"> <div class="flex items-center justify-between px-3 py-1.5">
<p class="text-xs text-stein-500">{t(T.windkarte_label_flaeche)}</p> <span class="text-xs text-stein-500">{t(T.windkarte_label_flaeche)}</span>
<p class="mt-0.5 font-semibold text-stein-800">{area.flaeche_ha.toFixed(1)} ha</p> <span class="font-semibold text-stein-800">{area.flaeche_ha.toFixed(1)} ha</span>
</div> </div>
{/if} {/if}
{#if area.anlagen_geplant != null} {#if area.anlagen_geplant != null}
<div class="rounded-lg bg-stein-50 p-3"> <div class="flex items-center justify-between px-3 py-1.5">
<p class="text-xs text-stein-500">{t(T.windkarte_label_anlagen_geplant)}</p> <span class="text-xs text-stein-500">{t(T.windkarte_label_anlagen_geplant)}</span>
<p class="mt-0.5 font-semibold text-stein-800">{area.anlagen_geplant}</p> <span class="font-semibold text-stein-800">{area.anlagen_geplant}</span>
</div> </div>
{/if} {/if}
{#if area.hoehe_max_m != null} {#if area.hoehe_max_m != null}
<div class="rounded-lg bg-stein-50 p-3"> <div class="flex items-center justify-between px-3 py-1.5">
<p class="text-xs text-stein-500">{t(T.windkarte_label_hoehe_max)}</p> <span class="text-xs text-stein-500">{t(T.windkarte_label_hoehe_max)}</span>
<p class="mt-0.5 font-semibold text-stein-800">{area.hoehe_max_m} m</p> <span class="font-semibold text-stein-800">{area.hoehe_max_m} m</span>
</div> </div>
{/if} {/if}
{#if area.investor} {#if area.investor}
<div class="rounded-lg bg-stein-50 p-3 col-span-2"> <div class="flex items-center justify-between px-3 py-1.5">
<p class="text-xs text-stein-500">{t(T.windkarte_label_investor)}</p> <span class="text-xs text-stein-500">{t(T.windkarte_label_investor)}</span>
<p class="mt-0.5 font-semibold text-stein-800">{area.investor}</p> <span class="font-semibold text-stein-800">{area.investor}</span>
</div> </div>
{/if} {/if}
</div> </div>