From 6747ae91a8e9459f02a506595e18beb2841ff787 Mon Sep 17 00:00:00 2001
From: roberto <roberto@speedtech.it>
Date: Thu, 26 Dec 2024 21:09:09 +0100
Subject: [PATCH] UI changes

---
 assets/static/css/main.css                    | 77 ++++++++++++++++++-
 assets/static/js/serviceWorker.js             |  2 +-
 .../templates/items/list_for_relations.tmpl   | 12 +--
 assets/templates/items/relations.tmpl         | 31 ++------
 assets/templates/types/field_new.tmpl         | 14 +---
 assets/templates/types/fields.tmpl            | 19 ++---
 assets/templates/types/form.tmpl              | 22 ++----
 7 files changed, 103 insertions(+), 74 deletions(-)

diff --git a/assets/static/css/main.css b/assets/static/css/main.css
index ba70c7c..9878cd5 100644
--- a/assets/static/css/main.css
+++ b/assets/static/css/main.css
@@ -46,10 +46,81 @@
 */
 
 /* Reset */
-*, *::before, *::after {
+
+/* Box sizing rules */
+*,
+*::before,
+*::after {
   box-sizing: border-box;
 }
 
+/* Prevent font size inflation */
+html {
+  -moz-text-size-adjust: none;
+  -webkit-text-size-adjust: none;
+  text-size-adjust: none;
+}
+
+/* Remove default margin in favour of better control in authored CSS */
+body, h1, h2, h3, h4, p,
+figure, blockquote, dl, dd {
+  margin-block-end: 0;
+}
+
+/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
+ul[role='list'],
+ol[role='list'] {
+  list-style: none;
+}
+
+/* Set core body defaults */
+body {
+  min-height: 100vh;
+  line-height: 1.5;
+}
+
+/* Set shorter line heights on headings and interactive elements */
+h1, h2, h3, h4,
+input, label {
+  line-height: 1.1;
+}
+
+/* Balance text wrapping on headings */
+h1, h2,
+h3, h4 {
+  text-wrap: balance;
+}
+
+/* A elements that don't have a class get default styles */
+a:not([class]) {
+  text-decoration-skip-ink: auto;
+  color: currentColor;
+}
+
+/* Make images easier to work with */
+img,
+picture {
+  max-width: 100%;
+  display: block;
+}
+
+/* Inherit fonts for inputs and buttons */
+input, button,
+textarea, select {
+  font-family: inherit;
+  font-size: inherit;
+}
+
+/* Make sure textareas without a rows attribute are not tiny */
+/*textarea:not([rows]) {
+  min-height: 10em;
+}*/
+
+/* Anything that has been anchored to should have extra scroll margin */
+:target {
+  scroll-margin-block: 5ex;
+}
+
 h1,h2,h3,h4,h5,h6, form {
   margin: 0;
   padding: 0;
@@ -228,6 +299,7 @@ button, .button {
   user-select: none;
   font-size: 0.9rem;
   border-radius: 8px;
+  line-height: 1.2rem;
 }
 
 button:hover, .button:hover {
@@ -1171,6 +1243,9 @@ dialog .content h5 {
   .col.half {
     width: 49.99999%;
   }
+  .col.m6, .col.half:first-child {
+    padding-right:10px;
+  }
 }
 
 @media (max-width:993px) and (min-width:768px) {
diff --git a/assets/static/js/serviceWorker.js b/assets/static/js/serviceWorker.js
index 6213938..92b92a6 100644
--- a/assets/static/js/serviceWorker.js
+++ b/assets/static/js/serviceWorker.js
@@ -1,4 +1,4 @@
-const cacheVersion = "0.282"
+const cacheVersion = "0.283"
 const cacheName = "speedtech-brainminder"
 const cacheFiles = [
     '/static/bootstrap-icons/font/bootstrap-icons.min.css',
diff --git a/assets/templates/items/list_for_relations.tmpl b/assets/templates/items/list_for_relations.tmpl
index 1072ae8..985f7cf 100644
--- a/assets/templates/items/list_for_relations.tmpl
+++ b/assets/templates/items/list_for_relations.tmpl
@@ -42,17 +42,7 @@
       {{ end }}
     </td>
     <td class="no-label">
-      <div class="w3-bar">
-      <a
-          class="w3-right w3-btn w3-metro-dark-blue w3-round-large"
-          href="#"
-          hx-on::before-request=" if(document.getElementById('ItemRelation-New-{{.Id}}-Row') != null) {event.preventDefault()}"
-          hx-get="/item/relation/add/{{.Id}}"
-          hx-target="#relations-items"
-          hx-swap="beforeend"
-          ><i class="bi bi-link" title="Add relation"></i><span class="hide-small"> Add</span></a
-        >
-        </div>
+      <a class="button secondary" href="#" hx-on::before-request="if(document.getElementById('ItemRelation-New-{{.Id}}-Row') != null) {event.preventDefault()}" hx-get="/item/relation/add/{{.Id}}" hx-target="#relations-items" hx-swap="beforeend"><i class="bi bi-link" title="Add relation"></i><span> Add</span></a>
     </td>
   </tr>
   {{ end }}
diff --git a/assets/templates/items/relations.tmpl b/assets/templates/items/relations.tmpl
index 46ffcb4..1935ad4 100644
--- a/assets/templates/items/relations.tmpl
+++ b/assets/templates/items/relations.tmpl
@@ -1,5 +1,5 @@
 {{define "item:relations"}}
-<table class="table-all w3-striped responsive">
+<table class="table-all striped responsive">
   <thead>
     <tr>
       <th>Item</th>
@@ -25,25 +25,15 @@
           {{ $relation_type = "Parent" }}
         {{ end }}
       {{ end }}
-    <a
-    href="/item/view/{{$target_id}}"
-    hx-get="/item/view/{{$target_id}}"
-    hx-target="#modal-container"
-      ><i class="{{.Type_icon}}" title="{{.Type_title}}"></i> {{.Title}}</a
-    >
-    <input
-      type="hidden"
-      id="{{$relation_name_remove}}"
-      name="{{$relation_name_remove}}"
-      value=""
-    />    
+    <a href="/item/view/{{$target_id}}" hx-get="/item/view/{{$target_id}}" hx-target="#modal-container"><i class="{{.Type_icon}}" title="{{.Type_title}}"></i> {{.Title}}</a>
+    <input type="hidden" id="{{$relation_name_remove}}" name="{{$relation_name_remove}}" value=""/>
     </td>
     <td class="no-label {{$relation_name}}-Col">
       {{ if gt (len .Categories) 0 }}
         <i class="hide-medium hide-large bi bi-tags-fill"></i>
         {{ range (stringToArray .Categories "|")}}
           {{ $category_name := index $.categoriesMap .}}
-          <div class="tag" style="padding: 3px">class="w3-button w3-round-large w3-hover-metro-dark-blue w3-medium"
+          <div class="tag" style="padding: 3px">
             {{ $category_name }}
           </div>
         {{ end }}
@@ -61,20 +51,13 @@
     </td>
     <td class="no-label {{$relation_name}}-Col">{{ widget_relation_type $relation_name $relation_type `id="$relation_name" class=" w3-border"` }}</td>
     <td class="no-label">
-      <div class="w3-bar">
-        <button
-          id="Delete-{{$relation_name}}"
-          class="w3-right w3-btn w3-metro-dark-red w3-round-large"
-          type="button"
+      <div class="bar">
+        <button id="Delete-{{$relation_name}}" class="delete" type="button"
           _="on click set {value: '1'} on #{{$relation_name_remove}} then hide me then show #Undelete-{{$relation_name}} then add .w3-opacity-max to .{{$relation_name}}-Col"
         >
           <i class="bi bi-x-square" title="Remove"></i><span class="hide-small"> Remove</span>
         </button>
-        <button
-          id="Undelete-{{$relation_name}}"
-          style="margin-right: 5px; display: none"
-          class="w3-right w3-btn w3-metro-blue w3-round-large"
-          type="button"
+        <button id="Undelete-{{$relation_name}}" style="margin-right: 5px; display: none" class="delete" type="button"
           _="on click set {value: ''} on #{{$relation_name_remove}} then hide me then show #Delete-{{$relation_name}} then remove .w3-opacity-max from .{{$relation_name}}-Col"
         >
           <i class="bi bi-arrow-counterclockwise" title="Undo"></i><span class="hide-small"> Undo</span>
diff --git a/assets/templates/types/field_new.tmpl b/assets/templates/types/field_new.tmpl
index ccd17e2..c274990 100644
--- a/assets/templates/types/field_new.tmpl
+++ b/assets/templates/types/field_new.tmpl
@@ -21,18 +21,12 @@
   </div>
 
   <div class="row">
-    <p>
-      {{ widget_checkbox "Fields-New-{{.counter}}-Show_on_list" "Show on list" "1" .Show_on_list }}
-    </p>
-    <p>
-      {{ widget_checkbox "Fields-New-{{.counter}}-Show_on_view" "Show on view" "1" .Show_on_view }}
-    </p>
-    <p>
-      {{ widget_checkbox "Fields-New-{{.counter}}-Is_multiple" "Multiple" "1" .Is_multiple }}
-    </p>
+    <p>{{ widget_checkbox "Fields-New-{{.counter}}-Show_on_list" "Show on list" "1" .Show_on_list }}</p>
+    <p>{{ widget_checkbox "Fields-New-{{.counter}}-Show_on_view" "Show on view" "1" .Show_on_view }}</p>
+    <p>{{ widget_checkbox "Fields-New-{{.counter}}-Is_multiple" "Multiple" "1" .Is_multiple }}</p>
   </div>
   <div class="bar">
-    <button type="button" onclick="document.getElementById('field-new-{{.counter}}').remove()" class="delete"><i class="bi bi-file-minus" title="Remove"></i><span class="hide-small"> Remove</span></button>
+    <button type="button" style="float:right; margin-right: 5px;" onclick="document.getElementById('field-new-{{.counter}}').remove()" class="delete"><i class="bi bi-file-minus" title="Remove"></i><span class="hide-small"> Remove</span></button>
   </div>
 </div>
 {{ end }}
diff --git a/assets/templates/types/fields.tmpl b/assets/templates/types/fields.tmpl
index 0c45c80..88b858f 100644
--- a/assets/templates/types/fields.tmpl
+++ b/assets/templates/types/fields.tmpl
@@ -22,22 +22,15 @@
       </div>
     </div>
 
-    <div class="row">
-        <p>
-          {{ widget_checkbox "Fields-{{.Type_field_id}}-Show_on_list" "Show on list" "1" .Show_on_list }}
-        </p>
-        <p>
-          {{ widget_checkbox "Fields-{{.Type_field_id}}-Show_on_view" "Show on view" "1" .Show_on_view }}
-        </p>
-        <p>
-          {{ widget_checkbox "Fields-{{.Type_field_id}}-Is_multiple" "Multiple" "1" .Is_multiple }}
-        </p>
-    </div>
+    <p>{{ widget_checkbox "Fields-{{.Type_field_id}}-Show_on_list" "Show on list" "1" .Show_on_list }}</p>
+    <p>{{ widget_checkbox "Fields-{{.Type_field_id}}-Show_on_view" "Show on view" "1" .Show_on_view }}</p>
+    <p>{{ widget_checkbox "Fields-{{.Type_field_id}}-Is_multiple" "Multiple" "1" .Is_multiple }}</p>
+
     <input type="hidden" id="Fields-{{.Type_field_id}}-ToRemove" name="Fields-{{.Type_field_id}}-ToRemove" value=""/>
   </div>
   <div class="bar">
-    <button id="Delete-{{.Type_field_id}}" type="button" class="delete" onclick="bm_type_field_delete(this, '{{.Type_field_id}}')"><i class="bi bi-file-minus" title="Remove"></i><span class="hide-small"> Remove</span></button>
-    <button id="Undelete-{{.Type_field_id}}" style="margin-right: 5px;" hidden type="button" class="delete" onclick="bm_type_field_undelete(this, '{{.Type_field_id}}')"><i class="bi bi-arrow-counterclockwise" title="Undo"></i><span class="hide-small"> Undo</span></button>
+    <button id="Delete-{{.Type_field_id}}" type="button" style="float:right; margin-right: 5px;" class="delete" onclick="bm_type_field_delete(this, '{{.Type_field_id}}')"><i class="bi bi-file-minus" title="Remove"></i><span class="hide-small"> Remove</span></button>
+    <button id="Undelete-{{.Type_field_id}}" style="float:right; margin-right: 5px;" hidden type="button" class="delete" onclick="bm_type_field_undelete(this, '{{.Type_field_id}}')"><i class="bi bi-arrow-counterclockwise" title="Undo"></i><span class="hide-small"> Undo</span></button>
   </div>
 </div>
 {{ end }}
diff --git a/assets/templates/types/form.tmpl b/assets/templates/types/form.tmpl
index ca550c1..a1967c0 100644
--- a/assets/templates/types/form.tmpl
+++ b/assets/templates/types/form.tmpl
@@ -8,7 +8,7 @@
 
   <div class="tab" id="general" style="display: block">
     <div class="row">
-      <div class="half">
+      <div class="col half">
         <p>
           <label for="type-title">Title</label>
           <input name="Title" id="type-title" type="text" value="{{.type.Title}}"/>
@@ -18,10 +18,8 @@
           <input name="Icon" id="type-icon" type="text" value="{{.type.Icon}}"/>
         </p>
       </div>
-      <div class="half">
-        <p>
-        {{ widget_checkboxes "Notebooks" "Notebooks" .type.Notebooks .notebooks `class=""` }}
-        </p>
+      <div class="col half">
+        <p>{{ widget_checkboxes "Notebooks" "Notebooks" .type.Notebooks .notebooks `class=""` }}</p>
       </div>
     </div>
 
@@ -30,22 +28,18 @@
       <textarea name="Description" id="type-description" rows="5">{{.type.Description}}</textarea>
     </p>
 
-    <p>
-      {{ widget_checkbox "Show_summary" "Show summary" "1" .type.Show_summary }}
-    </p>
+    <p>{{ widget_checkbox "Show_summary" "Show summary" "1" .type.Show_summary }}</p>
 
-    <p>
-      {{ widget_checkbox "Show_description" "Show description" "1" .type.Show_description }}
-    </p>
+    <p>{{ widget_checkbox "Show_description" "Show description" "1" .type.Show_description }}</p>
   </div>
 
   <div class="tab" id="fields" style="display: none">
     <div id="fields-list" style="margin-bottom: 10px">
       {{ template "types:fields" (map "fields" .type.Fields "widgets" $.widgets "uisections" $.uisections)}}
     </div>
-      <div class="w3-bar" style="margin-top: 10px;">
-        <a class="button main" hx-get="/type/field-new" hx-target="#fields-list" hx-swap="beforeend" href="#" hx-vals="js:{counter: document.getElementById(&quot;fields-list&quot;).childElementCount + 1}"><i class="bi bi-file-plus" title="Add field"></i><span class="hide-small"> Add field</span></a>
-      </div>
+    <div class="bar">
+      <a class="button main" style="float:right; margin-top: 10px;" hx-get="/type/field-new" hx-target="#fields-list" hx-swap="beforeend" href="#" hx-vals="js:{counter: document.getElementById(&quot;fields-list&quot;).childElementCount + 1}"><i class="bi bi-file-plus" title="Add field"></i><span class="hide-small"> Add field</span></a>
+    </div>
   </div>
 
 </div>