cosmetic changes

web/src/lib/components/share_info.svelte

@@ -12,7 +12,7 @@
     export let large: boolean = false;
     export let type: "trail" | "list"
 
-    const shareData = type == "trail" ? (subject as Trail).expand.trail_share_via_trail : (subject as List).expand?.list_share_via_list
+    const shareData = type == "trail" ? (subject as Trail).expand?.trail_share_via_trail : (subject as List).expand?.list_share_via_list
 
     let showInfo: boolean = false;
     let loading: boolean = false;

web/src/lib/components/trail/map_with_elevation_maplibre.svelte

@@ -110,6 +110,8 @@
             elevationGridColor: "#ddd2",
             labelColor: "#ddd8",
             crosshairColor: "#fff5",
+            tooltipBackgroundColor: "#242734",
+            tooltipTextColor: "#fff",
         });
     } else {
         epc?.toggleTheme({
@@ -117,6 +119,8 @@
             elevationGridColor: "#0002",
             labelColor: "#0009",
             crosshairColor: "#0005",
+            tooltipBackgroundColor: "#fff",
+            tooltipTextColor: "#000",
         });
     }
 
@@ -185,10 +189,11 @@
         }
 
         refreshElevationProfile();
-        if (showElevation && data.length) {
+        if (showElevation && data.length && activeTrail !== null) {
             epc?.showProfile();
+        } else {
+            epc?.hideProfile();
         }
-
         trails.forEach((t, i) => {
             const layerId = t.id!;
             addTrailLayer(t, layerId, i, data[i]);
@@ -212,8 +217,8 @@
             } else {
                 flyToBounds();
             }
-        } else if(drawing && activeTrail !== null && mapLoaded) {            
+        } else if (drawing && activeTrail !== null && mapLoaded) {
-            addCaretLayer(trails[activeTrail]?.id)
+            addCaretLayer(trails[activeTrail]?.id);
         }
     }
 
@@ -350,7 +355,7 @@
                 highlightTrail(id, trails[activeTrail ?? -1]?.id == id);
             layers[id].listener.onLeave = (e) => unHighlightTrail(id);
             layers[id].listener.onMouseUp = (e) => {
-                activeTrail = trails.findIndex(t => t.id == trail.id);
+                activeTrail = trails.findIndex((t) => t.id == trail.id);
             };
             layers[id].listener.onMouseMove = moveCrosshairToCursorPosition;
             layers[id].listener.onMouseDown = (e) => handDragStart(e, id);
@@ -479,11 +484,6 @@
             activeTrail = null;
             return;
         }
-
-        const currentlyFocussedTrail = trails[activeTrail];
-        if (currentlyFocussedTrail && currentlyFocussedTrail != trail) {
-            unFocusTrail(currentlyFocussedTrail);
-        }
         dispatch("select", trail);
 
         try {
@@ -567,6 +567,10 @@
 
         const startEndPoint = findStartAndEndPoints(geojson);
 
+        if(!startEndPoint.length) {
+            return;
+        }
+
         layers[id].startMarker
             .setLngLat(startEndPoint[0] as M.LngLatLike)
             .addTo(map);
@@ -741,6 +745,8 @@
                 profileLineWidth: 3,
                 displayDistanceGrid: true,
                 tooltipDisplayDPlus: false,
+                tooltipBackgroundColor: $theme == "light" ? "#fff" : "#242734",
+                tooltipTextColor: $theme == "light" ? "#000" : "#fff",
                 zoom: false,
                 container: elevationProfileContainer,
                 onEnter: () => {
@@ -856,11 +862,14 @@
     }
 
     :global(.maplibregl-popup-content) {
-        @apply bg-background rounded-md;
+        @apply bg-background rounded-md shadow-xl pt-5;
     }
 
     :global(.maplibregl-popup-close-button) {
         top: 4px;
         right: 8px;
+        line-height: 0;
+        padding-bottom: 2.5px;
+        @apply bg-menu-item-background-focus w-3 aspect-square rounded-full;
     }
 </style>

web/src/lib/components/trail/trail_info_panel.svelte

@@ -161,7 +161,7 @@
                 alt=""
             />
             <div
-                class="absolute bottom-0 w-full h-2/3 bg-gradient-to-b from-transparent to-black opacity-50"
+                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.model}
                 <div
@@ -172,7 +172,7 @@
                 >
                     {#if trail.public && pb.authStore.model}
                         <span
-                            class="tooltip text-2xl"
+                            class="tooltip"
                             class:mr-3={trail.public && trailIsShared}
                             data-title={$_("public")}
                         >
@@ -180,7 +180,7 @@
                         </span>
                     {/if}
                     {#if trailIsShared}
-                        <ShareInfo type="trail" subject={trail} large={true}
+                        <ShareInfo type="trail" subject={trail}
                         ></ShareInfo>
                     {/if}
                 </div>

web/src/lib/i18n/locales/de.json

@@ -222,6 +222,7 @@
   "removed-trail-from": "Route entfernt aus",
   "required": "Pflichtfeld",
   "reset-password": "Passwort zurücksetzen",
+  "route-point": "",
   "save": "Speichern",
   "save-list": "Liste speichern",
   "save-trail": "Route speichern",

web/src/lib/i18n/locales/en.json

@@ -222,6 +222,7 @@
   "removed-trail-from": "Removed trail from",
   "required": "Required",
   "reset-password": "Reset Password",
+  "route-point": "Route Point",
   "save": "Save",
   "save-list": "Save List",
   "save-trail": "Save Trail",

web/src/lib/i18n/locales/es.json

@@ -222,6 +222,7 @@
   "removed-trail-from": "Ruta borrada de",
   "required": "Obligatorio",
   "reset-password": "Restablecer Contraseña",
+  "route-point": "",
   "save": "Guardar",
   "save-list": "Guardar Lista",
   "save-trail": "Guardar Ruta",

web/src/lib/i18n/locales/fr.json

@@ -222,6 +222,7 @@
   "removed-trail-from": "Enlever l'itinéraire de",
   "required": "Requis",
   "reset-password": "Réinitialiser le mot de passe",
+  "route-point": "",
   "save": "Sauvegarder",
   "save-list": "Sauvegarder la liste",
   "save-trail": "Sauvegarder l'itinéraire",

web/src/lib/i18n/locales/hu.json

@@ -222,6 +222,7 @@
   "removed-trail-from": "Eltávolított nyomvonal a",
   "required": "Kötelező",
   "reset-password": "Reset Password",
+  "route-point": "",
   "save": "Mentés",
   "save-list": "Save List",
   "save-trail": "Útvonal mentése",

web/src/lib/i18n/locales/it.json

@@ -222,6 +222,7 @@
   "removed-trail-from": "Percorso rimosso da",
   "required": "Obbligatorio",
   "reset-password": "Ripristinare Password",
+  "route-point": "",
   "save": "Salva",
   "save-list": "Salta Lista",
   "save-trail": "Salva percorso",

web/src/lib/i18n/locales/nl.json

@@ -222,6 +222,7 @@
   "removed-trail-from": "De wandelroute is verwijderd van",
   "required": "Verplicht",
   "reset-password": "Reset Password",
+  "route-point": "",
   "save": "Bewaren",
   "save-list": "Save List",
   "save-trail": "Wandelroute bewaren",

web/src/lib/i18n/locales/pl.json

@@ -222,6 +222,7 @@
   "removed-trail-from": "Usunięto szlak z",
   "required": "Wymagane",
   "reset-password": "Resetuj hasło",
+  "route-point": "",
   "save": "Zapisz",
   "save-list": "Zapisz listę",
   "save-trail": "Zapisz szlak",

web/src/lib/i18n/locales/pt.json

@@ -222,6 +222,7 @@
   "removed-trail-from": "Trilha removida de",
   "required": "Obrigatório",
   "reset-password": "Reset Password",
+  "route-point": "",
   "save": "Guardar",
   "save-list": "Gravar lista",
   "save-trail": "Guardar trilho",

web/src/lib/i18n/locales/zh.json

@@ -222,6 +222,7 @@
   "removed-trail-from": "路线已删除自",
   "required": "必填",
   "reset-password": "重置密码",
+  "route-point": "",
   "save": "保存",
   "save-list": "保存列表",
   "save-trail": "保存路线",

web/src/lib/util/maplibre_util.ts

@@ -59,7 +59,7 @@ export function createMarkerFromWaypoint(waypoint: Waypoint, onDragEnd?: (marker
     }
 
 
-    const popup = new M.Popup({ offset: 25, closeButton: false }).setDOMContent(
+    const popup = new M.Popup({ offset: 25 }).setDOMContent(
         content
     );
     marker
@@ -86,12 +86,27 @@ export function createAnchorMarker(lat: number, lon: number, index: number,
         }
     );
     marker.setLngLat([lon, lat]);
+    const popup = new M.Popup()
+
+    const popupContent = document.createElement("div");
+    const anchorH = document.createElement("h5")
+    anchorH.classList.add("text-base", "font-medium");
+    anchorH.textContent = get(_)("route-point") +  " #" + index;
 
     const deleteButton = document.createElement("button");
-    deleteButton.className = "fa fa-trash text-red-500 rounded-full aspect-square h-8 text-lg";
+    deleteButton.className = "btn-secondary w-full mt-2 text-sm";
+    const deleteButtonIcon = document.createElement("i")
+    deleteButtonIcon.classList.add("fa", "fa-trash", "mr-2")
+    deleteButton.appendChild(deleteButtonIcon)
+    const deleteButtonText = document.createElement("span")
+    deleteButtonText.textContent = get(_)("delete")
+    deleteButton.appendChild(deleteButtonIcon)
+    deleteButton.appendChild(deleteButtonText)
     deleteButton.addEventListener("click", onDeleteClick)
-    const popup = new M.Popup({ closeButton: false })
+
-    popup.setDOMContent(deleteButton)
+    popupContent.appendChild(anchorH)
+    popupContent.appendChild(deleteButton)
+    popup.setDOMContent(popupContent)
     marker.setPopup(popup);
 
     marker.on("dragstart", onDragStart);
@@ -111,7 +126,7 @@ export function createPopupFromTrail(trail: Trail) {
         : get(theme) === "light"
             ? emptyStateTrailLight
             : emptyStateTrailDark;
-    const popup = new M.Popup({ maxWidth: "320px", closeButton: false });
+    const popup = new M.Popup({ maxWidth: "320px" });
     // Create a container element for the popup content
     const linkElement = document.createElement("a");
     linkElement.href = `/map/trail/${trail.id}`; // Set href safely

web/src/lib/vendor/maplibre-elevation-profile/elevationprofile.ts

@@ -619,7 +619,7 @@ export class ElevationProfile {
                                     tooltipInfo.push(
                                         `After: ${this.cumulatedDistanceAdjustedUnit[
                                             tooltipItem.dataIndex
-                                        ].toFixed(4)} ${distanceUnit} ${this.cumulatedTime.length ? '(' + formatTimeHHMM(this.cumulatedTime[tooltipItem.dataIndex]) + ')' : ''}`
+                                        ].toFixed(2)} ${distanceUnit} ${this.cumulatedTime.length ? '(' + formatTimeHHMM(this.cumulatedTime[tooltipItem.dataIndex]) + ')' : ''}`
                                     );
                                 }
 

web/src/routes/lists/+page.svelte

@@ -138,6 +138,7 @@
 
     function selectTrail(trail: Trail) {
         selectedTrail = trail;
+        mapWithElevation.unHighlightTrail(trail.id!);
         window.scrollTo({ top: 0 });
     }
 

web/src/routes/settings/export/+page.svelte

@@ -80,7 +80,7 @@
             const file = files[i];
             try {
                 uploadProgress.set((progress += 100 / (files.length * 2)));
-                // await trails_upload(file);
+                await trails_upload(file);
             } catch (e) {
                 errorsThrown += 1;
                 show_toast({

web/src/routes/trail/edit/[id]/+page.svelte

@@ -644,7 +644,9 @@
         }
         if (anchorIndex == 0) {
             deleteFromRoute(anchorIndex);
-            updateTrailWithRouteData();
+            if ($formData.expand?.gpx_data) {
+                updateTrailWithRouteData();
+            }
         } else if (anchorIndex == anchors.length) {
             deleteFromRoute(anchorIndex - 1);
             updateTrailWithRouteData();
@@ -694,8 +696,9 @@
             if (previousRouteSegment) {
                 editRoute(anchorIndex - 1, previousRouteSegment);
             }
-
+            if ($formData.expand?.gpx_data) {
-            updateTrailWithRouteData();
+                updateTrailWithRouteData();
+            }
         } catch (e) {
             console.error(e);
             show_toast({
@@ -775,6 +778,7 @@
         $formData.elevation_gain = totals.elevationGain;
         $formData.elevation_loss = totals.elevationLoss;
         $formData.expand!.gpx_data = route.toString();
+
         if (!$formData.id) {
             $formData.id = cryptoRandomString({ length: 15 });
         }