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

style(frontend): even out page-bottom spacing and header sizing

Browse Source 
Home and explore had an oversized trailing bottom padding compared to
the rest of the app; brought both down to match. Also matches "Mis
listas" grid/limit on home to "Novedades", and sizes the library page
header the same as the playlists page header.
This commit is contained in:
Admin
2026-07-15 16:10:11 +02:00
parent d1cba7b846
commit 02e093d254
4 changed files with 11 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/routes/(app)/explore/+page.svelte
+1 -1
View File
@@ -53,7 +53,7 @@
<meta name="description" content="Explora y busca canciones en Musify." /> <meta name="description" content="Explora y busca canciones en Musify." />
</svelte:head> </svelte:head>
<section class="px-8 py-12"> <section class="px-8 pt-12 pb-8">
<h1 class="font-display text-3xl font-bold tracking-tight sm:text-4xl">Explorar</h1> <h1 class="font-display text-3xl font-bold tracking-tight sm:text-4xl">Explorar</h1>
<p class="mt-2 text-neutral-400">Descubre canciones o busca por nombre.</p> <p class="mt-2 text-neutral-400">Descubre canciones o busca por nombre.</p>
frontend/src/routes/(app)/library/+page.svelte
+2 -2
View File
@@ -33,8 +33,8 @@
<section class="px-8 py-11"> <section class="px-8 py-11">
<div class="flex items-end justify-between gap-4"> <div class="flex items-end justify-between gap-4">
<div> <div>
<h1 class="font-display text-[28px] font-extrabold tracking-tight">Tus canciones subidas</h1> <h1 class="font-display text-3xl font-bold tracking-tight sm:text-4xl">Tus canciones subidas</h1>
<p class="mt-1.5 text-sm text-[var(--mf-text-2)]"> <p class="mt-2 text-[var(--mf-text-2)]">
{total} {total}
{total === 1 ? 'canción' : 'canciones'} subida{total === 1 ? '' : 's'}. {total === 1 ? 'canción' : 'canciones'} subida{total === 1 ? '' : 's'}.
</p> </p>
frontend/src/routes/+page.server.ts
+1 -1
View File
@@ -9,7 +9,7 @@ export const load: PageServerLoad = async ({ locals, fetch }) => {
}); });
const playlistsPromise = locals.user const playlistsPromise = locals.user
? api.GET('/playlists/users/{userId}', { ? api.GET('/playlists/users/{userId}', {
params: { path: { userId: locals.user.sub }, query: { pageNumber: 1, pageSize: 8 } } params: { path: { userId: locals.user.sub }, query: { pageNumber: 1, pageSize: 12 } }
}) })
: Promise.resolve({ data: undefined }); : Promise.resolve({ data: undefined });
const recentlyPlayedPromise = locals.user const recentlyPlayedPromise = locals.user
frontend/src/routes/+page.svelte
+7 -3
View File
@@ -46,6 +46,9 @@
return /[.!?]$/.test(pick) ? pick : `${pick}.`; return /[.!?]$/.test(pick) ? pick : `${pick}.`;
})(); })();
const listasIsFirstSection = $derived(recentlyPlayed.length === 0 && playlists.length > 0);
const novedadesIsFirstSection = $derived(recentlyPlayed.length === 0 && playlists.length === 0);
function hueFor(id: string) { function hueFor(id: string) {
let hash = 0; let hash = 0;
for (let i = 0; i < id.length; i++) hash = (hash * 31 + id.charCodeAt(i)) >>> 0; for (let i = 0; i < id.length; i++) hash = (hash * 31 + id.charCodeAt(i)) >>> 0;
@@ -114,9 +117,9 @@
{/if} {/if}
{#if playlists.length > 0} {#if playlists.length > 0}
<section class="px-8 pb-3 pt-3"> <section class="px-8 pb-3 {listasIsFirstSection ? 'pt-6' : '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>
<div class="grid grid-cols-[repeat(auto-fill,minmax(150px,1fr))] gap-4"> <div class="grid grid-cols-[repeat(auto-fill,minmax(160px,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}"
@@ -124,6 +127,7 @@
style="animation-delay:{i * 45}ms" style="animation-delay:{i * 45}ms"
> >
<PlaylistArt <PlaylistArt
playlistId={playlist.id}
trackIds={trackIds[playlist.id] ?? []} trackIds={trackIds[playlist.id] ?? []}
hue={hueFor(playlist.id)} hue={hueFor(playlist.id)}
class="aspect-square w-full rounded-xl shadow-[0_12px_28px_-10px_rgba(0,0,0,0.6)] transition group-hover:shadow-[0_16px_36px_-10px_rgba(0,0,0,0.75)]" class="aspect-square w-full rounded-xl shadow-[0_12px_28px_-10px_rgba(0,0,0,0.6)] transition group-hover:shadow-[0_16px_36px_-10px_rgba(0,0,0,0.75)]"
@@ -137,7 +141,7 @@
</section> </section>
{/if} {/if}
<section class="px-8 pb-16 pt-3"> <section class="px-8 pb-8 {novedadesIsFirstSection ? 'pt-6' : '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 grid-cols-[repeat(auto-fill,minmax(160px,1fr))] gap-4"> <div class="grid grid-cols-[repeat(auto-fill,minmax(160px,1fr))] gap-4">