adds elevation loss for trails

This commit is contained in:
Christian Beutel
2024-11-09 12:56:11 +01:00
parent 0ab0eda612
commit 01b0d49913
11 changed files with 108 additions and 19 deletions

View File

@@ -75,20 +75,25 @@
</h5>
</div>
</div>
<div class="flex mt-1 gap-4 text-sm text-gray-500 whitespace-nowrap">
<div class="grid grid-cols-2 mt-2 gap-1 text-sm text-gray-500 whitespace-nowrap">
<span
><i class="fa fa-left-right mr-2"></i>{formatDistance(
trail.distance,
)}</span
>
<span
><i class="fa fa-up-down mr-2"></i>{formatElevation(
><i class="fa fa-clock mr-2"></i>{formatTimeHHMM(
trail.duration,
)}</span
>
<span
><i class="fa fa-arrow-trend-up mr-2"></i>{formatElevation(
trail.elevation_gain,
)}</span
>
<span
><i class="fa fa-clock mr-2"></i>{formatTimeHHMM(
trail.duration,
><i class="fa fa-arrow-trend-down mr-2"></i>{formatElevation(
trail.elevation_loss,
)}</span
>
</div>

View File

@@ -246,7 +246,7 @@
</section>
{#if mode == "overview"}
<section
class="grid grid-cols-2 sm:grid-cols-4 gap-y-4 justify-around py-8 border-b border-input-border"
class="grid grid-cols-2 sm:grid-cols-5 gap-y-4 justify-around py-8 border-b border-input-border"
>
<div class="flex flex-col items-center">
<span>{$_("distance")}</span>
@@ -254,6 +254,12 @@
>{formatDistance(trail.distance)}</span
>
</div>
<div class="flex flex-col items-center">
<span>{$_("est-duration")}</span>
<span class="font-semibold text-lg"
>{formatTimeHHMM(trail.duration)}</span
>
</div>
<div class="flex flex-col items-center">
<span>{$_("elevation-gain")}</span>
<span class="font-semibold text-lg"
@@ -261,9 +267,9 @@
>
</div>
<div class="flex flex-col items-center">
<span>{$_("est-duration")}</span>
<span>{$_("elevation-loss")}</span>
<span class="font-semibold text-lg"
>{formatTimeHHMM(trail.duration)}</span
>{formatElevation(trail.elevation_loss)}</span
>
</div>
{#if trail.expand.category}

View File

@@ -64,13 +64,18 @@
)}</span
>
<span
><i class="fa fa-up-down mr-2"></i>{formatElevation(
><i class="fa fa-clock mr-2"></i>{formatTimeHHMM(
trail.duration,
)}</span
>
<span
><i class="fa fa-arrow-trend-up mr-2"></i>{formatElevation(
trail.elevation_gain,
)}</span
>
<span
><i class="fa fa-clock mr-2"></i>{formatTimeHHMM(
trail.duration,
><i class="fa fa-arrow-trend-down mr-2"></i>{formatElevation(
trail.elevation_loss,
)}</span
>
</div>