From a7ba6145b299b344e78b17de468d8c896a5c4b4f Mon Sep 17 00:00:00 2001
From: roberto <roberto@speedtech.it>
Date: Sun, 15 Dec 2024 20:35:52 +0100
Subject: [PATCH] Dialog UI fixes

---
 assets/static/css/main.css               | 15 +++++-
 assets/templates/base.tmpl               |  9 ++--
 assets/templates/items/share.tmpl        |  8 ++-
 assets/templates/items/view.tmpl         | 12 ++---
 assets/templates/quickbox/transform.tmpl | 63 ++++--------------------
 5 files changed, 32 insertions(+), 75 deletions(-)

diff --git a/assets/static/css/main.css b/assets/static/css/main.css
index 4775a2c..3c41d74 100644
--- a/assets/static/css/main.css
+++ b/assets/static/css/main.css
@@ -920,6 +920,19 @@ dialog {
   z-index:100;
 }
 
+dialog header {
+  display: flex;
+  align-items: center
+}
+
+dialog header h5 {
+  flex-grow:1;
+}
+
+dialog header .close {
+  text-align: end;
+}
+
 dialog::backdrop {
   opacity: 0.7;
 }
@@ -944,7 +957,7 @@ dialog .content {
   min-width: 300px;
 }
 
-dialog.share {
+dialog.share, dialog.quickbox-transform {
   min-width: 400px;
 }
 
diff --git a/assets/templates/base.tmpl b/assets/templates/base.tmpl
index 0da3731..ca3d7fb 100644
--- a/assets/templates/base.tmpl
+++ b/assets/templates/base.tmpl
@@ -48,13 +48,10 @@
 
   <dialog class="dialog-confirm" id="dialog-confirm-delete">
     <header>
-      <div style="float:left; max-width: 420px;">
-        <h5></h5>
-      </div>
-      <div style="float:right">
-        <span class="close-dialog button close"><i class='close-dialog bi bi-x-circle-fill'></i></span>
-      </div>
+      <h5></h5>
+      <span class="close-dialog button close"><i class='close-dialog bi bi-x-circle-fill'></i></span>
     </header>
+
     <p style="clear: both"></p>
 
     <footer>
diff --git a/assets/templates/items/share.tmpl b/assets/templates/items/share.tmpl
index 71c4e2b..0d9ae9e 100644
--- a/assets/templates/items/share.tmpl
+++ b/assets/templates/items/share.tmpl
@@ -1,13 +1,8 @@
 {{define "page:content"}}
   <dialog id="dialog" class="share">
       <header>
-        <div style="float:left; max-width: 420px;">
           <h5><i class="bi bi-share-fill" title="Share"></i> Share item</h5>
-        </div>
-        <div style="float:right">
-          <button type="submit" class="main" title="Share"><i class='bi bi-share-fill'></i></button>
           <span class="close-dialog button close"><i class='close-dialog bi bi-x-circle-fill'></i></span>
-        </div>
       </header>
       <div class="content">
           <form>
@@ -66,6 +61,9 @@
               </div>
             </div>  
             </fieldset>
+            <footer>
+              <button type="submit" class="main" title="Share"><i class='bi bi-share-fill'></i> Share</button>
+            </footer>
           </form>
     </div>
   </dialog>
diff --git a/assets/templates/items/view.tmpl b/assets/templates/items/view.tmpl
index 73032ab..7f7007b 100644
--- a/assets/templates/items/view.tmpl
+++ b/assets/templates/items/view.tmpl
@@ -1,15 +1,9 @@
 {{define "page:content"}}
 <dialog id="dialog" class="view">
   <header>
-    <div style="float:left; max-width: 420px;">
-      <h5><i class="{{.item.Type_icon}}" title="{{.item.Type_title}}"></i> {{.item.Type_title}} : {{.item.Title}}</h5>
-    </div>
-    <div style="float:right">
-      <a class="button main close-dialog" hx-get="/item/update/{{.item.Id}}" hx-push-url="true" hx-target="#page-content" href="/item/update/{{.item.Id}}"><i class="bi bi-pencil close-dialog"></i></a>
-      <span class="close-dialog button close"><i class='close-dialog bi bi-x-circle-fill'></i></span>
-    </div>
+    <h5><i class="{{.item.Type_icon}}" title="{{.item.Type_title}}"></i> {{.item.Type_title}} : {{.item.Title}}</h5>
+    <span class="close-dialog button close"><i class='close-dialog bi bi-x-circle-fill'></i></span>
   </header>
-
   <div class="content">
     {{ if gt (len .item.Summary) 0}}
       <span style="font-weight: bold;">Summary</span>
@@ -50,7 +44,7 @@
             {{ end }}
           </div>
         </div>
-
+        <a class="button main close-dialog" hx-get="/item/update/{{.item.Id}}" hx-push-url="true" hx-target="#page-content" href="/item/update/{{.item.Id}}"><i class="bi bi-pencil close-dialog"></i> Edit</a>
       </div>
   </dialog>
   {{ end }}
\ No newline at end of file
diff --git a/assets/templates/quickbox/transform.tmpl b/assets/templates/quickbox/transform.tmpl
index c51e286..f2e0102 100644
--- a/assets/templates/quickbox/transform.tmpl
+++ b/assets/templates/quickbox/transform.tmpl
@@ -1,21 +1,14 @@
 {{define "page:content"}}
 <dialog id="dialog" class="quickbox-transform">
-    <header>
-      <h5>
-        <i class="bi bi-arrow-up-left-circle-fill" title="Transform"></i> Quicknote transform
-      </h5>
-    </header>
+  <header>
+    <h5><i class="bi bi-arrow-up-left-circle-fill" title="Transform"></i> Quicknote transform</h5>
+    <span class="close-dialog button close"><i class='close-dialog bi bi-x-circle-fill'></i></span>
+  </header>
     <form hx-post="/quickbox/transform/{{ .quicknote.Id }}" hx-target="#message">
       <div class="w3-padding" style="overflow: auto;">
       <p>
         <label for="item-title">Title</label>
-        <input
-          name="Title"
-          class=" w3-border"
-          id="item-title"
-          type="text"
-          value=""
-        />
+        <input name="Title" id="item-title" type="text" value=""/>
       </p>
       <div class="w3-row">
         <div class="w3-half" style="padding-right: 4px">
@@ -33,13 +26,7 @@
         <div class="w3-half" style="padding-right: 4px">
           <p>
             <label for="item-tags">Tags</label>
-            <input
-              name="Tags"
-              class=" w3-border"
-              id="item-tags"
-              type="text"
-              value=""
-            />
+            <input name="Tags" id="item-tags" type="text" value=""/>
           </p>
         </div>
         <div class="w3-half" style="padding-left: 4px">
@@ -50,14 +37,7 @@
       </div>
       <p>
         <label for="item-description">Description</label>
-        <textarea
-          name="Description"
-          class=" w3-border"
-          id="item-description"
-          type="text"
-          rows="5"
-          >{{.quicknote.Note}}</textarea
-        >
+        <textarea name="Description" id="item-description" rows="5">{{.quicknote.Note}}</textarea>
       </p>
       <p>
         <label class="switch">
@@ -71,35 +51,10 @@
         ><span class="label-checkbox">Keep in Quickbox</span>
       </p>
       <p class="hide-small w3-container" style="text-align: center;">
-          <button
-            type="submit"
-            class="w3-btn w3-metro-dark-blue w3-round-large"
-          >
-            <i class="bi bi-arrow-up-left-circle-fill" title="Transform"></i> Transform
-          </button>
-          <button
-            type="button"
-            _="on click remove #modal"
-            class="w3-btn w3-light-gray w3-round-large"
-          >
-            Cancel
-          </button>
+          <button class="main"><i class="bi bi-arrow-up-left-circle-fill" title="Transform"></i> Transform</button>
       </p>
       </div>
-      <div class="footerNavbar-container" style="padding-left:8px;">
-        <div class="w3-bar footerNavbar hide-medium hide-large w3-round-large">
-          <div class="w3-bar-item">
-            <button type="submit" class="w3-btn w3-metro-dark-blue w3-round-large">
-              <i class="bi bi-arrow-up-left-circle-fill" title="Transform"></i>
-            </button>
-          </div>
-          <div class="w3-bar-item">
-            <button type="button" _="on click remove #modal" class="w3-btn w3-metro-dark-blue w3-round-large">
-              <i class="bi bi-x-circle-fill"></i>
-            </button>
-          </div>
-        </div>
-      </div>
+
     </form>
 </dialog>
 {{ end }}