409/groove-web
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(footer): grid col spans

Browse Source
This commit is contained in:
Shawn
2024-11-26 00:45:14 +01:00
parent 9fc59cfd61
commit 9fefdf721a
1 changed files with 92 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/lib/components/groove/Footer.svelte
View File

@@ -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,7 +132,8 @@
<SkipForward /> <SkipForward />
</Button> </Button>
</form> </form>
<div class="col-span-1 flex items-center"> <div class="col-span-2 flex items-center justify-end">
<div class="flex items-center">
<Popover.Root> <Popover.Root>
<Popover.Trigger class="mr-8 flex items-center text-sm"> <Popover.Trigger class="mr-8 flex items-center text-sm">
{#snippet child({ props })} {#snippet child({ props })}
@@ -190,13 +191,13 @@
</div> </div>
<form <form
bind:this={volumeForm} bind:this={volumeForm}
class="flex-1" class="volume-form flex-1"
method="POST" method="POST"
action="/player?/volume" action="/player?/volume"
use:enhance={submitVolumeForm} use:enhance={submitVolumeForm}
> >
<input <input
class="volume-slider" class="volume-slider min-w-40"
type="range" type="range"
min={0.0} min={0.0}
max={1.0} max={1.0}
@@ -220,6 +221,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</nav> </nav>
<div class="mb-2 flex flex-row items-center gap-2"> <div class="mb-2 flex flex-row items-center gap-2">
<span class="w-12 text-left text-sm" <span class="w-12 text-left text-sm"
@@ -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>