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

Responsive design

Browse Source
This commit is contained in:
Admin
2026-07-20 16:25:44 +02:00
parent 589864e48f
commit ca24632fac
30 changed files with 346 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web-player/src/routes/(app)/library/+page.svelte
+10 -6
View File
@@ -48,13 +48,17 @@
</PageHeader>
{#if items.length > 0}
<TrackTable columns="32px 1fr 100px 100px 64px 36px" class="mt-8">
<TrackTable
columns="32px 1fr 100px 100px 64px 36px"
columnsMobile="28px 1fr 52px 32px"
class="mt-6 sm:mt-8"
>
{#snippet headers()}
<span class="text-center">#</span>
<span>Título</span>
<span class="text-center">Subida</span>
<span class="text-center">Escuchas</span>
<span class="text-center">Duración</span>
<span class="hidden text-center sm:block">Subida</span>
<span class="hidden text-center sm:block">Escuchas</span>
<span class="hidden text-center sm:block">Duración</span>
<span></span>
{/snippet}
{#each items as track, i (track.id)}
@@ -71,8 +75,8 @@
hue={hueFor(track.id)}
onClick={() => togglePlay(i)}
/>
<TrackMeta>{fmtDate(track.createdAt)}</TrackMeta>
<TrackMeta>{Number(track.listensCount)}</TrackMeta>
<TrackMeta class="hidden sm:block">{fmtDate(track.createdAt)}</TrackMeta>
<TrackMeta class="hidden sm:block">{Number(track.listensCount)}</TrackMeta>
<TrackMeta>{fmtTime(Number(track.duration))}</TrackMeta>
<form
method="POST"
web-player/src/routes/(app)/playlists/[id]/components/PlaylistHeader.svelte
+9 -5
View File
@@ -34,20 +34,24 @@
Volver a tus listas
</a>
<div class="mt-6 flex flex-col gap-6 sm:flex-row sm:items-end">
<div class="mt-5 flex flex-col gap-5 sm:mt-6 sm:flex-row sm:items-end sm:gap-6">
<PlaylistArt
playlistId={id}
{trackIds}
hue={hueFor(id)}
size="large"
version={updatedAt}
class="h-44 w-44 flex-shrink-0 rounded-art-lg shadow-art-lg"
class="h-36 w-36 shrink-0 rounded-art-lg shadow-art-lg sm:h-44 sm:w-44"
/>
<div class="min-w-0 flex-1">
<p class="text-sm tracking-[0.14em] text-fg-3 uppercase">Lista</p>
<h1 class="mt-1.5 text-5xl font-bold tracking-tight text-fg sm:text-7xl">{name}</h1>
<h1
class="mt-1.5 text-3xl font-bold tracking-tight break-words text-fg sm:text-5xl md:text-7xl"
>
{name}
</h1>
{#if description}
<p class="mt-3 max-w-2xl text-fg-2">{description}</p>
<p class="mt-3 max-w-2xl text-sm text-fg-2 sm:text-base">{description}</p>
{/if}
<p class="mt-3 text-sm text-muted">
{trackIds.length}
@@ -56,7 +60,7 @@
</div>
</div>
<div class="mt-7 flex items-center gap-2.5">
<div class="mt-6 flex flex-wrap items-center gap-2.5 sm:mt-7">
<Button size="sm" onclick={onPlayAll} disabled={trackIds.length === 0}>
{#if playing}
<Pause class="h-4 w-4" fill="currentColor" strokeWidth={1.5} />
web-player/src/routes/(app)/playlists/[id]/components/PlaylistTrackTable.svelte
+8 -4
View File
@@ -32,12 +32,16 @@
}
</script>
<TrackTable columns="32px 1fr 140px 64px 36px" class="mt-8">
<TrackTable
columns="32px 1fr 140px 64px 36px"
columnsMobile="28px 1fr 52px 32px"
class="mt-6 sm:mt-8"
>
{#snippet headers()}
<span class="text-center">#</span>
<span>Título</span>
<span class="text-center">Añadida</span>
<span class="text-center">Duración</span>
<span class="hidden text-center sm:block">Añadida</span>
<span class="hidden text-center sm:block">Duración</span>
<span></span>
{/snippet}
{#each tracks as track, i (track.id)}
@@ -67,7 +71,7 @@
{/if}
{/snippet}
</TrackTitleCell>
<TrackMeta>{fmtDate(track.createdAt)}</TrackMeta>
<TrackMeta class="hidden sm:block">{fmtDate(track.createdAt)}</TrackMeta>
<TrackMeta>{fmtTime(Number(track.duration))}</TrackMeta>
<form
method="POST"
web-player/src/routes/(app)/playlists/[id]/components/SuggestionsTable.svelte
+3 -3
View File
@@ -82,12 +82,12 @@
}
</script>
<div class="mt-12">
<div class="mt-10 sm:mt-12">
<SectionHeading title="Sugerencias" />
<TrackTable columns="1fr 64px 36px">
<TrackTable columns="1fr 64px 36px" columnsMobile="1fr 52px 32px">
{#snippet headers()}
<span>Título</span>
<span class="text-center">Duración</span>
<span class="hidden text-center sm:block">Duración</span>
<span></span>
{/snippet}
{#each suggestions as item, i (idFor(item))}
web-player/src/routes/(app)/upload/+page.svelte
+25 -15
View File
@@ -112,7 +112,7 @@
subtitle="Añade una canción con su portada y título. Nosotros la procesamos para streaming."
/>
<ol class="mt-10 grid gap-4 sm:grid-cols-3">
<ol class="mt-8 grid gap-3 sm:mt-10 sm:grid-cols-3 sm:gap-4">
{#each steps as step, i (step.key)}
<li>
<Surface class={stepClass(stepStates[i])}>
@@ -146,9 +146,11 @@
«{publishedTitle}» se está procesando. Aparecerá lista para reproducir en tu biblioteca en
unos momentos.
</p>
<div class="mt-8 flex items-center justify-center gap-4">
<Button href="/library" size="lg">Ir a la biblioteca</Button>
<Button variant="secondary" size="lg" onclick={reset}>Subir otra</Button>
<div class="mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row sm:gap-4">
<Button href="/library" size="lg" class="w-full sm:w-auto">Ir a la biblioteca</Button>
<Button variant="secondary" size="lg" onclick={reset} class="w-full sm:w-auto">
Subir otra
</Button>
</div>
</Surface>
{:else}
@@ -182,7 +184,7 @@
}}
ondragleave={() => (dragging = false)}
ondrop={onDrop}
class="relative flex min-h-72 flex-col items-center justify-center rounded-panel border border-dashed bg-surface p-10 text-center transition {dropClass}"
class="relative flex min-h-56 flex-col items-center justify-center rounded-panel border border-dashed bg-surface p-6 text-center transition sm:min-h-72 sm:p-10 {dropClass}"
>
<input
bind:this={audioInput}
@@ -193,28 +195,32 @@
class="absolute inset-0 cursor-pointer opacity-0"
aria-label="Seleccionar archivo de audio"
/>
<span class="grid h-20 w-20 place-items-center rounded-full bg-accent-soft text-on-accent">
<span
class="grid h-16 w-16 place-items-center rounded-full bg-accent-soft text-on-accent sm:h-20 sm:w-20"
>
{#if audioName === ''}
<Headphones class="h-9 w-9" />
<Headphones class="h-8 w-8 sm:h-9 sm:w-9" />
{:else}
<Music class="h-9 w-9" />
<Music class="h-8 w-8 sm:h-9 sm:w-9" />
{/if}
</span>
{#if audioName === ''}
<p class="mt-5 text-lg font-medium text-fg">
<p class="mt-5 text-base font-medium text-fg sm:text-lg">
Arrastra tu audio aquí o haz clic para elegir
</p>
<p class="mt-2 text-sm text-muted">MP3, FLAC, WAV…</p>
{:else}
<p class="mt-5 max-w-full truncate text-lg font-medium text-fg">{audioName}</p>
<p class="mt-5 max-w-full truncate text-base font-medium text-fg sm:text-lg">
{audioName}
</p>
<p class="mt-2 text-sm text-muted">{formatSize(audioSize)} · Listo para subir</p>
{/if}
</div>
<div class="grid items-start gap-8 sm:grid-cols-[auto_1fr]">
<div class="grid items-start gap-6 sm:grid-cols-[auto_1fr] sm:gap-8">
<Field label="Portada">
<label
class="relative grid h-44 w-44 cursor-pointer place-items-center overflow-hidden rounded-control border border-line bg-surface transition hover:border-accent/50"
class="relative grid h-36 w-36 cursor-pointer place-items-center overflow-hidden rounded-control border border-line bg-surface transition hover:border-accent/50 sm:h-44 sm:w-44"
>
<input
type="file"
@@ -274,9 +280,13 @@
<Alert tone="danger">{errorMsg}</Alert>
{/if}
<div class="flex items-center justify-end gap-4">
<Button href="/explore" variant="secondary" size="lg">Cancelar</Button>
<Button type="submit" size="lg" disabled={!canPublish}>Publicar</Button>
<div class="flex flex-col-reverse gap-3 sm:flex-row sm:items-center sm:justify-end sm:gap-4">
<Button href="/explore" variant="secondary" size="lg" class="w-full sm:w-auto">
Cancelar
</Button>
<Button type="submit" size="lg" disabled={!canPublish} class="w-full sm:w-auto">
Publicar
</Button>
</div>
</form>
{/if}
web-player/src/routes/+layout.svelte
+10 -1
View File
@@ -5,6 +5,8 @@
import favicon from '$lib/assets/favicon.svg';
import PlayerBar from '$lib/components/player/PlayerBar.svelte';
import Sidebar from '$lib/components/Sidebar.svelte';
import MobileHeader from '$lib/components/MobileHeader.svelte';
import MobileNav from '$lib/components/MobileNav.svelte';
import { player } from '$lib/player/player.svelte';
import { ACCENT_LIGHTNESS, ACCENT_CHROMA, ACCENT_HUE } from '$lib/theme/color';
import { page } from '$app/state';
@@ -66,7 +68,13 @@
<div class="flex min-h-screen bg-bg text-fg antialiased">
<Sidebar user={data.user} />
<div class="flex min-w-0 flex-1 flex-col">
<main class="flex-1 transition-[padding] {hasTrack ? 'pb-23' : 'pb-0'}">
<MobileHeader user={data.user} />
<main
class="flex-1 transition-[padding]"
style="padding-bottom:calc(var(--mf-nav-h) + var(--mf-safe-b) + {hasTrack
? 'var(--mf-player-h)'
: '0px'})"
>
{#key page.url.pathname}
<div class="animate-fade">{@render children()}</div>
{/key}
@@ -74,6 +82,7 @@
{#if hasTrack}
<PlayerBar />
{/if}
<MobileNav />
</div>
</div>
{/if}
web-player/src/routes/+page.svelte
+8 -8
View File
@@ -168,23 +168,23 @@
<meta name="description" content="Tu música, sin límites." />
</svelte:head>
<section class="relative overflow-hidden page-x pt-11 pb-16">
<section class="relative overflow-hidden page-x pt-8 pb-10 sm:pt-11 sm:pb-16">
<div
class="pointer-events-none absolute inset-0 blur-[70px] saturate-150"
style="background:linear-gradient(135deg, var(--color-accent), color-mix(in oklch, var(--color-accent), black 55%));animation:breathe 9s ease-in-out infinite"
></div>
<div class="animate-enter relative flex flex-col gap-2.5">
<p class="tracking-[0.14em] text-fg-2 uppercase">{data.greeting}</p>
<h1 class="max-w-160 text-5xl leading-[1.05] font-extrabold text-fg">
<div class="animate-enter relative flex flex-col gap-2 sm:gap-2.5">
<p class="text-sm tracking-[0.14em] text-fg-2 uppercase sm:text-base">{data.greeting}</p>
<h1 class="max-w-160 text-3xl leading-[1.05] font-extrabold text-fg sm:text-5xl">
Tu música. Sin límites.
</h1>
</div>
</section>
{#if recentlyPlayed.length > 0}
<section class="page-x pt-6 pb-3">
<section class="page-x pt-5 pb-3 sm:pt-6">
<SectionHeading title="Escuchado recientemente" />
<MediaGrid min="300px">
<MediaGrid min="300px" minMobile="220px">
{#each recentlyPlayed as track, i (track.id)}
<button
type="button"
@@ -225,7 +225,7 @@
{/if}
{#if playlists.length > 0}
<section class="page-x pt-6 pb-3">
<section class="page-x pt-5 pb-3 sm:pt-6">
<SectionHeading title="Mis listas" />
<MediaGrid>
{#each playlists as playlist, i (playlist.id)}
@@ -242,7 +242,7 @@
</section>
{/if}
<section class="page-x pt-6 pb-10">
<section class="page-x pt-5 pb-10 sm:pt-6">
<SectionHeading title="Novedades" />
{#if latest.length > 0}
<MediaGrid as="ul">
web-player/src/routes/layout.css
+23 -1
View File
@@ -35,7 +35,27 @@
}
@utility page-x {
padding-inline: --spacing(8);
padding-inline: --spacing(4);
@media (width >= 40rem) {
padding-inline: --spacing(8);
}
}
@utility media-grid {
grid-template-columns: repeat(auto-fill, minmax(var(--mf-grid-min-mobile), 1fr));
@media (width >= 40rem) {
grid-template-columns: repeat(auto-fill, minmax(var(--mf-grid-min), 1fr));
}
}
@utility track-grid {
grid-template-columns: var(--mf-track-cols-mobile);
@media (width >= 40rem) {
grid-template-columns: var(--mf-track-cols);
}
}
@utility scrollbar-stable {
@@ -156,6 +176,8 @@ html {
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
background-color: var(--mf-bg);
-webkit-tap-highlight-color: transparent;
overflow-x: hidden;
}
html.home {