Improve forms

nummi/main/forms.py

@@ -10,3 +10,9 @@ class NummiForm(forms.ModelForm):
 
     def __init__(self, *args, user, **kwargs):
         super().__init__(*args, **kwargs)
+
+    def get_context(self):
+        context = super().get_context()
+        context["fieldsets"] = [[[field] for field in self]]
+
+        return context

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

@@ -6,9 +6,26 @@ form ul.errorlist {
 }
 
 form {
-  max-width: 32rem;
   display: grid;
   grid-gap: var(--gap);
+  grid-template-columns: repeat(auto-fill, 32rem);
+  @media (width < 1024px) {
+    grid-template-columns: 1fr;
+  }
+
+  .column {
+    display: grid;
+    grid-gap: var(--gap);
+
+    .fieldset {
+      display: grid;
+      grid-auto-columns: 1fr;
+      grid-auto-flow: column;
+      grid-gap: var(--gap);
+      padding: 0;
+      margin: 0;
+      border: none;
+    }
 
     p.field {
       display: grid;
@@ -17,6 +34,10 @@ form {
       padding: 0.5rem;
       margin: 0;
 
+      &:has(> textarea) {
+        grid-template-rows: min-content 1fr;
+      }
+
       &:has(> input, > select, > textarea) > label {
         font-size: 0.8rem;
         line-height: 0.8rem;
@@ -45,23 +66,8 @@ form {
       }
     }
   }
-table.file-input {
-  tr {
-    border: none;
-
-    :first-child {
-      padding-left: 0;
-    }
-    :last-child {
-      padding-right: 0;
-    }
-  }
-  th {
-    text-align: left;
-  }
-}
-
   .buttons {
+    grid-column: 1 / -1;
     display: grid;
     grid-auto-columns: min-content;
     grid-gap: var(--gap);
@@ -97,3 +103,19 @@ table.file-input {
       grid-column: 3;
     }
   }
+}
+table.file-input {
+  tr {
+    border: none;
+
+    :first-child {
+      padding-left: 0;
+    }
+    :last-child {
+      padding-right: 0;
+    }
+  }
+  th {
+    text-align: left;
+  }
+}

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

@@ -6,13 +6,31 @@
       {% for error in form.non_field_errors %}<li>{{ error }}</li>{% endfor %}
     </ul>
   {% endif %}
-  {% for field in form %}
+  {% for group in fieldsets %}
+    <div class="column">
+      {% for fieldset in group %}
+        {% if fieldset|length > 1 %}
+          <div class="fieldset">
+            {% for field in fieldset %}
               {% 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>
+        {% else %}
+          {% with fieldset.0 as field %}
+            {% if field.errors %}<p class="error">{{ field.errors }}</p>{% endif %}
+            <p class="field">
+              <label for="{{ field.id_for_label }}">{{ field.label }}</label>
+              {{ field }}
+            </p>
+          {% endwith %}
+        {% endif %}
+      {% endfor %}
+    </div>
+  {% endfor %}
   <div class="buttons">
     {% block buttons %}
       {% if not form.instance|adding %}

nummi/transaction/forms.py

@@ -35,9 +35,28 @@ class TransactionForm(NummiForm):
         self.fields["payment"].widget = DatalistInput(
             options=get_datalist(_user, "payment")
         )
+
         if _disable_statement:
             self.fields["statement"].disabled = True
 
+    def get_context(self):
+        context = super().get_context()
+        context["fieldsets"] = [
+            [
+                [self["statement"]],
+                [self["name"]],
+                [self["value"]],
+                [self["date"], self["real_date"]],
+                [self["category"]],
+                [self["trader"], self["payment"]],
+            ],
+            [
+                [self["description"]],
+            ],
+        ]
+
+        return context
+
 
 class InvoiceForm(NummiForm):
     prefix = "invoice"