Web player general changes #22

Merged
NotS1mp merged 27 commits from web-player-general-changes into master 2026-09-23 22:37:30 +00:00
Showing only changes of commit 339fcb56ad - Show all commits
+53 -44
View File
@@ -224,53 +224,62 @@
{/if} {/if}
</div> </div>
<div class="grid items-start gap-6 sm:grid-cols-[auto_1fr] sm:gap-8"> <Surface padding="md">
<Field label="Portada"> <div class="grid items-start gap-6 md:grid-cols-[auto_1fr] md:gap-10">
{#key coverResetToken} <Field label="Portada" class="items-center md:items-start">
<ImageDropzone {#key coverResetToken}
name="cover" <ImageDropzone
icon={ImageIcon} name="cover"
gradient icon={ImageIcon}
size="hero" gradient
onselect={() => (hasCover = true)} onselect={() => (hasCover = true)}
/> />
{/key} {/key}
</Field> {#snippet hint()}
<p>{hasCover ? 'Portada lista' : 'Haz clic para elegir'}</p>
{/snippet}
</Field>
<Field label="Título" for="title"> <div class="flex min-w-0 flex-col gap-7">
<Input <Field label="Título" for="title">
id="title" <Input
name="title" id="title"
bind:value={title} name="title"
maxlength={MAX_TITLE} bind:value={title}
placeholder="Nombre de la canción" maxlength={MAX_TITLE}
/> placeholder="Nombre de la canción"
{#snippet hint()} />
<p>Se usa como nombre público de la pista en el catálogo.</p> {#snippet hint()}
<span class="shrink-0 tabular-nums">{title.length}/{MAX_TITLE}</span> <p>Se usa como nombre público de la pista en el catálogo.</p>
{/snippet} <span class="shrink-0 tabular-nums">{title.length}/{MAX_TITLE}</span>
</Field> {/snippet}
</div> </Field>
<Field label="Géneros"> <Field label="Géneros">
<div class="flex flex-wrap gap-2"> <div class="mb-2 flex flex-wrap gap-2">
{#each TRACK_GENRES as genre (genre.value)} {#each TRACK_GENRES as genre (genre.value)}
<Chip <Chip
selected={tags.includes(genre.value)} selected={tags.includes(genre.value)}
disabled={tagBlocked(genre.value)} disabled={tagBlocked(genre.value)}
onclick={() => toggleTag(genre.value)} onclick={() => toggleTag(genre.value)}
> >
{genre.label} {genre.label}
</Chip> </Chip>
{/each} {/each}
</div>
{#each tags as tag (tag)}
<input type="hidden" name="tags" value={tag} />
{/each}
{#snippet hint()}
<p>
Elige al menos uno. Algunos géneros no se pueden combinar, como Metal con Ambient.
</p>
<span class="shrink-0 tabular-nums">{tags.length} elegidos</span>
{/snippet}
</Field>
</div>
</div> </div>
{#each tags as tag (tag)} </Surface>
<input type="hidden" name="tags" value={tag} />
{/each}
{#snippet hint()}
<p>Elige al menos uno. Algunos géneros no se pueden combinar, como Metal con Ambient.</p>
{/snippet}
</Field>
<Checkbox bind:checked={acceptedTerms}> <Checkbox bind:checked={acceptedTerms}>
Acepto los Acepto los