refactor: Marker und Kommentare in die Kennzahlenzeile der Trailcard
Sie standen in einer eigenen, abgetrennten Zeile unter Laenge und Hoehenmetern, obwohl sie dasselbe sind: eine Zahl zum Trail. Jetzt eine Zeile, ganz rechts die offenen Meldungen. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01P32KoesVtABd6xWsqMKzhr
This commit is contained in:
parent
3ba8ec4c86
commit
bb0a51378f
1 changed files with 22 additions and 22 deletions
|
|
@ -148,8 +148,15 @@
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<div class="flex items-center gap-4 text-sm text-muted-foreground">
|
<!--
|
||||||
<!-- Dieselben Icons wie im Kopf der Trail-Seite. -->
|
Eine Zeile, dieselben Icons wie im Kopf der Trail-Seite:
|
||||||
|
Länge, Höhenmeter, Marker, Kommentare — und ganz rechts,
|
||||||
|
was jemanden angeht, die offenen Meldungen.
|
||||||
|
|
||||||
|
Ein Punkt markiert Bewegung der letzten zwei Wochen. Die
|
||||||
|
Zahl allein sagt nichts darüber, ob sich gerade etwas tut.
|
||||||
|
-->
|
||||||
|
<div class="flex flex-wrap items-center gap-x-4 gap-y-1 text-sm text-muted-foreground">
|
||||||
<span class="flex items-center gap-1.5">
|
<span class="flex items-center gap-1.5">
|
||||||
<Ruler class="size-4" />
|
<Ruler class="size-4" />
|
||||||
{formatKm(version?.distance_m)}
|
{formatKm(version?.distance_m)}
|
||||||
|
|
@ -158,27 +165,9 @@
|
||||||
<TrendingUp class="size-4" />
|
<TrendingUp class="size-4" />
|
||||||
{version?.ascent_m ? `${version.ascent_m} hm` : '–'}
|
{version?.ascent_m ? `${version.ascent_m} hm` : '–'}
|
||||||
</span>
|
</span>
|
||||||
{#if open > 0}
|
|
||||||
<span
|
|
||||||
class="flex items-center gap-1 text-amber-600 ml-auto"
|
|
||||||
use:tooltip={{
|
|
||||||
content: `${open} offene Meldung${open === 1 ? '' : 'en'}`,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<AlertTriangle class="size-4" />
|
|
||||||
{open}
|
|
||||||
</span>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!--
|
|
||||||
Ein Punkt markiert Bewegung der letzten zwei Wochen. Die
|
|
||||||
Zahl allein sagt nichts darüber, ob sich gerade etwas tut.
|
|
||||||
-->
|
|
||||||
<div class="flex items-center gap-4 text-sm border-t pt-3">
|
|
||||||
<span
|
<span
|
||||||
class="flex items-center gap-1.5"
|
class="flex items-center gap-1.5"
|
||||||
class:text-muted-foreground={!freshMarkers}
|
class:text-foreground={freshMarkers}
|
||||||
class:font-medium={freshMarkers}
|
class:font-medium={freshMarkers}
|
||||||
use:tooltip={{
|
use:tooltip={{
|
||||||
content: freshMarkers
|
content: freshMarkers
|
||||||
|
|
@ -194,7 +183,7 @@
|
||||||
</span>
|
</span>
|
||||||
<span
|
<span
|
||||||
class="flex items-center gap-1.5"
|
class="flex items-center gap-1.5"
|
||||||
class:text-muted-foreground={!freshComments}
|
class:text-foreground={freshComments}
|
||||||
class:font-medium={freshComments}
|
class:font-medium={freshComments}
|
||||||
use:tooltip={{
|
use:tooltip={{
|
||||||
content: freshComments
|
content: freshComments
|
||||||
|
|
@ -208,6 +197,17 @@
|
||||||
<span class="size-1.5 rounded-full bg-primary"></span>
|
<span class="size-1.5 rounded-full bg-primary"></span>
|
||||||
{/if}
|
{/if}
|
||||||
</span>
|
</span>
|
||||||
|
{#if open > 0}
|
||||||
|
<span
|
||||||
|
class="flex items-center gap-1 text-amber-600 ml-auto"
|
||||||
|
use:tooltip={{
|
||||||
|
content: `${open} offene Meldung${open === 1 ? '' : 'en'}`,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<AlertTriangle class="size-4" />
|
||||||
|
{open}
|
||||||
|
</span>
|
||||||
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue