Eclypsed/Lazuli
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Trashed half my styling, this settings page is going to be a nightmare

Browse Source
This commit is contained in:
Eclypsed
2024-01-30 00:33:19 -05:00
parent b96c3848ad
commit 675e2b2d68
12 changed files with 415 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/(app)/+layout.svelte
+25 -75
View File
@@ -1,89 +1,45 @@
<script lang="ts">
import { fly } from 'svelte/transition'
import { goto, beforeNavigate } from '$app/navigation'
import { pageWidth } from '$lib/stores'
import type { LayoutData } from './$types'
import { onMount } from 'svelte'
import NavTabComponent, { type NavTab } from '$lib/components/navbar/navTab.svelte'
import PlaylistTabComponent, { type PlaylistTab } from '$lib/components/navbar/playlistTab.svelte'
import NavTab from '$lib/components/navbar/navTab.svelte'
import PlaylistTab from '$lib/components/navbar/playlistTab.svelte'
export let data: LayoutData
const pageTransitionTime: number = 200
let currentTabIndex = -1
type PageTransitionDirection = 1 | -1
let directionMultiplier: PageTransitionDirection = 1
let indicatorBar: HTMLDivElement, tabList: HTMLDivElement
const inPathnameHeirarchy = (pathname: string, rootPathname: string): boolean => {
return (pathname.startsWith(rootPathname) && rootPathname !== '/') || (pathname === '/' && rootPathname === '/')
}
let playlistTooltip: HTMLDivElement
// const calculateDirection = (newTab: Tab): void => {
// const newTabIndex = data.tabs.findIndex((tab) => tab === newTab)
// directionMultiplier = newTabIndex > currentTabIndex ? -1 : 1
// currentTabIndex = newTabIndex
// }
// const navigate = (newPathname: string): void => {
// const newTabIndex = data.tabs.findIndex((tab) => inPathnameHeirarchy(newPathname, tab.pathname))
// if (newTabIndex < 0) indicatorBar.style.opacity = '0'
// const newTab = data.tabs[newTabIndex]
// if (!newTab?.button) return
// const tabRec = newTab.button.getBoundingClientRect(),
// listRect = tabList.getBoundingClientRect()
// const shiftTop = () => (indicatorBar.style.top = `${tabRec.top - listRect.top}px`),
// shiftBottom = () => (indicatorBar.style.bottom = `${listRect.bottom - tabRec.bottom}px`)
// if (directionMultiplier > 0) {
// shiftTop()
// setTimeout(shiftBottom, pageTransitionTime)
// } else {
// shiftBottom()
// setTimeout(shiftTop, pageTransitionTime)
// }
// setTimeout(() => (indicatorBar.style.opacity = '100%'), pageTransitionTime + 300)
// }
// onMount(() => setTimeout(() => navigate(data.url.pathname))) // More stupid fucking non-blocking event loop shit
// beforeNavigate(({ to }) => {
// if (to) navigate(to.url.pathname)
// })
const setTooltip = (x: number, y: number, content: string): void => {
const textWrapper = playlistTooltip.firstChild! as HTMLDivElement
textWrapper.innerText = content
playlistTooltip.style.display = 'block'
playlistTooltip.style.left = `${x}px`
playlistTooltip.style.top = `${y}px`
}
</script>
{#if $pageWidth >= 768}
<div class="grid h-full grid-rows-1 gap-8 overflow-hidden">
<div class="no-scrollbar fixed left-0 top-0 z-10 grid h-full grid-cols-1 grid-rows-[min-content_auto] gap-6 p-3 pt-12 w-20" bind:this={tabList}>
<div class="flex flex-col gap-6">
<div class="no-scrollbar fixed left-0 top-0 z-10 grid h-full w-20 grid-cols-1 grid-rows-[min-content_auto] gap-5 px-3 py-16">
<div class="flex flex-col gap-4">
{#each data.navTabs as nav}
<NavTabComponent {nav} disabled={inPathnameHeirarchy(data.url.pathname, nav.pathname)}/>
<NavTab {nav} disabled={inPathnameHeirarchy(data.url.pathname, nav.pathname)} />
{/each}
<!-- <div bind:this={indicatorBar} class="absolute left-0 w-[0.2rem] rounded-full bg-white transition-all duration-300 ease-in-out" /> -->
</div>
<div class="flex flex-col gap-6 px-1">
<div class="no-scrollbar flex flex-col gap-5 overflow-y-scroll px-1.5">
{#each data.playlistTabs as playlist}
<PlaylistTabComponent {playlist} disabled={new URLSearchParams(data.url.search).get('playlist') === playlist.id} />
<PlaylistTab {playlist} on:mouseenter={(event) => setTooltip(event.detail.x, event.detail.y, event.detail.content)} on:mouseleave={() => (playlistTooltip.style.display = 'none')} />
{/each}
</div>
<div bind:this={playlistTooltip} class="absolute hidden max-w-48 -translate-y-1/2 translate-x-10 whitespace-nowrap rounded bg-neutral-800 px-2 py-1.5 text-sm">
<div class="overflow-clip text-ellipsis">PLAYLIST_NAME</div>
<div class="overflow-clip text-ellipsis text-neutral-400">Playlist &bull; {data.user.username}</div>
</div>
</div>
<section class="no-scrollbar relative overflow-y-scroll">
{#key data.url}
<div
in:fly={{ y: -50 * directionMultiplier, duration: pageTransitionTime, delay: pageTransitionTime }}
out:fly={{ y: 50 * directionMultiplier, duration: pageTransitionTime }}
class="absolute w-full px-[clamp(7rem,_5vw,_24rem)] pt-16"
>
<slot />
</div>
{/key}
<section class="no-scrollbar overflow-y-scroll px-[max(7rem,_5vw)] pt-16">
<slot />
</section>
<footer class="fixed bottom-0 flex w-full flex-col items-center justify-center">
<!-- <MiniPlayer displayMode={'horizontal'} /> -->
@@ -91,15 +47,9 @@
</div>
{:else}
<div class="h-full overflow-hidden">
{#key data.url.pathname}
<section
in:fly={{ x: 200 * directionMultiplier, duration: pageTransitionTime, delay: pageTransitionTime }}
out:fly={{ x: -200 * directionMultiplier, duration: pageTransitionTime }}
class="no-scrollbar h-full overflow-y-scroll px-[5vw] pt-16"
>
<slot />
</section>
{/key}
<section class="no-scrollbar h-full overflow-y-scroll px-[5vw] pt-16">
<slot />
</section>
<footer class="fixed bottom-0 flex w-full flex-col items-center justify-center">
<!-- <MiniPlayer displayMode={'vertical'} /> -->
<!-- <NavbarFoot
@@ -113,4 +63,4 @@
/> -->
</footer>
</div>
{/if}
{/if}