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

Trying out some UI changes. Added resizing support to remoteImage and LazyImage component

Browse Source
This commit is contained in:
Eclypsed
2024-06-10 03:22:12 -04:00
parent cb4cc1d949
commit 9dab826e53
20 changed files with 462 additions and 288 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/(app)/+layout.svelte
+46 -34
View File
@@ -2,47 +2,59 @@
import SearchBar from '$lib/components/util/searchBar.svelte'
import type { LayoutData } from './$types'
import NavTab from '$lib/components/navbar/navTab.svelte'
import PlaylistTab from '$lib/components/navbar/playlistTab.svelte'
import MediaPlayer from '$lib/components/media/mediaPlayer.svelte'
import { goto } from '$app/navigation'
import IconButton from '$lib/components/util/iconButton.svelte'
export let data: LayoutData
const inPathnameHeirarchy = (pathname: string, rootPathname: string): boolean => {
return (pathname.startsWith(rootPathname) && rootPathname !== '/') || (pathname === '/' && rootPathname === '/')
}
let playlistTooltip: HTMLDivElement
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`
}
$: currentPathname = data.url.pathname
</script>
<div class="h-full overflow-hidden">
<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-12">
<div class="flex flex-col gap-4">
{#each data.navTabs as nav}
<NavTab {nav} disabled={inPathnameHeirarchy(data.url.pathname, nav.pathname)} />
{/each}
</div>
<div class="no-scrollbar flex flex-col gap-5 overflow-y-scroll px-1.5">
{#each data.playlistTabs as playlist}
<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 h-full overflow-y-scroll px-[max(7rem,_7vw)]">
<div class="sticky top-0 max-w-xl py-6">
<SearchBar />
<main id="grid-wrapper" class="h-full">
<nav id="navbar" class="items-center">
<strong class="pl-6 text-3xl">
<i class="fa-solid fa-record-vinyl mr-1" />
Lazuli
</strong>
<SearchBar />
<div class="flex h-full justify-end p-4">
<IconButton halo={true} on:click={() => goto('/user')}>
<i slot="icon" class="fa-solid fa-user text-lg" />
</IconButton>
</div>
</nav>
<section id="sidebar" class="pt-4 font-light">
<NavTab label={'Home'} icon={'fa-solid fa-wave-square'} redirect={'/'} disabled={currentPathname === '/'} />
<NavTab label={'Playlists'} icon={'fa-solid fa-bars-staggered'} redirect={'/playlists'} disabled={/^\/playlists.*$/.test(currentPathname)} />
<NavTab label={'Library'} icon={'fa-solid fa-book'} redirect={'/library'} disabled={/^\/library.*$/.test(currentPathname)} />
</section>
<section id="content-wrapper" class="no-scrollbar overflow-x-clip overflow-y-scroll pr-8">
<slot />
</section>
<MediaPlayer />
</div>
</main>
<style>
#grid-wrapper,
#navbar {
display: grid;
column-gap: 1rem;
grid-template-columns: 14rem auto 14rem;
}
#grid-wrapper {
row-gap: 1rem;
grid-template-rows: 4.5rem auto;
}
#navbar {
grid-area: 1 / 1 / 2 / 4;
}
#sidebar {
grid-area: 2 / 1 / 3 / 2;
}
#content-wrapper {
grid-area: 2 / 2 / 3 / 4;
}
</style>