From fe590e4d9ec5184249f8a9c3bf99eeb07a4aadb0 Mon Sep 17 00:00:00 2001
From: roberto <roberto@speedtech.it>
Date: Wed, 1 Jan 2025 17:30:11 +0100
Subject: [PATCH] UI fixes

---
 assets/static/css/main.css                    | 398 +++++++++---------
 assets/templates/base.tmpl                    |   2 +-
 assets/templates/categories/create_title.tmpl |   2 +-
 assets/templates/categories/list_title.tmpl   |   2 +-
 assets/templates/categories/update_title.tmpl |   2 +-
 assets/templates/items/all_list_rows.tmpl     |   4 +-
 assets/templates/items/all_list_title.tmpl    |   2 +-
 assets/templates/items/create_title.tmpl      |   2 +-
 assets/templates/items/form.tmpl              |   4 +-
 assets/templates/items/list_rows.tmpl         |   2 +-
 assets/templates/items/list_title.tmpl        |   2 +-
 assets/templates/items/update_title.tmpl      |   2 +-
 assets/templates/notebooks/create_title.tmpl  |   2 +-
 assets/templates/notebooks/list_title.tmpl    |   2 +-
 assets/templates/notebooks/update_title.tmpl  |   2 +-
 assets/templates/pages/home_items.tmpl        |   6 +-
 assets/templates/pages/home_title.tmpl        |   2 +-
 assets/templates/partials/sidebar.tmpl        |   7 +-
 assets/templates/types/create_title.tmpl      |   2 +-
 assets/templates/types/field_new.tmpl         |   2 +-
 assets/templates/types/fields.tmpl            |   4 +-
 assets/templates/types/form.tmpl              |   2 +-
 assets/templates/types/list_title.tmpl        |   2 +-
 assets/templates/types/update_title.tmpl      |   2 +-
 24 files changed, 230 insertions(+), 229 deletions(-)

diff --git a/assets/static/css/main.css b/assets/static/css/main.css
index 0815212..200f274 100644
--- a/assets/static/css/main.css
+++ b/assets/static/css/main.css
@@ -539,7 +539,8 @@ th.operations, td.operations {
   margin-left: 8px;
   padding: 0;
   width: 100%;
-  display: block;
+  display: flex;
+  align-items: center;
 }
 
 #page-title-container h5 {
@@ -550,11 +551,13 @@ th.operations, td.operations {
 #page-title-title {
   font-size: 22px;
   color: #ffffff;
-  float: left;
+  flex-grow: 1;
 }
 
-#top-toolbar {
-  float: right;
+#page-title {
+  flex-grow: 1;
+  display: flex;
+  align-items: center;
 }
 
 #search-bar {
@@ -599,6 +602,10 @@ th.operations, td.operations {
   float: right;
 }
 
+.item {
+  margin-bottom: 10px;
+}
+
 .item-card {
   position: relative;
   background-color: #ffffff;
@@ -1055,8 +1062,12 @@ dialog .content h5 {
   min-width: 300px;
 }
 
-/* Small */
-@media (max-width: 568px) {
+.show-large {
+  display: none;
+}
+
+/* Extra small */
+@media (max-width: 576px) {
   body.full {
     background-color: var(--primary-color);
   }
@@ -1119,7 +1130,7 @@ dialog .content h5 {
     font-weight: bold;
   }
 
-  .hide-small {
+  .hide-xsmall {
     display: none !important
   }
 
@@ -1128,96 +1139,12 @@ dialog .content h5 {
   }
 }
 
-/* Min medium */
-@media (min-width:601px) {
-  .home-card-summary {
-    height: 250px;
-    overflow: auto;
-  }
-
-  #quickbox {
-    width: 400px;
-    position: fixed;
-    top: 54px;
-    left: calc(100vw - 420px);
-    background-color: #fff !important;
-    border: 2px solid var(--primary-color);
-    border-radius: 8px;
-  }
-  #quickbox-top-bar {
-    position: relative;
-  }
-
-  #quickbox-footer {
-    position: relative;
-  }
-
-  #quickbox-content {
-    height: calc(100vh - var(--quickbox-footer-height) - var(--quickbox-footer-height) - 42px);
-  }
+/* Small */
+@media (min-width:577px) and (max-width: 767px) {
 }
 
-/* Medium */
-@media (min-width: 768px) {
-  #form-login{
-    width: 600px;
-  }
-
-  .col.m1 {
-    width: 8.33333%
-  }
-
-  .col.m2 {
-    width: 16.66666%
-  }
-
-  .col.m3,
-  .quarter {
-    width: 24.99999%
-  }
-
-  .col.m4,
-  .third {
-    width: 33.33333%
-  }
-
-  .col.m5 {
-    width: 41.66666%
-  }
-
-  .col.m6,
-  .half {
-    width: 49.99999%
-  }
-
-  .col.m7 {
-    width: 58.33333%
-  }
-
-  .col.m8,
-  .twothird {
-    width: 66.66666%
-  }
-
-  .col.m9,
-  .w3-threequarter {
-    width: 74.99999%
-  }
-
-  .col.m10 {
-    width: 83.33333%
-  }
-
-  .col.m11 {
-    width: 91.66666%
-  }
-
-  .col.m12 {
-    width: 99.99999%
-  }
-}
-
-@media (min-width:601px) {
+/* Minimum small */
+@media (min-width:576px) {
   .col.half {
     width: 49.99999%;
   }
@@ -1226,99 +1153,8 @@ dialog .content h5 {
   }
 }
 
-@media (max-width:993px) and (min-width:768px) {
-  .hide-medium {
-    display: none !important
-  }
-}
-
-@media (min-width:993px) {
-  dialog {
-    max-width: 600px;
-  }
-  .col.l1 {
-    width: 8.33333%
-  }
-
-  .col.l2 {
-    width: 16.66666%
-  }
-
-  .col.l3 {
-    width: 24.99999%
-  }
-
-  .col.l4 {
-    width: 33.33333%
-  }
-
-  .col.l5 {
-    width: 41.66666%
-  }
-
-  .col.l6 {
-    width: 49.99999%
-  }
-
-  .col.l7 {
-    width: 58.33333%
-  }
-
-  .col.l8 {
-    width: 66.66666%
-  }
-
-  .col.l9 {
-    width: 74.99999%
-  }
-
-  .col.l10 {
-    width: 83.33333%
-  }
-
-  .col.l11 {
-    width: 91.66666%
-  }
-
-  .col.l12 {
-    width: 99.99999%
-  }
-  
-  .hide-large {
-    display: none !important
-  }
-
-  #main-sidebar {
-    display: block !important;
-  }
-
-  .row > .half:first {
-    padding-right: 4px;
-  }
-
-  .row > .half:nth-child(2) {
-    padding-left: 4px;
-  }
-
-  #page-main {
-    padding-left: 300px;
-  }
-
-  #page-top-bar {
-    padding-right: 300px;
-  }
-
-  #quickbox-title-title {
-    padding-left: 16px;
-  }
-
-  #page-title-title {
-    position: relative;
-    top: 4px;
-  }
-}
-
-@media (max-width:992px) {
+/* Max small */
+@media (max-width: 767px) {
   /* The switch - the box around the slider */
   .switch {
     position: relative;
@@ -1373,7 +1209,6 @@ dialog .content h5 {
     transform: translateX(22px);
   }
 
-  /* Rounded sliders */
   .slider.round {
     border-radius: 24px;
   }
@@ -1381,19 +1216,186 @@ dialog .content h5 {
   .slider.round:before {
     border-radius: 50%;
   }
+}
 
-  #page-title-container {
-    display: flex;
-    align-items: center;
+/* Medium */
+@media (min-width:768px) and (max-width: 991px) {
+  .col.m1 {
+    width: 8.33333%
   }
 
-  #page-title {
-    flex-grow: 1;
-    display: flex;
-    align-items: center;
+  .col.m2 {
+    width: 16.66666%
   }
 
-  #page-title-title {
-    flex-grow: 1;
+  .col.m3,
+  .quarter {
+    width: 24.99999%
+  }
+
+  .col.m4,
+  .third {
+    width: 33.33333%
+  }
+
+  .col.m5 {
+    width: 41.66666%
+  }
+
+  .col.m6,
+  .half {
+    width: 49.99999%
+  }
+
+  .col.m7 {
+    width: 58.33333%
+  }
+
+  .col.m8,
+  .twothird {
+    width: 66.66666%
+  }
+
+  .col.m9,
+  .w3-threequarter {
+    width: 74.99999%
+  }
+
+  .col.m10 {
+    width: 83.33333%
+  }
+
+  .col.m11 {
+    width: 91.66666%
+  }
+
+  .col.m12 {
+    width: 99.99999%
   }
 }
+
+/* Min medium */
+@media (min-width: 768px) {
+  #form-login{
+    width: 600px;
+  }
+
+  .hide-medium {
+    display: none !important
+  }
+
+  #quickbox {
+    width: 400px;
+    position: fixed;
+    top: 54px;
+    left: calc(100vw - 420px);
+    background-color: #fff !important;
+    border: 2px solid var(--primary-color);
+    border-radius: 8px;
+  }
+  #quickbox-top-bar {
+    position: relative;
+  }
+
+  #quickbox-footer {
+    position: relative;
+  }
+
+  #quickbox-content {
+    height: calc(100vh - var(--quickbox-footer-height) - var(--quickbox-footer-height) - 42px);
+  }
+
+  .home-card-summary {
+    height: 250px;
+    overflow: auto;
+  }
+}
+
+/* Large */
+@media (min-width:992px) {
+  dialog {
+    max-width: 600px;
+  }
+  .col.l1 {
+    width: 8.33333%
+  }
+
+  .col.l2 {
+    width: 16.66666%
+  }
+
+  .col.l3 {
+    width: 24.99999%
+  }
+
+  .col.l4 {
+    width: 33.33333%
+  }
+
+  .col.l5 {
+    width: 41.66666%
+  }
+
+  .col.l6 {
+    width: 49.99999%
+  }
+
+  .col.l7 {
+    width: 58.33333%
+  }
+
+  .col.l8 {
+    width: 66.66666%
+  }
+
+  .col.l9 {
+    width: 74.99999%
+  }
+
+  .col.l10 {
+    width: 83.33333%
+  }
+
+  .col.l11 {
+    width: 91.66666%
+  }
+
+  .col.l12 {
+    width: 99.99999%
+  }
+
+  .hide-large {
+    display: none !important;
+  }
+
+  .show-large {
+    display: block !important;
+  }
+
+  #main-sidebar {
+    display: block !important;
+  }
+
+  .row > .half:first {
+    padding-right: 4px;
+  }
+
+  .row > .half:nth-child(2) {
+    padding-left: 4px;
+  }
+
+  #page-main {
+    padding-left: 300px;
+  }
+
+  #page-top-bar {
+    padding-right: 300px;
+  }
+
+  #quickbox-title-title {
+    padding-left: 16px;
+  }
+}
+
+
+
diff --git a/assets/templates/base.tmpl b/assets/templates/base.tmpl
index 27c20f7..8957f5a 100644
--- a/assets/templates/base.tmpl
+++ b/assets/templates/base.tmpl
@@ -24,7 +24,7 @@
           <img src="/static/img/brainminder.svg" alt="BrainMinder" class="logo" />
         </a>
         <div id="page-title">{{template "page:title" .}}</div>
-        <div id="search-bar" class="hide-small">
+        <div id="search-bar" class="show-large">
           <form method="POST" hx-post="/items/search" hx-target="#page-content" hx-push-url="true" style="float: left">
           <input type="text" id="search-text" name="SearchText" class="bar-item" placeholder="Search.." />
           <button type="submit"><i class="bi bi-search"></i></button>
diff --git a/assets/templates/categories/create_title.tmpl b/assets/templates/categories/create_title.tmpl
index b47d2e2..51c20c6 100644
--- a/assets/templates/categories/create_title.tmpl
+++ b/assets/templates/categories/create_title.tmpl
@@ -1,6 +1,6 @@
 {{define "page:title"}}
     <div id="page-title-title"><h5>New Category</h5></div>
-    <div class="hide-medium hide-large" id="top-toolbar">
+    <div class="hide-large" id="top-toolbar">
         <a href="#" onclick="bm_toggle_quickbox(); return false;"><i class='bi bi-inbox-fill'></i></a>
     </div>
 {{end}}
diff --git a/assets/templates/categories/list_title.tmpl b/assets/templates/categories/list_title.tmpl
index 1a724c1..7960f71 100644
--- a/assets/templates/categories/list_title.tmpl
+++ b/assets/templates/categories/list_title.tmpl
@@ -1,6 +1,6 @@
 {{define "page:title"}}
     <div id="page-title-title"><h5>Categories</h5></div>
-    <div class="hide-medium hide-large" id="top-toolbar">
+    <div class="hide-large" id="top-toolbar">
         <a class="button" hx-get="/category/create" hx-push-url="true" hx-target="#page-content"><i class="bi bi-plus-square-fill"></i></a>
         <a class="button" href="#" onclick="bm_toggle_quickbox(); return false;"><i class='bi bi-inbox-fill'></i></a>
     </div>
diff --git a/assets/templates/categories/update_title.tmpl b/assets/templates/categories/update_title.tmpl
index e1dfad5..5ac69a3 100644
--- a/assets/templates/categories/update_title.tmpl
+++ b/assets/templates/categories/update_title.tmpl
@@ -1,6 +1,6 @@
 {{define "page:title"}}
     <div id="page-title-title"><h5>Edit Category</h5></div>
-    <div class="hide-medium hide-large" id="top-toolbar">
+    <div class="hide-large" id="top-toolbar">
         <a class="button" href="#" onclick="bm_toggle_quickbox(); return false;"><i class='bi bi-inbox-fill'></i></a>
     </div>
 {{end}}
diff --git a/assets/templates/items/all_list_rows.tmpl b/assets/templates/items/all_list_rows.tmpl
index 2486d63..98d7a81 100644
--- a/assets/templates/items/all_list_rows.tmpl
+++ b/assets/templates/items/all_list_rows.tmpl
@@ -13,10 +13,10 @@
     {{ end }}
     >
     <td class="title no-label">
-      <a class="hide-small" href="/item/view/{{.Id}}" hx-get="/item/view/{{.Id}}" hx-target="body" hx-swap="beforeend">{{.Title}}</a>
+      <a class="hide-xsmall" 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>
+    <td data-label="Type" class="hide-xsmall" nowrap="nowrap"><i class="{{.Type_icon}}"></i> {{.Type_title}}</td>
     <td data-label="Categories" class="no-label links-list">
       {{ if gt (len .Categories) 0 }}
       <i class="hide-medium hide-large bi bi-tags-fill"></i>
diff --git a/assets/templates/items/all_list_title.tmpl b/assets/templates/items/all_list_title.tmpl
index ba19a82..9773a80 100644
--- a/assets/templates/items/all_list_title.tmpl
+++ b/assets/templates/items/all_list_title.tmpl
@@ -1,6 +1,6 @@
 {{define "page:title"}}
     <div id="page-title-title"><h5>All Items</h5></div>
-    <div class="hide-medium hide-large" id="top-toolbar">
+    <div class="hide-large" id="top-toolbar">
         <a class="button" href="#" onclick="bm_toggle_visibility('all_items_search'); return false;" ><i class="bi bi-search"></i></a>
         <a href="#" onclick="bm_toggle_quickbox(); return false;" class="button"><i class='bi bi-inbox-fill'></i></a>
     </div>
diff --git a/assets/templates/items/create_title.tmpl b/assets/templates/items/create_title.tmpl
index 9477dc8..b531b91 100644
--- a/assets/templates/items/create_title.tmpl
+++ b/assets/templates/items/create_title.tmpl
@@ -1,6 +1,6 @@
 {{define "page:title"}}
     <div id="page-title-title"><h5>New {{ .type.Title}}</h5></div>
-    <div class="hide-medium hide-large" id="top-toolbar">
+    <div class="hide-large" id="top-toolbar">
         <a href="#" onclick="bm_toggle_quickbox(); return false;" class="button"><i class='bi bi-inbox-fill'></i></a>
     </div>
 {{end}}
\ No newline at end of file
diff --git a/assets/templates/items/form.tmpl b/assets/templates/items/form.tmpl
index b7c2743..7593c65 100644
--- a/assets/templates/items/form.tmpl
+++ b/assets/templates/items/form.tmpl
@@ -91,7 +91,7 @@
             <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>
+            <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-xsmall"> Find</span></a>
           </div>
       </div>
       <div id="items-list-for-relations" style="margin-top:10px">
@@ -103,7 +103,7 @@
   <div id="footer-navbar">
       <button type="submit" class="main" title="Save"><i class="bi bi-floppy"></i><span>Save</span></button>
     {{ if not (eq .item.Id 0) }}
-      <a class="button secondary hide-small" href="/item/view/{{.item.Id}}" hx-get="/item/view/{{.item.Id}}" hx-target="body" hx-swap="beforeend"><i class="bi bi-binoculars"></i><span>View</span></a>
+      <a class="button secondary hide-xsmall" href="/item/view/{{.item.Id}}" hx-get="/item/view/{{.item.Id}}" hx-target="body" hx-swap="beforeend"><i class="bi bi-binoculars"></i><span>View</span></a>
       <a class="button secondary hide-medium hide-large" href="/item/read/{{.item.Id}}" hx-get="/item/read/{{.item.Id}}" hx-push-url="true" hx-target="#page-content"><i class="bi bi-binoculars"></i><span>View</span></a>
       <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>
diff --git a/assets/templates/items/list_rows.tmpl b/assets/templates/items/list_rows.tmpl
index 9fa1aec..bcd2c4f 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="body" hx-swap="beforeend">{{.Title}}</a>
+      <a class="hide-xsmall" 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/list_title.tmpl b/assets/templates/items/list_title.tmpl
index 89bbad0..74733e8 100644
--- a/assets/templates/items/list_title.tmpl
+++ b/assets/templates/items/list_title.tmpl
@@ -1,6 +1,6 @@
 {{define "page:title"}}
     <div id="page-title-title"><h5>{{.type.Title}} Items</h5></div>
-    <div class="hide-medium hide-large" id="top-toolbar">
+    <div class="hide-large" id="top-toolbar">
         <a class="button" href="#" onclick="bm_toggle_visibility('items_search'); return false;" ><i class="bi bi-search"></i></a>
         <a class="button" hx-get="/item/create/{{.type.Id}}" hx-push-url="true" hx-target="#page-content"><i class="bi bi-plus-square-fill"></i></a>
         <a class="button" href="#" onclick="bm_toggle_quickbox(); return false;"><i class='bi bi-inbox-fill'></i></a>
diff --git a/assets/templates/items/update_title.tmpl b/assets/templates/items/update_title.tmpl
index 5d809cb..2572baa 100644
--- a/assets/templates/items/update_title.tmpl
+++ b/assets/templates/items/update_title.tmpl
@@ -1,6 +1,6 @@
 {{define "page:title"}}
     <div id="page-title-title"> <h5>Edit {{.item.Type_title}}</h5></div>
-    <div class="hide-medium hide-large" id="top-toolbar">
+    <div class="hide-large" id="top-toolbar">
         <a class="button" href="#" onclick="bm_toggle_quickbox(); return false;"><i class='bi bi-inbox-fill'></i></a>
     </div>
 {{end}}
\ No newline at end of file
diff --git a/assets/templates/notebooks/create_title.tmpl b/assets/templates/notebooks/create_title.tmpl
index 96990ff..acc380e 100644
--- a/assets/templates/notebooks/create_title.tmpl
+++ b/assets/templates/notebooks/create_title.tmpl
@@ -1,6 +1,6 @@
 {{define "page:title"}}
     <div id="page-title-title"><h5>New Notebook</h5></div>
-    <div class="hide-medium hide-large" id="top-toolbar">
+    <div class="hide-large" id="top-toolbar">
         <a class="button" href="#" onclick="bm_toggle_quickbox(); return false;"><i class='bi bi-inbox-fill'></i></a>
     </div>
 {{end}}
diff --git a/assets/templates/notebooks/list_title.tmpl b/assets/templates/notebooks/list_title.tmpl
index e2a295f..4a12582 100644
--- a/assets/templates/notebooks/list_title.tmpl
+++ b/assets/templates/notebooks/list_title.tmpl
@@ -1,6 +1,6 @@
 {{define "page:title"}}
     <div id="page-title-title"><h5>Notebooks</h5></div>
-    <div class="hide-medium hide-large" id="top-toolbar">
+    <div class="hide-large" id="top-toolbar">
         <a class="button" hx-get="/notebook/create" hx-push-url="true" hx-target="#page-content"><i class="bi bi-plus-square-fill"></i></a>
         <a class="button" href="#" onclick="bm_toggle_quickbox(); return false;"><i class='bi bi-inbox-fill'></i></a>
     </div>
diff --git a/assets/templates/notebooks/update_title.tmpl b/assets/templates/notebooks/update_title.tmpl
index b749407..ba6666d 100644
--- a/assets/templates/notebooks/update_title.tmpl
+++ b/assets/templates/notebooks/update_title.tmpl
@@ -1,6 +1,6 @@
 {{define "page:title"}}
     <div id="page-title-title"><h5>Edit Notebook</h5></div>
-    <div class="hide-medium hide-large" id="top-toolbar">
+    <div class="hide-large" id="top-toolbar">
         <a class="button" href="#" onclick="bm_toggle_quickbox(); return false;"><i class='bi bi-inbox-fill'></i></a>
     </div>
 {{end}}
diff --git a/assets/templates/pages/home_items.tmpl b/assets/templates/pages/home_items.tmpl
index c886e9a..a218fa5 100644
--- a/assets/templates/pages/home_items.tmpl
+++ b/assets/templates/pages/home_items.tmpl
@@ -3,7 +3,7 @@
 {{ $itemCount := 0 }}
 
 {{ range.items }}
-  <div class="col l4 m6 s12 item" style="margin-bottom: 10px;"
+  <div class="col l4 m6 s12 item"
   {{ $itemCount = incr $itemCount}}
     {{ if eq $itemCount 10 }}
     {{ $offset := addI $.offset $itemCount}}
@@ -16,8 +16,8 @@
       <div class="row">
         <div class="col l11 m11 s11">
           <h5>
-            <a class="hide-small" href="/item/view/{{.Id}}" hx-get="/item/view/{{.Id}}" hx-target="body" hx-swap="beforeend"><i class="{{.Type_icon}}" title="{{.Type_title}}"></i> {{.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 class="{{.Type_icon}}" title="{{.Type_title}}"></i> {{.Title}}</a>
+            <a class="show-large" href="/item/view/{{.Id}}" hx-get="/item/view/{{.Id}}" hx-target="body" hx-swap="beforeend"><i class="{{.Type_icon}}" title="{{.Type_title}}"></i> {{.Title}}</a>
+            <a class="hide-large" href="/item/read/{{.Id}}" hx-get="/item/read/{{.Id}}" hx-target="#page-content" hx-push-url="true"><i class="{{.Type_icon}}" title="{{.Type_title}}"></i> {{.Title}}</a>
           </h5>
           <div class="home-card-summary">{{.Summary | markdownfy | safeHTML}}</div>
         </div>
diff --git a/assets/templates/pages/home_title.tmpl b/assets/templates/pages/home_title.tmpl
index 4667ffe..819bcaf 100644
--- a/assets/templates/pages/home_title.tmpl
+++ b/assets/templates/pages/home_title.tmpl
@@ -1,6 +1,6 @@
 {{define "page:title"}}
     <div id="page-title-title"><h5>Dashboard</h5></div>
-    <div class="hide-medium hide-large" id="top-toolbar">
+    <div class="hide-large" id="top-toolbar">
         <a href="#" onclick="bm_toggle_quickbox(); return false;" class="button"><i class='bi bi-inbox-fill'></i></a>
     </div>
 {{ end }}
diff --git a/assets/templates/partials/sidebar.tmpl b/assets/templates/partials/sidebar.tmpl
index e6fe49f..3a37ebe 100644
--- a/assets/templates/partials/sidebar.tmpl
+++ b/assets/templates/partials/sidebar.tmpl
@@ -4,12 +4,12 @@
 <div id="app-title">
   <a class="hide-large" href="#" onclick="bm_toggle_sidebar('main-sidebar'); return false;"><img src="/static/img/brainminder.svg" alt="BrainMinder" class="logo" /></a>
   <a class="hide-large" href="#" onclick="bm_toggle_sidebar('main-sidebar'); return false;"><h5>BrainMinder</h5></a>
-  <a class="hide-small hide-medium" href="/" hx-get="/" hx-push-url="true" hx-target="#page-content"><img src="/static/img/brainminder.svg" alt="BrainMinder" class="logo" /></a>
-  <a class="hide-small hide-medium" href="/" hx-get="/" hx-push-url="true" hx-target="#page-content"><h5>BrainMinder</h5></a>
+  <a class="show-large" href="/" hx-get="/" hx-push-url="true" hx-target="#page-content"><img src="/static/img/brainminder.svg" alt="BrainMinder" class="logo" /></a>
+  <a class="show-large" href="/" hx-get="/" hx-push-url="true" hx-target="#page-content"><h5>BrainMinder</h5></a>
 </div>
 
 <div id="main-sidebar-content">
-  <div id="sidebar-search" class="hide-large">
+  <div id="sidebar-search" class="hide-medium">
     <form method="POST" hx-post="/items/search" hx-target="#page-content" hx-push-url="true" hx-on:submit="bm_sidebar_click('main-sidebar')">
       <div style="display: flex;">
         <div style="flex-grow:1">
@@ -33,7 +33,6 @@
       <i class="bi bi-journals"></i> Notebook
     </h5>
     <form method="POST" action="/" hx-post="/" hx-push-url="true" hx-target="#page-content">
-      <input type="hidden" name="csrf_token" value="{{.CSRFToken}}" />
       {{template "partial:notebooks-list" . }}
     </form>
   </div>
diff --git a/assets/templates/types/create_title.tmpl b/assets/templates/types/create_title.tmpl
index 996c466..fd4566f 100644
--- a/assets/templates/types/create_title.tmpl
+++ b/assets/templates/types/create_title.tmpl
@@ -1,6 +1,6 @@
 {{define "page:title"}}
     <div id="page-title-title"><h5>New Type</h5></div>
-    <div class="hide-medium hide-large" id="top-toolbar">
+    <div class="hide-large" id="top-toolbar">
         <a class="button" href="#" onclick="bm_toggle_quickbox(); return false;"><i class='bi bi-inbox-fill'></i></a>
     </div>
 {{end}}
diff --git a/assets/templates/types/field_new.tmpl b/assets/templates/types/field_new.tmpl
index 8112484..ba50078 100644
--- a/assets/templates/types/field_new.tmpl
+++ b/assets/templates/types/field_new.tmpl
@@ -26,7 +26,7 @@
     <p>{{ widget_checkbox (print "Fields-New-" .counter "-Is_multiple") "Multiple" "1" .Is_multiple }}</p>
   </div>
   <div class="bar">
-    <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>
+    <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-xsmall"> Remove</span></button>
   </div>
 </div>
 {{ end }}
diff --git a/assets/templates/types/fields.tmpl b/assets/templates/types/fields.tmpl
index 176836a..0a45947 100644
--- a/assets/templates/types/fields.tmpl
+++ b/assets/templates/types/fields.tmpl
@@ -29,8 +29,8 @@
     <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" 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>
+    <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-xsmall"> 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-xsmall"> Undo</span></button>
   </div>
 </div>
 {{ end }}
diff --git a/assets/templates/types/form.tmpl b/assets/templates/types/form.tmpl
index a1967c0..5438927 100644
--- a/assets/templates/types/form.tmpl
+++ b/assets/templates/types/form.tmpl
@@ -38,7 +38,7 @@
       {{ template "types:fields" (map "fields" .type.Fields "widgets" $.widgets "uisections" $.uisections)}}
     </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>
+      <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-xsmall"> Add field</span></a>
     </div>
   </div>
 
diff --git a/assets/templates/types/list_title.tmpl b/assets/templates/types/list_title.tmpl
index c64cba4..9995b53 100644
--- a/assets/templates/types/list_title.tmpl
+++ b/assets/templates/types/list_title.tmpl
@@ -1,6 +1,6 @@
 {{define "page:title"}}
     <div id="page-title-title"><h5>Types</h5></div>
-    <div class="hide-medium hide-large" id="top-toolbar">
+    <div class="hide-large" id="top-toolbar">
         <a class="button" hx-get="/type/create" hx-push-url="true" hx-target="#page-content"><i class="bi bi-plus-square-fill"></i></a>
         <a class="button" href="#" onclick="bm_toggle_quickbox(); return false;"><i class='bi bi-inbox-fill'></i></a>
     </div>
diff --git a/assets/templates/types/update_title.tmpl b/assets/templates/types/update_title.tmpl
index 8c281d9..b9e1be8 100644
--- a/assets/templates/types/update_title.tmpl
+++ b/assets/templates/types/update_title.tmpl
@@ -1,6 +1,6 @@
 {{define "page:title"}}
     <div id="page-title-title"><h5>Edit Type</h5></div>
-    <div class="hide-medium hide-large" id="top-toolbar">
+    <div class="hide-large" id="top-toolbar">
         <a class="button" href="#" onclick="bm_toggle_quickbox(); return false;"><i class='bi bi-inbox-fill'></i></a>
     </div>
 {{end}}