adds difficulty display

This commit is contained in:
Christian Beutel
2024-03-14 20:04:43 +01:00
parent 54613ee7db
commit e6728ca097
8 changed files with 59 additions and 27 deletions

View File

@@ -6,6 +6,7 @@
formatElevation,
formatTimeHHMM,
} from "$lib/util/format_util";
import { _ } from "svelte-i18n";
export let trail: Trail;
@@ -26,7 +27,14 @@
<div class="p-4">
<div>
<h4 class="font-semibold text-lg">{trail.name}</h4>
<h5><i class="fa fa-location-dot mr-3"></i>{trail.location}</h5>
{#if trail.location}
<h5><i class="fa fa-location-dot mr-3"></i>{trail.location}</h5>
{/if}
<h5>
<i class="fa fa-person-hiking mr-3"></i>{$_(
trail.difficulty ?? "?",
)}
</h5>
</div>
<div class="flex mt-2 gap-4 text-sm text-gray-500 whitespace-nowrap">
<span

View File

@@ -6,6 +6,7 @@
formatElevation,
formatTimeHHMM,
} from "$lib/util/format_util";
import { _ } from "svelte-i18n";
export let trail: Trail;
@@ -22,7 +23,17 @@
</div>
<div class="min-w-0 basis-full">
<h4 class="font-semibold text-lg">{trail.name}</h4>
<h5><i class="fa fa-location-dot mr-3"></i>{trail.location}</h5>
<div class="flex flex-wrap gap-x-8">
{#if trail.location}
<h5><i class="fa fa-location-dot mr-3"></i>{trail.location}</h5>
{/if}
<h5>
<i class="fa fa-person-hiking mr-3"></i>{$_(
trail.difficulty ?? "?",
)}
</h5>
</div>
<div class="flex mt-2 gap-4 text-sm text-gray-500">
<span
><i class="fa fa-left-right mr-2"></i>{formatDistance(

View File

@@ -162,6 +162,9 @@ export async function trails_show(id: string, loadGPX?: boolean, f: (url: Reques
}
if (loadGPX) {
if(!response.expand) {
response.expand = {}
}
const gpxData: string = await fetchGPX(response, f);
response.expand.gpx_data = gpxData;
}

View File

@@ -100,10 +100,16 @@
<h4 class="text-4xl font-bold">
{$trail.name}
</h4>
<h3 class="text-xl mt-4">
<i class="fa fa-location-dot mr-3"></i>
{$trail.location}
</h3>
<div class="flex flex-wrap gap-x-8 gap-y-2 mt-4 mr-8">
<h3 class="text-lg">
<i class="fa fa-location-dot mr-3"></i>
{$trail.location}
</h3>
<h3 class="text-lg">
<i class="fa fa-person-hiking mr-3"></i>
{$_($trail.difficulty ?? "?")}
</h3>
</div>
</div>
{#if $currentUser && $currentUser.id == $trail.author}
<TrailDropdown trail={$trail} mode="map"></TrailDropdown>

View File

@@ -345,7 +345,6 @@
function handlePhotoDelete(index: number) {
if ($form.thumbnail == index) {
$form.thumbnail = 0;
console.log("huere");
}
if (index >= $form.photos.length) {
@@ -479,14 +478,12 @@
{ text: $_("difficult"), value: "difficult" },
]}
></Select>
{#if $form.expand.category}
<Select
name="category"
label={$_("category")}
bind:value={$form.category}
items={$categories.map((c) => ({ text: c.name, value: c.id }))}
></Select>
{/if}
<Select
name="category"
label={$_("category")}
bind:value={$form.category}
items={$categories.map((c) => ({ text: c.name, value: c.id }))}
></Select>
<Toggle name="public" label={$_("public")} bind:value={$form.public}
></Toggle>
<hr class="border-separator" />

View File

@@ -136,25 +136,27 @@
class="trail-panel max-w-5xl mx-auto border border-input-border rounded-3xl overflow-hidden"
>
<section class="relative h-80">
<img
class="w-full h-80"
src={thumbnail}
alt=""
/>
<img class="w-full h-80" src={thumbnail} alt="" />
<div
class="absolute bottom-0 w-full h-1/2 bg-gradient-to-b from-transparent to-black opacity-50"
></div>
<div
class="flex absolute flex-wrap justify-between items-end w-full bottom-8 left-0 px-8 gap-y-4"
class="flex absolute justify-between items-end w-full bottom-8 left-0 px-8 gap-y-4"
>
<div class="text-white">
<h4 class="text-4xl font-bold">
{$trail.name}
</h4>
<h3 class="text-xl mt-4">
<i class="fa fa-location-dot mr-3"></i>
{$trail.location}
</h3>
<div class="flex flex-wrap gap-x-8 gap-y-2 mt-4 mr-8">
<h3 class="text-lg">
<i class="fa fa-location-dot mr-3"></i>
{$trail.location}
</h3>
<h3 class="text-lg">
<i class="fa fa-person-hiking mr-3"></i>
{$_($trail.difficulty ?? "?")}
</h3>
</div>
</div>
{#if $currentUser && $currentUser.id == $trail.author}
<TrailDropdown trail={$trail} mode="overview"></TrailDropdown>

View File

@@ -12,7 +12,8 @@ export const load: Load = async ({ params, fetch }) => {
message: 'Not found'
});
}
console.log(e);
}
await lists_index(undefined, fetch);
};