From 5a16fa44a61a84c6943733e073af4541ec79a08b Mon Sep 17 00:00:00 2001 From: jordi fita mas Date: Fri, 22 Sep 2023 02:11:03 +0200 Subject: [PATCH] Change media picker from
to and make it modal MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Have to call Dialog.showModal when HTMx loaded the dialog in the DOM, so had to add a onLoad event listened that checks whether the loaded element is actually a DIALOG. Had to restrict the margin: 0 for all elements (*) to exclude dialog, because the browser sets it to auto, and i did not want to set it again just because i was too overzealous with my “reset”. The rest of the CSS is just to have a sticky header and footer, and see the cancel button, that works as a “close”, all the time. Finally, i realized that if i add the dialog at the end of the fieldset and let HTMx inherit its hx-target and hx-swap, i no longer need to set them in the dialog, as HTMx will always replace the fieldset, and i can have the dialog side by side the current content of the fieldset, that it was very confusing seeing it disappear when trying to select a new media. The cancel button could now just remove the dialog instead of making the POST, but in local it makes no difference; we’lls see what happens on production. --- po/ca.po | 6 +++--- po/es.po | 6 +++--- web/static/camper.css | 24 +++++++++++++++++++++++- web/static/camper.js | 7 +++++++ web/templates/admin/form.gohtml | 5 ++++- web/templates/admin/media/picker.gohtml | 4 ++-- 6 files changed, 42 insertions(+), 10 deletions(-) diff --git a/po/ca.po b/po/ca.po index 25af991..db760ed 100644 --- a/po/ca.po +++ b/po/ca.po @@ -8,7 +8,7 @@ msgid "" msgstr "" "Project-Id-Version: camper\n" "Report-Msgid-Bugs-To: jordi@tandem.blog\n" -"POT-Creation-Date: 2023-09-22 00:56+0200\n" +"POT-Creation-Date: 2023-09-22 02:03+0200\n" "PO-Revision-Date: 2023-07-22 23:45+0200\n" "Last-Translator: jordi fita mas \n" "Language-Team: Catalan \n" @@ -810,11 +810,11 @@ msgstr "No podeu deixar el format del número de factura en blanc." msgid "Cross-site request forgery detected." msgstr "S’ha detectat un intent de falsificació de petició a llocs creuats." -#: pkg/media/admin.go:278 +#: pkg/media/admin.go:265 msgid "Uploaded file can not be empty." msgstr "No podeu deixar el fitxer del mèdia en blanc." -#: pkg/media/admin.go:337 +#: pkg/media/admin.go:324 msgid "Filename can not be empty." msgstr "No podeu deixar el nom del fitxer." diff --git a/po/es.po b/po/es.po index 8161a5c..e18a273 100644 --- a/po/es.po +++ b/po/es.po @@ -8,7 +8,7 @@ msgid "" msgstr "" "Project-Id-Version: camper\n" "Report-Msgid-Bugs-To: jordi@tandem.blog\n" -"POT-Creation-Date: 2023-09-22 00:56+0200\n" +"POT-Creation-Date: 2023-09-22 02:03+0200\n" "PO-Revision-Date: 2023-07-22 23:46+0200\n" "Last-Translator: jordi fita mas \n" "Language-Team: Spanish \n" @@ -810,11 +810,11 @@ msgstr "No podéis dejar el formato de número de factura en blanco." msgid "Cross-site request forgery detected." msgstr "Se ha detectado un intento de falsificación de petición en sitios cruzados." -#: pkg/media/admin.go:278 +#: pkg/media/admin.go:265 msgid "Uploaded file can not be empty." msgstr "No podéis dejar el archivo del medio en blanco." -#: pkg/media/admin.go:337 +#: pkg/media/admin.go:324 msgid "Filename can not be empty." msgstr "No podéis dejar el nombre del archivo en blanco." diff --git a/web/static/camper.css b/web/static/camper.css index fdbb7fe..0e7605c 100644 --- a/web/static/camper.css +++ b/web/static/camper.css @@ -7,7 +7,7 @@ box-sizing: border-box; } -* { +*:not(dialog) { margin: 0; } @@ -67,3 +67,25 @@ a.missing-translation { .media-grid img { object-fit: cover; } + +.media-picker { + min-width: 75vw; +} + +.media-picker, .media-picker header, .media-picker footer { + background-color: white; +} + +.media-picker header, .media-picker footer { + position: sticky; + padding-top: 1rem; + padding-bottom: 1rem; +} + +.media-picker header { + top: -1em; +} + +.media-picker footer { + bottom: -1em; +} diff --git a/web/static/camper.js b/web/static/camper.js index 3b8a0d1..c4762cd 100644 --- a/web/static/camper.js +++ b/web/static/camper.js @@ -134,3 +134,10 @@ function camperUploadForm(el) { } }); } + +htmx.onLoad((target) => { + if (target.tagName === 'DIALOG') { + target.showModal(); + } +}) + diff --git a/web/templates/admin/form.gohtml b/web/templates/admin/form.gohtml index 32bfe53..f1d2512 100644 --- a/web/templates/admin/form.gohtml +++ b/web/templates/admin/form.gohtml @@ -21,7 +21,10 @@
{{( pgettext .Label "input" )}} - -
+