From c3ad0fba84d88710af23e9be47cff52f8d15454e Mon Sep 17 00:00:00 2001
From: Yaro Kasear <git@kasear.net>
Date: Wed, 12 Nov 2025 09:09:57 -0600
Subject: [PATCH] The experiment with floating labels is a success!

---
 inventory/routes/entry.py                    | 36 ++++++++++----------
 inventory/static/css/components/dropdown.css |  8 +++++
 inventory/static/js/components/dropdown.js   |  2 +-
 inventory/templates/crudkit/field.html       | 32 +++++++++--------
 inventory/templates/user_worklogs.html       | 10 +++---
 5 files changed, 49 insertions(+), 39 deletions(-)

diff --git a/inventory/routes/entry.py b/inventory/routes/entry.py
index 85ede94..9d598ca 100644
--- a/inventory/routes/entry.py
+++ b/inventory/routes/entry.py
@@ -33,27 +33,27 @@ def _fields_for_model(model: str):
              "attrs": {"class": "display-6 mb-3"}, "wrap": {"class": "col"}},
             {"name": "buttons", "label": "", "row": "label", "type": "template", "template": "entry_buttons.html",
              "wrap": {"class": "col-auto text-end me-2"}, "attrs": {"data-model": model}},
-            {"name": "name", "row": "names", "label": "Name", "wrap": {"class": "col-3"},
-             "attrs": {"class": "form-control"}, "label_attrs": {"class": "form-label"}},
-            {"name": "serial", "row": "names", "label": "Serial #", "wrap": {"class": "col"},
-             "attrs": {"class": "form-control"}, "label_attrs": {"class": "form-label"}},
-            {"name": "barcode", "row": "names", "label": "Barcode #", "wrap": {"class": "col"},
-             "attrs": {"class": "form-control"}, "label_attrs": {"class": "form-label"}},
-            {"name": "brand", "label_spec": "{name}", "row": "device", "wrap": {"class": "col"},
-             "attrs": {"class": "form-control"}, "label": "Brand", "label_attrs": {"class": "form-label"}},
-            {"name": "model", "row": "device", "wrap": {"class": "col"},
-             "attrs": {"class": "form-control"}, "label": "Model #", "label_attrs": {"class": "form-label"}},
-            {"name": "device_type", "label_spec": "{description}", "row": "device", "wrap": {"class": "col"},
-             "attrs": {"class": "form-control"}, "label": "Device Type", "label_attrs": {"class": "form-label"}},
-            {"name": "owner", "row": "status", "label": "Contact", "wrap": {"class": "col"},
-             "attrs": {"class": "form-control"}, "label_attrs": {"class": "form-label"},
+            {"name": "name", "row": "names", "label": "Name", "wrap": {"class": "col form-floating"},
+             "attrs": {"class": "form-control", "placeholder": "Device Name"}, "label_attrs": {"class": "ms-2"}},
+            {"name": "serial", "row": "names", "label": "Serial #", "wrap": {"class": "col form-floating"},
+             "attrs": {"class": "form-control", "placeholder": "Serial Number"}, "label_attrs": {"class": "ms-2"}},
+            {"name": "barcode", "row": "names", "label": "Barcode #", "wrap": {"class": "col form-floating"},
+             "attrs": {"class": "form-control", "placeholder": "Bar Code"}, "label_attrs": {"class": "ms-2"}},
+            {"name": "brand", "label_spec": "{name}", "row": "device", "wrap": {"class": "col form-floating"},
+             "attrs": {"class": "form-control"}, "label": "Brand", "label_attrs": {"class": "ms-2"}},
+            {"name": "model", "row": "device", "wrap": {"class": "col form-floating"},
+             "attrs": {"class": "form-control", "placeholder": "Model Number"}, "label": "Model #", "label_attrs": {"class": "ms-2"}},
+            {"name": "device_type", "label_spec": "{description}", "row": "device", "wrap": {"class": "col form-floating"},
+             "attrs": {"class": "form-control"}, "label": "Device Type", "label_attrs": {"class": "ms-2"}},
+            {"name": "owner", "row": "status", "label": "Contact", "wrap": {"class": "col form-floating"},
+             "attrs": {"class": "form-control"}, "label_attrs": {"class": "ms-2 link-label"},
              "label_spec": "{label}", "link": {"endpoint": "entry.entry", "params": {"model": "user", "id": "{owner.id}"}},
              "options_params": {"active__eq": True}},
-            {"name": "location", "row": "status", "label": "Location", "wrap": {"class": "col"},
-             "attrs": {"class": "form-control"}, "label_attrs": {"class": "form-label"},
+            {"name": "location", "row": "status", "label": "Location", "wrap": {"class": "col form-floating"},
+             "attrs": {"class": "form-control"}, "label_attrs": {"class": "ms-2"},
              "label_spec": "{name} - {room_function.description}"},
-            {"name": "condition", "label": "Condition", "row": "status", "wrap": {"class": "col"},
-             "label_attrs": {"class": "form-label"}, "label_spec": "{description}"},
+            {"name": "condition", "label": "Condition", "row": "status", "wrap": {"class": "col form-floating"},
+             "label_attrs": {"class": "ms-2"}, "label_spec": "{description}"},
             {"name": "image", "label": "", "row": "image", "type": "template", "label_spec": "{filename}",
              "template": "image_display.html", "attrs": {"class": "img-fluid img-thumbnail h-auto"},
              "wrap": {"class": "h-100 w-100"}},
diff --git a/inventory/static/css/components/dropdown.css b/inventory/static/css/components/dropdown.css
index fee3d50..5728e74 100644
--- a/inventory/static/css/components/dropdown.css
+++ b/inventory/static/css/components/dropdown.css
@@ -2,3 +2,11 @@
     border-color: rgb(222, 226, 230) !important;
     overflow-y: auto;
 }
+
+.link-label {
+    pointer-events: none;
+}
+
+.link-label a {
+    pointer-events: auto;
+}
diff --git a/inventory/static/js/components/dropdown.js b/inventory/static/js/components/dropdown.js
index 256ee0f..72bc8e8 100644
--- a/inventory/static/js/components/dropdown.js
+++ b/inventory/static/js/components/dropdown.js
@@ -21,7 +21,7 @@ DropDown.utilities = {
         const inp = document.getElementById(id);
 
         btn.dataset.value = value;
-        btn.textContent = txt;
+        btn.value = txt;
 
         inp.value = value;
     },
diff --git a/inventory/templates/crudkit/field.html b/inventory/templates/crudkit/field.html
index b458797..aa33953 100644
--- a/inventory/templates/crudkit/field.html
+++ b/inventory/templates/crudkit/field.html
@@ -1,16 +1,4 @@
 <!-- FIELD: {{ field_name }} ({{ field_type }}) -->
-{% if field_type != 'hidden' and field_label %}
-<label for="{{ field_name }}" {% if label_attrs %}{% for k,v in label_attrs.items() %} {{k}}{% if v is not sameas true
-  %}="{{ v }}" {% endif %} {% endfor %}{% endif %}>
-  {% if link_href %}
-  <a href="{{ link_href }}" class="link-success link-underline link-underline-opacity-0 fw-semibold">
-    {% endif %}
-    {{ field_label }}
-    {% if link_href %}
-  </a>
-  {% endif %}
-</label>
-{% endif %}
 
 {% if field_type == 'select' %}
 {#
@@ -47,9 +35,11 @@
 {% else %}
 {% set sel_label = "-- Select --" %}
 {% endif %}
-<button type="button" class="btn btn-outline-dark d-block w-100 text-start dropdown-toggle inventory-dropdown"
-  id="{{ field_name }}-button" data-bs-toggle="dropdown" data-value="{{ value }}">{{ sel_label }}</button>
-<div class="dropdown-menu pt-0" id="{{ field_name }}-dropdown">
+<!-- button type="button" class="btn btn-outline-dark d-block w-100 text-start dropdown-toggle inventory-dropdown"
+  id="{{ field_name }}-button" data-bs-toggle="dropdown" data-value="{{ value }}">{{ sel_label }}</button -->
+<input type="button" class="form-control btn btn-outline-dark d-block w-100 text-start dropdown-toggle inventory-dropdown"
+  id="{{ field_name }}-button" data-bs-toggle="dropdown" data-value="{{ value }}" value="{{ sel_label }}">
+  <div class="dropdown-menu pt-0" id="{{ field_name }}-dropdown">
   <input type="text" class="form-control mt-0 border-top-0 border-start-0 border-end-0 rounded-bottom-0"
     id="{{ field_name }}-filter" placeholder="Filter..." oninput="DropDown.utilities.filterList('{{ field_name }}')">
   {% for opt in options %}
@@ -100,4 +90,16 @@
 
 {% if help %}
 <div class="form-text">{{ help }}</div>
+{% endif %}
+{% if field_type != 'hidden' and field_label %}
+<label for="{{ field_name }}" {% if label_attrs %}{% for k,v in label_attrs.items() %} {{k}}{% if v is not sameas true
+  %}="{{ v }}" {% endif %} {% endfor %}{% endif %}>
+  {% if link_href %}
+  <a href="{{ link_href }}" class="link-success link-underline link-underline-opacity-0 fw-semibold">
+    {% endif %}
+    {{ field_label }}
+    {% if link_href %}
+  </a>
+  {% endif %}
+</label>
 {% endif %}
\ No newline at end of file
diff --git a/inventory/templates/user_worklogs.html b/inventory/templates/user_worklogs.html
index a9939db..c76182c 100644
--- a/inventory/templates/user_worklogs.html
+++ b/inventory/templates/user_worklogs.html
@@ -3,13 +3,13 @@
 <label class="form-label mt-2">Work Logs</label>
 {% set wl = field['template_ctx']['values']['work_logs'] %}
 {% set check %}
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check text-success" viewBox="0 0 16 16">
-  <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425z"/>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check-lg text-success" viewBox="0 0 16 16">
+  <path d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425z"/>
 </svg>
 {% endset %}
 {% set x %}
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x text-danger" viewBox="0 0 16 16">
-  <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708"/>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-lg text-danger" viewBox="0 0 16 16">
+  <path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8z"/>
 </svg>
 {% endset %}
 
@@ -29,7 +29,7 @@
                     <td>{{ l['work_item']['label'] if l['work_item'] else '-' }}</td>
                     <td>{{ l.start_time if l.start_time else '-' }}</td>
                     <td>{{ l.end_time if l.end_time else '-' }}</td>
-                    <td class="text-center">{{ check if l.complete else x }}</td>
+                    <td class="text-center align-items-center {{ 'bg-success-subtle' if l.complete else 'bg-danger-subtle' }}">{{ check if l.complete else x }}</td>
                 </tr>
             {% endfor %}
         </tbody>