CSS rework

assets/static/css/main.css

@@ -263,14 +263,10 @@ button:hover, .button:hover {
   box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 }
 
-button {
+button, .button {
   padding: 8px 16px;
 }
 
-.button {
-  padding: 10px 18px;
-}
-
 button.main, .button.main {
   background-color: var(--primary-color);
   color: #ffffff;
@@ -373,6 +369,10 @@ input[type='text']{
   padding-left: 16px
 }
 
+th.operations, td.operations {
+  float:right;
+}
+
 .card {
   box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12)
 }
@@ -509,8 +509,8 @@ input[type='text']{
 }
 
 #page-title {
-  padding: 4px 4px;
   font-size: 1.4rem;
+  float: left;
 }
 
 #page-title-title {
@@ -522,11 +522,6 @@ input[type='text']{
   float: right;
 }
 
-#top-toolbar .button, #top-toolbar button {
-  padding-top: 0px;
-  padding-bottom: 0px;
-}
-
 #search-bar {
   float: right;
 }
@@ -660,7 +655,7 @@ input[type='text']{
 }
 
 .bar .bar-item {
-  padding: 6px 16px;
+  padding: 6px 8px;
   float: left;
   width: auto;
   border: none;
@@ -787,13 +782,19 @@ input[type='text']{
 
 #quickbox-title {
   float: left;
-  margin-left: 8px;
+  font-weight: bold;
-  margin-top: 10px;
+  width:100%;
+}
+
+#quickbox-title-title {
+  float: left;
+  font-size: 1.4rem;
 }
 
 #quickbox-close {
   float: right;
-  margin-top: 4px;
+  padding-top:0;
+  padding-bottom:0;
 }
 
 #quickbox-top-bar {
@@ -801,15 +802,24 @@ input[type='text']{
   background-color: var(--primary-color);
   height: var(--quickbox-topbar-height);
   font-size: 18px;
+  display: flex;
+  align-items: center;
+}
+
+#quickbox-top-bar .logo {
+  float: left;
+  margin-left: 8px;
 }
 
 #quickbox-footer {
   height: var(--quickbox-footer-height);
-  position:fixed; bottom:0;
+  position:fixed;
+  bottom:0;
+  background-color: #999999;
 }
 
 #quickbox-content {
-  height: calc(100vh - var(--quickbox-footer-height));
+  height: calc(100vh - var(--quickbox-footer-height) - var(--quickbox-topbar-height));
   overflow: auto;
   display: flex;
   flex-direction: column-reverse;
@@ -861,18 +871,31 @@ input[type='text']{
   padding: 2px;
 }
 
-#quickbox-footer .button {
+#quickbox-footer:after, #quickbox-footer:before {
-  width: 50px;
+  content: "";
-  margin-left: 4px;
+  display: table;
+  clear: both;
 }
 
-#quickbox-send {
+#notesend {
+  width: 50px;
+  float: right;
+}
+
+#notesend button {
   cursor: pointer;
   padding: 14px 16px;
 }
 
-#quickbox-footer .textarea {
+#notetext {
   padding-right: 4px;
+  overflow: hidden;
+  display: block;
+}
+
+#notetext textarea {
+  resize: none;
+  padding: 0px;
 }
 
 .quickbox-row {
@@ -900,6 +923,15 @@ input[type='text']{
 
 /* Small */
 @media (max-width: 568px) {
+  #page-title-container {
+    display: flex;
+    align-items: center;
+  }
+
+  #page-title {
+    width: 100%;
+  }
+
   .table-all.responsive table,
   .table-all.responsive thead,
   .table-all.responsive tbody,
@@ -975,6 +1007,7 @@ input[type='text']{
   #quickbox-top-bar {
     position: relative;
   }
+
   #quickbox-footer {
     position: relative;
   }
@@ -1124,4 +1157,8 @@ input[type='text']{
   #page-top-bar {
     padding-right: 300px;
   }
+
+  #quickbox-title-title {
+    padding-left: 16px;
+  }
 }

assets/templates/base.tmpl

@@ -51,7 +51,7 @@
     <div id="modal-confirm-dialog" class="modal" style="display: none;">
       <div id="modal-confirm-dialog-content" class="modal-content w3-round-large w3-padding w3-animate-top">
           <header class="w3-container">
-              <span _="on click hide #modal-confirm-dialog" class="w3-button w3-small w3-round-large w3-display-topright" style="margin-top: 2px; margin-right: 8px; padding: 8px;"><i class='bi bi-x-circle-fill'></i></span>
+              <span _="on click hide #modal-confirm-dialog"  style="margin-top: 2px; margin-right: 8px; padding: 8px;"><i class='bi bi-x-circle-fill'></i></span>
               <h5></h5>
             </header>
             <div class="w3-container">
@@ -69,12 +69,12 @@
 
     <div id="quickbox">
       <div class="noswipe" id="quickbox-top-bar">
-          <button type="button" class="w3-bar-item w3-button hide-large w3-hover-none w3-hover-text-light-grey"  onclick="bm_toggle_sidebar('main-sidebar');" style="padding-left: 4px; padding-right: 10px;">
+          <a class="hide-large logo"  onclick="bm_toggle_sidebar('main-sidebar');" style="float: left; padding-right: 10px;">
             <img alt="BrainMinder" src="/static/img/brainminder.svg" style="height: 32px;">
-          </button>
+          </a>
-            <div id="quickbox-title">Quickbox</div>
+        <div id="quickbox-title">
-            <div id="quickbox-close">
+          <div id="quickbox-title-title"><h5>Quickbox</h5></div>
-              <button class="button" onclick="bm_hide_quickbox()"><i class="bi bi-x-circle-fill" style="margin-top: 4px;"></i></button>
+            <div id="quickbox-close"><button onclick="bm_hide_quickbox()"><i class="bi bi-x-circle-fill"></i></button></div>
         </div>
       </div>
 
@@ -85,8 +85,8 @@
       <div id="quickbox-footer" class="bar">
         <form method="POST">
             <div class="row">
-              <div class="col w3-right button"><button type="button" hx-validate="true" hx-post="/quickbox/add" hx-target="#quickbox-notes" hx-swap="beforeend" class="bar-item w3-right w3-round-large" id="quickbox-send"><i class='bi bi-caret-right-square-fill' style="margin-top: 4px;"></i></button></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 class="rest textarea"><textarea required class=" w3-border w3-round-large" id="quickbox-note" style="resize: none;" name="Note"></textarea></div>
+              <div id="notetext"><textarea required name="Note"></textarea></div>
             </div>
         </form>
       </div>

assets/templates/items/all_list.tmpl

@@ -59,12 +59,8 @@
         <th>Type</th>
         <th>Categories</th>
         <th>Tags</th>
-        <th class="w3-right-align">
+        <th class="operations">
-          <a
+          <a class="button" href="#" onclick="bm_toggle_visibility_list_search('all_items_search'); return false;"><i class="bi bi-search"></i></a>
-            class="w3-button w3-small w3-border w3-round-large"
-            href="#"
-            onclick="bm_toggle_visibility_list_search('all_items_search'); return false;"><i class="bi bi-search"></i
-          ></a>
         </th>
       </tr>
     </thead>

assets/templates/items/all_list_rows.tmpl

@@ -13,21 +13,8 @@
     {{ end }}
     >
     <td class="title no-label">
-      <a
+      <a class="hide-small" href="/item/view/{{.Id}}" hx-get="/item/view/{{.Id}}" hx-target="#modal-container">{{.Title}}</a>
-      class="hide-small"
+      <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>
-      href="/item/view/{{.Id}}"
-      hx-get="/item/view/{{.Id}}"
-      hx-target="#modal-container"
-        >{{.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>
     <td data-label="Categories" class="no-label links-list">
@@ -43,12 +30,11 @@
       {{ if gt (len .Tags) 0 }}
       <i class="hide-medium hide-large bi bi-tags"></i>
       {{ range (stringToArray .Tags ",")}}
-      <a hx-post="/items" hx-target="#page-content" 
+      <a hx-post="/items" hx-target="#page-content" hx-push-url="true" href="#" hx-vals="{&quot;Tags&quot; : &quot;{{.}}&quot;}">{{ . }}</a>
-      hx-push-url="true" href="#" hx-vals="{&quot;Tags&quot; : &quot;{{.}}&quot;}">{{ . }}</a>
       {{ end }}
       {{ end }}
     </td>
-    <td data-label="" class="w3-right-align" nowrap="nowrap">
+    <td data-label="" class="operations" nowrap="nowrap">
       
       {{ if eq .On_dashboard 1}}
         {{ template "item:remove_from_dashboard" .Id }}
@@ -56,33 +42,9 @@
         {{ template "item:add_to_dashboard" .Id }}
       {{ end }}
 
-      <button
+      <button hx-target="#modal-container" hx-get="/item/share/{{.Id}}" title="Share"><i class='bi bi-share'></i></button>
-      class="w3-button w3-edit w3-small w3-border w3-round-large"
+      <button hx-get="/item/update/{{.Id}}" hx-push-url="true" hx-target="#page-content" title="Edit"><i class="bi bi-pencil"></i></button>
-      hx-target="#modal-container"
+      <button hx-delete="/item/delete/{{.Id}}" hx-target="closest tr" hx-swap="outerHTML swap:1s" hx-trigger="confirmed" onClick="bm_show_confirm(this, 'Items', 'Delete this item ?')" title="Delete"><i class="bi bi-trash"></i></button>
-      hx-get="/item/share/{{.Id}}"
-      title="Share">
-      <i class='bi bi-share'></i>
-      </button>
-
-      <button
-        class="w3-button w3-edit w3-small w3-border w3-round-large"
-        hx-get="/item/update/{{.Id}}"
-        hx-push-url="true"
-        hx-target="#page-content"
-        title="Edit">
-        <i class="bi bi-pencil"></i>
-      </button>
-      
-      <button
-        class="w3-button w3-delete w3-small w3-border w3-round-large"
-        hx-delete="/item/delete/{{.Id}}"
-        hx-target="closest tr"
-        hx-swap="outerHTML swap:1s"
-        hx-trigger="confirmed"
-        onClick="bm_show_confirm(this, 'Items', 'Delete this item ?')"
-        title="Delete">
-        <i class="bi bi-trash"></i>
-      </button>
     </td>
   </tr>
   {{ end }}

assets/templates/items/list.tmpl

@@ -43,10 +43,8 @@
         />
       </div>
     </div>
-    <div class="w3-bar" style="padding-top: 8px; padding-bottom: 8px">
+    <div class="bar" style="padding-top: 8px; padding-bottom: 8px">
-      <button type="submit" class="w3-btn w3-metro-dark-blue w3-round-large">
+      <button type="submit"><i class="bi bi-search"></i> Find</button>
-        <i class="bi bi-search"></i> Find
-      </button>
     </div>
   </form>
   </div>
@@ -61,19 +59,9 @@
         {{ range .Fields}}
         <th>{{.Title}}</th>
         {{end}}
-        <th class="w3-right-align" nowrap="nowrap">
+        <th class="operations" nowrap="nowrap">
-          <a
+          <a class="button" hx-get="/item/create/{{.type.Id}}" hx-push-url="true" hx-target="#page-content"><i class="bi bi-plus-circle"></i></a>
-            class="w3-button w3-small w3-border w3-round-large w3-metro-dark-blue"
+          <a class="button" href="#" onclick="bm_toggle_visibility_list_search('items_search'); return false;"><i class="bi bi-search"></i></a>
-            hx-get="/item/create/{{.type.Id}}"
-            hx-push-url="true"
-            hx-target="#page-content"
-            ><i class="bi bi-plus-circle"></i
-          ></a>
-          <a
-            class="w3-button w3-small w3-border w3-round-large"
-            href="#"
-            onclick="bm_toggle_visibility_list_search('items_search'); return false;"><i class="bi bi-search"></i
-          ></a>
         </th>
       </tr>
     </thead>

assets/templates/items/list_rows.tmpl

@@ -13,21 +13,8 @@
     {{ end }}
     >
     <td class="title no-label" data-label="Title">
-      <a
+      <a class="hide-small" href="/item/view/{{.Id}}" hx-get="/item/view/{{.Id}}" hx-target="#modal-container">{{.Title}}</a>
-      class="hide-small"
+      <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>
-      href="/item/view/{{.Id}}"
-      hx-get="/item/view/{{.Id}}"
-      hx-target="#modal-container"
-        >{{.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">
       {{ if gt (len .Categories) 0 }}
@@ -42,8 +29,7 @@
       {{ if gt (len .Tags) 0 }}
       <i class="hide-medium hide-large bi bi-tags"></i>
       {{ range (stringToArray .Tags ",")}}
-      <a hx-post="/items/type/{{$.type.Id}}" hx-target="#page-content" 
+      <a hx-post="/items/type/{{$.type.Id}}" hx-target="#page-content" hx-push-url="true" href="#" hx-vals="{&quot;Tags&quot; : &quot;{{.}}&quot;}">{{ . }}</a>
-      hx-push-url="true" href="#" hx-vals="{&quot;Tags&quot; : &quot;{{.}}&quot;}">{{ . }}</a>
       {{ end }}
       {{ end }}
     </td>
@@ -56,7 +42,7 @@
       {{ end }}
     </td>
     {{end}}
-    <td data-label="" class="w3-right-align" nowrap="nowrap">
+    <td data-label="" class="operations" nowrap="nowrap">
       
       {{ if eq .On_dashboard 1}}
         {{ template "item:remove_from_dashboard" .Id }}
@@ -64,34 +50,9 @@
         {{ template "item:add_to_dashboard" .Id }}
       {{ end }}
 
-      <button
+      <button hx-target="#modal-container" hx-get="/item/share/{{.Id}}" title="Share"><i class='bi bi-share-fill'></i></button>
-      class="w3-button w3-edit w3-small w3-border w3-round-large"
+      <button hx-get="/item/update/{{.Id}}" hx-push-url="true" hx-target="#page-content" title="Edit"><i class="bi bi-pencil"></i></button>
-      hx-target="#modal-container"
+      <button hx-delete="/item/delete/{{.Id}}" hx-target="closest tr" hx-swap="outerHTML swap:1s" hx-trigger="confirmed" onClick="bm_show_confirm(this, 'Items', 'Delete this item ?')" title="Delete"><i class="bi bi-trash"></i></button>
-      hx-get="/item/share/{{.Id}}"
-      title="Share">
-      <i class='bi bi-share-fill'></i>
-      </button>
-      
-      <button
-        class="w3-button w3-edit w3-small w3-border w3-round-large"
-        hx-get="/item/update/{{.Id}}"
-        hx-push-url="true"
-        hx-target="#page-content"
-        title="Edit">
-        <i class="bi bi-pencil"></i>
-      </button>
-
-      <button
-        class="w3-button w3-delete w3-small w3-border w3-round-large"
-        hx-delete="/item/delete/{{.Id}}"
-        hx-target="closest tr"
-        hx-swap="outerHTML swap:1s"
-        hx-trigger="confirmed"
-        onClick="bm_show_confirm(this, 'Items', 'Delete this item ?')"
-        title="Delete">
-        <i class="bi bi-trash"></i>
-      </button>
-      
     </td>
   </tr>
   {{ end }}