From 50ffd35307fd9f49def15756bfc64289f8e44e43 Mon Sep 17 00:00:00 2001
From: Christian Beutel <>
Date: Fri, 5 Apr 2024 17:32:24 +0200
Subject: [PATCH] adds globe icon for public trails

---
 .../lib/components/trail/trail_card.svelte    | 19 ++++++++++++++-----
 .../components/trail/trail_list_item.svelte   |  8 +++++++-
 2 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/web/src/lib/components/trail/trail_card.svelte b/web/src/lib/components/trail/trail_card.svelte
index cde5ec3c..6d8c4c04 100644
--- a/web/src/lib/components/trail/trail_card.svelte
+++ b/web/src/lib/components/trail/trail_card.svelte
@@ -16,12 +16,23 @@
 </script>
 
 <div
-    class="trail-card rounded-2xl border border-input-border sm:w-72 cursor-pointer"
+    class="trail-card relative rounded-2xl border border-input-border sm:w-72 cursor-pointer"
     on:mouseenter
     on:mouseleave
     role="listitem"
 >
-    <div class="w-full min-h-40 max-h-48 overflow-hidden rounded-t-2xl">
+    {#if trail.public}
+        <div
+            class=" top-4 right-4 z-10 tooltip"
+            style="position: absolute!important"
+            data-title={$_("public")}
+        >
+            <i class="fa fa-globe"></i>
+        </div>
+    {/if}
+    <div
+        class="relative w-full min-h-40 max-h-48 overflow-hidden rounded-t-2xl"
+    >
         <img src={thumbnail} alt="" />
     </div>
     <div class="p-4">
@@ -29,9 +40,7 @@
             <h4 class="font-semibold text-lg">{trail.name}</h4>
             {#if trail.date}
                 <p class="text-xs text-gray-500 mb-3">
-                   {new Date(
-                        trail.date,
-                    ).toLocaleDateString(undefined, {
+                    {new Date(trail.date).toLocaleDateString(undefined, {
                         month: "long",
                         day: "2-digit",
                         year: "numeric",
diff --git a/web/src/lib/components/trail/trail_list_item.svelte b/web/src/lib/components/trail/trail_list_item.svelte
index 69449955..8f68b579 100644
--- a/web/src/lib/components/trail/trail_list_item.svelte
+++ b/web/src/lib/components/trail/trail_list_item.svelte
@@ -22,7 +22,13 @@
         <img class="h-28 w-28 object-cover rounded-xl" src={thumbnail} alt="" />
     </div>
     <div class="min-w-0 basis-full">
-        <h4 class="font-semibold text-lg">{trail.name}</h4>
+        <h4 class="font-semibold text-lg">
+            {trail.name}{#if trail.public}
+                <span class="tooltip ml-3" data-title={$_("public")}>
+                    <i class="fa fa-globe"></i>
+                </span>
+            {/if}
+        </h4>
         {#if trail.date}
             <p class="text-xs text-gray-500 mb-3">
                 {new Date(trail.date).toLocaleDateString(undefined, {