feat: improved UI
CI / test (push) Successful in 1m28s
CI / build (push) Successful in 29s

This commit is contained in:
2026-07-22 11:26:57 +02:00
parent 1a1c8786a3
commit 8920047c55
7 changed files with 319 additions and 214 deletions
+94 -75
View File
@@ -2,18 +2,18 @@ msgid ""
msgstr ""
"Project-Id-Version: crochet\n"
"Report-Msgid-Bugs-To: \n"
"POT-Creation-Date: 2026-07-22 08:00+0000\n"
"POT-Creation-Date: 2026-07-22 08:53+0000\n"
"Language: en\n"
"MIME-Version: 1.0\n"
"Content-Type: text/plain; charset=UTF-8\n"
"Content-Transfer-Encoding: 8bit\n"
#: crochet/forms.py:48 crochet/forms.py:96
#: crochet/templates/crochet/account_settings.html:29
#: crochet/templates/crochet/account_settings.html:49
msgid "Email"
msgstr "Email"
#: crochet/forms.py:128 crochet/templates/crochet/account_settings.html:22
#: crochet/forms.py:128 crochet/templates/crochet/account_settings.html:40
msgid "Nombre para mostrar"
msgstr "Display name"
@@ -34,7 +34,7 @@ msgstr ""
"deleted. This action cannot be undone."
#: crochet/templates/crochet/_account_delete_form.html:19
#: crochet/templates/crochet/account_settings.html:48
#: crochet/templates/crochet/account_settings.html:68
msgid "Eliminar cuenta"
msgstr "Delete account"
@@ -59,7 +59,7 @@ msgid "Contraseña actualizada."
msgstr "Password updated."
#: crochet/templates/crochet/_account_password_form.html:19
#: crochet/templates/crochet/account_settings.html:36
#: crochet/templates/crochet/account_settings.html:56
#: crochet/templates/crochet/password_reset_confirm.html:30
msgid "Cambiar contraseña"
msgstr "Change password"
@@ -109,7 +109,7 @@ msgid "Actualizado el %(date)s"
msgstr "Updated on %(date)s"
#: crochet/templates/crochet/account_home.html:44
#: crochet/templates/crochet/pattern.html:163
#: crochet/templates/crochet/pattern.html:182
msgid "Vista previa"
msgstr "Preview"
@@ -128,11 +128,19 @@ msgstr "You don't have any patterns yet."
msgid "Ajustes de la cuenta"
msgstr "Account settings"
#: crochet/templates/crochet/account_settings.html:41
msgid "Volver a mis patrones"
msgstr "Back to my patterns"
#: crochet/templates/crochet/account_settings.html:30
msgid "Perfil"
msgstr "Profile"
#: crochet/templates/crochet/account_settings.html:50
#: crochet/templates/crochet/account_settings.html:31
msgid "Seguridad"
msgstr "Security"
#: crochet/templates/crochet/account_settings.html:32
msgid "Zona de peligro"
msgstr "Danger zone"
#: crochet/templates/crochet/account_settings.html:70
msgid "Esto borrará tu cuenta y todos tus patrones de forma permanente."
msgstr "This will permanently delete your account and all your patterns."
@@ -474,208 +482,216 @@ msgstr "More options"
msgid "Guardado"
msgstr "Saved"
#: crochet/templates/crochet/pattern.html:72
msgid "Personalización de página"
msgstr "Page customization"
#: crochet/templates/crochet/pattern.html:76
#: crochet/templates/crochet/pattern.html:78
msgid "Título del patrón"
msgstr "Pattern title"
#: crochet/templates/crochet/pattern.html:77
#: crochet/templates/crochet/pattern.html:79
msgid "Título del patrón..."
msgstr "Pattern title..."
#: crochet/templates/crochet/pattern.html:80
msgid "Autor"
msgstr "Author"
#: crochet/templates/crochet/pattern.html:81
msgid "Autor..."
msgstr "Author..."
#: crochet/templates/crochet/pattern.html:86
#: crochet/templates/crochet/pattern.html:82
msgid "Imagen de portada"
msgstr "Cover image"
#: crochet/templates/crochet/pattern.html:89
#: crochet/templates/crochet/pattern.html:95
msgid "Añadir imagen"
msgstr "Add image"
#: crochet/templates/crochet/pattern.html:98
msgid "Cambiar"
msgstr "Change"
#: crochet/templates/crochet/pattern.html:103
msgid "No se ha podido subir la imagen de portada. Inténtalo de nuevo."
msgstr "Couldn't upload the cover image. Please try again."
#: crochet/templates/crochet/pattern.html:103
#: crochet/templates/crochet/pattern.html:187
#: crochet/templates/crochet/pattern.html:114
msgid "Personalización de página"
msgstr "Page customization"
#: crochet/templates/crochet/pattern.html:117
msgid "Autor"
msgstr "Author"
#: crochet/templates/crochet/pattern.html:118
msgid "Autor..."
msgstr "Author..."
#: crochet/templates/crochet/pattern.html:122
#: crochet/templates/crochet/pattern.html:206
msgid "Color del texto"
msgstr "Text color"
#: crochet/templates/crochet/pattern.html:107
#: crochet/templates/crochet/pattern.html:126
msgid "Color de acento (títulos)"
msgstr "Accent color (headings)"
#: crochet/templates/crochet/pattern.html:111
#: crochet/templates/crochet/pattern.html:187
#: crochet/templates/crochet/pattern.html:130
#: crochet/templates/crochet/pattern.html:206
msgid "Color de fondo"
msgstr "Background color"
#: crochet/templates/crochet/pattern.html:115
#: crochet/templates/crochet/pattern.html:134
msgid "Tipografía"
msgstr "Font"
#: crochet/templates/crochet/pattern.html:121
#: crochet/templates/crochet/pattern.html:140
msgid "Monoespaciada"
msgstr "Monospace"
#: crochet/templates/crochet/pattern.html:125
#: crochet/templates/crochet/pattern.html:144
msgid "Tamaño de letra"
msgstr "Font size"
#: crochet/templates/crochet/pattern.html:127
#: crochet/templates/crochet/pattern.html:146
msgid "Pequeño"
msgstr "Small"
#: crochet/templates/crochet/pattern.html:128
#: crochet/templates/crochet/pattern.html:147
msgid "Normal"
msgstr "Normal"
#: crochet/templates/crochet/pattern.html:129
#: crochet/templates/crochet/pattern.html:148
msgid "Grande"
msgstr "Large"
#: crochet/templates/crochet/pattern.html:133
#: crochet/templates/crochet/pattern.html:152
msgid "Alineación del texto"
msgstr "Text alignment"
#: crochet/templates/crochet/pattern.html:135
#: crochet/templates/crochet/pattern.html:154
msgid "Izquierda"
msgstr "Left"
#: crochet/templates/crochet/pattern.html:136
#: crochet/templates/crochet/pattern.html:155
msgid "Centrado"
msgstr "Center"
#: crochet/templates/crochet/pattern.html:137
#: crochet/templates/crochet/pattern.html:156
msgid "Justificado"
msgstr "Justify"
#: crochet/templates/crochet/pattern.html:141
#: crochet/templates/crochet/pattern.html:160
msgid "Tamaño de página"
msgstr "Page size"
#: crochet/templates/crochet/pattern.html:146
#: crochet/templates/crochet/pattern.html:165
msgid "Carta (Letter)"
msgstr "Letter"
#: crochet/templates/crochet/pattern.html:151
#: crochet/templates/crochet/pattern.html:170
msgid "Orientación"
msgstr "Orientation"
#: crochet/templates/crochet/pattern.html:153
#: crochet/templates/crochet/pattern.html:172
msgid "Vertical"
msgstr "Portrait"
#: crochet/templates/crochet/pattern.html:154
#: crochet/templates/crochet/pattern.html:173
msgid "Horizontal"
msgstr "Landscape"
#: crochet/templates/crochet/pattern.html:162
#: crochet/templates/crochet/pattern.html:170
#: crochet/templates/crochet/pattern.html:181
#: crochet/templates/crochet/pattern.html:189
msgid "Secciones"
msgstr "Sections"
#: crochet/templates/crochet/pattern.html:172
#: crochet/templates/crochet/pattern.html:191
msgid "Colapsar todo"
msgstr "Collapse all"
#: crochet/templates/crochet/pattern.html:172
#: crochet/templates/crochet/pattern.html:191
msgid "Expandir todo"
msgstr "Expand all"
#: crochet/templates/crochet/pattern.html:177
#: crochet/templates/crochet/pattern.html:196
msgid "Añadir sección"
msgstr "Add section"
#: crochet/templates/crochet/pattern.html:180
#: crochet/templates/crochet/pattern.html:199
msgid "Título"
msgstr "Title"
#: crochet/templates/crochet/pattern.html:180
#: crochet/templates/crochet/pattern.html:199
msgid "Título..."
msgstr "Title..."
#: crochet/templates/crochet/pattern.html:182
#: crochet/templates/crochet/pattern.html:201
msgid "Subtítulo"
msgstr "Subtitle"
#: crochet/templates/crochet/pattern.html:182
#: crochet/templates/crochet/pattern.html:201
msgid "Subtítulo..."
msgstr "Subtitle..."
#: crochet/templates/crochet/pattern.html:184
#: crochet/templates/crochet/pattern.html:203
msgid "Texto"
msgstr "Text"
#: crochet/templates/crochet/pattern.html:184
#: crochet/templates/crochet/pattern.html:203
msgid "Escribe aquí..."
msgstr "Write here..."
#: crochet/templates/crochet/pattern.html:186
#: crochet/templates/crochet/pattern.html:187
#: crochet/templates/crochet/pattern.html:205
#: crochet/templates/crochet/pattern.html:206
msgid "Nota"
msgstr "Note"
#: crochet/templates/crochet/pattern.html:186
#: crochet/templates/crochet/pattern.html:205
msgid "Escribe una nota o consejo..."
msgstr "Write a note or tip..."
#: crochet/templates/crochet/pattern.html:189
#: crochet/templates/crochet/pattern.html:208
msgid "Materiales"
msgstr "Materials"
#: crochet/templates/crochet/pattern.html:189
#: crochet/templates/crochet/pattern.html:208
msgid "Añadir material..."
msgstr "Add material..."
#: crochet/templates/crochet/pattern.html:189
#: crochet/templates/crochet/pattern.html:208
msgid "Añadir línea"
msgstr "Add line"
#: crochet/templates/crochet/pattern.html:191
#: crochet/templates/crochet/pattern.html:193
#: crochet/templates/crochet/pattern.html:210
#: crochet/templates/crochet/pattern.html:212
msgid "Imagen"
msgstr "Image"
#: crochet/templates/crochet/pattern.html:193
#: crochet/templates/crochet/pattern.html:212
msgid "No se ha podido subir la imagen. Inténtalo de nuevo."
msgstr "Couldn't upload the image. Please try again."
#: crochet/templates/crochet/pattern.html:195
#: crochet/templates/crochet/pattern.html:214
msgid "Patrón"
msgstr "Pattern"
#: crochet/templates/crochet/pattern.html:195
#: crochet/templates/crochet/pattern.html:214
msgid "Elementos"
msgstr "Elements"
#: crochet/templates/crochet/pattern.html:197
#: crochet/templates/crochet/pattern.html:216
msgid "Grupo"
msgstr "Group"
#: crochet/templates/crochet/pattern.html:201
#: crochet/templates/crochet/pattern.html:220
msgid "Arrastrar para reordenar"
msgstr "Drag to reorder"
#: crochet/templates/crochet/pattern.html:202
#: crochet/templates/crochet/pattern.html:221
msgid "Colapsar / expandir"
msgstr "Collapse / expand"
#: crochet/templates/crochet/pattern.html:203
#: crochet/templates/crochet/pattern.html:222
msgid "Duplicar sección"
msgstr "Duplicate section"
#: crochet/templates/crochet/pattern.html:204
#: crochet/templates/crochet/pattern.html:223
msgid "Eliminar sección"
msgstr "Delete section"
#: crochet/templates/crochet/pattern.html:205
#: crochet/templates/crochet/pattern.html:224
msgid ""
"¿Seguro que quieres eliminar este grupo? Se eliminarán también todas las "
"secciones que contiene."
@@ -683,7 +699,7 @@ msgstr ""
"Are you sure you want to delete this group? All sections inside it will also "
"be deleted."
#: crochet/templates/crochet/pattern.html:210
#: crochet/templates/crochet/pattern.html:229
msgid "Añade una sección para ver aquí el resultado."
msgstr "Add a section to see the result here."
@@ -813,6 +829,9 @@ msgstr "This pattern doesn't have any content yet."
msgid "Tu cuenta se ha eliminado correctamente."
msgstr "Your account has been deleted successfully."
#~ msgid "Volver a mis patrones"
#~ msgstr "Back to my patterns"
#~ msgid "Ir a mis patrones"
#~ msgstr "Go to my patterns"
+90 -74
View File
@@ -2,18 +2,18 @@ msgid ""
msgstr ""
"Project-Id-Version: crochet\n"
"Report-Msgid-Bugs-To: \n"
"POT-Creation-Date: 2026-07-22 08:00+0000\n"
"POT-Creation-Date: 2026-07-22 08:53+0000\n"
"Language: es\n"
"MIME-Version: 1.0\n"
"Content-Type: text/plain; charset=UTF-8\n"
"Content-Transfer-Encoding: 8bit\n"
#: crochet/forms.py:48 crochet/forms.py:96
#: crochet/templates/crochet/account_settings.html:29
#: crochet/templates/crochet/account_settings.html:49
msgid "Email"
msgstr ""
#: crochet/forms.py:128 crochet/templates/crochet/account_settings.html:22
#: crochet/forms.py:128 crochet/templates/crochet/account_settings.html:40
msgid "Nombre para mostrar"
msgstr ""
@@ -32,7 +32,7 @@ msgid ""
msgstr ""
#: crochet/templates/crochet/_account_delete_form.html:19
#: crochet/templates/crochet/account_settings.html:48
#: crochet/templates/crochet/account_settings.html:68
msgid "Eliminar cuenta"
msgstr ""
@@ -57,7 +57,7 @@ msgid "Contraseña actualizada."
msgstr ""
#: crochet/templates/crochet/_account_password_form.html:19
#: crochet/templates/crochet/account_settings.html:36
#: crochet/templates/crochet/account_settings.html:56
#: crochet/templates/crochet/password_reset_confirm.html:30
msgid "Cambiar contraseña"
msgstr ""
@@ -105,7 +105,7 @@ msgid "Actualizado el %(date)s"
msgstr ""
#: crochet/templates/crochet/account_home.html:44
#: crochet/templates/crochet/pattern.html:163
#: crochet/templates/crochet/pattern.html:182
msgid "Vista previa"
msgstr ""
@@ -124,11 +124,19 @@ msgstr ""
msgid "Ajustes de la cuenta"
msgstr ""
#: crochet/templates/crochet/account_settings.html:41
msgid "Volver a mis patrones"
#: crochet/templates/crochet/account_settings.html:30
msgid "Perfil"
msgstr ""
#: crochet/templates/crochet/account_settings.html:50
#: crochet/templates/crochet/account_settings.html:31
msgid "Seguridad"
msgstr ""
#: crochet/templates/crochet/account_settings.html:32
msgid "Zona de peligro"
msgstr ""
#: crochet/templates/crochet/account_settings.html:70
msgid "Esto borrará tu cuenta y todos tus patrones de forma permanente."
msgstr ""
@@ -442,214 +450,222 @@ msgstr ""
msgid "Guardado"
msgstr ""
#: crochet/templates/crochet/pattern.html:72
msgid "Personalización de página"
msgstr ""
#: crochet/templates/crochet/pattern.html:76
#: crochet/templates/crochet/pattern.html:78
msgid "Título del patrón"
msgstr ""
#: crochet/templates/crochet/pattern.html:77
#: crochet/templates/crochet/pattern.html:79
msgid "Título del patrón..."
msgstr ""
#: crochet/templates/crochet/pattern.html:80
msgid "Autor"
msgstr ""
#: crochet/templates/crochet/pattern.html:81
msgid "Autor..."
msgstr ""
#: crochet/templates/crochet/pattern.html:86
#: crochet/templates/crochet/pattern.html:82
msgid "Imagen de portada"
msgstr ""
#: crochet/templates/crochet/pattern.html:89
msgid "No se ha podido subir la imagen de portada. Inténtalo de nuevo."
#: crochet/templates/crochet/pattern.html:95
msgid "Añadir imagen"
msgstr ""
#: crochet/templates/crochet/pattern.html:98
msgid "Cambiar"
msgstr ""
#: crochet/templates/crochet/pattern.html:103
#: crochet/templates/crochet/pattern.html:187
msgid "No se ha podido subir la imagen de portada. Inténtalo de nuevo."
msgstr ""
#: crochet/templates/crochet/pattern.html:114
msgid "Personalización de página"
msgstr ""
#: crochet/templates/crochet/pattern.html:117
msgid "Autor"
msgstr ""
#: crochet/templates/crochet/pattern.html:118
msgid "Autor..."
msgstr ""
#: crochet/templates/crochet/pattern.html:122
#: crochet/templates/crochet/pattern.html:206
msgid "Color del texto"
msgstr ""
#: crochet/templates/crochet/pattern.html:107
#: crochet/templates/crochet/pattern.html:126
msgid "Color de acento (títulos)"
msgstr ""
#: crochet/templates/crochet/pattern.html:111
#: crochet/templates/crochet/pattern.html:187
#: crochet/templates/crochet/pattern.html:130
#: crochet/templates/crochet/pattern.html:206
msgid "Color de fondo"
msgstr ""
#: crochet/templates/crochet/pattern.html:115
#: crochet/templates/crochet/pattern.html:134
msgid "Tipografía"
msgstr ""
#: crochet/templates/crochet/pattern.html:121
#: crochet/templates/crochet/pattern.html:140
msgid "Monoespaciada"
msgstr ""
#: crochet/templates/crochet/pattern.html:125
#: crochet/templates/crochet/pattern.html:144
msgid "Tamaño de letra"
msgstr ""
#: crochet/templates/crochet/pattern.html:127
#: crochet/templates/crochet/pattern.html:146
msgid "Pequeño"
msgstr ""
#: crochet/templates/crochet/pattern.html:128
#: crochet/templates/crochet/pattern.html:147
msgid "Normal"
msgstr ""
#: crochet/templates/crochet/pattern.html:129
#: crochet/templates/crochet/pattern.html:148
msgid "Grande"
msgstr ""
#: crochet/templates/crochet/pattern.html:133
#: crochet/templates/crochet/pattern.html:152
msgid "Alineación del texto"
msgstr ""
#: crochet/templates/crochet/pattern.html:135
#: crochet/templates/crochet/pattern.html:154
msgid "Izquierda"
msgstr ""
#: crochet/templates/crochet/pattern.html:136
#: crochet/templates/crochet/pattern.html:155
msgid "Centrado"
msgstr ""
#: crochet/templates/crochet/pattern.html:137
#: crochet/templates/crochet/pattern.html:156
msgid "Justificado"
msgstr ""
#: crochet/templates/crochet/pattern.html:141
#: crochet/templates/crochet/pattern.html:160
msgid "Tamaño de página"
msgstr ""
#: crochet/templates/crochet/pattern.html:146
#: crochet/templates/crochet/pattern.html:165
msgid "Carta (Letter)"
msgstr ""
#: crochet/templates/crochet/pattern.html:151
#: crochet/templates/crochet/pattern.html:170
msgid "Orientación"
msgstr ""
#: crochet/templates/crochet/pattern.html:153
#: crochet/templates/crochet/pattern.html:172
msgid "Vertical"
msgstr ""
#: crochet/templates/crochet/pattern.html:154
#: crochet/templates/crochet/pattern.html:173
msgid "Horizontal"
msgstr ""
#: crochet/templates/crochet/pattern.html:162
#: crochet/templates/crochet/pattern.html:170
#: crochet/templates/crochet/pattern.html:181
#: crochet/templates/crochet/pattern.html:189
msgid "Secciones"
msgstr ""
#: crochet/templates/crochet/pattern.html:172
#: crochet/templates/crochet/pattern.html:191
msgid "Colapsar todo"
msgstr ""
#: crochet/templates/crochet/pattern.html:172
#: crochet/templates/crochet/pattern.html:191
msgid "Expandir todo"
msgstr ""
#: crochet/templates/crochet/pattern.html:177
#: crochet/templates/crochet/pattern.html:196
msgid "Añadir sección"
msgstr ""
#: crochet/templates/crochet/pattern.html:180
#: crochet/templates/crochet/pattern.html:199
msgid "Título"
msgstr ""
#: crochet/templates/crochet/pattern.html:180
#: crochet/templates/crochet/pattern.html:199
msgid "Título..."
msgstr ""
#: crochet/templates/crochet/pattern.html:182
#: crochet/templates/crochet/pattern.html:201
msgid "Subtítulo"
msgstr ""
#: crochet/templates/crochet/pattern.html:182
#: crochet/templates/crochet/pattern.html:201
msgid "Subtítulo..."
msgstr ""
#: crochet/templates/crochet/pattern.html:184
#: crochet/templates/crochet/pattern.html:203
msgid "Texto"
msgstr ""
#: crochet/templates/crochet/pattern.html:184
#: crochet/templates/crochet/pattern.html:203
msgid "Escribe aquí..."
msgstr ""
#: crochet/templates/crochet/pattern.html:186
#: crochet/templates/crochet/pattern.html:187
#: crochet/templates/crochet/pattern.html:205
#: crochet/templates/crochet/pattern.html:206
msgid "Nota"
msgstr ""
#: crochet/templates/crochet/pattern.html:186
#: crochet/templates/crochet/pattern.html:205
msgid "Escribe una nota o consejo..."
msgstr ""
#: crochet/templates/crochet/pattern.html:189
#: crochet/templates/crochet/pattern.html:208
msgid "Materiales"
msgstr ""
#: crochet/templates/crochet/pattern.html:189
#: crochet/templates/crochet/pattern.html:208
msgid "Añadir material..."
msgstr ""
#: crochet/templates/crochet/pattern.html:189
#: crochet/templates/crochet/pattern.html:208
msgid "Añadir línea"
msgstr ""
#: crochet/templates/crochet/pattern.html:191
#: crochet/templates/crochet/pattern.html:193
#: crochet/templates/crochet/pattern.html:210
#: crochet/templates/crochet/pattern.html:212
msgid "Imagen"
msgstr ""
#: crochet/templates/crochet/pattern.html:193
#: crochet/templates/crochet/pattern.html:212
msgid "No se ha podido subir la imagen. Inténtalo de nuevo."
msgstr ""
#: crochet/templates/crochet/pattern.html:195
#: crochet/templates/crochet/pattern.html:214
msgid "Patrón"
msgstr ""
#: crochet/templates/crochet/pattern.html:195
#: crochet/templates/crochet/pattern.html:214
msgid "Elementos"
msgstr ""
#: crochet/templates/crochet/pattern.html:197
#: crochet/templates/crochet/pattern.html:216
msgid "Grupo"
msgstr ""
#: crochet/templates/crochet/pattern.html:201
#: crochet/templates/crochet/pattern.html:220
msgid "Arrastrar para reordenar"
msgstr ""
#: crochet/templates/crochet/pattern.html:202
#: crochet/templates/crochet/pattern.html:221
msgid "Colapsar / expandir"
msgstr ""
#: crochet/templates/crochet/pattern.html:203
#: crochet/templates/crochet/pattern.html:222
msgid "Duplicar sección"
msgstr ""
#: crochet/templates/crochet/pattern.html:204
#: crochet/templates/crochet/pattern.html:223
msgid "Eliminar sección"
msgstr ""
#: crochet/templates/crochet/pattern.html:205
#: crochet/templates/crochet/pattern.html:224
msgid ""
"¿Seguro que quieres eliminar este grupo? Se eliminarán también todas las "
"secciones que contiene."
msgstr ""
#: crochet/templates/crochet/pattern.html:210
#: crochet/templates/crochet/pattern.html:229
msgid "Añade una sección para ver aquí el resultado."
msgstr ""
@@ -0,0 +1,22 @@
// Panel lateral de ajustes de la cuenta (ver account_settings.html): solo
// alterna qué <section data-settings-panel> se ve, todo en la misma
// página. Los formularios de cada pestaña siguen siendo los mismos
// fragmentos HTMX de siempre, esto no los toca.
const tabLinks = document.querySelectorAll('[data-settings-tab]');
const panels = document.querySelectorAll('[data-settings-panel]');
function showTab(tabName) {
panels.forEach((panel) => {
panel.classList.toggle('hidden', panel.dataset.settingsPanel !== tabName);
});
tabLinks.forEach((link) => {
link.classList.toggle('menu-active', link.dataset.settingsTab === tabName);
});
}
tabLinks.forEach((link) => {
link.addEventListener('click', (event) => {
event.preventDefault();
showTab(link.dataset.settingsTab);
});
});
+2 -1
View File
@@ -3,7 +3,7 @@
// sección de tipo "Imagen"): esto es un atributo del patrón entero, así que
// se sube y aplica en cuanto se elige el archivo, sin esperar a "Guardar".
import { coverImageInput, coverImageLargeUrlInput, coverImagePreview } from './dom-refs.js';
import { coverImageInput, coverImageLargeUrlInput, coverImagePlaceholder, coverImagePreview } from './dom-refs.js';
import { getCsrfToken } from './csrf.js';
import { renderOutput } from './render.js';
@@ -25,6 +25,7 @@ coverImageInput.addEventListener('change', async () => {
const data = await response.json();
coverImagePreview.src = data.thumbnailUrl;
coverImagePreview.classList.remove('hidden');
coverImagePlaceholder.classList.add('hidden');
// "Vista previa" (ver render.js) pinta la portada a partir de este
// valor, igual que lee pageTitleInput/pageAuthorInput.
coverImageLargeUrlInput.value = data.largeUrl;
+1
View File
@@ -27,4 +27,5 @@ export const pageSizeStyle = document.getElementById('page-size-style');
// entero, igual que título/autor de arriba, no una sección más.
export const coverImageInput = document.getElementById('cover-image-input');
export const coverImagePreview = document.getElementById('cover-image-preview'); // Miniatura dentro del propio control de subida.
export const coverImagePlaceholder = document.getElementById('cover-image-placeholder'); // Icono + texto que tapa la miniatura mientras no hay portada.
export const coverImageLargeUrlInput = document.getElementById('cover-image-large-url'); // Leído por render.js para "Vista previa".
+64 -37
View File
@@ -1,5 +1,5 @@
{% extends 'crochet/base.html' %}
{% load i18n %}
{% load static i18n %}
{% block title %}{% trans 'Ajustes de la cuenta' %}{% endblock %}
@@ -14,43 +14,70 @@
{% endblock %}
{% block content %}
<main class="max-w-lg mx-auto px-4 py-8 flex flex-col gap-8">
<h1 class="text-2xl font-semibold">{% trans 'Ajustes de la cuenta' %}</h1>
<main class="max-w-4xl mx-auto px-4 py-8">
<h1 class="text-2xl font-semibold mb-6">{% trans 'Ajustes de la cuenta' %}</h1>
<section class="card bg-base-100 shadow border border-base-300">
<div class="card-body">
<h2 class="card-title text-lg">{% trans 'Nombre para mostrar' %}</h2>
{% include 'crochet/_account_display_name_form.html' %}
<div class="flex flex-col md:flex-row gap-8">
<!-- Panel lateral: solo cambia qué <section data-settings-panel> se
ve (ver account-settings-tabs.js), no hay URL ni petición nueva
por pestaña; los formularios de cada una siguen siendo los
mismos fragmentos HTMX de siempre. -->
<nav class="md:w-56 shrink-0 no-print">
<!-- w-full: .menu de daisyUI se ajusta al contenido por defecto
(no ocupa el 100% de su contenedor), así que sin esto quedaba
visiblemente más estrecho que las tarjetas de abajo en móvil. -->
<ul class="menu bg-base-100 rounded-box border border-base-300 p-2 w-full md:flex-col">
<li><a href="#" data-settings-tab="profile" class="menu-active">{% trans 'Perfil' %}</a></li>
<li><a href="#" data-settings-tab="security">{% trans 'Seguridad' %}</a></li>
<li><a href="#" data-settings-tab="danger" class="text-error">{% trans 'Zona de peligro' %}</a></li>
</ul>
</nav>
<div class="flex-1 min-w-0">
<section data-settings-panel="profile" class="flex flex-col gap-8">
<section class="card bg-base-100 shadow border border-base-300">
<div class="card-body">
<h2 class="card-title text-lg">{% trans 'Nombre para mostrar' %}</h2>
{% include 'crochet/_account_display_name_form.html' %}
</div>
</section>
</section>
<section data-settings-panel="security" class="hidden flex-col gap-8">
<section class="card bg-base-100 shadow border border-base-300">
<div class="card-body">
<h2 class="card-title text-lg">{% trans 'Email' %}</h2>
{% include 'crochet/_account_email_form.html' %}
</div>
</section>
<section class="card bg-base-100 shadow border border-base-300">
<div class="card-body">
<h2 class="card-title text-lg">{% trans 'Cambiar contraseña' %}</h2>
{% include 'crochet/_account_password_form.html' %}
</div>
</section>
</section>
<!-- Zona de peligro en su propia pestaña, no solo con border-error
de por sí: separada del resto de ajustes, no algo con lo que
te puedas topar sin querer bajando por la página. -->
<section data-settings-panel="danger" class="hidden flex-col gap-8">
<section class="card bg-base-100 shadow border border-error">
<div class="card-body">
<h2 class="card-title text-lg text-error">{% trans 'Eliminar cuenta' %}</h2>
<p class="text-sm text-base-content/70">
{% trans 'Esto borrará tu cuenta y todos tus patrones de forma permanente.' %}
</p>
{% include 'crochet/_account_delete_form.html' %}
</div>
</section>
</section>
</div>
</section>
<section class="card bg-base-100 shadow border border-base-300">
<div class="card-body">
<h2 class="card-title text-lg">{% trans 'Email' %}</h2>
{% include 'crochet/_account_email_form.html' %}
</div>
</section>
<section class="card bg-base-100 shadow border border-base-300">
<div class="card-body">
<h2 class="card-title text-lg">{% trans 'Cambiar contraseña' %}</h2>
{% include 'crochet/_account_password_form.html' %}
</div>
</section>
<a href="{% url 'crochet:home' %}" class="link link-primary">{% trans 'Volver a mis patrones' %}</a>
<!-- Zona de peligro, aparte del resto (border-error): que se note a
simple vista que esto es irreversible, distinto de los ajustes de
arriba. -->
<section class="card bg-base-100 shadow border border-error">
<div class="card-body">
<h2 class="card-title text-lg text-error">{% trans 'Eliminar cuenta' %}</h2>
<p class="text-sm text-base-content/70">
{% trans 'Esto borrará tu cuenta y todos tus patrones de forma permanente.' %}
</p>
{% include 'crochet/_account_delete_form.html' %}
</div>
</section>
</div>
</main>
{% endblock %}
{% block extra_js %}
<script defer src="{% static 'js/account-settings-tabs.js' %}"></script>
{% endblock %}
+46 -27
View File
@@ -68,36 +68,55 @@
<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">
<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">
<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"
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=""
src="{% if pattern.cover_image_thumbnail %}{{ pattern.cover_image_thumbnail.url }}{% endif %}"
class="absolute inset-0 h-full w-full object-cover{% if not pattern.cover_image_thumbnail %} hidden{% endif %}">
<span id="cover-image-placeholder"
class="flex flex-col items-center gap-2 px-2 text-center text-sm text-base-content/50{% if pattern.cover_image_thumbnail %} hidden{% endif %}">
<span class="text-5xl">🖼️</span>
{% trans 'Añadir imagen' %}
</span>
<span class="absolute inset-0 flex items-center justify-center bg-black/50 text-sm font-medium text-white opacity-0 transition-opacity group-hover:opacity-100">
{% trans 'Cambiar' %}
</span>
</label>
<input id="cover-image-input" type="file" accept="image/*" class="sr-only"
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.' %}">
<!-- 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"
value="{% if pattern.cover_image_large %}{{ pattern.cover_image_large.url }}{% endif %}">
</div>
</div>
<details class="border border-base-300 rounded-box p-4 mb-4 no-print">
<summary class="text-lg font-semibold cursor-pointer select-none">{% trans 'Personalización de página' %}</summary>
<div class="flex flex-col gap-4 mt-4">
<div class="flex flex-col sm:flex-row gap-4">
<label class="flex flex-col gap-1 flex-1">
<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>
<label class="flex flex-col gap-1 flex-1">
<span class="text-sm">{% trans 'Autor' %}</span>
<input id="page-author-input" type="text" class="input input-bordered" placeholder="{% trans 'Autor...' %}">
</label>
</div>
<div class="flex items-end gap-4">
<label class="flex flex-col gap-1 flex-1">
<span class="text-sm">{% trans 'Imagen de portada' %}</span>
<input id="cover-image-input" type="file" accept="image/*" class="file-input file-input-bordered"
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.' %}">
</label>
<img id="cover-image-preview" alt=""
src="{% if pattern.cover_image_thumbnail %}{{ pattern.cover_image_thumbnail.url }}{% endif %}"
class="w-24 h-24 object-cover rounded-box border border-base-300{% if not pattern.cover_image_thumbnail %} hidden{% endif %}">
<!-- Tamaño "large" (no el thumbnail 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"
value="{% if pattern.cover_image_large %}{{ pattern.cover_image_large.url }}{% endif %}">
</div>
<label class="flex flex-col gap-1">
<span class="text-sm">{% trans 'Autor' %}</span>
<input id="page-author-input" type="text" class="input input-bordered" placeholder="{% trans 'Autor...' %}">
</label>
<div class="flex flex-wrap items-end gap-4">
<label class="flex flex-col gap-1">
<span class="text-sm">{% trans 'Color del texto' %}</span>