christoph/svelte-formula11
1
Fork 0
Code Issues 21 Actions Packages Projects 1 Activity

Skeleton: Disable "draggable" on links and images

Browse Source
This commit is contained in:
Christoph Urlacher
2024-12-12 12:49:49 +01:00
parent b69647cd48
commit 4ce40e7145
2 changed files with 32 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/routes/+layout.svelte
View File

@ -39,34 +39,48 @@
tabindex="0" tabindex="0"
class="menu dropdown-content z-[1] mt-4 w-52 rounded-box border bg-base-100 p-2 shadow" 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 draggable="false" href="/racepicks">Race Picks</a></li>
<li><a href="/seasonpicks">Season Picks</a></li> <li><a draggable="false" href="/seasonpicks">Season Picks</a></li>
<li><a href="/leaderboard">Leaderboard</a></li> <li><a draggable="false" href="/leaderboard">Leaderboard</a></li>
<li><a href="/statistics">Statistics</a></li> <li><a draggable="false" href="/statistics">Statistics</a></li>
<li><a href="/rules">Rules</a></li> <li><a draggable="false" href="/rules">Rules</a></li>
</ul> </ul>
</div> </div>
<!-- Site logo --> <!-- 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> </div>
<!-- Centered navigation --> <!-- Centered navigation -->
<div class="navbar-center hidden lg:flex"> <div class="navbar-center hidden lg:flex">
<ul class="menu menu-horizontal px-1"> <ul class="menu menu-horizontal px-1">
<li> <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>
<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>
<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>
<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>
<li><a class="btn btn-ghost btn-sm" href="/rules">Rules</a></li>
</ul> </ul>
</div> </div>
@ -79,8 +93,10 @@
tabindex="0" tabindex="0"
class="menu dropdown-content z-[1] mt-4 w-52 rounded-box border bg-base-100 p-2 shadow" 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>
<li><a href="/data/userdata">User Data</a></li> <a draggable="false" href="/data/seasondata/teams">Season Data</a>
</li>
<li><a draggable="false" href="/data/userdata">User Data</a></li>
</ul> </ul>
</div> </div>
@ -122,6 +138,8 @@
id="user_avatar_preview" id="user_avatar_preview"
src={data.user.avatar_url} src={data.user.avatar_url}
alt="User avatar" alt="User avatar"
class="select-none"
draggable="false"
/> />
</div> </div>
</div> </div>

5
src/routes/data/seasondata/+layout.svelte
View File

@ -4,14 +4,12 @@
let { children }: { children: Snippet } = $props(); 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 = () => { const get_tab = () => {
return $page.url.pathname.split("/").at(-1); return $page.url.pathname.split("/").at(-1);
}; };
</script> </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> <h1>Season Data</h1>
<div role="tablist" class="tabs-boxed tabs"> <div role="tablist" class="tabs-boxed tabs">
@ -31,7 +29,6 @@
class={get_tab() === "races" ? "tab tab-active" : "tab"}>Races</a class={get_tab() === "races" ? "tab tab-active" : "tab"}>Races</a
> >
</div> </div>
<!-- TODO: End -->
<div> <div>
{@render children()} {@render children()}