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

The behaviour of css overflow is so fucking stupid

Browse Source
This commit is contained in:
Eclypsed
2024-01-29 01:54:21 -05:00
parent 5bd5b603b0
commit 4ae54aa14c
3 changed files with 83 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
src/routes/(app)/+layout.svelte
View File

@@ -59,46 +59,52 @@
</script>
{#if $pageWidth >= 768}
<div id="content-grid" class="grid h-full grid-rows-1 gap-8 overflow-hidden">
<div id="sidebar" class="relative grid h-full grid-cols-1 gap-6 overflow-clip p-3 pt-12" bind:this={tabList}>
{#each data.tabs.filter((tab) => tab.type === 'nav') as nav, index}
<button
class="navTab grid aspect-square w-14 place-items-center transition-colors"
bind:this={data.tabs[index].button}
disabled={inPathnameHeirarchy(data.url.pathname, nav.pathname)}
on:click={() => {
calculateDirection(nav)
goto(nav.pathname)
}}
>
<span class="pointer-events-none flex flex-col gap-2 text-xs">
<i class="{nav.icon} text-xl" />
{nav.name}
</span>
</button>
{/each}
<section class="no-scrollbar flex flex-col gap-4 overflow-y-scroll px-1">
{#each data.tabs.filter((tab) => tab.type === 'playlist') as playlist}
<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" bind:this={tabList}>
<div class="flex flex-col gap-6">
{#each data.tabs.filter((tab) => tab.type === 'nav') as nav, index}
<button
title={playlist.name}
disabled={new URLSearchParams(data.url.search).get('playlist') === new URLSearchParams(playlist.pathname.split('?')[1]).get('playlist')}
class="playlistTab aspect-square w-full rounded-lg border-white bg-cover bg-center transition-all"
style="background-image: url({playlist.icon});"
class="navTab grid aspect-square w-14 place-items-center transition-colors"
bind:this={data.tabs[index].button}
disabled={inPathnameHeirarchy(data.url.pathname, nav.pathname)}
on:click={() => {
calculateDirection(playlist)
goto(playlist.pathname)
calculateDirection(nav)
goto(nav.pathname)
}}
></button>
>
<span class="pointer-events-none flex flex-col gap-2 text-xs">
<i class="{nav.icon} text-xl" />
{nav.name}
</span>
</button>
{/each}
</section>
<div bind:this={indicatorBar} class="absolute left-0 w-[0.2rem] rounded-full bg-white transition-all duration-300 ease-in-out" />
<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="no-scrollbar flex flex-col gap-6 overflow-y-scroll">
{#each data.tabs.filter((tab) => tab.type === 'playlist') as playlist}
<div class="playlistTab-wrapper flex items-center gap-1">
<button
title={playlist.name}
disabled={new URLSearchParams(data.url.search).get('playlist') === new URLSearchParams(playlist.pathname.split('?')[1]).get('playlist')}
class="playlistTab relative aspect-square w-14 rounded-lg bg-cover bg-center transition-all"
style="background-image: url({playlist.icon});"
on:click={() => {
calculateDirection(playlist)
goto(playlist.pathname)
}}
>
</button>
<span class="translate-x-3 overflow-clip text-ellipsis whitespace-nowrap rounded-md bg-slate-600 px-2 py-1 text-sm">{playlist.name}</span>
</div>
{/each}
</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 pr-[5vw] pt-16"
class="absolute w-full px-[clamp(7rem,_5vw,_24rem)] pt-16"
>
<slot />
</div>
@@ -135,18 +141,15 @@
{/if}
<style>
#content-grid {
grid-template-columns: max-content auto;
}
#sidebar {
grid-template-rows: repeat(4, min-content) auto;
}
.navTab:not(:disabled) {
color: rgb(163 163, 163);
}
.navTab:not(:disabled):hover {
color: var(--lazuli-primary);
}
.playlistTab-wrapper:hover > span {
display: block;
}
.playlistTab:not(:disabled):not(:hover) {
filter: brightness(50%);
}

38
src/routes/(app)/+layout.ts
View File

@@ -8,7 +8,7 @@ export interface Tab {
button?: HTMLButtonElement
}
export const load: LayoutLoad = ({ url }) => {
export const load: LayoutLoad = () => {
const navTabs: Tab[] = [
{
type: 'nav',
@@ -49,6 +49,42 @@ export const load: LayoutLoad = ({ url }) => {
name: 'Fionaredica',
icon: 'https://f4.bcbits.com/img/a2436961975_10.jpg',
},
{
type: 'playlist',
pathname: '/library?playlist=Machinate',
name: 'Machinate',
icon: 'https://f4.bcbits.com/img/a3587136348_10.jpg',
},
{
type: 'playlist',
pathname: '/library?playlist=MAGGOD',
name: 'MAGGOD',
icon: 'https://f4.bcbits.com/img/a3641603617_10.jpg',
},
{
type: 'playlist',
pathname: '/library?playlist=The Requiem',
name: 'The Requiem',
icon: 'https://f4.bcbits.com/img/a2458067285_10.jpg',
},
{
type: 'playlist',
pathname: '/library?playlist=IRREPARABLE HARDCORE IS BACK 2 -Horai Gekka-',
name: 'IRREPARABLE HARDCORE IS BACK 2 -Horai Gekka-',
icon: 'https://f4.bcbits.com/img/a1483629734_10.jpg',
},
{
type: 'playlist',
pathname: '/library?playlist=妄殺オタクティクス',
name: '妄殺オタクティクス',
icon: 'https://f4.bcbits.com/img/a1653481367_10.jpg',
},
{
type: 'playlist',
pathname: '/library?playlist=Collapse',
name: 'Collapse',
icon: 'https://f4.bcbits.com/img/a0524413952_10.jpg',
},
]
return { tabs: navTabs.concat(playlistTabs) }

9
src/routes/(app)/+page.svelte
View File

@@ -1,2 +1,7 @@
<h1>Welcome to SvelteKit</h1>
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
<div id="test-box" class="h-[200vh]"></div>
<style>
#test-box {
background: linear-gradient(to bottom, white, black);
}
</style>