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% %sveltekit.head%
</head> </head>
<body data-sveltekit-preload-data="hover"> <body class="w-full" data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div> <div style="display: contents">%sveltekit.body%</div>
</body> </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 // send back the default 'pb_auth' cookie to the client with the latest store state
response.headers.set( response.headers.set(
'set-cookie', 'set-cookie',
pb.authStore.exportToCookie({ httpOnly: false }) pb.authStore.exportToCookie({ httpOnly: false, secure: false })
) )
return response return response

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

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

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

@@ -27,8 +27,11 @@
<div class="p-4"> <div class="p-4">
<div> <div>
<h4 class="font-semibold text-lg">{trail.name}</h4> <h4 class="font-semibold text-lg">{trail.name}</h4>
<div class="flex gap-x-4">
{#if trail.location} {#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} {/if}
<h5> <h5>
<i class="fa fa-person-hiking mr-3"></i>{$_( <i class="fa fa-person-hiking mr-3"></i>{$_(
@@ -36,6 +39,7 @@
)} )}
</h5> </h5>
</div> </div>
</div>
<div class="flex mt-2 gap-4 text-sm text-gray-500 whitespace-nowrap"> <div class="flex mt-2 gap-4 text-sm text-gray-500 whitespace-nowrap">
<span <span
><i class="fa fa-left-right mr-2"></i>{formatDistance( ><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"); await import("leaflet.awesome-markers");
map = L.map("map").setView([0, 0], 2); map = L.map("map").setView([0, 0], 2);
map.attributionControl.setPrefix(false)
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution: "© OpenStreetMap contributors", attribution: "© OpenStreetMap contributors",
@@ -150,12 +151,12 @@
<div class="flex flex-wrap gap-x-8 gap-y-2 mt-4 mr-8"> <div class="flex flex-wrap gap-x-8 gap-y-2 mt-4 mr-8">
{#if trail.location} {#if trail.location}
<h3 class="text-lg"> <h3 class="text-lg">
<i class="fa fa-location-dot mr-3"></i> <i class="fa fa-location-dot mr-2"></i>
{trail.location} {trail.location}
</h3> </h3>
{/if} {/if}
<h3 class="text-lg"> <h3 class="text-lg">
<i class="fa fa-person-hiking mr-3"></i> <i class="fa fa-person-hiking mr-2"></i>
{$_(trail.difficulty ?? "?")} {$_(trail.difficulty ?? "?")}
</h3> </h3>
</div> </div>

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

@@ -59,14 +59,14 @@
<div class="min-w-0"> <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="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 <Pagination
page={pagination.page} page={pagination.page}
totalPages={pagination.totalPages} totalPages={pagination.totalPages}
on:pagination on:pagination
></Pagination> ></Pagination>
</div> </div>
<div class="lg:shrink-0"> <div class="shrink-0">
<p class="text-sm text-gray-500 pb-2">{$_("sort")}</p> <p class="text-sm text-gray-500 pb-2">{$_("sort")}</p>
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<Select <Select
@@ -83,7 +83,7 @@
> >
</div> </div>
</div> </div>
<div class="lg:shrink-0"> <div class="shrink-0">
<p class="text-sm text-gray-500 pb-2">{$_("display-as")}</p> <p class="text-sm text-gray-500 pb-2">{$_("display-as")}</p>
<Select <Select

10
web/src/routes/+page.svelte
View File

@@ -75,13 +75,13 @@
</svelte:head> </svelte:head>
<section <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)" style="height: calc(100vh - 112px)"
> >
<div <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> {$_("welcome_to")} <span class="-tracking-[0.075em]">wanderer</span>
</h2> </h2>
<h5> <h5>
@@ -102,7 +102,7 @@
</div> </div>
</section> </section>
<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 <div
id="trails" id="trails"
@@ -111,7 +111,7 @@
{#if $trails.length == 0} {#if $trails.length == 0}
<div> <div>
<img <img
style="max-width: 450px" style="max-width: min(450px, 100%)"
class="rounded-full aspect-square" class="rounded-full aspect-square"
src="/imgs/default_thumbnail.webp" src="/imgs/default_thumbnail.webp"
alt="Empty State showing a wanderer going into the distance" 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"); await import("leaflet.awesome-markers");
map = L.map("map").setView([0, 0], 4); map = L.map("map").setView([0, 0], 4);
map.attributionControl.setPrefix(false)
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution: "© OpenStreetMap contributors", attribution: "© OpenStreetMap contributors",
@@ -220,7 +221,10 @@
</div> </div>
<div> <div>
<h4 class="font-semibold text-lg">${trail.name}</h4> <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 <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( class="fa fa-left-right mr-2"></i>${formatDistance(
trail.distance, trail.distance,
@@ -265,7 +269,7 @@
<main class="grid grid-cols-1 md:grid-cols-[400px_1fr]"> <main class="grid grid-cols-1 md:grid-cols-[400px_1fr]">
<div <div
id="trail-list" 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="sticky top-0 z-10 bg-background pb-4 space-y-4">
<div class="flex items-center gap-2 md:gap-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"); await import("leaflet.awesome-markers");
map = L.map("map").setView([0, 0], 2); map = L.map("map").setView([0, 0], 2);
map.attributionControl.setPrefix(false)
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution: "© OpenStreetMap contributors", attribution: "© OpenStreetMap contributors",
@@ -450,7 +451,7 @@
> >
<input type="hidden" name="distance" value={$form.distance} /> <input type="hidden" name="distance" value={$form.distance} />
</div> </div>
<div class="flex flex-col items-center"> <div class="flex flex-col items-center ">
<span>{$_("elevation-gain")}</span> <span>{$_("elevation-gain")}</span>
<span class="font-medium" <span class="font-medium"
>{formatElevation($form.elevation_gain)}</span >{formatElevation($form.elevation_gain)}</span