Improve forms

Form errors displayed correctly (fix #30)
Fix #26
Close #20

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

@@ -1,10 +1,3 @@
-form ul.errorlist {
-  color: var(--red);
-  font-weight: 550;
-  list-style-type: "! ";
-  margin: 0;
-}
-
 form {
   display: grid;
   gap: 0.5rem;
@@ -29,26 +22,43 @@ form {
       border: none;
     }
 
+    ul.errorlist {
+      color: var(--red);
+      font-weight: 550;
+      list-style: none;
+      padding: 0;
+      margin: 0;
+    }
+
     .field {
       display: grid;
       grid-auto-rows: min-content;
       align-items: center;
-      overflow: hidden;
       column-gap: 0.5rem;
 
+      ul.errorlist {
+        font-size: 0.8rem;
+      }
+
       &:has(> textarea) {
         grid-template-rows: min-content 1fr;
       }
-      &:has(input[type="checkbox"]) {
+      &:has(> input[type="checkbox"]) {
         grid-template-columns: min-content 1fr;
         > label {
           font-size: inherit;
           grid-row: 1;
           grid-column: 2;
+          padding: 0.5rem;
+          line-height: initial;
         }
         > input {
           grid-row: 1;
           grid-column: 1;
+          margin: 0.5rem;
+        }
+        &:has(> :focus) {
+          background: var(--bg-01);
         }
       }
 
@@ -64,13 +74,19 @@ form {
         font: inherit;
         line-height: initial;
         border: none;
+        border: 1px solid transparent;
         border-bottom: 1px solid var(--gray);
         background: none;
         z-index: 1;
-        padding: 0;
+        padding: 0.5rem;
+
+        &:has(~ ul.errorlist) {
+          border-color: var(--red);
+        }
 
         &:not([type="checkbox"]) {
           width: 100%;
+          margin: 0;
         }
 
         &[name*="value"] {
@@ -95,6 +111,9 @@ form {
           grid-template-columns: 1fr;
           grid-auto-columns: max-content;
           grid-auto-flow: column;
+          a {
+            padding: 0.5rem;
+          }
         }
 
         input[type="file"] {
@@ -107,6 +126,14 @@ form {
         display: grid;
         grid-template-columns: min-content 1fr;
         column-gap: 0.5rem;
+        align-items: center;
+        span[class|="ri"] {
+          padding: 0.5rem;
+        }
+
+        &:has(> :focus) {
+          background: var(--bg-01);
+        }
       }
     }
   }

nummi/main/templates/main/form/fileinput.html

@@ -5,7 +5,7 @@
     <div class="current">
       <a href="{{ widget.value.url }}" target="_blank">{{ "file"|remix }}{% translate "File" %} [{{ widget.value|extension }}]</a>
       {% if not widget.required %}
-        <span class="checkbox">
+        <span class="field checkbox">
           <label for="{{ widget.checkbox_id }}">{{ widget.clear_checkbox_label }}</label>
           <input type="checkbox"
                  name="{{ widget.checkbox_name }}"
@@ -19,34 +19,3 @@
          name="{{ widget.name }}"
          {% include "django/forms/widgets/attrs.html" %}>
 </div>
-{% comment %}
-<table class="file-input">
-  {% if widget.is_initial %}
-    <tr>
-      <th>{{ widget.initial_text }}</th>
-      <td>
-        <a href="{{ widget.value.url }}">{% translate "File" %} [{{ widget.value|extension }}]</a>
-      </td>
-    </tr>
-    {% if not widget.required %}
-      <tr>
-        <th>
-          <label for="{{ widget.checkbox_id }}">{{ widget.clear_checkbox_label }}</label>
-        </th>
-        <td>
-          <input type="checkbox" name="{{ widget.checkbox_name }}" id="{{ widget.checkbox_id }}" {% if widget.attrs.disabled %}disabled{% endif %}>
-        </td>
-      </tr>
-    {% endif %}
-    <tr>
-      <th>{{ widget.input_text }}</th>
-      <td>
-      {% else %}
-        <tr>
-          <td colspan="2">
-          {% endif %}
-          <input type="{{ widget.type }}" name="{{ widget.name }}" {% include "django/forms/widgets/attrs.html" %}>
-        </td>
-      </tr>
-    </table>
-{% endcomment %}

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

@@ -12,10 +12,16 @@
         {% for fieldset in group %}
           <div class="fieldset">
             {% for field in fieldset %}
-              {% if field.errors %}<p class="error">{{ field.errors }}</p>{% endif %}
               <div class="field">
                 <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                 {{ field }}
+                {% if field.errors %}
+                  <ul class="errorlist">
+                    {% for error in field.errors %}
+                      <li class="wi">{{ "error-warning"|remix }}{{ error }}</li>
+                    {% endfor %}
+                  </ul>
+                {% endif %}
               </div>
             {% endfor %}
           </div>