fix: UI tweaks
This commit is contained in:
@@ -405,7 +405,6 @@ export function buildSectionsFrom(sectionsData, container = sectionsContainer) {
|
|||||||
// reconstruyen recorriendo `children` a través de buildSectionsFrom(), el
|
// reconstruyen recorriendo `children` a través de buildSectionsFrom(), el
|
||||||
// mismo mecanismo que restaura un patrón guardado.
|
// mismo mecanismo que restaura un patrón guardado.
|
||||||
const DEFAULT_SECTIONS = [
|
const DEFAULT_SECTIONS = [
|
||||||
{ type: 'image', imageId: null, url: '' },
|
|
||||||
{
|
{
|
||||||
type: 'group',
|
type: 'group',
|
||||||
children: [
|
children: [
|
||||||
|
|||||||
@@ -18,21 +18,12 @@
|
|||||||
<main>
|
<main>
|
||||||
|
|
||||||
{% trans '¿Seguro que quieres eliminar este patrón? No podrás deshacerlo.' as delete_confirm_message %}
|
{% trans '¿Seguro que quieres eliminar este patrón? No podrás deshacerlo.' as delete_confirm_message %}
|
||||||
<header class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 p-4 no-print">
|
<header class="flex flex-col-reverse sm:flex-row sm:items-center sm:justify-end gap-2 p-4 no-print">
|
||||||
<!-- Idioma del contenido del patrón (qué versión de título/texto se
|
<label id="pattern-title" class="flex flex-col gap-1 flex-1 mb-4">
|
||||||
edita), no el de la interfaz: va aparte del resto de acciones,
|
<span class="text-sm">{% trans 'Título del patrón' %}</span>
|
||||||
no dentro de este grupo. -->
|
<input id="page-title-input" type="text" class="input input-bordered" placeholder="{% trans 'Título del patrón...' %}">
|
||||||
<section>
|
</label>
|
||||||
<h4>{% trans 'Idioma del patrón' %}</h4>
|
<div id="patterns-action-buttons" class="flex flex-wrap items-center gap-2">
|
||||||
|
|
||||||
<select id="language-select" class="select select-sm select-bordered">
|
|
||||||
<option value="es" {% if lang == 'es' %}selected{% endif %}>Español</option>
|
|
||||||
<option value="en" {% if lang == 'en' %}selected{% endif %}>English</option>
|
|
||||||
</select>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="flex flex-wrap items-center gap-2">
|
|
||||||
<button id="save-pattern" type="button" class="btn btn-sm btn-outline"
|
<button id="save-pattern" type="button" class="btn btn-sm btn-outline"
|
||||||
data-save-url="{% url 'crochet:pattern_save' pattern.uuid %}"
|
data-save-url="{% url 'crochet:pattern_save' pattern.uuid %}"
|
||||||
data-error-message="{% trans 'No se ha podido guardar. Inténtalo de nuevo.' %}">{% trans 'Guardar' %}</button>
|
data-error-message="{% trans 'No se ha podido guardar. Inténtalo de nuevo.' %}">{% trans 'Guardar' %}</button>
|
||||||
@@ -67,23 +58,10 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="p-4 pt-0">
|
<div class="p-4 pt-0">
|
||||||
|
|
||||||
<!-- Título e imagen de portada, fuera de "Personalización de página"
|
|
||||||
(aparte, no-print igual que el resto de controles del editor):
|
|
||||||
son la identidad del patrón, no un ajuste de estilo, así que se
|
|
||||||
quedan siempre a la vista en vez de detrás de un <details>
|
|
||||||
colapsado. -->
|
|
||||||
<div class="no-print">
|
<div class="no-print">
|
||||||
<label class="flex flex-col gap-1 flex-1 mb-4">
|
|
||||||
<span class="text-sm">{% trans 'Título del patrón' %}</span>
|
|
||||||
<input id="page-title-input" type="text" class="input input-bordered" placeholder="{% trans 'Título del patrón...' %}">
|
|
||||||
</label>
|
|
||||||
<div class="flex flex-col gap-1 mb-4">
|
<div class="flex flex-col gap-1 mb-4">
|
||||||
<span class="text-sm">{% trans 'Imagen de portada' %}</span>
|
<span class="text-sm">{% trans 'Imagen de portada' %}</span>
|
||||||
<!-- <label for="cover-image-input">, no un botón de archivo
|
|
||||||
nativo: al pulsar sobre el propio recuadro (miniatura o
|
|
||||||
marcador de posición) se abre el selector de archivos igual
|
|
||||||
que con el input nativo, sin JS propio para eso. -->
|
|
||||||
<label for="cover-image-input"
|
<label for="cover-image-input"
|
||||||
class="group relative flex w-full max-w-md h-56 items-center justify-center overflow-hidden rounded-box border-2 border-dashed border-base-300 bg-base-200/40 cursor-pointer transition-colors hover:border-primary">
|
class="group relative flex w-full max-w-md h-56 items-center justify-center overflow-hidden rounded-box border-2 border-dashed border-base-300 bg-base-200/40 cursor-pointer transition-colors hover:border-primary">
|
||||||
<img id="cover-image-preview" alt=""
|
<img id="cover-image-preview" alt=""
|
||||||
@@ -101,10 +79,6 @@
|
|||||||
<input id="cover-image-input" type="file" accept="image/*" class="sr-only"
|
<input id="cover-image-input" type="file" accept="image/*" class="sr-only"
|
||||||
data-upload-url="{% url 'crochet:pattern_cover_upload' pattern.uuid %}"
|
data-upload-url="{% url 'crochet:pattern_cover_upload' pattern.uuid %}"
|
||||||
data-error-message="{% trans 'No se ha podido subir la imagen de portada. Inténtalo de nuevo.' %}">
|
data-error-message="{% trans 'No se ha podido subir la imagen de portada. Inténtalo de nuevo.' %}">
|
||||||
<!-- Tamaño "large" (no la miniatura de arriba, pensado solo para
|
|
||||||
ese control): lo lee render.js para pintarla en "Vista
|
|
||||||
previa", debajo del título, igual que hace
|
|
||||||
render_pattern_html() en la vista de solo lectura/PDF. -->
|
|
||||||
<input type="hidden" id="cover-image-large-url"
|
<input type="hidden" id="cover-image-large-url"
|
||||||
value="{% if pattern.cover_image_large %}{{ pattern.cover_image_large.url }}{% endif %}">
|
value="{% if pattern.cover_image_large %}{{ pattern.cover_image_large.url }}{% endif %}">
|
||||||
</div>
|
</div>
|
||||||
@@ -185,6 +159,17 @@
|
|||||||
<div class="flex flex-col lg:flex-row gap-4">
|
<div class="flex flex-col lg:flex-row gap-4">
|
||||||
|
|
||||||
<section id="panel-top" class="w-full lg:w-1/2 border border-base-300 rounded-box p-4 no-print">
|
<section id="panel-top" class="w-full lg:w-1/2 border border-base-300 rounded-box p-4 no-print">
|
||||||
|
<!-- Idioma del CONTENIDO del patrón (qué versión de título/texto
|
||||||
|
se edita), no el de la interfaz: justo encima de "Secciones"
|
||||||
|
porque es lo que determina qué se ve/edita ahí debajo. -->
|
||||||
|
<div class="flex items-center gap-2 mb-4">
|
||||||
|
<label for="language-select" class="text-sm font-medium">{% trans 'Idioma del patrón' %}</label>
|
||||||
|
<select id="language-select" class="select select-sm select-bordered">
|
||||||
|
<option value="es" {% if lang == 'es' %}selected{% endif %}>Español</option>
|
||||||
|
<option value="en" {% if lang == 'en' %}selected{% endif %}>English</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="flex items-center justify-between mb-2">
|
<div class="flex items-center justify-between mb-2">
|
||||||
<h2 class="text-lg font-semibold">{% trans 'Secciones' %}</h2>
|
<h2 class="text-lg font-semibold">{% trans 'Secciones' %}</h2>
|
||||||
<button id="toggle-collapse-all" type="button" class="btn btn-xs btn-outline"
|
<button id="toggle-collapse-all" type="button" class="btn btn-xs btn-outline"
|
||||||
|
|||||||
Reference in New Issue
Block a user