From b03046a1a61b53608f0482770dcc9025a3c0b665 Mon Sep 17 00:00:00 2001
From: roberto <roberto@speedtech.it>
Date: Mon, 16 Dec 2024 17:55:33 +0100
Subject: [PATCH] Various UI fixes

---
 assets/static/css/main.css                |  5 +--
 assets/static/js/main.js                  |  2 +-
 assets/templates/base.tmpl                | 10 ++---
 assets/templates/items/all_list.tmpl      | 53 +++++------------------
 assets/templates/items/all_list_rows.tmpl |  2 +-
 assets/templates/items/form.tmpl          |  7 ++-
 assets/templates/items/list.tmpl          | 49 +++++----------------
 assets/templates/items/list_rows.tmpl     |  2 +-
 assets/templates/items/read.tmpl          |  1 +
 assets/templates/items/share.tmpl         |  6 +--
 assets/templates/items/view.tmpl          |  4 +-
 assets/templates/quickbox/add.tmpl        |  9 ++--
 assets/templates/quickbox/list.tmpl       |  2 +-
 assets/templates/quickbox/transform.tmpl  | 37 +++++++---------
 internal/funcs/funcs.go                   |  2 +-
 15 files changed, 63 insertions(+), 128 deletions(-)

diff --git a/assets/static/css/main.css b/assets/static/css/main.css
index 3c41d74..36c5646 100644
--- a/assets/static/css/main.css
+++ b/assets/static/css/main.css
@@ -903,6 +903,7 @@ th.operations, td.operations {
   display: flex;
   flex-direction: row;
   margin-bottom: 10px;
+  margin-top: 10px;
   align-items: flex-start;
 }
 
@@ -957,10 +958,6 @@ dialog .content {
   min-width: 300px;
 }
 
-dialog.share, dialog.quickbox-transform {
-  min-width: 400px;
-}
-
 /* Small */
 @media (max-width: 568px) {
   body.full {
diff --git a/assets/static/js/main.js b/assets/static/js/main.js
index f6ff5e9..8b82292 100644
--- a/assets/static/js/main.js
+++ b/assets/static/js/main.js
@@ -194,7 +194,7 @@ document.addEventListener("DOMContentLoaded", function(event){
   });
 
   document.body.addEventListener("quickboxNoteClear", function(evt){
-    document.getElementById("quickbox-note").value = ''
+    document.getElementById("quickbox-notetext").value = ''
   });
 
   document.body.addEventListener("closeQuickboxTransformModal", function(evt){
diff --git a/assets/templates/base.tmpl b/assets/templates/base.tmpl
index ca3d7fb..31d435a 100644
--- a/assets/templates/base.tmpl
+++ b/assets/templates/base.tmpl
@@ -54,11 +54,9 @@
 
     <p style="clear: both"></p>
 
-    <footer>
-      <p style="text-align: center;">
-        <button id="modal-confirm-ok" class="delete">Delete</button>
-      </p>
-    </footer>
+    <div id="footer-navbar">
+          <button id="modal-confirm-ok" class="delete">Delete</button>
+    </div>
   </dialog>
 
     <div id="quickbox">
@@ -79,7 +77,7 @@
       <div id="quickbox-footer">
         <form method="POST">
             <div>
-              <div id="notetext"><textarea required name="Note"></textarea></div>
+              <div id="notetext"><textarea required name="Note" id="quickbox-notetext"></textarea></div>
               <div id="notesend"><button type="button" hx-validate="true" hx-post="/quickbox/add" hx-target="#quickbox-notes" hx-swap="beforeend"><i class='bi bi-caret-right-square-fill'></i></button></div>
             </div>
         </form>
diff --git a/assets/templates/items/all_list.tmpl b/assets/templates/items/all_list.tmpl
index 3ed552b..fb4a0c1 100644
--- a/assets/templates/items/all_list.tmpl
+++ b/assets/templates/items/all_list.tmpl
@@ -1,52 +1,23 @@
 {{define "itemsAll:list"}}
-<div
-  id="all_items_search"
-  class="hidden"
->
-<div class="w3-border w3-round-large w3-display-container panel-search">
-  <form
-    class="w3-container"
-    method="POST"
-    hx-post="/items"
-    hx-target="#items"
-  >
-    <input type="hidden" name="csrf_token" value="{{.CSRFToken}}" />
-    <div class="w3-row">
-      <div class="w3-third" style="padding-right: 4px">
+<div id="all_items_search" class="hidden">
+<div class=" panel-search">
+  <form method="POST" hx-post="/items" hx-target="#items">
+    <div class="row">
+      <div class="col s12 m6 l4" style="padding-right: 4px">
         <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=""/>
       </div>
-      <div class="w3-third" style="padding-right: 4px">
+      <div class="col s12 m6 l4" style="padding-right: 4px">
         <label for="item-title">Category</label>
-        <input
-          name="Category"
-          class=" w3-border"
-          id="item-category"
-          type="text"
-          value=""
-        />
+        <input name="Category" id="item-category" type="text" value=""/>
       </div>
-      <div class="w3-third" style="padding-left: 4px">
+      <div class="col s12 m6 l4" style="padding-left: 4px">
         <label for="item-tags">Tags</label>
-        <input
-          name="Keywords"
-          class=" w3-border"
-          id="item-tags"
-          type="text"
-          value=""
-        />
+        <input name="Keywords" id="item-tags" type="text" value=""/>
       </div>
     </div>
-    <div class="w3-bar" style="padding-top: 8px; padding-bottom: 8px">
-      <button type="submit" class="w3-btn w3-metro-dark-blue w3-round-large">
-        <i class="bi bi-search"></i> Find
-      </button>
+    <div class="bar" style="padding-top: 8px; padding-bottom: 8px">
+      <button type="submit" class="main"><i class="bi bi-search"></i> Find</button>
     </div>
   </form>
   </div>
diff --git a/assets/templates/items/all_list_rows.tmpl b/assets/templates/items/all_list_rows.tmpl
index 7738b18..2486d63 100644
--- a/assets/templates/items/all_list_rows.tmpl
+++ b/assets/templates/items/all_list_rows.tmpl
@@ -13,7 +13,7 @@
     {{ end }}
     >
     <td class="title no-label">
-      <a class="hide-small" href="/item/view/{{.Id}}" hx-get="/item/view/{{.Id}}" hx-target="#modal-container">{{.Title}}</a>
+      <a class="hide-small" href="/item/view/{{.Id}}" hx-get="/item/view/{{.Id}}" hx-target="body" hx-swap="beforeend">{{.Title}}</a>
       <a class="hide-medium hide-large" href="/item/read/{{.Id}}" hx-get="/item/read/{{.Id}}" hx-target="#page-content" hx-push-url="true"><i title="{{.Type_title}}" class="{{.Type_icon}}"></i> {{.Title}}</a>
     </td>
     <td data-label="Type" class="hide-small" nowrap="nowrap"><i class="{{.Type_icon}}"></i> {{.Type_title}}</td>
diff --git a/assets/templates/items/form.tmpl b/assets/templates/items/form.tmpl
index 1f932b4..56a537a 100644
--- a/assets/templates/items/form.tmpl
+++ b/assets/templates/items/form.tmpl
@@ -92,12 +92,11 @@
       <legend>Add items</legend>
       <div class="row">
           <div class="col l6 m9 s10">
-            <input id="search-item-relation" name="SearchText" type="text" value="" placeholder="Search" hx-get="/items/search-for-relations/{{.item.Id}}" hx-trigger="search-item-relation, keyup changed delay:1s" hx-vals="js:{SearchText: document.getElementById('search-item-relation').value}" hx-target="#items-list-for-relations"
-            />
+            <input id="search-item-relation" name="SearchText" type="text" value="" placeholder="Search" hx-get="/items/search-for-relations/{{.item.Id}}" hx-trigger="search-item-relation, keyup changed delay:1s" hx-vals="js:{SearchText: document.getElementById('search-item-relation').value}" hx-target="#items-list-for-relations"/>
           </div>
           <div class="col l6 m3 s1" style="padding-left: 10px;">
             <a class="button main" hx-vals="js:{SearchText: document.getElementById('search-item-relation').value}" hx-target="#items-list-for-relations" hx-get="/items/search-for-relations/{{.item.Id}}"><i class="bi bi-search"></i><span class="hide-small"> Find</span></a>
-            </div>
+          </div>
       </div>
       <div id="items-list-for-relations" style="margin-top:10px">
       </div>
@@ -113,7 +112,7 @@
       <a class="button delete" hx-delete="/item/delete/{{.item.Id}}"  hx-target="#page-content"  hx-trigger="confirmed"  onClick="bm_show_confirm_delete(this, 'Items', 'Delete this item ?')"  title="Delete"><i class="bi bi-trash"></i><span>Delete</span></a>
       <a class="button secondary" href="#" hx-target="body" hx-swap="beforeend" hx-get="/item/share/{{.item.Id}}" title="Share"><i class="bi bi-share-fill"></i><span>Share</span></a>
     {{ end }}
-      <a class="button secondary" hx-target="#page-content" hx-push-url="true" hx-get="/items/type/{{.item.Type_id}}"><i class="bi bi-arrow-left-circle"></i><span>Back</span></a>
+      <a class="button secondary" onclick="history.back()" ><i class="bi bi-arrow-left-circle"></i><span>Back</span></a>
     </div>
 </form>
 {{ end }}
diff --git a/assets/templates/items/list.tmpl b/assets/templates/items/list.tmpl
index 9789f22..7e56d57 100644
--- a/assets/templates/items/list.tmpl
+++ b/assets/templates/items/list.tmpl
@@ -1,50 +1,23 @@
 {{define "items:list"}}
-<div
-  id="items_search"
-  class="hidden"
->
-<div class="w3-border w3-round-large w3-display-container panel-search">
-  <form
-    class="w3-container"
-    method="POST"
-    hx-post="/items/type/{{.type.Id}}"
-    hx-target="#items"
-  >
-    <input type="hidden" name="csrf_token" value="{{.CSRFToken}}" />
-    <div class="w3-row">
-      <div class="w3-third" style="padding-right: 4px">
+<div  id="items_search" class="hidden">
+<div class="panel-search">
+  <form method="POST" hx-post="/items/type/{{.type.Id}}" hx-target="#items">
+    <div class="row">
+      <div class="col s12 m6 l4" style="padding-right: 4px">
         <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=""/>
       </div>
-      <div class="w3-third" style="padding-right: 4px">
+      <div class="col s12 m6 l4" style="padding-right: 4px">
         <label for="item-title">Category</label>
-        <input
-          name="Category"
-          class=" w3-border"
-          id="item-category"
-          type="text"
-          value=""
-        />
+        <input name="Category" id="item-category" type="text" value=""/>
       </div>
-      <div class="w3-third" style="padding-left: 4px">
+      <div class="col s12 m6 l4" style="padding-left: 4px">
         <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=""/>
       </div>
     </div>
     <div class="bar" style="padding-top: 8px; padding-bottom: 8px">
-      <button type="submit"><i class="bi bi-search"></i> Find</button>
+      <button type="submit" class="main"><i class="bi bi-search"></i> Find</button>
     </div>
   </form>
   </div>
diff --git a/assets/templates/items/list_rows.tmpl b/assets/templates/items/list_rows.tmpl
index 623927e..9fa1aec 100644
--- a/assets/templates/items/list_rows.tmpl
+++ b/assets/templates/items/list_rows.tmpl
@@ -13,7 +13,7 @@
     {{ end }}
     >
     <td class="title no-label" data-label="Title">
-      <a class="hide-small" href="/item/view/{{.Id}}" hx-get="/item/view/{{.Id}}" hx-target="#modal-container">{{.Title}}</a>
+      <a class="hide-small" href="/item/view/{{.Id}}" hx-get="/item/view/{{.Id}}" hx-target="body" hx-swap="beforeend">{{.Title}}</a>
       <a class="hide-medium hide-large" href="/item/read/{{.Id}}" hx-get="/item/read/{{.Id}}" hx-target="#page-content" hx-push-url="true">{{.Title}}</a>
     </td>
     <td data-label="Categories" class="no-label links-list">
diff --git a/assets/templates/items/read.tmpl b/assets/templates/items/read.tmpl
index 8ade496..7c5bf0d 100644
--- a/assets/templates/items/read.tmpl
+++ b/assets/templates/items/read.tmpl
@@ -49,5 +49,6 @@
 <div id="footer-navbar">
       <a class="button main" hx-get="/item/update/{{.item.Id}}" hx-push-url="true" hx-target="#page-content" title="Edit" href="/item/update/{{.item.Id}}"><i class="bi bi-pencil"></i></a>
       <a class="button main" hx-get="/item/share/{{.item.Id}}" hx-target="#modal-container" title="Share" href="#"><i class='bi bi-share-fill'></i></a>
+      <a class="button secondary" onclick="history.back()" ><i class="bi bi-arrow-left-circle"></i></a>
 </div>
 {{ end }}
diff --git a/assets/templates/items/share.tmpl b/assets/templates/items/share.tmpl
index 0d9ae9e..f2b32c2 100644
--- a/assets/templates/items/share.tmpl
+++ b/assets/templates/items/share.tmpl
@@ -61,9 +61,9 @@
               </div>
             </div>  
             </fieldset>
-            <footer>
-              <button type="submit" class="main" title="Share"><i class='bi bi-share-fill'></i> Share</button>
-            </footer>
+            <div id="footer-navbar">
+              <button type="submit" class="main" title="Share"><i class='bi bi-share-fill'></i><span>Share</span></button>
+            </div>
           </form>
     </div>
   </dialog>
diff --git a/assets/templates/items/view.tmpl b/assets/templates/items/view.tmpl
index 7f7007b..0d7faa1 100644
--- a/assets/templates/items/view.tmpl
+++ b/assets/templates/items/view.tmpl
@@ -44,7 +44,9 @@
             {{ 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 id="footer-navbar">
+          <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>
       </div>
   </dialog>
   {{ end }}
\ No newline at end of file
diff --git a/assets/templates/quickbox/add.tmpl b/assets/templates/quickbox/add.tmpl
index 901dc10..d59766a 100644
--- a/assets/templates/quickbox/add.tmpl
+++ b/assets/templates/quickbox/add.tmpl
@@ -1,9 +1,8 @@
 {{define "quickbox:add"}}
-<div id="quicknote-{{.quicknote.Id}}" class="w3-row w3-container w3-border w3-padding w3-round-large quickbox-row">
-  <div class="w3-col w3-right buttons">
-    <button class="w3-button w3-delete w3-small w3-border w3-round-large" hx-delete="/quickbox/delete/{{.quicknote.Id}}" hx-target="closest div.w3-row" hx-swap="outerHTML swap:1s" hx-trigger='confirmed' 
-        onClick="bm_show_confirm(this, 'Quickbox', 'Delete this note ?')"><i class="bi bi-dash-square"></i></button>
-    <button class="w3-button w3-edit w3-small w3-border w3-round-large" hx-target="#modal-container" hx-get="/quickbox/transform/{{.quicknote.Id}}"><i class='bi bi-arrow-up-left-circle-fill'></i></button>
+<div id="quicknote-{{.quicknote.Id}}" class="quickbox-row">
+  <div class="buttons">
+    <button class="button" hx-delete="/quickbox/delete/{{.quicknote.Id}}" hx-target="closest div.quickbox-row" hx-swap="outerHTML swap:1s" hx-trigger='confirmed' onClick="bm_show_confirm_delete(this, 'Quickbox', 'Delete this note ?')"><i class="bi bi-dash-square"></i></button>
+    <button class="button" hx-target="body" hx-swap="beforeend" hx-get="/quickbox/transform/{{.quicknote.Id}}"><i class='bi bi-arrow-up-left-circle-fill'></i></button>
   </div>
   <div class="w3-rest">{{.quicknote.Note_rendered | safeHTML}}</div>
 </div>
diff --git a/assets/templates/quickbox/list.tmpl b/assets/templates/quickbox/list.tmpl
index 9c4e9ae..e165fb1 100644
--- a/assets/templates/quickbox/list.tmpl
+++ b/assets/templates/quickbox/list.tmpl
@@ -11,7 +11,7 @@ hx-get="/quickbox/all?offset={{ $offset }}" hx-trigger="intersect once" hx-swap=
 {{ end }}>
   <div class="buttons">
     <button class="button" hx-delete="/quickbox/delete/{{.Id}}" hx-target="closest div.quickbox-row" hx-swap="outerHTML swap:1s" hx-trigger='confirmed' onClick="bm_show_confirm_delete(this, 'Quickbox', 'Delete this note ?')"><i class="bi bi-dash-square"></i></button>
-    <button class="button" href="#" hx-target="body" hx-swap="beforeend" hx-get="/quickbox/transform/{{.Id}}"><i class='bi bi-arrow-up-left-circle-fill'></i></button>
+    <button class="button" hx-target="body" hx-swap="beforeend" hx-get="/quickbox/transform/{{.Id}}"><i class='bi bi-arrow-up-left-circle-fill'></i></button>
   </div>
   <div class="note">{{.Note_rendered | safeHTML}}</div>
 </div>
diff --git a/assets/templates/quickbox/transform.tmpl b/assets/templates/quickbox/transform.tmpl
index f2e0102..e6cf30e 100644
--- a/assets/templates/quickbox/transform.tmpl
+++ b/assets/templates/quickbox/transform.tmpl
@@ -5,33 +5,33 @@
     <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;">
+      <div style="overflow: auto;">
       <p>
         <label for="item-title">Title</label>
         <input name="Title" id="item-title" type="text" value=""/>
       </p>
-      <div class="w3-row">
-        <div class="w3-half" style="padding-right: 4px">
+      <div class="row">
+        <div class="col s12 m6" style="padding-right: 4px">
           <p>
-            {{ widget_select "Type_id" "Type" 0 .types `class=" w3-border"` }}
+            {{ widget_select "Type_id" "Type" 0 .types `` }}
           </p>
         </div>
-        <div class="w3-half" style="padding-left: 4px">
+        <div class="col s12 m6" style="padding-left: 4px">
           <p>
-            {{ widget_checkboxes "Notebooks" "Notebooks" "" .notebooks `class=""` }}
+            {{ widget_checkboxes "Notebooks" "Notebooks" "" .notebooks `` }}
           </p>
         </div>
       </div>
-      <div class="w3-row">
-        <div class="w3-half" style="padding-right: 4px">
+      <div class="row">
+        <div class="col s12 m6" style="padding-right: 4px">
           <p>
             <label for="item-tags">Tags</label>
             <input name="Tags" id="item-tags" type="text" value=""/>
           </p>
         </div>
-        <div class="w3-half" style="padding-left: 4px">
+        <div class="col s12 m6" style="padding-left: 4px">
           <p>
-            {{ widget_select "Categories" "Categories" "" .categories `multiple="true" class=" w3-border"` }}
+            {{ widget_select "Categories" "Categories" "" .categories `multiple="true"` }}
           </p>
         </div>
       </div>
@@ -41,20 +41,15 @@
       </p>
       <p>
         <label class="switch">
-          <input
-            class=""
-            name="Keep_in_quickbox"
-            type="checkbox"
-            value="1"
-          />
-          <span class="slider round"></span> </label
-        ><span class="label-checkbox">Keep in Quickbox</span>
+          <input name="Keep_in_quickbox" type="checkbox" value="1"/>
+          <span class="slider round"></span>
+        </label>
+        <span class="label-checkbox">Keep in Quickbox</span>
       </p>
-      <p class="hide-small w3-container" style="text-align: center;">
+      <footer>
           <button class="main"><i class="bi bi-arrow-up-left-circle-fill" title="Transform"></i> Transform</button>
-      </p>
+      </footer>
       </div>
-
     </form>
 </dialog>
 {{ end }}
diff --git a/internal/funcs/funcs.go b/internal/funcs/funcs.go
index 743b20f..e9faa59 100644
--- a/internal/funcs/funcs.go
+++ b/internal/funcs/funcs.go
@@ -355,7 +355,7 @@ func widget_select(name string, label string, value any, options []WidgetOption,
 }
 
 func widget_slim_select(name string, label string, value any, options []WidgetOption, attributes string) template.HTML {
-	return render_select(name, label, value, options, attributes, "slim-select w3-border")
+	return render_select(name, label, value, options, attributes, "slim-select")
 }
 
 func render_select(name string, label string, value any, options []WidgetOption, attributes string, classes string) template.HTML {