Web player general changes #22
@@ -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
|
||||||
|
|||||||
Reference in New Issue
Block a user