Layout is looking pretty slick now!
This commit is contained in:
Eclypsed
@@ -17,71 +17,73 @@
|
||||
</script>
|
||||
|
||||
{#if song && displayMode === 'horizontal'}
|
||||
<div class="grid w-full grid-cols-3 grid-rows-1 items-center gap-10 overflow-hidden bg-black px-6 text-lg" style="height: 80px;" transition:slide={{ axis: 'y' }}>
|
||||
<section class="flex h-full w-full items-center justify-start gap-4 py-2.5 text-sm">
|
||||
<img class="h-full rounded-lg object-contain" src={song.image} alt="{song.name} thumbnail" />
|
||||
<div class="flex h-full flex-col justify-center gap-1 overflow-hidden">
|
||||
<span class="overflow-hidden text-ellipsis" title={song.name}>{song.name}</span>
|
||||
<span class="overflow-hidden text-ellipsis text-neutral-400" style="font-size: 0; line-height: 0;">
|
||||
{#each song.artists as artist}
|
||||
{@const listIndex = song.artists.indexOf(artist)}
|
||||
<a class="text-xs hover:underline" href="/artist?id={artist.id}&service={song.connectionId}">{artist.name}</a>
|
||||
{#if listIndex === song.artists.length - 2}
|
||||
<span class="mx-0.5 text-xs">&</span>
|
||||
{:else if listIndex < song.artists.length - 2}
|
||||
<span class="mr-0.5 text-xs">,</span>
|
||||
{/if}
|
||||
{/each}
|
||||
</span>
|
||||
</div>
|
||||
<button class="grid aspect-square h-6 place-items-center text-lg transition-all" on:click={() => (songLiked = !songLiked)}>
|
||||
{#if songLiked}
|
||||
<i class="fa-solid fa-heart text-fuchsia-400" />
|
||||
{:else}
|
||||
<i class="fa-regular fa-heart text-neutral-400 hover:text-white" />
|
||||
{/if}
|
||||
</button>
|
||||
</section>
|
||||
<section class="flex h-full w-full flex-col justify-center gap-1 justify-self-center">
|
||||
<div class="flex h-6 items-center justify-center gap-4">
|
||||
<div class="w-full p-4">
|
||||
<div class="grid w-full grid-cols-3 grid-rows-1 items-center gap-10 overflow-hidden rounded-xl bg-neutral-950 px-6 text-lg" style="height: 80px;" transition:slide={{ axis: 'y' }}>
|
||||
<section class="flex h-full w-full items-center justify-start gap-4 py-2.5 text-sm">
|
||||
<img class="h-full rounded-lg object-contain" src={song.image} alt="{song.name} thumbnail" />
|
||||
<div class="flex h-full flex-col justify-center gap-1 overflow-hidden">
|
||||
<span class="overflow-hidden text-ellipsis" title={song.name}>{song.name}</span>
|
||||
<span class="overflow-hidden text-ellipsis text-neutral-400" style="font-size: 0; line-height: 0;">
|
||||
{#each song.artists as artist}
|
||||
{@const listIndex = song.artists.indexOf(artist)}
|
||||
<a class="text-xs hover:underline" href="/artist?id={artist.id}&service={song.connectionId}">{artist.name}</a>
|
||||
{#if listIndex === song.artists.length - 2}
|
||||
<span class="mx-0.5 text-xs">&</span>
|
||||
{:else if listIndex < song.artists.length - 2}
|
||||
<span class="mr-0.5 text-xs">,</span>
|
||||
{/if}
|
||||
{/each}
|
||||
</span>
|
||||
</div>
|
||||
<button class="grid aspect-square h-6 place-items-center text-lg transition-all" on:click={() => (songLiked = !songLiked)}>
|
||||
{#if songLiked}
|
||||
<i class="fa-solid fa-heart text-fuchsia-400" />
|
||||
{:else}
|
||||
<i class="fa-regular fa-heart text-neutral-400 hover:text-white" />
|
||||
{/if}
|
||||
</button>
|
||||
</section>
|
||||
<section class="flex h-full w-full flex-col justify-center gap-1 justify-self-center">
|
||||
<div class="flex h-6 items-center justify-center gap-4">
|
||||
<IconButton halo={false}>
|
||||
<i slot="icon" class="fa-solid fa-backward-step" />
|
||||
</IconButton>
|
||||
<IconButton halo={false} on:click={() => (songPlaying = !songPlaying)}>
|
||||
<i slot="icon" class="fa-solid {songPlaying ? 'fa-pause' : 'fa-play'}" />
|
||||
</IconButton>
|
||||
<IconButton halo={false} on:click={() => ($currentlyPlaying = null)}>
|
||||
<i slot="icon" class="fa-solid fa-stop" />
|
||||
</IconButton>
|
||||
<IconButton halo={false}>
|
||||
<i slot="icon" class="fa-solid fa-forward-step" />
|
||||
</IconButton>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-sm text-neutral-400">
|
||||
<div class="whitespace-nowrap">0:00</div>
|
||||
<Slider />
|
||||
<div class="whitespace-nowrap">{formatDuration(song.duration)}</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="flex h-full items-center justify-end gap-1 py-5">
|
||||
<VolumeSlider bind:volume />
|
||||
<IconButton halo={false}>
|
||||
<i slot="icon" class="fa-solid fa-backward-step" />
|
||||
</IconButton>
|
||||
<IconButton halo={false} on:click={() => (songPlaying = !songPlaying)}>
|
||||
<i slot="icon" class="fa-solid {songPlaying ? 'fa-pause' : 'fa-play'}" />
|
||||
</IconButton>
|
||||
<IconButton halo={false} on:click={() => ($currentlyPlaying = null)}>
|
||||
<i slot="icon" class="fa-solid fa-stop" />
|
||||
<i slot="icon" class="fa-solid fa-shuffle" />
|
||||
</IconButton>
|
||||
<IconButton halo={false}>
|
||||
<i slot="icon" class="fa-solid fa-forward-step" />
|
||||
<i slot="icon" class="fa-solid fa-repeat" />
|
||||
</IconButton>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-sm text-neutral-400">
|
||||
<div class="whitespace-nowrap">0:00</div>
|
||||
<Slider />
|
||||
<div class="whitespace-nowrap">{formatDuration(song.duration)}</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="flex h-full items-center justify-end gap-1 py-5">
|
||||
<VolumeSlider bind:volume />
|
||||
<IconButton halo={false}>
|
||||
<i slot="icon" class="fa-solid fa-shuffle" />
|
||||
</IconButton>
|
||||
<IconButton halo={false}>
|
||||
<i slot="icon" class="fa-solid fa-repeat" />
|
||||
</IconButton>
|
||||
<IconButton halo={false}>
|
||||
<i slot="icon" class="fa-solid fa-ellipsis-vertical" />
|
||||
</IconButton>
|
||||
<IconButton halo={false} on:click={() => (fullplayerOpen = !fullplayerOpen)}>
|
||||
<i slot="icon" class="fa-solid {fullplayerOpen ? 'fa-caret-down' : 'fa-caret-up'}" />
|
||||
</IconButton>
|
||||
</section>
|
||||
<IconButton halo={false}>
|
||||
<i slot="icon" class="fa-solid fa-ellipsis-vertical" />
|
||||
</IconButton>
|
||||
<IconButton halo={false} on:click={() => (fullplayerOpen = !fullplayerOpen)}>
|
||||
<i slot="icon" class="fa-solid {fullplayerOpen ? 'fa-caret-down' : 'fa-caret-up'}" />
|
||||
</IconButton>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
{:else if song && displayMode === 'vertical'}
|
||||
<div class="w-full p-2" style="height: 80px;" transition:slide={{ axis: 'y' }}>
|
||||
<div class="flex h-full justify-between rounded-xl bg-slate-900 p-2.5">
|
||||
<div class="flex h-full justify-between rounded-xl bg-neutral-950 p-2.5">
|
||||
<section class="flex gap-4">
|
||||
<img class="h-full rounded-xl object-contain" src={song.image} alt="{song.name} thumbnail" />
|
||||
<div class="flex h-full flex-col justify-center gap-1 overflow-hidden text-lg">
|
||||
|
||||
@@ -24,7 +24,7 @@
|
||||
<search
|
||||
role="search"
|
||||
bind:this={searchBar}
|
||||
class="relative flex h-full w-full max-w-xl items-center gap-2.5 justify-self-center rounded-full border-2 border-transparent px-4 py-1.5"
|
||||
class="relative flex h-full w-full items-center gap-2.5 justify-self-center rounded-full border-2 border-transparent bg-black px-4 py-2"
|
||||
on:focusout={() => {
|
||||
setTimeout(() => {
|
||||
// This is a completely stupid thing you have to do, if there is not timeout, the active element will be the body of the document and not the newly focused element
|
||||
@@ -68,9 +68,3 @@
|
||||
</div>
|
||||
{/if}
|
||||
</search>
|
||||
|
||||
<style>
|
||||
search {
|
||||
background-color: rgba(100, 100, 100, 0.25);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
<script>
|
||||
import Navbar from '$lib/components/utility/navbar.svelte'
|
||||
import MiniPlayer from '$lib/components/media/miniPlayer.svelte'
|
||||
import { fly, fade } from 'svelte/transition'
|
||||
import { goto } from '$app/navigation'
|
||||
@@ -12,17 +11,13 @@
|
||||
header: 'Home',
|
||||
icon: 'fa-solid fa-house',
|
||||
},
|
||||
'/artist': {
|
||||
header: 'Artists',
|
||||
icon: 'fa-solid fa-guitar',
|
||||
},
|
||||
'/playlist': {
|
||||
header: 'Playlists',
|
||||
icon: 'fa-solid fa-bars-staggered',
|
||||
},
|
||||
'/library': {
|
||||
header: 'Libray',
|
||||
icon: 'fa-solid fa-book-open',
|
||||
icon: 'fa-solid fa-bars-staggered',
|
||||
},
|
||||
'/search': {
|
||||
header: 'Search',
|
||||
icon: 'fa-solid fa-search',
|
||||
},
|
||||
}
|
||||
|
||||
@@ -49,66 +44,94 @@
|
||||
|
||||
const calculateBar = (activeTab) => {
|
||||
if (activeTab && indicatorBar && tabList) {
|
||||
const listRect = tabList.getBoundingClientRect()
|
||||
const tabRec = activeTab.getBoundingClientRect()
|
||||
indicatorBar.style.top = `${listRect.height}px`
|
||||
if (direction === 1) {
|
||||
indicatorBar.style.right = `${listRect.right - tabRec.right}px`
|
||||
setTimeout(() => (indicatorBar.style.left = `${tabRec.left - listRect.left}px`), pageTransitionTime)
|
||||
if ($pageWidth >= 768) {
|
||||
const listRect = tabList.getBoundingClientRect()
|
||||
const tabRec = activeTab.getBoundingClientRect()
|
||||
if (direction === 1) {
|
||||
indicatorBar.style.bottom = `${listRect.bottom - tabRec.bottom}px`
|
||||
setTimeout(() => (indicatorBar.style.top = `${tabRec.top - listRect.top}px`), pageTransitionTime)
|
||||
} else {
|
||||
indicatorBar.style.top = `${tabRec.top - listRect.top}px`
|
||||
setTimeout(() => (indicatorBar.style.bottom = `${listRect.bottom - tabRec.bottom}px`), pageTransitionTime)
|
||||
}
|
||||
} else {
|
||||
indicatorBar.style.left = `${tabRec.left - listRect.left}px`
|
||||
setTimeout(() => (indicatorBar.style.right = `${listRect.right - tabRec.right}px`), pageTransitionTime)
|
||||
const listRect = tabList.getBoundingClientRect()
|
||||
const tabRec = activeTab.getBoundingClientRect()
|
||||
if (direction === 1) {
|
||||
indicatorBar.style.right = `${listRect.right - tabRec.right}px`
|
||||
setTimeout(() => (indicatorBar.style.left = `${tabRec.left - listRect.left}px`), pageTransitionTime)
|
||||
} else {
|
||||
indicatorBar.style.left = `${tabRec.left - listRect.left}px`
|
||||
setTimeout(() => (indicatorBar.style.right = `${listRect.right - tabRec.right}px`), pageTransitionTime)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div id="main-grid" class="h-full">
|
||||
<Navbar />
|
||||
<section id="content-grid" class="overflow-hidden">
|
||||
<section id="sidebar">
|
||||
{#if $pageWidth >= 768}
|
||||
<div class="mr-4 flex h-full flex-col gap-8 rounded-lg px-3 py-6">
|
||||
{#each Object.entries(contentTabs) as [page, tabData]}
|
||||
<button
|
||||
class="{data.url === page ? 'pointer-events-none text-white' : 'text-neutral-400 hover:text-lazuli-primary'} aspect-square w-14 transition-colors"
|
||||
disabled={data.url === page}
|
||||
on:click={() => goto(page)}
|
||||
>
|
||||
<i class="{tabData.icon} text-xl" />
|
||||
<span class="text-xs">{tabData.header}</span>
|
||||
</button>
|
||||
{/each}
|
||||
<!-- {#if data.url in contentTabs}
|
||||
<div bind:this={indicatorBar} transition:fade class="absolute h-0.5 bg-lazuli-primary transition-all duration-300 ease-in-out" />
|
||||
{/if} -->
|
||||
</div>
|
||||
{#if $pageWidth >= 768}
|
||||
<div id="content-grid" class="h-full overflow-hidden">
|
||||
<section class="relative mr-4 flex h-full flex-col gap-6 rounded-lg px-3 py-6" bind:this={tabList}>
|
||||
{#each Object.entries(contentTabs) as [page, tabData]}
|
||||
{#if data.url === page}
|
||||
<button bind:this={activeTab} class="pointer-events-none aspect-square w-14 text-white transition-colors" disabled="true">
|
||||
<i class="{tabData.icon} text-xl" />
|
||||
<span class="text-xs">{tabData.header}</span>
|
||||
</button>
|
||||
{:else}
|
||||
<button class="aspect-square w-14 text-neutral-400 transition-colors hover:text-lazuli-primary" on:click={() => goto(page)}>
|
||||
<i class="{tabData.icon} text-xl" />
|
||||
<span class="text-xs">{tabData.header}</span>
|
||||
</button>
|
||||
{/if}
|
||||
{/each}
|
||||
{#if data.url in contentTabs}
|
||||
<div bind:this={indicatorBar} transition:fade class="absolute left-0 w-[0.2rem] rounded-full bg-white transition-all duration-300 ease-in-out" />
|
||||
{/if}
|
||||
</section>
|
||||
<section class="no-scrollbar relative overflow-y-scroll">
|
||||
{#key previousPage}
|
||||
<div in:fly={{ y: -50 * direction, duration: pageTransitionTime, delay: pageTransitionTime }} out:fly={{ y: 50 * direction, duration: pageTransitionTime }} class="absolute w-full pr-[5vw] pt-16">
|
||||
<slot />
|
||||
</div>
|
||||
{/key}
|
||||
</section>
|
||||
<footer class="fixed bottom-0 flex w-full flex-col items-center justify-center">
|
||||
<MiniPlayer displayMode={'horizontal'} />
|
||||
</footer>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="h-full overflow-hidden">
|
||||
{#key previousPage}
|
||||
<section
|
||||
id="page"
|
||||
in:fly={{ x: 200 * direction, duration: pageTransitionTime, delay: pageTransitionTime }}
|
||||
out:fly={{ x: -200 * direction, duration: pageTransitionTime }}
|
||||
class="no-scrollbar h-full overflow-y-scroll px-[5vw] pt-4 md:pl-[0rem]"
|
||||
class="no-scrollbar h-full overflow-y-scroll px-[5vw] pt-16"
|
||||
>
|
||||
<slot />
|
||||
</section>
|
||||
{/key}
|
||||
</section>
|
||||
<footer class="fixed bottom-0 flex w-full flex-col items-center justify-center">
|
||||
<MiniPlayer displayMode={$pageWidth > 768 ? 'horizontal' : 'vertical'} />
|
||||
{#if $pageWidth < 768}
|
||||
<h1 id="tabList" class="relative flex w-full items-center justify-around bg-black">
|
||||
<footer class="fixed bottom-0 flex w-full flex-col items-center justify-center">
|
||||
<MiniPlayer displayMode={'vertical'} />
|
||||
<div bind:this={tabList} id="bottom-tab-list" class="relative flex w-full items-center justify-around bg-black">
|
||||
{#each Object.entries(contentTabs) as [page, tabData]}
|
||||
<button class="{data.url === page ? 'pointer-events-none text-white' : 'text-neutral-400 hover:text-lazuli-primary'} transition-colors" disabled={data.url === page} on:click={() => goto(page)}>
|
||||
<i class={tabData.icon} />
|
||||
</button>
|
||||
{#if data.url === page}
|
||||
<button bind:this={activeTab} class="pointer-events-none text-white transition-colors" disabled="true">
|
||||
<i class={tabData.icon} />
|
||||
</button>
|
||||
{:else}
|
||||
<button class="text-neutral-400 transition-colors hover:text-lazuli-primary" on:click={() => goto(page)}>
|
||||
<i class={tabData.icon} />
|
||||
</button>
|
||||
{/if}
|
||||
{/each}
|
||||
</h1>
|
||||
{/if}
|
||||
</footer>
|
||||
</div>
|
||||
{#if data.url in contentTabs}
|
||||
<div bind:this={indicatorBar} transition:fade class="absolute bottom-0 h-1 rounded-full bg-white transition-all duration-300 ease-in-out" />
|
||||
{/if}
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
#content-grid {
|
||||
@@ -116,12 +139,7 @@
|
||||
grid-template-columns: max-content auto;
|
||||
grid-template-rows: 100%;
|
||||
}
|
||||
#main-grid {
|
||||
display: grid;
|
||||
grid-template-rows: max-content auto;
|
||||
grid-template-columns: 100%;
|
||||
}
|
||||
#tabList {
|
||||
#bottom-tab-list {
|
||||
padding: 16px 0px;
|
||||
font-size: 20px;
|
||||
line-height: 28px;
|
||||
|
||||
1
src/routes/(app)/search/+page.svelte
Normal file
1
src/routes/(app)/search/+page.svelte
Normal file
@@ -0,0 +1 @@
|
||||
<h1>Search Page</h1>
|
||||
Reference in New Issue
Block a user