CraftAttack/website
4
0
Fork 0
Code Issues 3 Pull Requests Actions Wiki Activity

always show menu tooltips when on mobile
All checks were successful
delpoy / build-and-deploy (push) Successful in 59s
Details

Browse Source
This commit is contained in:
bytedream 2024-12-01 13:19:14 +01:00
parent 5ff950bcc0
commit b823e198ab
1 changed files with 15 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/routes/+layout.svelte
View File

@ -3,6 +3,7 @@
import { env } from '$env/dynamic/public'; import { env } from '$env/dynamic/public';
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
import { page } from '$app/stores'; import { page } from '$app/stores';
import { browser } from '$app/environment';
let navPaths = [ let navPaths = [
{ {
@ -57,8 +58,12 @@
let isTouch = false; let isTouch = false;
let nav: HTMLDivElement; let nav: HTMLDivElement;
$: windowHeight = 0;
</script> </script>
<svelte:window bind:innerHeight={windowHeight} />
<svelte:body <svelte:body
on:touchend={(e) => { on:touchend={(e) => {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@ -123,7 +128,10 @@
<ul class="bg-base-200 rounded"> <ul class="bg-base-200 rounded">
{#each navPaths as navPath, i} {#each navPaths as navPath, i}
<li <li
class="flex justify-center tooltip tooltip-left sm:tooltip-right" class="flex justify-center tooltip"
class:tooltip-left,sm:tooltip-right={windowHeight > 450}
class:tooltip-top={windowHeight <= 450}
class:tooltip-open={isTouch || windowHeight <= 450}
data-tip={navPath.name} data-tip={navPath.name}
> >
<a <a
@ -179,6 +187,12 @@
} }
.main-menu li { .main-menu li {
display: inline-block; display: inline-block;
&::before {
transform-origin: 0;
transform: rotate(-90deg);
margin-bottom: -0.5rem;
}
} }
} }
</style> </style>