From 36a3040e513ad766d72a41038a44b4e7bcfee695 Mon Sep 17 00:00:00 2001 From: Christian Beutel <> Date: Sat, 4 Jan 2025 18:10:37 +0100 Subject: [PATCH] adds empty states for missing trail info --- .../empty_state_description_dark.svg | 19 ++++ .../empty_state_description_light.svg | 19 ++++ .../empty_state_waypoint_dark.svg | 15 ++++ .../empty_state_waypoint_light.svg | 15 ++++ .../empty_states/empty_state_comment.svelte | 2 +- .../empty_state_description.svelte | 19 ++++ .../empty_states/empty_state_photos.svelte | 19 ++++ .../empty_states/empty_state_waypoint.svelte | 19 ++++ .../components/trail/trail_info_panel.svelte | 87 +++++++++++-------- web/src/lib/i18n/locales/de.json | 3 + web/src/lib/i18n/locales/en.json | 3 + web/src/lib/i18n/locales/fr.json | 3 + web/src/lib/i18n/locales/hu.json | 3 + web/src/lib/i18n/locales/it.json | 3 + web/src/lib/i18n/locales/nl.json | 3 + web/src/lib/i18n/locales/pl.json | 3 + web/src/lib/i18n/locales/pt.json | 3 + web/src/lib/i18n/locales/zh.json | 3 + 18 files changed, 205 insertions(+), 36 deletions(-) create mode 100644 web/src/lib/assets/svgs/empty_states/empty_state_description_dark.svg create mode 100644 web/src/lib/assets/svgs/empty_states/empty_state_description_light.svg create mode 100644 web/src/lib/assets/svgs/empty_states/empty_state_waypoint_dark.svg create mode 100644 web/src/lib/assets/svgs/empty_states/empty_state_waypoint_light.svg create mode 100644 web/src/lib/components/empty_states/empty_state_description.svelte create mode 100644 web/src/lib/components/empty_states/empty_state_photos.svelte create mode 100644 web/src/lib/components/empty_states/empty_state_waypoint.svelte diff --git a/web/src/lib/assets/svgs/empty_states/empty_state_description_dark.svg b/web/src/lib/assets/svgs/empty_states/empty_state_description_dark.svg new file mode 100644 index 00000000..4de65464 --- /dev/null +++ b/web/src/lib/assets/svgs/empty_states/empty_state_description_dark.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/web/src/lib/assets/svgs/empty_states/empty_state_description_light.svg b/web/src/lib/assets/svgs/empty_states/empty_state_description_light.svg new file mode 100644 index 00000000..43329d73 --- /dev/null +++ b/web/src/lib/assets/svgs/empty_states/empty_state_description_light.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/web/src/lib/assets/svgs/empty_states/empty_state_waypoint_dark.svg b/web/src/lib/assets/svgs/empty_states/empty_state_waypoint_dark.svg new file mode 100644 index 00000000..b50034b9 --- /dev/null +++ b/web/src/lib/assets/svgs/empty_states/empty_state_waypoint_dark.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/web/src/lib/assets/svgs/empty_states/empty_state_waypoint_light.svg b/web/src/lib/assets/svgs/empty_states/empty_state_waypoint_light.svg new file mode 100644 index 00000000..ec7b80dd --- /dev/null +++ b/web/src/lib/assets/svgs/empty_states/empty_state_waypoint_light.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/web/src/lib/components/empty_states/empty_state_comment.svelte b/web/src/lib/components/empty_states/empty_state_comment.svelte index 1d5bbb79..16a520a8 100644 --- a/web/src/lib/components/empty_states/empty_state_comment.svelte +++ b/web/src/lib/components/empty_states/empty_state_comment.svelte @@ -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;
diff --git a/web/src/lib/components/empty_states/empty_state_description.svelte b/web/src/lib/components/empty_states/empty_state_description.svelte new file mode 100644 index 00000000..e7e9a8f9 --- /dev/null +++ b/web/src/lib/components/empty_states/empty_state_description.svelte @@ -0,0 +1,19 @@ + + +
+ Empty State showing a wanderer going into the distance + +

{$_("no-description-for-now")}...

+
diff --git a/web/src/lib/components/empty_states/empty_state_photos.svelte b/web/src/lib/components/empty_states/empty_state_photos.svelte new file mode 100644 index 00000000..a56565e8 --- /dev/null +++ b/web/src/lib/components/empty_states/empty_state_photos.svelte @@ -0,0 +1,19 @@ + + +
+ Empty State showing a wanderer going into the distance + +

{$_("no-photos-here")}...

+
diff --git a/web/src/lib/components/empty_states/empty_state_waypoint.svelte b/web/src/lib/components/empty_states/empty_state_waypoint.svelte new file mode 100644 index 00000000..0844f869 --- /dev/null +++ b/web/src/lib/components/empty_states/empty_state_waypoint.svelte @@ -0,0 +1,19 @@ + + +
+ Empty State showing a wanderer going into the distance + +

{$_("no-waypoints-yet")}...

+
diff --git a/web/src/lib/components/trail/trail_info_panel.svelte b/web/src/lib/components/trail/trail_info_panel.svelte index b504536e..2295fa79 100644 --- a/web/src/lib/components/trail/trail_info_panel.svelte +++ b/web/src/lib/components/trail/trail_info_panel.svelte @@ -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} -
- {trail.description} -
+ {#if trail.description?.length} +
+ {trail.description} +
+ {:else} + + {/if} {/if} {#if activeTab == 1} - + {#if trail.expand?.waypoints.length} + + {:else} + + {/if} {/if} {#if activeTab == 2} -
- getFileURL(trail, p))} - bind:open={openGallery} - > - {#each trail.photos ?? [] as photo, i} - - - openGallery(i)} - src={getFileURL(trail, photo)} - alt="" - /> - {/each} -
+ {#if trail.photos.length} +
+ + getFileURL(trail, p), + )} + bind:open={openGallery} + > + {#each trail.photos ?? [] as photo, i} + + + openGallery(i)} + src={getFileURL(trail, photo)} + alt="" + /> + {/each} +
+ {:else} + + {/if} {/if} {#if activeTab == 3}
@@ -386,7 +403,7 @@ > {/each} {:else if $comments.length == 0} - + {:else} {#each $comments ?? [] as comment}
  • diff --git a/web/src/lib/i18n/locales/de.json b/web/src/lib/i18n/locales/de.json index b11997d5..2a4763bd 100644 --- a/web/src/lib/i18n/locales/de.json +++ b/web/src/lib/i18n/locales/de.json @@ -177,11 +177,14 @@ "no-account": "Du hast noch kein Konto?", "no-comments-so-far": "", "no-data": "Keine Daten", + "no-description-for-now": "", "no-grid": "Kein Gitter", "no-notifications": "", + "no-photos-here": "", "no-preference": "Keine Präferenz", "no-results": "Keine Ergebnisse gefunden", "no-routes-added": "", + "no-waypoints-yet": "", "not-a-valid-email-address": "Keine gültige Email-Adresse", "not-completed": "Nicht abgeschlossen", "notification-list-create": "", diff --git a/web/src/lib/i18n/locales/en.json b/web/src/lib/i18n/locales/en.json index f20df488..93e0c73a 100644 --- a/web/src/lib/i18n/locales/en.json +++ b/web/src/lib/i18n/locales/en.json @@ -177,11 +177,14 @@ "no-account": "Don't have an account?", "no-comments-so-far": "No comments so far", "no-data": "No data", + "no-description-for-now": "No description for now", "no-grid": "No Grid", "no-notifications": "No notifications", + "no-photos-here": "No photos here", "no-preference": "No preference", "no-results": "No results found", "no-routes-added": "No routes added", + "no-waypoints-yet": "No waypoints yet", "not-a-valid-email-address": "Not a valid email address", "not-completed": "Not completed", "notification-list-create": "{user} created a new list", diff --git a/web/src/lib/i18n/locales/fr.json b/web/src/lib/i18n/locales/fr.json index 474d5670..898dda56 100644 --- a/web/src/lib/i18n/locales/fr.json +++ b/web/src/lib/i18n/locales/fr.json @@ -177,11 +177,14 @@ "no-account": "Pas encore de compte ?", "no-comments-so-far": "", "no-data": "", + "no-description-for-now": "", "no-grid": "", "no-notifications": "", + "no-photos-here": "", "no-preference": "Pas de préférence", "no-results": "Pas de résultat", "no-routes-added": "", + "no-waypoints-yet": "", "not-a-valid-email-address": "Adresse email invalide", "not-completed": "Pas terminé", "notification-list-create": "", diff --git a/web/src/lib/i18n/locales/hu.json b/web/src/lib/i18n/locales/hu.json index 27c2b993..860d2fe6 100644 --- a/web/src/lib/i18n/locales/hu.json +++ b/web/src/lib/i18n/locales/hu.json @@ -177,11 +177,14 @@ "no-account": "Nincs még fiókja?", "no-comments-so-far": "", "no-data": "", + "no-description-for-now": "", "no-grid": "", "no-notifications": "", + "no-photos-here": "", "no-preference": "Nincs preferált", "no-results": "Nincs eredmény", "no-routes-added": "", + "no-waypoints-yet": "", "not-a-valid-email-address": "Érvénytelen e-mail cím", "not-completed": "Nem teljesített", "notification-list-create": "", diff --git a/web/src/lib/i18n/locales/it.json b/web/src/lib/i18n/locales/it.json index bf5cb894..1e1c8f51 100644 --- a/web/src/lib/i18n/locales/it.json +++ b/web/src/lib/i18n/locales/it.json @@ -177,11 +177,14 @@ "no-account": "Non hai ancora un account?", "no-comments-so-far": "", "no-data": "", + "no-description-for-now": "", "no-grid": "", "no-notifications": "", + "no-photos-here": "", "no-preference": "Nessuna preferenza", "no-results": "Nessun risultato trovato", "no-routes-added": "", + "no-waypoints-yet": "", "not-a-valid-email-address": "Indirizzo email non valido", "not-completed": "Non completato", "notification-list-create": "", diff --git a/web/src/lib/i18n/locales/nl.json b/web/src/lib/i18n/locales/nl.json index ff7cf49a..4e4270b9 100644 --- a/web/src/lib/i18n/locales/nl.json +++ b/web/src/lib/i18n/locales/nl.json @@ -177,11 +177,14 @@ "no-account": "Heb je nog geen account?", "no-comments-so-far": "", "no-data": "", + "no-description-for-now": "", "no-grid": "", "no-notifications": "", + "no-photos-here": "", "no-preference": "Geen voorkeur", "no-results": "Er zijn geen zoekresultaten", "no-routes-added": "", + "no-waypoints-yet": "", "not-a-valid-email-address": "Het e-mailadres is ongeldig", "not-completed": "Niet voltooid", "notification-list-create": "", diff --git a/web/src/lib/i18n/locales/pl.json b/web/src/lib/i18n/locales/pl.json index ac3cb975..c60fc592 100644 --- a/web/src/lib/i18n/locales/pl.json +++ b/web/src/lib/i18n/locales/pl.json @@ -177,11 +177,14 @@ "no-account": "Nie masz konta?", "no-comments-so-far": "", "no-data": "", + "no-description-for-now": "", "no-grid": "", "no-notifications": "", + "no-photos-here": "", "no-preference": "Brak preferencji", "no-results": "Brak wyników", "no-routes-added": "", + "no-waypoints-yet": "", "not-a-valid-email-address": "Nieprawidłowy adres email", "not-completed": "Nie dokończono", "notification-list-create": "", diff --git a/web/src/lib/i18n/locales/pt.json b/web/src/lib/i18n/locales/pt.json index 8223f0cd..a859ebd9 100644 --- a/web/src/lib/i18n/locales/pt.json +++ b/web/src/lib/i18n/locales/pt.json @@ -177,11 +177,14 @@ "no-account": "Não tem uma conta?", "no-comments-so-far": "", "no-data": "", + "no-description-for-now": "", "no-grid": "", "no-notifications": "", + "no-photos-here": "", "no-preference": "Nenhuma preferência", "no-results": "Nenhum resultado encontrado", "no-routes-added": "", + "no-waypoints-yet": "", "not-a-valid-email-address": "Não um endereço de e-mail válido", "not-completed": "Não preenchido", "notification-list-create": "", diff --git a/web/src/lib/i18n/locales/zh.json b/web/src/lib/i18n/locales/zh.json index 068b324f..5aca3a11 100644 --- a/web/src/lib/i18n/locales/zh.json +++ b/web/src/lib/i18n/locales/zh.json @@ -177,11 +177,14 @@ "no-account": "还未注册？", "no-comments-so-far": "", "no-data": "", + "no-description-for-now": "", "no-grid": "", "no-notifications": "", + "no-photos-here": "", "no-preference": "尚未规划", "no-results": "没有找到结果", "no-routes-added": "", + "no-waypoints-yet": "", "not-a-valid-email-address": "无效电子邮箱地址", "not-completed": "未完成", "notification-list-create": "",