diff --git a/web/src/css/theme.css b/web/src/css/theme.css index 175c1747..728efb66 100644 --- a/web/src/css/theme.css +++ b/web/src/css/theme.css @@ -2,6 +2,7 @@ --primary: 36, 39, 52; --primary-hover: 17, 24, 39; --secondary-hover: 243, 244, 246; + --secondary-hover-inverse: 36, 39, 52; --background: 255, 255, 255; --background-inverse: 7, 10, 36; @@ -14,6 +15,7 @@ --input-border: 209, 213, 219; --input-border-focus: 36, 39, 52; --input-ring: 148, 163, 184; + --input-ring-inverse: 108, 115, 150; --menu-background: 255, 255, 255; --menu-item-background-hover: 243, 244, 246; diff --git a/web/src/lib/components/nav_bar.svelte b/web/src/lib/components/nav_bar.svelte index a7ad4e06..cc960de3 100644 --- a/web/src/lib/components/nav_bar.svelte +++ b/web/src/lib/components/nav_bar.svelte @@ -123,7 +123,7 @@
- + avatar - -

{user.username}

-

+ +

{user.username}

+

{user.email}

diff --git a/web/src/lib/components/trail/map_with_elevation_maplibre.svelte b/web/src/lib/components/trail/map_with_elevation_maplibre.svelte index bdeec27d..e2814cea 100644 --- a/web/src/lib/components/trail/map_with_elevation_maplibre.svelte +++ b/web/src/lib/components/trail/map_with_elevation_maplibre.svelte @@ -132,25 +132,7 @@ adjustTrailFocus(activeTrail); }); $effect(() => { - if ($theme == "dark") { - epc?.toggleTheme({ - profileBackgroundColor: "#191b24", - elevationGridColor: "#ddd2", - labelColor: "#ddd8", - crosshairColor: "#fff5", - tooltipBackgroundColor: "#242734", - tooltipTextColor: "#fff", - }); - } else { - epc?.toggleTheme({ - profileBackgroundColor: "#242734", - elevationGridColor: "#0002", - labelColor: "#0009", - crosshairColor: "#0005", - tooltipBackgroundColor: "#fff", - tooltipTextColor: "#000", - }); - } + toggleEpcTheme(); }); $effect(() => { if (drawing && map) { @@ -258,7 +240,7 @@ export function refreshElevationProfile() { if (activeTrail !== null && data[activeTrail]) { - epc?.setData(data[activeTrail]!, waypoints); + epc?.setData(data[activeTrail]!, waypoints); } } @@ -280,7 +262,7 @@ return new M.LngLatBounds([minX, minY, maxX, maxY]); } - function flyToBounds() { + function flyToBounds() { const bounds = activeTrail !== null && data[activeTrail] ? (data[activeTrail].bbox as M.LngLatBoundsLike) @@ -693,6 +675,28 @@ markers = []; } + function toggleEpcTheme() { + if ($theme == "dark") { + epc?.toggleTheme({ + profileBackgroundColor: "#191b24", + elevationGridColor: "#ddd2", + labelColor: "#ddd8", + crosshairColor: "#fff5", + tooltipBackgroundColor: "#242734", + tooltipTextColor: "#fff", + }); + } else { + epc?.toggleTheme({ + profileBackgroundColor: "#242734", + elevationGridColor: "#0002", + labelColor: "#0009", + crosshairColor: "#0005", + tooltipBackgroundColor: "#fff", + tooltipTextColor: "#000", + }); + } + } + onMount(async () => { const initialState = { lng: 0, @@ -844,6 +848,7 @@ } }, }); + toggleEpcTheme(); map.addControl(epc); } diff --git a/web/src/lib/components/trail/trail_info_panel.svelte b/web/src/lib/components/trail/trail_info_panel.svelte index d46437b6..37596b9d 100644 --- a/web/src/lib/components/trail/trail_info_panel.svelte +++ b/web/src/lib/components/trail/trail_info_panel.svelte @@ -2,7 +2,6 @@ import { goto } from "$app/navigation"; import Tabs from "$lib/components/base/tabs.svelte"; import TrailDropdown from "$lib/components/trail/trail_dropdown.svelte"; - import WaypointCard from "$lib/components/waypoint/waypoint_card.svelte"; import { Comment } from "$lib/models/comment"; import type { Trail } from "$lib/models/trail"; @@ -21,6 +20,7 @@ formatTimeHHMM, } from "$lib/util/format_util"; + import { browser } from "$app/environment"; 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 { pb } from "$lib/pocketbase"; @@ -34,15 +34,13 @@ import SkeletonNotificationCard from "../base/skeleton_notification_card.svelte"; import Textarea from "../base/textarea.svelte"; import CommentCard from "../comment/comment_card.svelte"; + import EmptyStateComment from "../empty_states/empty_state_comment.svelte"; + import EmptyStateDescription from "../empty_states/empty_state_description.svelte"; + import EmptyStatePhotos from "../empty_states/empty_state_photos.svelte"; import PhotoGallery from "../photo_gallery.svelte"; import ShareInfo from "../share_info.svelte"; 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"; - import { browser } from "$app/environment"; import TrailTimeline from "./trail_timeline.svelte"; interface Props { @@ -178,7 +176,7 @@ >
{#if (trail.public || trailIsShared) && pb.authStore.model}
{/if} + {#if mode == "map"} + + {/if}
@@ -262,7 +269,7 @@ class="grid grid-cols-2 sm:grid-cols-5 gap-y-4 py-4 border-b border-input-border px-3" >
- {#if mode == "overview"} {$_("distance")} {:else} @@ -272,7 +279,7 @@ {formatDistance(trail.distance)}
- {#if mode == "overview"} {$_("est-duration")} {:else} @@ -282,7 +289,7 @@ {formatTimeHHMM(trail.duration)}
- {#if mode == "overview"} {$_("elevation-gain")} {:else} @@ -292,7 +299,7 @@ {formatElevation(trail.elevation_gain)}
- {#if mode == "overview"} {$_("elevation-loss")} {:else} @@ -303,7 +310,7 @@
{#if trail.expand?.category}
- {#if mode == "overview"} {$_("category")} {:else} @@ -327,14 +334,13 @@
-
+
+

+ {$_("description")} +

{#if trail.description?.length} -

- {$_("description")} -

-
{!fullDescription ? trail.description?.substring(0, 300) @@ -357,7 +363,12 @@ {/if}

{$_("route")}

-
+ {#if mode === "overview"} +
+ {/if} {#if mode == "overview"} -
+
void; }; - let gallery: PhotoGallery; + let gallery: PhotoGallery[] = $state([]); let { trail, onmouseenter, onmouseleave }: Props = $props(); - - const photos = trail.expand?.waypoints.map(wp => wp.photos.map((p) => getFileURL(wp, p))).flat() ?? []

{$_("start")}

- {#each trail.expand?.waypoints ?? [] as wp, i}
{#if wp.photos.length} + getFileURL(wp, p))} bind:this={gallery[i]} + > {/if} diff --git a/web/src/lib/stores/search_store.ts b/web/src/lib/stores/search_store.ts index 37fc96de..b04cae2e 100644 --- a/web/src/lib/stores/search_store.ts +++ b/web/src/lib/stores/search_store.ts @@ -61,8 +61,11 @@ type Address = { road: string neighbourhood: string suburb: string - city_district: string - city: string + city_district?: string + city?: string + town?: string + hamlet?: string + village?: string; state: string "ISO3166-2-lvl4": string postcode: string @@ -147,6 +150,7 @@ export async function searchLocationReverse(lat: number, lon: number) { function getLocationDescription(address: Address) { let description = "" + console.log(address); if (address.country) { description += address.country; @@ -156,6 +160,12 @@ function getLocationDescription(address: Address) { } if (address.city) { description = `${address.city}, ` + description + } else if (address.town) { + description = `${address.town}, ` + description + }else if (address.hamlet) { + description = `${address.hamlet}, ` + description + } else if (address.village) { + description = `${address.village}, ` + description } return description; } diff --git a/web/src/lib/util/maplibre_util.ts b/web/src/lib/util/maplibre_util.ts index bbfded73..8691a785 100644 --- a/web/src/lib/util/maplibre_util.ts +++ b/web/src/lib/util/maplibre_util.ts @@ -80,7 +80,7 @@ export function createAnchorMarker(lat: number, lon: number, index: number, onDragStart: (event: Event) => void, onDragEnd: (event: Event) => void): FontawesomeMarker { const anchorElement = document.createElement("span") - anchorElement.className = "route-anchor cursor-pointer rounded-full w-6 h-6 border border-black text-center bg-background-inverse text-content-inverse" + anchorElement.className = "route-anchor cursor-pointer rounded-full w-6 h-6 border border-black text-center bg-primary text-white" anchorElement.textContent = "" + index const marker = new M.Marker( { diff --git a/web/src/lib/vendor/maplibre-elevation-profile/elevationprofile-control.ts b/web/src/lib/vendor/maplibre-elevation-profile/elevationprofile-control.ts index f733e99b..e4926210 100644 --- a/web/src/lib/vendor/maplibre-elevation-profile/elevationprofile-control.ts +++ b/web/src/lib/vendor/maplibre-elevation-profile/elevationprofile-control.ts @@ -73,6 +73,8 @@ export class ElevationProfileControl implements IControl { } toggleTheme(options: ElevationProfileControlOptions) { + console.log(options); + this.settings = { ...this.settings, ...options }; this.elevationProfileChart?.toggleTheme(this.settings) } diff --git a/web/src/routes/profile/[id]/+layout.svelte b/web/src/routes/profile/[id]/+layout.svelte index 780830aa..f71617e5 100644 --- a/web/src/routes/profile/[id]/+layout.svelte +++ b/web/src/routes/profile/[id]/+layout.svelte @@ -59,7 +59,7 @@
{#if data.user}