CaZzzer/amqtrain
1
0
Fork 0
Code Issues 13 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

player layout improvements

Browse Source
This commit is contained in:
Yura
2026-02-06 04:47:39 -08:00
parent f4e3c6eb08
commit d0efb3549b
1 changed files with 65 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/lib/components/GlobalPlayer.svelte
View File

@@ -597,9 +597,10 @@
</div> </div>
{#if snap.uiOpen} {#if snap.uiOpen}
<div class="max-h-[65dvh] overflow-y-auto border-t px-3 py-3"> <div class="h-[65dvh] overflow-hidden border-t">
<div class="mx-auto max-w-4xl space-y-3"> <div class="mx-auto flex h-full max-w-4xl flex-col px-3 py-3">
<div class="flex flex-wrap items-center gap-2"> <!-- Controls stay visible while the queue scrolls -->
<div class="flex flex-wrap items-center gap-2 pb-3">
<button <button
class={[ class={[
"inline-flex h-8 w-8 items-center justify-center rounded border transition-colors", "inline-flex h-8 w-8 items-center justify-center rounded border transition-colors",
@@ -683,13 +684,17 @@
</label> </label>
</div> </div>
<!-- Scroll area: only the queue scrolls -->
<div class="min-h-0 flex-1 overflow-y-auto overscroll-contain">
<div class="space-y-1"> <div class="space-y-1">
<div class="text-sm font-semibold">Queue ({snap.queue.length})</div> <div class="text-sm font-semibold">
Queue ({snap.queue.length})
</div>
{#if snap.queue.length === 0} {#if snap.queue.length === 0}
<p class="text-sm text-muted-foreground">Queue is empty.</p> <p class="text-sm text-muted-foreground">Queue is empty.</p>
{:else} {:else}
<ul class="overflow-auto rounded border"> <ul class="rounded border">
{#each queueDisplay as item (item.track.id)} {#each queueDisplay as item (item.track.id)}
<li <li
class="flex items-center gap-2 border-b px-2 py-2 last:border-b-0" class="flex items-center gap-2 border-b px-2 py-2 last:border-b-0"
@@ -747,18 +752,17 @@
</div> </div>
</div> </div>
</div> </div>
</div>
{/if} {/if}
</div> </div>
</Portal> </Portal>
<!-- Desktop UI stays in-flow in the right grid column. Hide on small screens via CSS. --> <!-- Desktop UI stays in-flow in the right grid column. Hide on small screens via CSS. -->
<aside <aside
class="hidden lg:flex sticky top-4 h-[calc(100dvh-2rem)] overflow-hidden bg-background flex-col" class="hidden lg:flex sticky top-12 h-[calc(100dvh-4rem)] overflow-hidden bg-background flex-col"
> >
<div class="flex items-center gap-2 border-b px-3 py-3"> <div class="flex items-center gap-2 border-b px-3 py-3">
<div class="min-w-0 flex-1"> <div class="min-w-0 flex-1">
<div class="truncate text-sm font-semibold">Player</div>
{#if snap.currentTrack} {#if snap.currentTrack}
<div class="flex flex-wrap items-baseline gap-x-2 gap-y-1"> <div class="flex flex-wrap items-baseline gap-x-2 gap-y-1">
{#if typeNumberLabel(snap.currentTrack)} {#if typeNumberLabel(snap.currentTrack)}