Design Prot Merge #1
@@ -85,27 +85,27 @@
|
|||||||
|
|
||||||
{#if recentlyPlayed.length > 0}
|
{#if recentlyPlayed.length > 0}
|
||||||
<section class="px-8 pb-3 pt-6">
|
<section class="px-8 pb-3 pt-6">
|
||||||
<h2 class="mb-4 font-display text-2xl font-bold">Escuchado recientemente</h2>
|
<h2 class="mb-4 font-display text-xl font-bold">Escuchado recientemente</h2>
|
||||||
<div class="grid grid-cols-[repeat(auto-fill,minmax(300px,1fr))] gap-4">
|
<div class="grid grid-cols-[repeat(auto-fill,minmax(260px,1fr))] gap-3.5">
|
||||||
{#each recentlyPlayed as track, i (track.id)}
|
{#each recentlyPlayed as track, i (track.id)}
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onclick={() => playRecent(i)}
|
onclick={() => playRecent(i)}
|
||||||
class="flex items-center gap-4 rounded-xl bg-[var(--mf-surface)] p-2.5 text-left transition hover:bg-[var(--mf-surface-hover)]"
|
class="flex items-center gap-3.5 rounded-xl bg-[var(--mf-surface)] p-2 text-left transition hover:bg-[var(--mf-surface-hover)]"
|
||||||
>
|
>
|
||||||
<Cover
|
<Cover
|
||||||
trackId={track.id}
|
trackId={track.id}
|
||||||
hue={hueFor(track.id)}
|
hue={hueFor(track.id)}
|
||||||
size="medium"
|
size="small"
|
||||||
alt={track.title}
|
alt={track.title}
|
||||||
class="h-16 w-16 flex-shrink-0 rounded-lg"
|
class="h-14 w-14 flex-shrink-0 rounded-lg"
|
||||||
>
|
>
|
||||||
{#if player.current.id === track.id}
|
{#if player.current.id === track.id}
|
||||||
<NowPlaying paused={!player.playing} />
|
<NowPlaying paused={!player.playing} />
|
||||||
{/if}
|
{/if}
|
||||||
</Cover>
|
</Cover>
|
||||||
<div class="min-w-0">
|
<div class="min-w-0">
|
||||||
<div class="truncate text-base font-semibold text-[var(--mf-text)]">{track.title}</div>
|
<div class="truncate text-sm font-semibold text-[var(--mf-text)]">{track.title}</div>
|
||||||
</div>
|
</div>
|
||||||
</button>
|
</button>
|
||||||
{/each}
|
{/each}
|
||||||
@@ -116,7 +116,7 @@
|
|||||||
<section class="px-8 pb-3 pt-3">
|
<section class="px-8 pb-3 pt-3">
|
||||||
<h2 class="mb-4 font-display text-xl font-bold">Novedades</h2>
|
<h2 class="mb-4 font-display text-xl font-bold">Novedades</h2>
|
||||||
{#if latest.length > 0}
|
{#if latest.length > 0}
|
||||||
<div class="grid max-w-[1400px] grid-cols-[repeat(auto-fill,minmax(160px,1fr))] gap-4">
|
<div class="grid grid-cols-[repeat(auto-fill,minmax(160px,1fr))] gap-4">
|
||||||
{#each latest as track, i (track.id)}
|
{#each latest as track, i (track.id)}
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
@@ -166,7 +166,7 @@
|
|||||||
<section class="px-8 pb-16 pt-3">
|
<section class="px-8 pb-16 pt-3">
|
||||||
<h2 class="mb-4 font-display text-xl font-bold">Mis listas</h2>
|
<h2 class="mb-4 font-display text-xl font-bold">Mis listas</h2>
|
||||||
{#if playlists.length > 0}
|
{#if playlists.length > 0}
|
||||||
<div class="grid max-w-[1400px] grid-cols-[repeat(auto-fill,minmax(150px,1fr))] gap-4">
|
<div class="grid grid-cols-[repeat(auto-fill,minmax(150px,1fr))] gap-4">
|
||||||
{#each playlists as playlist, i (playlist.id)}
|
{#each playlists as playlist, i (playlist.id)}
|
||||||
<a
|
<a
|
||||||
href="/playlists/{playlist.id}"
|
href="/playlists/{playlist.id}"
|
||||||
|
|||||||
Reference in New Issue
Block a user