brian/wanderer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

multiple cosmetic changes

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/app.html
View File

@@ -14,7 +14,7 @@
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">
<body class="w-full" data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
</body>

2
web/src/hooks.server.ts
View File

@@ -53,7 +53,7 @@ export const handle: Handle = async ({ event, resolve }) => {
// send back the default 'pb_auth' cookie to the client with the latest store state
response.headers.set(
'set-cookie',
pb.authStore.exportToCookie({ httpOnly: false })
pb.authStore.exportToCookie({ httpOnly: false, secure: false })
)
return response

29
web/src/lib/components/nav_bar.svelte
View File

@@ -125,17 +125,26 @@
<div class="basis-full"></div>
<hr class="border-input-border" />
<div class="flex gap-4 items-center m-4">
<a href="/profile">
<img
class="rounded-full w-8 aspect-square"
class="rounded-full w-10 aspect-square"
src={getFileURL($currentUser, $currentUser.avatar) ||
`https://api.dicebear.com/7.x/initials/svg?seed=${$currentUser.username}&backgroundType=gradientLinear`}
alt="avatar"
/>
<div>
</a>
<a href="/profile">
<p class="text-sm">{$currentUser.username}</p>
<p class="text-sm text-gray-500">{$currentUser.email}</p>
</div>
<button class="btn-icon"
<p class="text-sm text-gray-500">
{$currentUser.email}
</p>
</a>
<button
on:click={() => {
logout();
window.location.href = "/";
}}
class="btn-icon"
><i class="fa-solid fa-arrow-right-from-bracket"
></i></button
>
@@ -156,7 +165,7 @@
<LogoTextLight></LogoTextLight>
{/if}
</a>
<menu id="nav-bar-links" class="hidden md:flex gap-8 relative py-1 px-2">
<menu id="nav-bar-links" class="hidden lg:flex gap-8 relative py-1 px-2">
<div
class="absolute h-full w-16 bg-menu-item-background-hover rounded-xl top-0 z-0"
style="width: {$indicatorWidth}px; left: {$indicatorPosition}px; scale: {$indicatorScale}"
@@ -178,16 +187,14 @@
{/if}
</menu>
{#if $currentUser}
<div class="hidden md:flex gap-6 items-center">
<div class="hidden lg:flex gap-6 items-center">
<button
class="btn-icon fa-regular fa-{$theme === 'light'
? 'sun'
: 'moon'}"
on:click={() => toggleTheme()}
></button>
<a
class="btn-primary btn-large"
href="/trail/edit/new"
<a class="btn-primary btn-large" href="/trail/edit/new"
><i class="fa fa-plus mr-2"></i>{$_("new-trail")}</a
>
<Dropdown
@@ -220,7 +227,7 @@
</div>
{/if}
<button
class="btn-icon fa fa-bars md:hidden"
class="btn-icon fa fa-bars lg:hidden"
on:click={() => (drawerOpen = !drawerOpen)}
></button>
</nav>

1
web/src/lib/components/trail/map_with_elevation.svelte
View File

@@ -25,6 +25,7 @@
await import("$lib/vendor/leaflet-elevation/src/index.js");
map = L.map("map").setView([trail.lat ?? 0, trail.lon ?? 0], 14);
map.attributionControl.setPrefix(false)
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution: "© OpenStreetMap contributors",

6
web/src/lib/components/trail/trail_card.svelte
View File

@@ -27,8 +27,11 @@
<div class="p-4">
<div>
<h4 class="font-semibold text-lg">{trail.name}</h4>
<div class="flex gap-x-4">
{#if trail.location}
<h5><i class="fa fa-location-dot mr-3"></i>{trail.location}</h5>
<h5>
<i class="fa fa-location-dot mr-3"></i>{trail.location}
</h5>
{/if}
<h5>
<i class="fa fa-person-hiking mr-3"></i>{$_(
@@ -36,6 +39,7 @@
)}
</h5>
</div>
</div>
<div class="flex mt-2 gap-4 text-sm text-gray-500 whitespace-nowrap">
<span
><i class="fa fa-left-right mr-2"></i>{formatDistance(

5
web/src/lib/components/trail/trail_info_panel.svelte
View File

@@ -52,6 +52,7 @@
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",
@@ -150,12 +151,12 @@
<div class="flex flex-wrap gap-x-8 gap-y-2 mt-4 mr-8">
{#if trail.location}
<h3 class="text-lg">
<i class="fa fa-location-dot mr-3"></i>
<i class="fa fa-location-dot mr-2"></i>
{trail.location}
</h3>
{/if}
<h3 class="text-lg">
<i class="fa fa-person-hiking mr-3"></i>
<i class="fa fa-person-hiking mr-2"></i>
{$_(trail.difficulty ?? "?")}
</h3>
</div>

6
web/src/lib/components/trail/trail_list.svelte
View File

@@ -59,14 +59,14 @@
<div class="min-w-0">
<div class="flex items-end flex-wrap md:flex-nowrap gap-x-6 gap-y-2 mx-4">
<div class="basis-full order-1 md:order-none mt-6 md:mt-0">
<div class="basis-full order-1 md:order-none">
<Pagination
page={pagination.page}
totalPages={pagination.totalPages}
on:pagination
></Pagination>
</div>
<div class="lg:shrink-0">
<div class="shrink-0">
<p class="text-sm text-gray-500 pb-2">{$_("sort")}</p>
<div class="flex items-center gap-2">
<Select
@@ -83,7 +83,7 @@
>
</div>
</div>
<div class="lg:shrink-0">
<div class="shrink-0">
<p class="text-sm text-gray-500 pb-2">{$_("display-as")}</p>
<Select

10
web/src/routes/+page.svelte
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"

8
web/src/routes/map/+page.svelte
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">

3
web/src/routes/trail/edit/[id]/+page.svelte
View File

@@ -78,6 +78,7 @@
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",
@@ -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