NotS1mp/Musify
0
0
Fork 0
Code Issues 23 Pull Requests Actions Packages Projects Releases Wiki Activity

fix(frontend): give duration and remove-track their own grid columns

Browse Source
This commit is contained in:
Admin
2026-07-14 14:11:36 +02:00
parent 054160d68b
commit 597fc7387a
1 changed files with 17 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/routes/(app)/playlists/[id]/+page.svelte
+17 -16
View File
@@ -120,17 +120,18 @@
{#if tracks.length > 0} {#if tracks.length > 0}
<div class="mt-8"> <div class="mt-8">
<div <div
class="grid grid-cols-[32px_1fr_140px_100px] items-center gap-4 border-b border-white/10 px-3 pb-2 text-xs font-semibold uppercase tracking-wide text-neutral-500" class="grid grid-cols-[32px_1fr_140px_64px_36px] items-center gap-4 border-b border-white/10 px-3 pb-2 text-xs font-semibold uppercase tracking-wide text-neutral-500"
> >
<span class="text-center">#</span> <span class="text-center">#</span>
<span>Título</span> <span>Título</span>
<span>Añadida</span> <span>Añadida</span>
<span class="flex justify-end pr-1"><Clock class="h-3.5 w-3.5" /></span> <span class="flex justify-end"><Clock class="h-3.5 w-3.5" /></span>
<span></span>
</div> </div>
<div class="mt-1 flex flex-col"> <div class="mt-1 flex flex-col">
{#each tracks as track, i (track.id)} {#each tracks as track, i (track.id)}
<div <div
class="group grid grid-cols-[32px_1fr_140px_100px] items-center gap-4 rounded-[10px] px-3 py-[9px] transition hover:bg-neutral-900/60" class="group grid grid-cols-[32px_1fr_140px_64px_36px] items-center gap-4 rounded-[10px] px-3 py-[9px] transition hover:bg-neutral-900/60"
> >
<button <button
type="button" type="button"
@@ -158,19 +159,19 @@
<div class="truncate text-[12.5px] text-neutral-500"> <div class="truncate text-[12.5px] text-neutral-500">
{dateFormatter.format(new Date(track.createdAt))} {dateFormatter.format(new Date(track.createdAt))}
</div> </div>
<div class="flex items-center justify-end gap-2"> <span class="text-right text-[12.5px] tabular-nums text-neutral-500">
<span class="text-[12.5px] tabular-nums text-neutral-500">{fmtTime(Number(track.duration))}</span> {fmtTime(Number(track.duration))}
<form method="POST" action="?/removeTrack" use:enhance={() => async ({ update }) => update()}> </span>
<input type="hidden" name="trackId" value={track.id} /> <form method="POST" action="?/removeTrack" use:enhance={() => async ({ update }) => update()}>
<button <input type="hidden" name="trackId" value={track.id} />
type="submit" <button
aria-label="Quitar de la playlist" type="submit"
class="grid h-7 w-7 place-items-center rounded-full text-neutral-500 opacity-0 transition hover:bg-white/5 hover:text-white group-hover:opacity-100" aria-label="Quitar de la playlist"
> class="grid h-7 w-7 place-items-center rounded-full text-neutral-500 opacity-0 transition hover:bg-white/5 hover:text-white group-hover:opacity-100"
<X class="h-3.5 w-3.5" /> >
</button> <X class="h-3.5 w-3.5" />
</form> </button>
</div> </form>
</div> </div>
{/each} {/each}
</div> </div>