multiple cosmetic changes

Former-commit-id: 6f52d7c81c645ec43c4344bde07539db0f008dac
This commit is contained in:
Christian Beutel
2024-03-15 15:25:51 +01:00
parent f33a4d13f7
commit 662a9c006d
11 changed files with 59 additions and 41 deletions

View File

@@ -75,13 +75,13 @@
</svelte:head>
<section
class="hero grid grid-cols-1 md:grid-cols-2 md:px-8 md:gap-8"
class="hero grid grid-cols-1 lg:grid-cols-2 md:px-8 md:gap-8"
style="height: calc(100vh - 112px)"
>
<div
class="flex flex-col justify-center gap-8 max-w-md mx-8 md:mx-auto lg:-mt-24"
class="flex flex-col justify-center gap-8 max-w-md mx-8 sm:mx-auto mt-0 lg:-mt-24 md:mt-24"
>
<h2 class="text-7xl font-bold">
<h2 class="text-5xl sm:text-6xl md:text-7xl font-bold">
{$_("welcome_to")} <span class="-tracking-[0.075em]">wanderer</span>
</h2>
<h5>
@@ -102,7 +102,7 @@
</div>
</section>
<section
class="max-w-7xl mx-auto mt-8 px-8 xl:px-0 grid grid-cols-1 md:grid-cols-2 items-center"
class="max-w-7xl mx-auto mt-8 px-8 xl:px-0 grid grid-cols-1 md:grid-cols-2 items-center gap-x-12"
>
<div
id="trails"
@@ -111,7 +111,7 @@
{#if $trails.length == 0}
<div>
<img
style="max-width: 450px"
style="max-width: min(450px, 100%)"
class="rounded-full aspect-square"
src="/imgs/default_thumbnail.webp"
alt="Empty State showing a wanderer going into the distance"

View File

@@ -13,7 +13,7 @@ export async function GET(event: RequestEvent) {
const r = await pb.collection('trails')
.getList<Trail>(parseInt(page), parseInt(perPage), { expand: expand ?? "", sort: sort ?? "", filter: filter ?? "" })
return json(r)
} catch (e: any) {
} catch (e: any) {
throw error(e.status, e);
}
}

View File

@@ -55,6 +55,7 @@
await import("leaflet.awesome-markers");
map = L.map("map").setView([0, 0], 4);
map.attributionControl.setPrefix(false)
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution: "© OpenStreetMap contributors",
@@ -220,7 +221,10 @@
</div>
<div>
<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 gap-x-4">
${trail.location ? `<h5><i class="fa fa-location-dot mr-2"></i>${trail.location}</h5>` : ""}
<h5><i class="fa fa-person-hiking mr-2"></i>${$_(trail.difficulty as string)}</h5>
</div>
<div class="flex mt-2 gap-4 text-sm text-gray-500"><span class="shrink-0"><i
class="fa fa-left-right mr-2"></i>${formatDistance(
trail.distance,
@@ -265,7 +269,7 @@
<main class="grid grid-cols-1 md:grid-cols-[400px_1fr]">
<div
id="trail-list"
class="md:overflow-y-auto md:overflow-x-hidden flex flex-col items-stretch gap-4 px-8"
class="md:overflow-y-auto md:overflow-x-hidden flex flex-col items-stretch gap-4 px-3 md:px-8"
>
<div class="sticky top-0 z-10 bg-background pb-4 space-y-4">
<div class="flex items-center gap-2 md:gap-4">

View File

@@ -78,7 +78,8 @@
await import("leaflet.awesome-markers");
map = L.map("map").setView([0, 0], 2);
map.attributionControl.setPrefix(false)
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution: "© OpenStreetMap contributors",
}).addTo(map);
@@ -450,7 +451,7 @@
>
<input type="hidden" name="distance" value={$form.distance} />
</div>
<div class="flex flex-col items-center">
<div class="flex flex-col items-center ">
<span>{$_("elevation-gain")}</span>
<span class="font-medium"
>{formatElevation($form.elevation_gain)}</span