From 582ff4ac9114c0c398c65740615b62fd6e4a3634 Mon Sep 17 00:00:00 2001 From: roberto Date: Wed, 18 Dec 2024 18:01:59 +0100 Subject: [PATCH] UI Fixes --- assets/static/css/main.css | 29 ++++++++++++++++++ assets/static/js/main.js | 34 ++++++++++++++++++---- assets/templates/base.tmpl | 19 ++++++++++-- assets/templates/items/all_list.tmpl | 2 +- assets/templates/items/all_list_title.tmpl | 1 + assets/templates/items/fields.tmpl | 34 +++++----------------- assets/templates/partials/message.tmpl | 2 +- cmd/web/categories_handler.go | 5 +++- cmd/web/items_handlers.go | 8 ++++- cmd/web/types_handlers.go | 7 ++++- internal/response/templates.go | 8 +++-- 11 files changed, 107 insertions(+), 42 deletions(-) diff --git a/assets/static/css/main.css b/assets/static/css/main.css index 36c5646..4dbcb94 100644 --- a/assets/static/css/main.css +++ b/assets/static/css/main.css @@ -650,6 +650,21 @@ th.operations, td.operations { text-align: center } +.field { + display:flex; + align-items:center; + flex-direction: row; +} + +.field-value { + flex-grow:1; + margin-right: 5px; +} + +.field-buttons { + width: 50px; +} + .col, .half, .third, @@ -954,6 +969,20 @@ dialog .content { overflow: auto; } +dialog .content h5 { + font-size: 16px; +} + +#message { + position: fixed; + bottom: 5px; +} + +#message p { + padding: 0; + margin: 0; +} + #dialog-confirm { min-width: 300px; } diff --git a/assets/static/js/main.js b/assets/static/js/main.js index 8b82292..ef7f6ed 100644 --- a/assets/static/js/main.js +++ b/assets/static/js/main.js @@ -144,12 +144,22 @@ function bm_show_confirm_delete(sender, title, message) { document.querySelector("#dialog-confirm-delete h5").innerHTML = title; document.querySelector("#dialog-confirm-delete p").innerHTML = message; document.querySelector("#dialog-confirm-delete").showModal(); - document.getElementById("modal-confirm-ok").addEventListener('click', (event) => { + document.getElementById("modal-confirm-delete").addEventListener('click', (event) => { htmx.trigger(sender, 'confirmed', null); document.querySelector("#dialog-confirm-delete").close(); }); } +function bm_show_confirm(sender, title, message) { + document.querySelector("#dialog-confirm h5").innerHTML = title; + document.querySelector("#dialog-confirm p").innerHTML = message; + document.querySelector("#dialog-confirm").showModal(); + document.getElementById("modal-confirm").addEventListener('click', (event) => { + htmx.trigger(sender, 'confirmed', null); + document.querySelector("#dialog-confirm").close(); + }); +} + function bm_item_field_add(type_field_id, widget) { let template = Handlebars.templates['items/field-' + widget] let fields_list = document.getElementById('fields-' + type_field_id); @@ -176,12 +186,18 @@ document.addEventListener("DOMContentLoaded", function(event){ ); */ - document.querySelector('.dialog-confirm').addEventListener('click', (event) => { - if (event.target.classList.contains("close-dialog")) { + document.getElementById('dialog-confirm').addEventListener('click', (event) => { + if (event.target.classList.contains("close-dialog-confirm")) { event.target.closest('dialog').close(); } }); + document.getElementById('dialog-confirm-delete').addEventListener('click', (event) => { + if (event.target.classList.contains("close-dialog-confirm")) { + event.target.closest('dialog').close(); + } + }); + document.querySelector('body').addEventListener('click', (event) => { if (event.target.classList.contains("close-dialog")) { event.target.closest('#dialog').close(); @@ -198,7 +214,8 @@ document.addEventListener("DOMContentLoaded", function(event){ }); document.body.addEventListener("closeQuickboxTransformModal", function(evt){ - document.getElementById("modal").remove(); + document.getElementById('dialog').close(); + document.getElementById('dialog').remove(); if(evt.detail.keepQuickNote == 0){ htmx.ajax('DELETE', '/quickbox/delete/' + evt.detail.quickNoteId, {target:'#quicknote-' + evt.detail.quickNoteId, swap:'outerHTML swap:1s'}) } @@ -208,8 +225,15 @@ document.addEventListener("DOMContentLoaded", function(event){ const easyMDE = new EasyMDE({element: document.getElementById(evt.detail.value), forceSync: true}); }); - new SlimSelect({select: '.slim-select'}); + document.body.addEventListener("showMessage", function(evt){ + document.getElementById('message').show(); + setTimeout(() => { + document.getElementById('message').close(); + document.getElementById('message').innerHTML = ''; + }, "5000"); + }); + new SlimSelect({select: '.slim-select'}); htmx.on('htmx:afterSettle', (event) => { new SlimSelect({select: '.slim-select'}); }); diff --git a/assets/templates/base.tmpl b/assets/templates/base.tmpl index 31d435a..44b93ed 100644 --- a/assets/templates/base.tmpl +++ b/assets/templates/base.tmpl @@ -43,19 +43,31 @@ {{template "partial:footer" .}} -
- +

+ + + +
+
+ +
+ +

+ + @@ -85,6 +97,7 @@ + {{ end }} diff --git a/assets/templates/items/all_list.tmpl b/assets/templates/items/all_list.tmpl index fb4a0c1..a170461 100644 --- a/assets/templates/items/all_list.tmpl +++ b/assets/templates/items/all_list.tmpl @@ -1,6 +1,6 @@ {{define "itemsAll:list"}}