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

a few more layout optimizations

Browse Source
This commit is contained in:
Yura
2026-02-10 04:13:48 -08:00
parent fc0f04f29c
commit e0d6e5bc32
1 changed files with 29 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/lib/components/player/PlayerDesktop.svelte
View File

@@ -14,21 +14,17 @@
class="h-full flex flex-col border-l bg-background/50 backdrop-blur w-full" class="h-full flex flex-col border-l bg-background/50 backdrop-blur w-full"
> >
{#if player.currentTrack} {#if player.currentTrack}
<div class="p-6 space-y-6 shrink-0"> <div class="p-6 space-y-4 shrink-0">
<!-- Track Info --> <!-- Track Info -->
<div class="space-y-1.5 text-center"> <div class="space-y-1.5 text-center">
<h2 class="text-xl font-bold leading-tight line-clamp-2"> <h2 class="text-xl font-bold leading-tight line-clamp-2">
{player.currentTrack.title} {player.currentTrack.title}
</h2> </h2>
<p <p class="text-muted-foreground font-medium text-lg line-clamp-1">
class="text-muted-foreground font-medium text-lg line-clamp-1"
>
{player.currentTrack.artist} {player.currentTrack.artist}
</p> </p>
<p class="text-xs text-muted-foreground/80"> <p class="text-xs text-muted-foreground/80">
{player.currentTrack.album || {player.currentTrack.album || player.currentTrack.animeName || ""}
player.currentTrack.animeName ||
""}
</p> </p>
</div> </div>
@@ -49,12 +45,10 @@
</div> </div>
<!-- Controls --> <!-- Controls -->
<div class="flex justify-center"> <div class="flex justify-center gap-4 divide-x divide-accent">
<Controls /> <Controls />
</div>
<!-- Volume --> <!-- Volume -->
<div class="flex items-center gap-3 px-4"> <div class="flex items-center gap-3">
<button <button
onclick={() => player.toggleMute()} onclick={() => player.toggleMute()}
class="text-muted-foreground hover:text-foreground transition-colors" class="text-muted-foreground hover:text-foreground transition-colors"
@@ -77,16 +71,15 @@
/> />
</div> </div>
</div> </div>
</div>
<!-- Divider --> <!-- Divider -->
<div class="h-px bg-border mx-6"></div> <div class="h-px bg-border mx-6"></div>
<!-- Queue (Scrollable) --> <!-- Queue (Scrollable) -->
<div class="flex-1 min-h-0 overflow-hidden relative p-4"> <div class="flex-1 overflow-hidden relative p-4">
<div class="absolute inset-0 p-4 pt-0"> <div class="absolute inset-0 p-4 pt-0">
<div <div class="h-full overflow-hidden rounded-lg border bg-muted/20">
class="h-full overflow-hidden rounded-lg border bg-muted/20"
>
<Queue /> <Queue />
</div> </div>
</div> </div>