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

adds empty states for missing trail info

Browse Source
This commit is contained in:
Christian Beutel
2025-01-04 18:10:37 +01:00
parent 2cc01744da
commit 36a3040e51
18 changed files with 205 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/lib/components/empty_states/empty_state_comment.svelte
View File

@@ -4,7 +4,7 @@
import { theme } from "$lib/stores/theme_store";
import { _ } from "svelte-i18n";
export let width: number = 256;
export let width: number = 192;
</script>
<div class="flex flex-col justify-center items-center gap-y-4">

19
web/src/lib/components/empty_states/empty_state_description.svelte Normal file
View File

@@ -0,0 +1,19 @@
<script lang="ts">
import emptyStateDescriptionDark from "$lib/assets/svgs/empty_states/empty_state_description_dark.svg";
import emptyStateDescriptionLight from "$lib/assets/svgs/empty_states/empty_state_description_light.svg";
import { theme } from "$lib/stores/theme_store";
import { _ } from "svelte-i18n";
export let width: number = 192;
</script>
<div class="flex flex-col justify-center items-center gap-y-4">
<img
style="width: {width}px"
class="rounded-full aspect-square"
src={$theme === "light" ? emptyStateDescriptionLight : emptyStateDescriptionDark}
alt="Empty State showing a wanderer going into the distance"
/>
<h3 class="text-xl font-medium text-center text-gray-500">{$_("no-description-for-now")}...</h3>
</div>

19
web/src/lib/components/empty_states/empty_state_photos.svelte Normal file
View File

@@ -0,0 +1,19 @@
<script lang="ts">
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";
import { _ } from "svelte-i18n";
export let width: number = 192;
</script>
<div class="flex flex-col justify-center items-center gap-y-4">
<img
style="width: {width}px"
class="rounded-full aspect-square"
src={$theme === "light" ? emptyStateTrailLight : emptyStateTrailDark}
alt="Empty State showing a wanderer going into the distance"
/>
<h3 class="text-xl font-medium text-center text-gray-500">{$_("no-photos-here")}...</h3>
</div>

19
web/src/lib/components/empty_states/empty_state_waypoint.svelte Normal file
View File

@@ -0,0 +1,19 @@
<script lang="ts">
import emptyStateWaypointDark from "$lib/assets/svgs/empty_states/empty_state_waypoint_dark.svg";
import emptyStateWaypointLight from "$lib/assets/svgs/empty_states/empty_state_waypoint_light.svg";
import { theme } from "$lib/stores/theme_store";
import { _ } from "svelte-i18n";
export let width: number = 192;
</script>
<div class="flex flex-col justify-center items-center gap-y-4">
<img
style="width: {width}px"
class="rounded-full aspect-square"
src={$theme === "light" ? emptyStateWaypointLight : emptyStateWaypointDark}
alt="Empty State showing a wanderer going into the distance"
/>
<h3 class="text-xl font-medium text-center text-gray-500">{$_("no-waypoints-yet")}...</h3>
</div>

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

@@ -39,6 +39,9 @@
import SummitLogTable from "../summit_log/summit_log_table.svelte";
import MapWithElevationMaplibre from "./map_with_elevation_maplibre.svelte";
import EmptyStateComment from "../empty_states/empty_state_comment.svelte";
import EmptyStatePhotos from "../empty_states/empty_state_photos.svelte";
import EmptyStateWaypoint from "../empty_states/empty_state_waypoint.svelte";
import EmptyStateDescription from "../empty_states/empty_state_description.svelte";
export let trail: Trail;
export let mode: "overview" | "map" | "list" = "map";
@@ -299,44 +302,58 @@
class:md:grid-cols-[1fr_18rem]={mode == "overview"}
>
{#if activeTab == 0}
<article class="text-justify whitespace-pre-line text-sm">
{trail.description}
</article>
{#if trail.description?.length}
<article class="text-justify whitespace-pre-line text-sm">
{trail.description}
</article>
{:else}
<EmptyStateDescription></EmptyStateDescription>
{/if}
{/if}
{#if activeTab == 1}
<ul>
{#each trail.expand?.waypoints ?? [] as waypoint, i}
<li
on:mouseenter={() => openMarkerPopup(i)}
on:mouseleave={() => closeMarkerPopup(i)}
>
<WaypointCard {waypoint}></WaypointCard>
</li>
{/each}
</ul>
{#if trail.expand?.waypoints.length}
<ul>
{#each trail.expand?.waypoints ?? [] as waypoint, i}
<li
on:mouseenter={() => openMarkerPopup(i)}
on:mouseleave={() => closeMarkerPopup(i)}
>
<WaypointCard {waypoint}></WaypointCard>
</li>
{/each}
</ul>
{:else}
<EmptyStateWaypoint></EmptyStateWaypoint>
{/if}
{/if}
{#if activeTab == 2}
<div
id="photo-gallery"
class="grid grid-cols-1 {mode == 'overview'
? 'sm:grid-cols-2 md:grid-cols-3'
: ''} gap-4"
>
<PhotoGallery
photos={trail.photos.map((p) => getFileURL(trail, p))}
bind:open={openGallery}
></PhotoGallery>
{#each trail.photos ?? [] as photo, i}
<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
<img
class="rounded-xl cursor-pointer hover:scale-105 transition-transform"
on:click={() => openGallery(i)}
src={getFileURL(trail, photo)}
alt=""
/>
{/each}
</div>
{#if trail.photos.length}
<div
id="photo-gallery"
class="grid grid-cols-1 {mode == 'overview'
? 'sm:grid-cols-2 md:grid-cols-3'
: ''} gap-4"
>
<PhotoGallery
photos={trail.photos.map((p) =>
getFileURL(trail, p),
)}
bind:open={openGallery}
></PhotoGallery>
{#each trail.photos ?? [] as photo, i}
<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
<img
class="rounded-xl cursor-pointer hover:scale-105 transition-transform"
on:click={() => openGallery(i)}
src={getFileURL(trail, photo)}
alt=""
/>
{/each}
</div>
{:else}
<EmptyStatePhotos></EmptyStatePhotos>
{/if}
{/if}
{#if activeTab == 3}
<div class="overflow-x-auto">
@@ -386,7 +403,7 @@
></SkeletonNotificationCard>
{/each}
{:else if $comments.length == 0}
<EmptyStateComment width={192}></EmptyStateComment>
<EmptyStateComment></EmptyStateComment>
{:else}
{#each $comments ?? [] as comment}
<li>