From efcec77c954f48430520db8b83e1c2ea7110fe40 Mon Sep 17 00:00:00 2001
From: Christian Beutel <>
Date: Thu, 20 Mar 2025 19:16:04 +0100
Subject: [PATCH] cosmetic changes

---
 web/src/lib/components/base/chip.svelte       |   2 +-
 web/src/lib/components/base/dropdown.svelte   |  37 +++-
 .../components/profile/activity_card.svelte   |   2 +-
 .../components/trail/trail_dropdown.svelte    |   2 +-
 .../components/trail/trail_info_panel.svelte  | 172 ++++++++++--------
 .../components/trail/trail_timeline.svelte    |   2 +-
 6 files changed, 132 insertions(+), 85 deletions(-)

diff --git a/web/src/lib/components/base/chip.svelte b/web/src/lib/components/base/chip.svelte
index d6e67c66..fe78ea19 100644
--- a/web/src/lib/components/base/chip.svelte
+++ b/web/src/lib/components/base/chip.svelte
@@ -14,7 +14,7 @@
 <div
     class="{primary
         ? 'bg-primary text-white'
-        : 'bg-background-inverse/10'} px-2 py-1 rounded-full flex items-center gap-1"
+        : 'border border-input-border'} px-2 py-1 rounded-full flex items-center gap-1"
 >
     <span class="text-sm">{text}</span>
     {#if closable}
diff --git a/web/src/lib/components/base/dropdown.svelte b/web/src/lib/components/base/dropdown.svelte
index 010c9ae6..1cc5f8e6 100644
--- a/web/src/lib/components/base/dropdown.svelte
+++ b/web/src/lib/components/base/dropdown.svelte
@@ -7,7 +7,7 @@
 </script>
 
 <script lang="ts">
-    import { type Snippet } from "svelte";
+    import { tick, type Snippet } from "svelte";
     import { fly } from "svelte/transition";
 
     interface Props {
@@ -21,10 +21,38 @@
 
     let isOpen = $state(false);
 
-    export function toggleMenu(e: MouseEvent) {
+    let dropdownElement: HTMLUListElement;
+    let dropdownToggleElement: HTMLDivElement;
+
+    export async function toggleMenu(e: MouseEvent) {
         e.stopPropagation();
         e.preventDefault();
+
         isOpen = !isOpen;
+        if (isOpen) {
+            await tick();
+            const toggleRect = dropdownToggleElement.getBoundingClientRect();
+
+            const dropdownRect = dropdownElement.getBoundingClientRect();
+            dropdownElement.style.visibility = "";
+
+            const viewportHeight = window.innerHeight;
+            const spaceBelow = viewportHeight - toggleRect.bottom;
+            const spaceAbove = toggleRect.top;
+
+            if (
+                spaceBelow < dropdownRect.height &&
+                spaceAbove > dropdownRect.height
+            ) {
+                dropdownElement.classList.remove("rounded-b-xl");
+                dropdownElement.classList.add("rounded-t-xl");
+                dropdownElement.style.top = `${-8-dropdownRect.height}px`;
+            } else {
+                dropdownElement.classList.remove("rounded-t-xl");
+                dropdownElement.classList.add("rounded-b-xl");
+                dropdownElement.style.top = `${toggleRect.height +8}px`;
+            }
+        }
     }
 
     function closeMenu() {
@@ -53,7 +81,7 @@
 <svelte:window onmouseup={handleWindowClick} />
 
 <div class="dropdown relative">
-    <div class="dropdown-toggle">
+    <div class="dropdown-toggle" bind:this={dropdownToggleElement}>
         {#if children}{@render children({ toggleMenu })}{:else}
             <button
                 aria-label="Toggle menu"
@@ -68,11 +96,12 @@
 
     {#if isOpen}
         <ul
-            class="menu absolute bg-menu-background border border-input-border rounded-l-xl rounded-b-xl shadow-md right-0 overflow-hidden mt-2"
+            class="menu absolute bg-menu-background border border-input-border shadow-md rounded-l-xl rounded-b-xl right-0 overflow-hidden"
             class:none={isOpen}
             style="z-index: 1001"
             in:fly={{ y: -10, duration: 150 }}
             out:fly={{ y: -10, duration: 150 }}
+            bind:this={dropdownElement}
         >
             {#each items as item}
                 <li
diff --git a/web/src/lib/components/profile/activity_card.svelte b/web/src/lib/components/profile/activity_card.svelte
index 08e115bc..be178b35 100644
--- a/web/src/lib/components/profile/activity_card.svelte
+++ b/web/src/lib/components/profile/activity_card.svelte
@@ -76,7 +76,7 @@
                 ? 'grid-cols-[8fr_5fr]'
                 : 'grid-cols-1'}"
         >
-            {#each activity.photos as photo, i}
+            {#each activity.photos.slice(0,3) as photo, i}
                 {#if isVideoURL(photo)}
                     <!-- svelte-ignore a11y_media_has_caption -->
                     <video
diff --git a/web/src/lib/components/trail/trail_dropdown.svelte b/web/src/lib/components/trail/trail_dropdown.svelte
index 3d4b3e05..a78ddf4d 100644
--- a/web/src/lib/components/trail/trail_dropdown.svelte
+++ b/web/src/lib/components/trail/trail_dropdown.svelte
@@ -209,7 +209,7 @@
     >{#snippet children({ toggleMenu: openDropdown })}
         <button
             aria-label="Open dropdown"
-            class="rounded-full bg-white text-black hover:bg-gray-200 focus:ring-4 ring-gray-100/50 transition-colors h-12 w-12"
+            class=" btn-primary !rounded-full h-12 w-12"
             onclick={openDropdown}
         >
             <i class="fa fa-ellipsis-vertical"></i>
diff --git a/web/src/lib/components/trail/trail_info_panel.svelte b/web/src/lib/components/trail/trail_info_panel.svelte
index c31d920a..44ccb764 100644
--- a/web/src/lib/components/trail/trail_info_panel.svelte
+++ b/web/src/lib/components/trail/trail_info_panel.svelte
@@ -150,13 +150,19 @@
         comments.set(newCommentList);
         commentDeleteLoading = false;
     }
-    let thumbnail = $derived(
-        trail.photos.length
-            ? getFileURL(trail, trail.photos[trail.thumbnail ?? 0])
-            : $theme === "light"
-              ? emptyStateTrailLight
-              : emptyStateTrailDark,
-    );
+
+    function getHeaderPhotos() {
+        if (trail.photos.length) {
+            return trail.photos.slice(0, 3).map((p) => getFileURL(trail, p));
+        } else {
+            return $theme === "light"
+                ? [emptyStateTrailLight]
+                : [emptyStateTrailDark];
+        }
+    }
+
+    const headerPhotos = getHeaderPhotos();
+
     $effect(() => {
         if (browser && activeTab == 2) {
             fetchComments();
@@ -172,69 +178,94 @@
     style="max-width: min(100%, 76rem);"
 >
     <div class="trail-info-panel-header">
-        <section class="relative h-80">
-            {#if isVideoURL(thumbnail)}
-                <!-- svelte-ignore a11y_media_has_caption -->
-                <video
-                    class="w-full h-80 object-cover rounded-t-3xl"
-                    autoplay
-                    loop
-                    src={thumbnail}
-                ></video>
-            {:else}
-                <img
-                    class="w-full h-80"
-                    class:rounded-t-3xl={mode !== "list"}
-                    src={thumbnail}
-                    alt=""
-                />
-            {/if}
-
-            <div
-                class="absolute bottom-0 w-full h-full bg-gradient-to-b from-transparent to-black opacity-60"
-            ></div>
-            {#if (trail.public || trailIsShared) && pb.authStore.record}
-                <div
-                    class="flex absolute top-6 right-6 {trail.public &&
-                    trailIsShared
-                        ? 'w-16'
-                        : 'w-8'} h-8 rounded-full items-center justify-center bg-white text-primary"
-                >
-                    {#if trail.public && pb.authStore.record}
-                        <span
-                            class:tooltip={mode != "map"}
-                            class:mr-3={trail.public && trailIsShared}
-                            data-title={$_("public")}
-                        >
-                            <i class="fa fa-globe"></i>
-                        </span>
-                    {/if}
-                    {#if trailIsShared}
-                        <ShareInfo type="trail" subject={trail}></ShareInfo>
-                    {/if}
-                </div>
-            {/if}
-            {#if mode == "map"}
-                <button
-                    aria-label="Back"
-                    class="btn-icon hover:bg-white hover:text-black ring-input-ring text-white absolute top-6 left-6"
-                    onclick={() => history.back()}
-                >
-                    <i class="fa fa-arrow-left"></i>
-                </button>
-            {/if}
-            <div
-                class="flex absolute justify-between items-end w-full bottom-8 left-0 px-8 gap-y-4"
+        <section class="relative">
+            <button
+                aria-label="Back"
+                class="bg-black/40 text-white text-lg rounded-full w-10 h-10 hover:bg-black/50 transition-colors focus:ring-4 focus:ring-primary/70 top-6 left-6 absolute"
+                onclick={() => history.back()}
             >
-                <div class="text-white overflow-hidden">
+                <i class="fa fa-arrow-left"></i>
+            </button>
+            <div
+                class="grid gap-[1px] {headerPhotos.length > 1
+                    ? 'grid-cols-[8fr_5fr]'
+                    : 'grid-cols-1'} h-80 rounded-t-3xl overflow-hidden cursor-pointer"
+            >
+                <PhotoGallery
+                    photos={trail.photos.map((p) => getFileURL(trail, p))}
+                    bind:this={gallery}
+                ></PhotoGallery>
+                {#each headerPhotos as photo, i}
+                    {#if isVideoURL(photo)}
+                        <!-- svelte-ignore a11y_media_has_caption -->
+                        <video
+                            class="object-cover h-full w-full"
+                            onclick={trail.photos.length
+                                ? () => gallery.openGallery(i)
+                                : null}
+                            autoplay
+                            loop
+                            src={photo}
+                        ></video>
+                    {:else}
+                        <!-- svelte-ignore a11y_click_events_have_key_events -->
+                        <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+                        <img
+                            class="object-cover h-full w-full"
+                            onclick={trail.photos.length
+                                ? () => gallery.openGallery(i)
+                                : null}
+                            class:row-span-2={i == 0 && headerPhotos.length > 2}
+                            src={photo}
+                            alt=""
+                        />
+                    {/if}
+                {/each}
+            </div>
+        </section>
+        <section class="border-b border-input-border p-8">
+            <div class="flex justify-between items-center gap-x-4">
+                {#if trail.expand?.tags && trail.expand.tags.length > 0}
+                    <div class="flex flex-wrap gap-2 text-gray-600">
+                        {#each trail.expand.tags as tag}
+                            <Chip text={tag.name}></Chip>
+                        {/each}
+                    </div>
+                {/if}
+                {#if (trail.public || trailIsShared) && pb.authStore.record}
+                    <div
+                        class="flex {trail.public && trailIsShared
+                            ? 'w-16'
+                            : 'w-8'} h-8 rounded-full items-center justify-center"
+                    >
+                        {#if trail.public && pb.authStore.record}
+                            <span
+                                class:tooltip={mode != "map"}
+                                class:mr-3={trail.public && trailIsShared}
+                                data-title={$_("public")}
+                            >
+                                <i class="fa fa-globe"></i>
+                            </span>
+                        {/if}
+                        {#if trailIsShared}
+                            <ShareInfo type="trail" subject={trail}></ShareInfo>
+                        {/if}
+                    </div>
+                {/if}
+            </div>
+            <div class="flex justify-between items-end w-full gap-y-4">
+                <div class=" overflow-hidden">
                     <h4
                         title={trail.name}
-                        class="text-4xl font-bold line-clamp-3"
+                        class="{mode == 'map'
+                            ? 'text-4xl'
+                            : 'text-5xl'} font-bold line-clamp-3 mb-1"
+                        style="line-height: 1.18"
                     >
                         {trail.name}
                     </h4>
                     {#if trail.date}
-                        <h5 class="text-sm">
+                        <h5 class="text-sm text-gray-500">
                             {new Date(trail.date).toLocaleDateString(
                                 undefined,
                                 {
@@ -247,7 +278,7 @@
                         </h5>
                     {/if}
                     {#if trail.expand?.author}
-                        <p class="mt-2 mb-3">
+                        <p class="mt-3 mb-3">
                             {$_("by")}
                             <img
                                 class="rounded-full w-8 aspect-square mx-1 inline"
@@ -269,13 +300,6 @@
                             {/if}
                         </p>
                     {/if}
-                    {#if trail.expand?.tags && trail.expand.tags.length > 0}
-                        <div class="flex flex-wrap gap-2 text-gray-600">
-                            {#each trail.expand.tags as tag}
-                                <Chip text={tag.name}></Chip>
-                            {/each}
-                        </div>
-                    {/if}
                     <div class="flex flex-wrap gap-x-8 gap-y-2 mt-2 mr-8">
                         {#if trail.location}
                             <h3 class="text-lg">
@@ -418,12 +442,6 @@
                                 ? 'sm:grid-cols-2 md:grid-cols-3'
                                 : ''} gap-4"
                         >
-                            <PhotoGallery
-                                photos={trail.photos.map((p) =>
-                                    getFileURL(trail, p),
-                                )}
-                                bind:this={gallery}
-                            ></PhotoGallery>
                             {#each trail.photos ?? [] as photo, i}
                                 <!-- svelte-ignore a11y_click_events_have_key_events -->
                                 <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
diff --git a/web/src/lib/components/trail/trail_timeline.svelte b/web/src/lib/components/trail/trail_timeline.svelte
index c6d4c520..4d5170cd 100644
--- a/web/src/lib/components/trail/trail_timeline.svelte
+++ b/web/src/lib/components/trail/trail_timeline.svelte
@@ -51,7 +51,7 @@
                         ? 'grid-cols-[8fr_5fr]'
                         : 'grid-cols-1'} cursor-pointer"
                 >
-                    {#each wp.photos as photo, j}
+                    {#each wp.photos.slice(0,3) as photo, j}
                         {#if isVideoURL(photo)}
                             <!-- svelte-ignore a11y_media_has_caption -->
                             <video