Fix fileinput

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

@@ -29,16 +29,15 @@ form {
       border: none;
     }
 
-    p.field {
+    .field {
       display: grid;
       grid-auto-rows: min-content;
-      margin: 0;
 
       &:has(> textarea) {
         grid-template-rows: min-content 1fr;
       }
 
-      &:has(> input, > select, > textarea) > label {
+      > label {
         font-size: 0.8rem;
         line-height: 0.8rem;
         z-index: 10;
@@ -54,7 +53,7 @@ form {
         background: none;
         z-index: 1;
 
-        &[name="value"] {
+        &.value {
           font-size: 1.5rem;
           text-align: right;
         }
@@ -64,6 +63,17 @@ form {
           background: var(--bg-01);
         }
       }
+
+      > .file-input {
+        display: grid;
+
+        > .current {
+          display: grid;
+          grid-template-columns: 1fr;
+          grid-auto-columns: max-content;
+          grid-auto-flow: column;
+        }
+      }
     }
   }
   .buttons {
@@ -104,18 +114,3 @@ form {
     }
   }
 }
-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/fileinput.html

@@ -1,5 +1,25 @@
 {% load i18n %}
 {% load main_extras %}
+<div class="file-input">
+  {% if widget.is_initial %}
+    <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">
+          <label for="{{ widget.checkbox_id }}">{{ widget.clear_checkbox_label }}</label>
+          <input type="checkbox"
+                 name="{{ widget.checkbox_name }}"
+                 id="{{ widget.checkbox_id }}"
+                 {% if widget.attrs.disabled %}disabled{% endif %}>
+        </span>
+      {% endif %}
+    </div>
+  {% endif %}
+  <input type="{{ widget.type }}"
+         name="{{ widget.name }}"
+         {% include "django/forms/widgets/attrs.html" %}>
+</div>
+{% comment %}
 <table class="file-input">
   {% if widget.is_initial %}
     <tr>
@@ -14,10 +34,7 @@
           <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 %}>
+          <input type="checkbox" name="{{ widget.checkbox_name }}" id="{{ widget.checkbox_id }}" {% if widget.attrs.disabled %}disabled{% endif %}>
         </td>
       </tr>
     {% endif %}
@@ -28,9 +45,8 @@
         <tr>
           <td colspan="2">
           {% endif %}
-          <input type="{{ widget.type }}"
-                 name="{{ widget.name }}"
-                 {% include "django/forms/widgets/attrs.html" %}>
+          <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

@@ -13,10 +13,10 @@
           <div class="fieldset">
             {% for field in fieldset %}
               {% if field.errors %}<p class="error">{{ field.errors }}</p>{% endif %}
-              <p class="field">
+              <div class="field">
                 <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                 {{ field }}
-              </p>
+              </div>
             {% endfor %}
           </div>
         {% endfor %}
@@ -26,10 +26,10 @@
     <div class="column">
       {% for field in form %}
         {% if field.errors %}<p class="error">{{ field.errors }}</p>{% endif %}
-        <p class="field">
+        <div class="field">
           <label for="{{ field.id_for_label }}">{{ field.label }}</label>
           {{ field }}
-        </p>
+        </div>
       {% endfor %}
     </div>
   {% endif %}