Improve form style

.pre-commit-config.yaml

@@ -17,7 +17,7 @@ repos:
     rev: v1.23.3
     hooks:
       - id: djlint-django
-        args: ["--reformat"]
+        args: ["--reformat", "--lint", "--quiet"]
   - repo: https://github.com/pre-commit/mirrors-prettier
     rev: "v3.0.0-alpha.6"
     hooks:

nummi/main/static/main/css/form.css

@@ -6,23 +6,43 @@ form ul.errorlist {
 }
 
 form {
-  > table > tbody > tr > th {
-    background: var(--bg-01);
-    border-right: 1px solid var(--gray);
-  }
-  tbody :is(input, select, textarea) {
-    font: inherit;
-    border: none;
-    background: transparent;
-    width: 100%;
-    height: 100%;
-    line-height: 1.5;
-  }
-  input[type="checkbox"] {
-    width: initial;
-  }
-  tfoot {
-    text-align: right;
+  max-width: 32rem;
+  display: grid;
+  grid-gap: var(--gap);
+
+  p.field {
+    display: grid;
+    grid-auto-rows: min-content;
+    border: 1px solid var(--gray);
+    padding: 0.5rem;
+    margin: 0;
+
+    &:has(> input, > select, > textarea) > label {
+      font-size: 0.8rem;
+      line-height: 0.8rem;
+      z-index: 10;
+    }
+
+    > input,
+    > select,
+    > textarea {
+      font: inherit;
+      line-height: initial;
+      border: none;
+      border-bottom: 1px solid var(--gray);
+      background: none;
+      z-index: 1;
+
+      &[name="value"] {
+        font-size: 1.5rem;
+        text-align: right;
+      }
+
+      &:focus {
+        outline: none;
+        background: var(--bg-01);
+      }
+    }
   }
 }
 table.file-input {
@@ -42,10 +62,18 @@ table.file-input {
 }
 
 .buttons {
+  display: grid;
+  grid-auto-columns: min-content;
+  grid-gap: var(--gap);
+  align-items: baseline;
+
+  & > * {
+    grid-row: 1;
+  }
+
   input {
     font: inherit;
     line-height: 1.5;
-    margin-left: var(--gap);
     border-radius: var(--radius);
     padding: 0 var(--gap);
     cursor: pointer;
@@ -56,13 +84,16 @@ table.file-input {
     &[type="submit"] {
       border: 0.1rem solid var(--green);
       background: var(--green-1);
+      grid-column: 1;
     }
     &[type="reset"] {
       border: 0.1rem solid var(--red);
       background: var(--red-1);
+      grid-column: 2;
     }
   }
   a.del {
     color: var(--red);
+    grid-column: 3;
   }
 }

nummi/main/templates/main/form/form_base.html

@@ -2,42 +2,28 @@
 {% load main_extras %}
 {% block fields %}
   {% if form.non_field_errors %}
-    <ul class='errorlist'>
+    <ul class="errorlist">
       {% for error in form.non_field_errors %}<li>{{ error }}</li>{% endfor %}
     </ul>
   {% endif %}
-  <table>
-    <tbody>
-      {% for field in form %}
-        {% if field.errors %}
-          <tr>
-            <td colspan="2">{{ field.errors }}</td>
-          </tr>
-        {% endif %}
-        <tr>
-          <th class="l">
-            <label for="{{ field.id_for_label }}">{{ field.label }}</label>
-          </th>
-          <td>{{ field }}</td>
-        </tr>
-      {% endfor %}
-    </tbody>
-    <tfoot>
-      <tr class="buttons">
-        <td colspan="2">
-          {% block buttons %}
-            {% if not form.instance|adding %}
-              <a class="del" href="{{ form.instance.get_delete_url }}">{% translate "Delete" %}</a>
-            {% endif %}
-            <input type="reset" value="{% translate "Reset" %}">
-            {% if form.instance|adding %}
-              <input type="submit" value="{% translate "Create" %}">
-            {% else %}
-              <input type="submit" value="{% translate "Save" %}">
-            {% endif %}
-          {% endblock %}
-        </td>
-      </tr>
-    </tfoot>
-  </table>
-{% endblock %}
+  {% for field in form %}
+    {% if field.errors %}<p class="error">{{ field.errors }}</p>{% endif %}
+    <p class="field">
+      <label for="{{ field.id_for_label }}">{{ field.label }}</label>
+      {{ field }}
+    </p>
+  {% endfor %}
+  <div class="buttons">
+    {% block buttons %}
+      {% if not form.instance|adding %}
+        <a class="del" href="{{ form.instance.get_delete_url }}">{% translate "Delete" %}</a>
+      {% endif %}
+      <input type="reset" value="{% translate "Reset" %}">
+      {% if form.instance|adding %}
+        <input type="submit" value="{% translate "Create" %}">
+      {% else %}
+        <input type="submit" value="{% translate "Save" %}">
+      {% endif %}
+    {% endblock buttons %}
+  </div>
+{% endblock fields %}

nummi/transaction/forms.py

@@ -62,5 +62,8 @@ class DatalistInput(TextInput):
 
     def get_context(self, *args):
         context = super().get_context(*args)
+        name = context["widget"]["name"]
+        context["widget"]["attrs"]["list"] = f"{name}-list"
+        context["widget"]["attrs"]["autocomplete"] = "off"
         context["widget"]["options"] = self.options
         return context

nummi/transaction/templates/transaction/forms/widgets/datalist.html

@@ -1,9 +1,4 @@
-<input autocomplete="off"
-       list="{{ widget.name }}-list"
-       type="{{ widget.type }}"
-       name="{{ widget.name }}"
-       {% if widget.value != None %}value="{{ widget.value|stringformat:'s' }}"{% endif %}
-       {% include "django/forms/widgets/attrs.html" %}>
-<datalist id="{{ widget.name }}-list">
+{% include "django/forms/widgets/text.html" %}
+<datalist id="{{ widget.attrs.list }}">
   {% for option in widget.options %}<option value="{{ option }}"></option>{% endfor %}
 </datalist>