fix(footer): grid col spans
This commit is contained in:
@@ -98,7 +98,7 @@
|
||||
|
||||
<footer class="border border-x-0 border-t border-border/40 bg-background/95 px-4">
|
||||
<nav class="my-2 grid w-full grid-cols-5 items-center">
|
||||
<div class="col-span-1 flex items-end gap-2">
|
||||
<div class="col-span-2 flex items-end gap-2 self-start">
|
||||
{#if player.currentlyPlaying}
|
||||
<img
|
||||
class="aspect-square w-16 rounded-md shadow-2xl shadow-primary/50"
|
||||
@@ -114,7 +114,7 @@
|
||||
{/if}
|
||||
</div>
|
||||
<form
|
||||
class="col-span-3 flex justify-center gap-1"
|
||||
class="col-span-1 flex justify-center gap-1"
|
||||
method="POST"
|
||||
use:enhance={submitTogglePause}
|
||||
>
|
||||
@@ -132,91 +132,93 @@
|
||||
<SkipForward />
|
||||
</Button>
|
||||
</form>
|
||||
<div class="col-span-1 flex items-center">
|
||||
<Popover.Root>
|
||||
<Popover.Trigger class="mr-8 flex items-center text-sm">
|
||||
{#snippet child({ props })}
|
||||
<Button {...props} variant="ghost" size="sm">
|
||||
<List class="mr-2 size-4" />
|
||||
<span>15</span>
|
||||
</Button>
|
||||
{/snippet}
|
||||
</Popover.Trigger>
|
||||
<Popover.Content class="flex max-h-[max(50vh,300px)] w-64 flex-col overflow-y-hidden">
|
||||
<p class="font-semibold">Next up</p>
|
||||
<div class="col-span-2 flex items-center justify-end">
|
||||
<div class="flex items-center">
|
||||
<Popover.Root>
|
||||
<Popover.Trigger class="mr-8 flex items-center text-sm">
|
||||
{#snippet child({ props })}
|
||||
<Button {...props} variant="ghost" size="sm">
|
||||
<List class="mr-2 size-4" />
|
||||
<span>15</span>
|
||||
</Button>
|
||||
{/snippet}
|
||||
</Popover.Trigger>
|
||||
<Popover.Content class="flex max-h-[max(50vh,300px)] w-64 flex-col overflow-y-hidden">
|
||||
<p class="font-semibold">Next up</p>
|
||||
|
||||
<Separator class="my-1" />
|
||||
<Separator class="my-1" />
|
||||
|
||||
<div class="flex h-full flex-col gap-1 overflow-y-auto pr-3">
|
||||
{#each [] as _song, i}
|
||||
<button
|
||||
class="flex flex-row items-center gap-2 rounded-lg px-3 py-2 transition-all hover:bg-secondary"
|
||||
onclick={() => skipToQueueIndex(i)}
|
||||
>
|
||||
<div class="min-w-8 overflow-hidden rounded-md">
|
||||
<img
|
||||
src="https://i.scdn.co/image/ab67616d0000b2732c0ead8ce0dd1c6e2fca817f"
|
||||
class="aspect-square size-8"
|
||||
alt="Cover"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex flex-col overflow-hidden">
|
||||
<p
|
||||
class="w-full self-start overflow-hidden text-ellipsis text-nowrap text-left text-sm text-foreground/80"
|
||||
>
|
||||
Song name
|
||||
</p>
|
||||
<p
|
||||
class="w-full self-start overflow-hidden text-left text-xs text-muted-foreground"
|
||||
>
|
||||
Song artist
|
||||
</p>
|
||||
</div>
|
||||
</button>
|
||||
{/each}
|
||||
<div class="flex h-full flex-col gap-1 overflow-y-auto pr-3">
|
||||
{#each [] as _song, i}
|
||||
<button
|
||||
class="flex flex-row items-center gap-2 rounded-lg px-3 py-2 transition-all hover:bg-secondary"
|
||||
onclick={() => skipToQueueIndex(i)}
|
||||
>
|
||||
<div class="min-w-8 overflow-hidden rounded-md">
|
||||
<img
|
||||
src="https://i.scdn.co/image/ab67616d0000b2732c0ead8ce0dd1c6e2fca817f"
|
||||
class="aspect-square size-8"
|
||||
alt="Cover"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex flex-col overflow-hidden">
|
||||
<p
|
||||
class="w-full self-start overflow-hidden text-ellipsis text-nowrap text-left text-sm text-foreground/80"
|
||||
>
|
||||
Song name
|
||||
</p>
|
||||
<p
|
||||
class="w-full self-start overflow-hidden text-left text-xs text-muted-foreground"
|
||||
>
|
||||
Song artist
|
||||
</p>
|
||||
</div>
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
</Popover.Content>
|
||||
</Popover.Root>
|
||||
|
||||
<div class="flex grow flex-row items-center gap-4">
|
||||
<div class="min-w-6 text-muted-foreground">
|
||||
{#if player.volume <= 0.0}
|
||||
<VolumeX class="size-full" />
|
||||
{:else if player.volume < 0.5}
|
||||
<Volume1 class="size-full" />
|
||||
{:else}
|
||||
<Volume2 class="size-full" />
|
||||
{/if}
|
||||
</div>
|
||||
<form
|
||||
bind:this={volumeForm}
|
||||
class="volume-form flex-1"
|
||||
method="POST"
|
||||
action="/player?/volume"
|
||||
use:enhance={submitVolumeForm}
|
||||
>
|
||||
<input
|
||||
class="volume-slider min-w-40"
|
||||
type="range"
|
||||
min={0.0}
|
||||
max={1.0}
|
||||
step={0.01}
|
||||
bind:value={player.volume}
|
||||
oninput={() => {
|
||||
volumeForm?.requestSubmit();
|
||||
}}
|
||||
onmousedown={() => {
|
||||
player.adjustingVolume = true;
|
||||
}}
|
||||
onmouseup={() => {
|
||||
player.adjustingVolume = false;
|
||||
}}
|
||||
/>
|
||||
</form>
|
||||
<div class="min-w-10 self-center">
|
||||
<p class="text-sm text-muted-foreground">
|
||||
{Math.round(player.volume * 100.0)}%
|
||||
</p>
|
||||
</div>
|
||||
</Popover.Content>
|
||||
</Popover.Root>
|
||||
|
||||
<div class="flex grow flex-row items-center gap-4">
|
||||
<div class="min-w-6 text-muted-foreground">
|
||||
{#if player.volume <= 0.0}
|
||||
<VolumeX class="size-full" />
|
||||
{:else if player.volume < 0.5}
|
||||
<Volume1 class="size-full" />
|
||||
{:else}
|
||||
<Volume2 class="size-full" />
|
||||
{/if}
|
||||
</div>
|
||||
<form
|
||||
bind:this={volumeForm}
|
||||
class="flex-1"
|
||||
method="POST"
|
||||
action="/player?/volume"
|
||||
use:enhance={submitVolumeForm}
|
||||
>
|
||||
<input
|
||||
class="volume-slider"
|
||||
type="range"
|
||||
min={0.0}
|
||||
max={1.0}
|
||||
step={0.01}
|
||||
bind:value={player.volume}
|
||||
oninput={() => {
|
||||
volumeForm?.requestSubmit();
|
||||
}}
|
||||
onmousedown={() => {
|
||||
player.adjustingVolume = true;
|
||||
}}
|
||||
onmouseup={() => {
|
||||
player.adjustingVolume = false;
|
||||
}}
|
||||
/>
|
||||
</form>
|
||||
<div class="min-w-10 self-center">
|
||||
<p class="text-sm text-muted-foreground">
|
||||
{Math.round(player.volume * 100.0)}%
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -260,11 +262,13 @@
|
||||
opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
|
||||
-webkit-transition: 0.2s; /* 0.2 seconds transition on hover */
|
||||
transition: opacity 0.2s;
|
||||
-webkit-user-drag: none;
|
||||
}
|
||||
|
||||
.volume-slider::-webkit-slider-thumb {
|
||||
@apply size-4 bg-background ring ring-secondary ring-offset-0 ring-offset-transparent transition-colors;
|
||||
|
||||
-webkit-user-drag: none;
|
||||
appearance: none;
|
||||
background-color: hsl(var(--primary));
|
||||
border-radius: 100%;
|
||||
@@ -273,4 +277,8 @@
|
||||
.volume-slider::-webkit-slider-thumb:active {
|
||||
@apply ring-offset-2 ring-offset-background;
|
||||
}
|
||||
|
||||
.volume-form {
|
||||
-webkit-user-drag: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user