Added slim select widget support

assets/static/css/main.css

@@ -228,7 +228,7 @@ textarea {
 html,
 body {
   font-family: Verdana, sans-serif;
-  font-size: 16px;
+  font-size: 15px;
   line-height: 1.5
 }
 
@@ -463,7 +463,7 @@ a {
 }
 
 .w3-input {
-  padding: 8px;
+  padding: 2px;
   display: block;
   border: none;
   border-bottom: 1px solid #ccc;
@@ -2425,6 +2425,14 @@ table.stickyheader.searchopened thead {
   border-color: #777;
 }
 
+.ss-main .ss-values .ss-value .ss-value-text {
+  font-size: 15px;
+}
+
+.ss-main .ss-values .ss-value {
+  background-color: #2b5797;
+}
+
 /* Small */
 @media (max-width:600px) {
   i {

assets/static/js/main.js

@@ -194,7 +194,14 @@ document.addEventListener("DOMContentLoaded", function(event){
 
   document.body.addEventListener("activateEasyMDE", function(evt){
     const easyMDE = new EasyMDE({element: document.getElementById(evt.detail.value), forceSync: true});
-});
+  });
+
+  new SlimSelect({select: '.slim-select'});
+
+  htmx.on('htmx:afterSettle', (event) => {
+    new SlimSelect({select: '.slim-select'});
+  });
+
 });
 
 function bm_ignoreSwipe(event) {

assets/static/js/serviceWorker.js

@@ -1,4 +1,4 @@
-const cacheVersion = "0.267"
+const cacheVersion = "0.271"
 const cacheName = "speedtech-brainminder"
 const cacheFiles = [
     '/static/bootstrap-icons/font/bootstrap-icons.min.css',
@@ -6,6 +6,7 @@ const cacheFiles = [
     '/static/bootstrap-icons/font/fonts/bootstrap-icons.woff2',
     '/static/bootstrap-icons/*.svg',
     "/static/easymde/easymde.min.css",
+    '/static/css/slimselect.css',
     '/static/css/main.css',
     '/static/img/brainminder.svg',
     '/static/img/brainminder-icon.svg',
@@ -15,6 +16,7 @@ const cacheFiles = [
     "/static/js/hyperscript.min.js",
     "/static/js/handlebars.js",
     "/static/js/templates.js",
+    "/static/js/slimselect.min.js",
     '/static/js/main.js',
 ]
 

assets/templates/base.tmpl

@@ -11,6 +11,7 @@
     <link rel="manifest" href="/static/manifest.json">
     <link rel="stylesheet" href="/static/bootstrap-icons/font/bootstrap-icons.min.css" />
     <link rel="stylesheet" href="/static/easymde/easymde.min.css" />
+    <link rel="stylesheet" href="/static/css/slimselect.css" />
     <link rel="stylesheet" href="/static/css/main.css" />
     <link rel="icon" type="image/svg+xml" href="/static/img/brainminder-icon.svg">
     

assets/templates/items/form.tmpl

@@ -104,7 +104,7 @@
       </div>
       <div class="w3-half">
         <p>
-          {{ widget_select "Categories" "Categories" .item.Categories .categories `multiple="true" class="w3-input w3-border"` }}
+          {{ widget_slim_select "Categories" "Categories" .item.Categories .categories `multiple="true" class="w3-input w3-border"` }}
         </p>
       </div>
     </div>

assets/templates/partials/footer.tmpl

@@ -5,5 +5,6 @@
 <script src="/static/js/hyperscript.min.js"></script>
 <script src="/static/js/handlebars.js"></script>
 <script src="/static/js/templates.js"></script>
+<script src="/static/js/slimselect.min.js"></script>
 <script src="/static/js/main.js"></script>
 {{end}}

internal/funcs/funcs.go

@@ -76,6 +76,7 @@ var TemplateFuncs = template.FuncMap{
 	"widget_relation_type": widget_relation_type,
 	"widget_text":          widget_text,
 	"widget_select":        widget_select,
+	"widget_slim_select":   widget_slim_select,
 	"widget_checkboxes":    widget_checkboxes,
 	"field_widget":         field_widget,
 
@@ -350,6 +351,14 @@ func widget_relation_type(name string, value string, attributes string) template
 }
 
 func widget_select(name string, label string, value any, options []WidgetOption, attributes string) template.HTML {
+	return render_select(name, label, value, options, attributes, "w3-input w3-border")
+}
+
+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")
+}
+
+func render_select(name string, label string, value any, options []WidgetOption, attributes string, classes string) template.HTML {
 	var values []string
 
 	switch v := value.(type) {
@@ -373,7 +382,7 @@ func widget_select(name string, label string, value any, options []WidgetOption,
 	if len(label) > 0 {
 		o = fmt.Sprintf(`<label for="%v">%v</label>`, name, label)
 	}
-	o = o + fmt.Sprintf(`<select name="%v" id="%v" class="w3-input w3-border" %v>`, name, name, attributes)
+	o = o + fmt.Sprintf(`<select name="%v" id="%v" class="%v" %v>`, name, name, classes, attributes)
 	selected := ""
 	for _, option := range options {
 		selected = ""