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">
|
<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">
|
<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}
|
{#if player.currentlyPlaying}
|
||||||
<img
|
<img
|
||||||
class="aspect-square w-16 rounded-md shadow-2xl shadow-primary/50"
|
class="aspect-square w-16 rounded-md shadow-2xl shadow-primary/50"
|
||||||
@@ -114,7 +114,7 @@
|
|||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
<form
|
<form
|
||||||
class="col-span-3 flex justify-center gap-1"
|
class="col-span-1 flex justify-center gap-1"
|
||||||
method="POST"
|
method="POST"
|
||||||
use:enhance={submitTogglePause}
|
use:enhance={submitTogglePause}
|
||||||
>
|
>
|
||||||
@@ -132,91 +132,93 @@
|
|||||||
<SkipForward />
|
<SkipForward />
|
||||||
</Button>
|
</Button>
|
||||||
</form>
|
</form>
|
||||||
<div class="col-span-1 flex items-center">
|
<div class="col-span-2 flex items-center justify-end">
|
||||||
<Popover.Root>
|
<div class="flex items-center">
|
||||||
<Popover.Trigger class="mr-8 flex items-center text-sm">
|
<Popover.Root>
|
||||||
{#snippet child({ props })}
|
<Popover.Trigger class="mr-8 flex items-center text-sm">
|
||||||
<Button {...props} variant="ghost" size="sm">
|
{#snippet child({ props })}
|
||||||
<List class="mr-2 size-4" />
|
<Button {...props} variant="ghost" size="sm">
|
||||||
<span>15</span>
|
<List class="mr-2 size-4" />
|
||||||
</Button>
|
<span>15</span>
|
||||||
{/snippet}
|
</Button>
|
||||||
</Popover.Trigger>
|
{/snippet}
|
||||||
<Popover.Content class="flex max-h-[max(50vh,300px)] w-64 flex-col overflow-y-hidden">
|
</Popover.Trigger>
|
||||||
<p class="font-semibold">Next up</p>
|
<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">
|
<div class="flex h-full flex-col gap-1 overflow-y-auto pr-3">
|
||||||
{#each [] as _song, i}
|
{#each [] as _song, i}
|
||||||
<button
|
<button
|
||||||
class="flex flex-row items-center gap-2 rounded-lg px-3 py-2 transition-all hover:bg-secondary"
|
class="flex flex-row items-center gap-2 rounded-lg px-3 py-2 transition-all hover:bg-secondary"
|
||||||
onclick={() => skipToQueueIndex(i)}
|
onclick={() => skipToQueueIndex(i)}
|
||||||
>
|
>
|
||||||
<div class="min-w-8 overflow-hidden rounded-md">
|
<div class="min-w-8 overflow-hidden rounded-md">
|
||||||
<img
|
<img
|
||||||
src="https://i.scdn.co/image/ab67616d0000b2732c0ead8ce0dd1c6e2fca817f"
|
src="https://i.scdn.co/image/ab67616d0000b2732c0ead8ce0dd1c6e2fca817f"
|
||||||
class="aspect-square size-8"
|
class="aspect-square size-8"
|
||||||
alt="Cover"
|
alt="Cover"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-col overflow-hidden">
|
<div class="flex flex-col overflow-hidden">
|
||||||
<p
|
<p
|
||||||
class="w-full self-start overflow-hidden text-ellipsis text-nowrap text-left text-sm text-foreground/80"
|
class="w-full self-start overflow-hidden text-ellipsis text-nowrap text-left text-sm text-foreground/80"
|
||||||
>
|
>
|
||||||
Song name
|
Song name
|
||||||
</p>
|
</p>
|
||||||
<p
|
<p
|
||||||
class="w-full self-start overflow-hidden text-left text-xs text-muted-foreground"
|
class="w-full self-start overflow-hidden text-left text-xs text-muted-foreground"
|
||||||
>
|
>
|
||||||
Song artist
|
Song artist
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</button>
|
</button>
|
||||||
{/each}
|
{/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>
|
</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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -260,11 +262,13 @@
|
|||||||
opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
|
opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
|
||||||
-webkit-transition: 0.2s; /* 0.2 seconds transition on hover */
|
-webkit-transition: 0.2s; /* 0.2 seconds transition on hover */
|
||||||
transition: opacity 0.2s;
|
transition: opacity 0.2s;
|
||||||
|
-webkit-user-drag: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.volume-slider::-webkit-slider-thumb {
|
.volume-slider::-webkit-slider-thumb {
|
||||||
@apply size-4 bg-background ring ring-secondary ring-offset-0 ring-offset-transparent transition-colors;
|
@apply size-4 bg-background ring ring-secondary ring-offset-0 ring-offset-transparent transition-colors;
|
||||||
|
|
||||||
|
-webkit-user-drag: none;
|
||||||
appearance: none;
|
appearance: none;
|
||||||
background-color: hsl(var(--primary));
|
background-color: hsl(var(--primary));
|
||||||
border-radius: 100%;
|
border-radius: 100%;
|
||||||
@@ -273,4 +277,8 @@
|
|||||||
.volume-slider::-webkit-slider-thumb:active {
|
.volume-slider::-webkit-slider-thumb:active {
|
||||||
@apply ring-offset-2 ring-offset-background;
|
@apply ring-offset-2 ring-offset-background;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.volume-form {
|
||||||
|
-webkit-user-drag: none;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user