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

8
web/src/lib/components/empty_states/empty_state_search.svelte
View File

@@ -1,4 +1,8 @@
<script lang="ts">
import emptyStateSearchDark from "$lib/assets/svgs/empty_states/empty_state_search_dark.svg";
import emptyStateSearchLight from "$lib/assets/svgs/empty_states/empty_state_search_light.svg";
import { theme } from "$lib/stores/theme_store";
import { _ } from "svelte-i18n";
export let width: number = 256;
</script>
@@ -7,9 +11,9 @@
<img
style="width: {width}px"
class="rounded-full aspect-square"
src="/imgs/empty_state.png"
src={$theme === "light" ? emptyStateSearchLight : emptyStateSearchDark}
alt="Empty State showing a wanderer going into the distance"
/>
<h3 class="text-2xl font-semibold text-center">{$_("no-results")}</h3>
<h3 class="text-2xl font-semibold text-center text-gray-500">{$_("no-results")}</h3>
</div>

8
web/src/lib/components/list/list_card.svelte
View File

@@ -1,5 +1,8 @@
<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 type { List } from "$lib/models/list";
import { theme } from "$lib/stores/theme_store";
import { getFileURL } from "$lib/util/file_util";
import {
formatDistance,
@@ -8,6 +11,7 @@
} from "$lib/util/format_util";
import { _ } from "svelte-i18n";
import ShareInfo from "../share_info.svelte";
export let list: List;
export let active: boolean = false;
@@ -42,7 +46,9 @@
class="w-16 md:w-20 aspect-square rounded-full object-cover"
src={list.avatar
? getFileURL(list, list.avatar)
: "/imgs/default_list_thumbnail.webp"}
: $theme === "light"
? emptyStateTrailLight
: emptyStateTrailDark}
alt="avatar"
/>

16
web/src/lib/components/list/list_panel.svelte
View File

@@ -1,19 +1,21 @@
<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 type { List } from "$lib/models/list";
import type { Trail } from "$lib/models/trail";
import { theme } from "$lib/stores/theme_store";
import { currentUser } from "$lib/stores/user_store";
import { getFileURL } from "$lib/util/file_util";
import {
formatDistance,
formatElevation,
formatTimeHHMM,
} from "$lib/util/format_util";
import { _ } from "svelte-i18n";
import TrailListItem from "../trail/trail_list_item.svelte";
import type { Trail } from "$lib/models/trail";
import { createEventDispatcher } from "svelte";
import { currentUser } from "$lib/stores/user_store";
import { _ } from "svelte-i18n";
import Dropdown from "../base/dropdown.svelte";
import ShareInfo from "../share_info.svelte";
import TrailListItem from "../trail/trail_list_item.svelte";
export let list: List;
const dispatch = createEventDispatcher();
@@ -115,7 +117,9 @@
class="w-full object-cover max-h-64"
src={list.avatar
? getFileURL(list, list.avatar)
: "/imgs/default_list_thumbnail.webp"}
: $theme === "light"
? emptyStateTrailLight
: emptyStateTrailDark}
alt="avatar"
/>
</div>

7
web/src/lib/components/list/list_select_modal.svelte
View File

@@ -6,6 +6,9 @@
import { getFileURL } from "$lib/util/file_util";
import { _ } from "svelte-i18n";
import Modal from "../base/modal.svelte";
import { theme } from "$lib/stores/theme_store";
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";
export let lists: List[];
@@ -45,7 +48,9 @@
class="w-12 aspect-square rounded-full"
src={list.avatar
? getFileURL(list, list.avatar)
: "/imgs/default_list_thumbnail.webp"}
: $theme === "light"
? emptyStateTrailLight
: emptyStateTrailDark}
alt="avatar"
/>

17
web/src/lib/components/notification/notification_dropdown.svelte
View File

@@ -12,6 +12,9 @@
import SkeletonNotificationCard from "../base/skeleton_notification_card.svelte";
import NotificationCard from "./notification_card.svelte";
import { _ } from "svelte-i18n";
import emptyStateNotificationDark from "$lib/assets/svgs/empty_states/empty_state_notification_dark.svg";
import emptyStateNotificationLight from "$lib/assets/svgs/empty_states/empty_state_notification_light.svg";
import { theme } from "$lib/stores/theme_store";
let notifications: Notification[] = [];
@@ -133,9 +136,17 @@
></NotificationCard>
{/each}
{:else}
<p class="text-gray-500 text-sm text-center py-6">
{$_("no-notifications")}
</p>
<div class="text-center p-8">
<img class="mx-auto"
src={$theme === "light"
? emptyStateNotificationLight
: emptyStateNotificationDark}
alt="notification empty state"
/>
<p class="text-gray-500 text-sm text-center mt-2">
{$_("no-notifications")}
</p>
</div>
{/if}
</ul>
{/if}

9
web/src/lib/components/summit_log/summit_log_card.svelte
View File

@@ -2,6 +2,8 @@
import type { SummitLog } from "$lib/models/summit_log";
import { _ } from "svelte-i18n";
import Dropdown, { type DropdownItem } from "../base/dropdown.svelte";
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 {
formatDistance,
@@ -9,8 +11,10 @@
formatTimeHHMM,
} from "$lib/util/format_util";
import { getFileURL, readAsDataURLAsync } from "$lib/util/file_util";
import { theme } from "$lib/stores/theme_store";
let thumbnail: string = "/imgs/default_thumbnail.webp";
let thumbnail: string =
$theme === "light" ? emptyStateTrailLight : emptyStateTrailDark;
$: Promise.all(
(log._photos ?? []).map(async (f) => {
@@ -22,7 +26,8 @@
} else if (v.length) {
thumbnail = v[0];
} else {
thumbnail = "/imgs/default_thumbnail.webp";
thumbnail =
$theme === "light" ? emptyStateTrailLight : emptyStateTrailDark;
}
});

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

@@ -1,5 +1,9 @@
<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 type { Trail } from "$lib/models/trail";
import { pb } from "$lib/pocketbase";
import { theme } from "$lib/stores/theme_store";
import { getFileURL } from "$lib/util/file_util";
import {
formatDistance,
@@ -8,14 +12,15 @@
} from "$lib/util/format_util";
import { _ } from "svelte-i18n";
import ShareInfo from "../share_info.svelte";
import { pb } from "$lib/pocketbase";
export let trail: Trail;
export let fullWidth: boolean = false;
$: thumbnail = trail.photos.length
? getFileURL(trail, trail.photos[trail.thumbnail ?? 0])
: "/imgs/default_thumbnail.webp";
: $theme === "light"
? emptyStateTrailLight
: emptyStateTrailDark;
$: trailIsShared = (trail.expand?.trail_share_via_trail?.length ?? 0) > 0;
</script>
@@ -31,7 +36,7 @@
<div
class="relative w-full min-h-40 max-h-48 overflow-hidden rounded-t-2xl"
>
<img id="header-img" src={thumbnail} alt="" />
<img width="100%" id="header-img" src={thumbnail} alt="" />
</div>
{#if (trail.public || trailIsShared) && pb.authStore.model}
<div

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

@@ -33,6 +33,9 @@
import { pb } from "$lib/pocketbase";
import * as M from "maplibre-gl";
import MapWithElevationMaplibre from "./map_with_elevation_maplibre.svelte";
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 trail: Trail;
export let mode: "overview" | "map" | "list" = "map";
@@ -50,9 +53,11 @@
const trailIsShared =
(trail.expand?.trail_share_via_trail?.length ?? 0) > 0;
let thumbnail = trail.photos.length
$: thumbnail = trail.photos.length
? getFileURL(trail, trail.photos[trail.thumbnail ?? 0])
: "/imgs/default_thumbnail.webp";
: $theme === "light"
? emptyStateTrailLight
: emptyStateTrailDark;
let openGallery: (idx?: number) => void;

11
web/src/lib/components/trail/trail_list_item.svelte
View File

@@ -1,5 +1,9 @@
<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 type { Trail } from "$lib/models/trail";
import { pb } from "$lib/pocketbase";
import { theme } from "$lib/stores/theme_store";
import { getFileURL } from "$lib/util/file_util";
import {
formatDistance,
@@ -8,15 +12,16 @@
} from "$lib/util/format_util";
import { _ } from "svelte-i18n";
import ShareInfo from "../share_info.svelte";
import { pb } from "$lib/pocketbase";
export let trail: Trail;
export let showDescription: boolean = true;
$: thumbnail = trail.photos.length
? getFileURL(trail, trail.photos[trail.thumbnail ?? 0])
: "/imgs/default_thumbnail.webp";
: $theme === "light"
? emptyStateTrailLight
: emptyStateTrailDark;
</script>
<li