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

adds new empty states

Browse Source
This commit is contained in:
Christian Beutel
2025-01-04 17:05:35 +01:00
parent 474e21ae55
commit a704db6366
32 changed files with 306 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
web/src/routes/+error.svelte
View File

@@ -1,27 +1,28 @@
<script>
import { page } from "$app/stores";
import errorDark from "$lib/assets/svgs/empty_states/error_dark.svg";
import errorLight from "$lib/assets/svgs/empty_states/error_light.svg";
import { theme } from "$lib/stores/theme_store";
</script>
<svelte:head>
<title>{$page.status} | wanderer</title>
</svelte:head>
<div
class="flex flex-col gap-y-4 items-center justify-center relative"
class="m-auto text-center max-w-md"
style="height: calc(100dvh - 120px); font-size: 4rem"
>
<img
class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 aspect-square rounded-xl object-cover"
width="500"
src="/imgs/error.webp"
class="aspect-square rounded-xl mx-auto"
width="300"
src={$theme === "light" ? errorLight : errorDark}
alt="Default error img"
/>
<div
class="z-10 rounded-full p-8 bg-background flex flex-col gap-y-4 items-center"
style="max-width: 400px"
>
<div class="text-center mt-8">
<h1 class="font-bold" style="line-height: 4rem;">
{$page.status}
</h1>
<p class="text-lg text-center">
<p class="text-lg text-center mt-2">
{$page.error?.message}
</p>
</div>

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

@@ -11,6 +11,9 @@
import { country_codes } from "$lib/util/country_code_util";
import { Canvas } from "@threlte/core";
import { _ } from "svelte-i18n";
import emptyStateTrailDark from "$lib/assets/svgs/empty_states/empty_state_trail_dark.svg";
import emptyStateTrailLight from "$lib/assets/svgs/empty_states/empty_state_trail_light.svg";
import { theme } from "$lib/stores/theme_store";
export let data;
@@ -110,20 +113,21 @@
class="flex flex-wrap justify-items-center gap-8 py-8 order-1 md:order-none"
>
{#if data.trails.length == 0}
<div>
<img
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"
/>
</div>
<img
style="width: min(450px, 100%)"
class="rounded-md"
src={$theme === "light"
? emptyStateTrailLight
: emptyStateTrailDark}
alt="Empty state"
/>
{:else}
{#each { length: Math.min(data.trails.length, 4) } as _, i}
<a href="/trail/view/{data.trails[i].id}">
<TrailCard trail={data.trails[i]}></TrailCard></a
>
{/each}
{/if}
{#each { length: Math.min(data.trails.length, 4) } as _, i}
<a href="/trail/view/{data.trails[i].id}">
<TrailCard trail={data.trails[i]}></TrailCard></a
>
{/each}
</div>
<div class="max-w-md md:mx-auto space-y-8">
{#if data.trails.length == 0}

7
web/src/routes/lists/+page.svelte
View File

@@ -9,6 +9,7 @@
import Select from "$lib/components/base/select.svelte";
import SkeletonCard from "$lib/components/base/skeleton_card.svelte";
import ConfirmModal from "$lib/components/confirm_modal.svelte";
import EmptyStateSearch from "$lib/components/empty_states/empty_state_search.svelte";
import ListCard from "$lib/components/list/list_card.svelte";
import ListPanel from "$lib/components/list/list_panel.svelte";
import ListShareModal from "$lib/components/list/list_share_modal.svelte";
@@ -104,8 +105,8 @@
) {
for (const trail of item.expand.trails) {
const gpxData: string = await fetchGPX(trail);
if(!trail.expand) {
(trail as any).expand = {}
if (!trail.expand) {
(trail as any).expand = {};
}
trail.expand!.gpx_data = gpxData;
}
@@ -321,6 +322,8 @@
{#each { length: 3 } as _, index}
<SkeletonCard></SkeletonCard>
{/each}
{:else if data.lists.items.length == 0}
<EmptyStateSearch width={356}></EmptyStateSearch>
{:else}
{#each data.lists.items as item, i}
<div

7
web/src/routes/lists/edit/[id]/+page.svelte
View File

@@ -3,6 +3,8 @@
import { _ } from "svelte-i18n";
import { page } from "$app/stores";
import emptyStateTrailDark from "$lib/assets/svgs/empty_states/empty_state_trail_dark.svg";
import emptyStateTrailLight from "$lib/assets/svgs/empty_states/empty_state_trail_light.svg";
import Button from "$lib/components/base/button.svelte";
import Search, {
type SearchItem,
@@ -18,6 +20,7 @@
import type { Trail } from "$lib/models/trail.js";
import { TrailShare } from "$lib/models/trail_share.js";
import { lists_create, lists_update } from "$lib/stores/list_store.js";
import { theme } from "$lib/stores/theme_store.js";
import { show_toast } from "$lib/stores/toast_store.js";
import {
trail_share_create,
@@ -338,7 +341,9 @@
trail,
trail.photos[trail.thumbnail ?? 0],
)
: "/imgs/default_thumbnail.webp"}
: $theme === "light"
? emptyStateTrailLight
: emptyStateTrailDark}
alt=""
/>
</div>

21
web/src/routes/map/+page.svelte
View File

@@ -132,15 +132,6 @@
function handleMapInit() {
if (
$page.url.searchParams.has("lat") &&
$page.url.searchParams.has("lon")
) {
const lat = $page.url.searchParams.get("lat");
const lon = $page.url.searchParams.get("lon");
map.setCenter([parseFloat(lon!), parseFloat(lat!)]);
map.setZoom(14);
console.log("Set map center to: " + lat + " " + lon);
} else if (
$page.url.searchParams.has("tl_lat") &&
$page.url.searchParams.has("tl_lon") &&
$page.url.searchParams.has("br_lat") &&
@@ -157,6 +148,14 @@
],
];
map.fitBounds(boundingBox, { animate: false });
} else if (
$page.url.searchParams.has("lat") &&
$page.url.searchParams.has("lon")
) {
const lat = $page.url.searchParams.get("lat");
const lon = $page.url.searchParams.get("lon");
map.setZoom(14);
map.setCenter([parseFloat(lon!), parseFloat(lat!)]);
} else if (settings && settings.mapFocus == "trails") {
const boundingBox: M.LngLatBoundsLike = [
[maxBoundingBox.min_lon, maxBoundingBox.max_lat],
@@ -168,15 +167,15 @@
settings.mapFocus == "location" &&
settings.location
) {
map.setCenter([settings.location.lon, settings.location.lat]);
map.setZoom(12);
map.setCenter([settings.location.lon, settings.location.lat]);
} else {
navigator.geolocation.getCurrentPosition(
(position) => {
const lat = position.coords.latitude;
const lon = position.coords.longitude;
map.setCenter([lon, lat]);
map.setZoom(12);
map.setCenter([lon, lat]);
},
(error) => {
console.error("Error getting user location:", error);

7
web/src/routes/profile/[id]/+page.svelte
View File

@@ -3,6 +3,9 @@
import { activities_index } from "$lib/stores/activity_store.js";
import { getFileURL } from "$lib/util/file_util.js";
import { _ } from "svelte-i18n";
import emptyStateTrailDark from "$lib/assets/svgs/empty_states/empty_state_trail_dark.svg";
import emptyStateTrailLight from "$lib/assets/svgs/empty_states/empty_state_trail_light.svg";
import { theme } from "$lib/stores/theme_store.js";
export let data;
@@ -86,7 +89,9 @@
class="w-full h-full object-cover transition-transform group-hover:scale-110"
src={list.avatar
? getFileURL(list, list.avatar)
: "/imgs/default_list_thumbnail.webp"}
: $theme === "light"
? emptyStateTrailLight
: emptyStateTrailDark}
alt="avatar"
/>

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

@@ -67,6 +67,9 @@
import { backInOut } from "svelte/easing";
import { scale } from "svelte/transition";
import { z } from "zod";
import emptyStateTrailDark from "$lib/assets/svgs/empty_states/empty_state_trail_dark.svg";
import emptyStateTrailLight from "$lib/assets/svgs/empty_states/empty_state_trail_light.svg";
import { theme } from "$lib/stores/theme_store.js";
export let data;
@@ -851,7 +854,9 @@
class="w-8 aspect-square rounded-full object-cover"
src={list.avatar
? getFileURL(list, list.avatar)
: "/imgs/default_list_thumbnail.webp"}
: $theme === "light"
? emptyStateTrailLight
: emptyStateTrailDark}
alt="avatar"
/>