From 4ce40e7145664ba887766c03cb50e24700064011 Mon Sep 17 00:00:00 2001
From: Christoph Urlacher <christoph.urlacher@protonmail.com>
Date: Thu, 12 Dec 2024 12:49:49 +0100
Subject: [PATCH] Skeleton: Disable "draggable" on links and images

---
 src/routes/+layout.svelte                 | 44 ++++++++++++++++-------
 src/routes/data/seasondata/+layout.svelte |  5 +--
 2 files changed, 32 insertions(+), 17 deletions(-)

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 3e02d1f..82f9543 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -39,34 +39,48 @@
           tabindex="0"
           class="menu dropdown-content z-[1] mt-4 w-52 rounded-box border bg-base-100 p-2 shadow"
         >
-          <li><a href="/racepicks">Race Picks</a></li>
-          <li><a href="/seasonpicks">Season Picks</a></li>
-          <li><a href="/leaderboard">Leaderboard</a></li>
-          <li><a href="/statistics">Statistics</a></li>
-          <li><a href="/rules">Rules</a></li>
+          <li><a draggable="false" href="/racepicks">Race Picks</a></li>
+          <li><a draggable="false" href="/seasonpicks">Season Picks</a></li>
+          <li><a draggable="false" href="/leaderboard">Leaderboard</a></li>
+          <li><a draggable="false" href="/statistics">Statistics</a></li>
+          <li><a draggable="false" href="/rules">Rules</a></li>
         </ul>
       </div>
 
       <!-- Site logo -->
-      <a href="/" class="btn btn-ghost text-xl">Formula 11</a>
+      <a href="/" draggable="false" class="btn btn-ghost select-none text-xl"
+        >Formula 11</a
+      >
     </div>
 
     <!-- Centered navigation -->
     <div class="navbar-center hidden lg:flex">
       <ul class="menu menu-horizontal px-1">
         <li>
-          <a class="btn btn-ghost btn-sm" href="/racepicks">Race Picks</a>
+          <a draggable="false" class="btn btn-ghost btn-sm" href="/racepicks"
+            >Race Picks</a
+          >
         </li>
         <li>
-          <a class="btn btn-ghost btn-sm" href="/seasonpicks">Season Picks</a>
+          <a draggable="false" class="btn btn-ghost btn-sm" href="/seasonpicks"
+            >Season Picks</a
+          >
         </li>
         <li>
-          <a class="btn btn-ghost btn-sm" href="/leaderboard">Leaderboard</a>
+          <a draggable="false" class="btn btn-ghost btn-sm" href="/leaderboard"
+            >Leaderboard</a
+          >
         </li>
         <li>
-          <a class="btn btn-ghost btn-sm" href="/statistics">Statistics</a>
+          <a draggable="false" class="btn btn-ghost btn-sm" href="/statistics"
+            >Statistics</a
+          >
+        </li>
+        <li>
+          <a draggable="false" class="btn btn-ghost btn-sm" href="/rules"
+            >Rules</a
+          >
         </li>
-        <li><a class="btn btn-ghost btn-sm" href="/rules">Rules</a></li>
       </ul>
     </div>
 
@@ -79,8 +93,10 @@
           tabindex="0"
           class="menu dropdown-content z-[1] mt-4 w-52 rounded-box border bg-base-100 p-2 shadow"
         >
-          <li><a href="/data/seasondata/teams">Season Data</a></li>
-          <li><a href="/data/userdata">User Data</a></li>
+          <li>
+            <a draggable="false" href="/data/seasondata/teams">Season Data</a>
+          </li>
+          <li><a draggable="false" href="/data/userdata">User Data</a></li>
         </ul>
       </div>
 
@@ -122,6 +138,8 @@
                 id="user_avatar_preview"
                 src={data.user.avatar_url}
                 alt="User avatar"
+                class="select-none"
+                draggable="false"
               />
             </div>
           </div>
diff --git a/src/routes/data/seasondata/+layout.svelte b/src/routes/data/seasondata/+layout.svelte
index cd9a6c0..26dc395 100644
--- a/src/routes/data/seasondata/+layout.svelte
+++ b/src/routes/data/seasondata/+layout.svelte
@@ -4,14 +4,12 @@
 
   let { children }: { children: Snippet } = $props();
 
-  // const tab = $state($page.url.pathname.split("/").at(-1));
+  // This has to be a function, so $page access is deferred to route switches
   const get_tab = () => {
     return $page.url.pathname.split("/").at(-1);
   };
 </script>
 
-<!-- TODO: Move this + the tablist into the +layout.svelte and select the correct tab dynamically -->
-<!--       This would also allow it to be animated? Maybe? -->
 <h1>Season Data</h1>
 
 <div role="tablist" class="tabs-boxed tabs">
@@ -31,7 +29,6 @@
     class={get_tab() === "races" ? "tab tab-active" : "tab"}>Races</a
   >
 </div>
-<!-- TODO: End -->
 
 <div>
   {@render children()}