form_field.html: moved helptext to above input field

liqd · Sep 30, 2024 · 97490d8 · 97490d8
1 parent 3f86da1
commit 97490d8
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 7 deletions.
diff --git a/meinberlin/apps/contrib/templates/meinberlin_contrib/includes/form_field.html b/meinberlin/apps/contrib/templates/meinberlin_contrib/includes/form_field.html
@@ -10,18 +10,18 @@
         {% block after_label %}{% endblock after_label %}
     </label>
 
-    {% block field %}
-        <div class="widget widget--{{ field|widget_type }}">
-            {{ field|add_error_attr:"aria-invalid:true" }}
-        </div>
-    {% endblock field %}
-
     {% if field.help_text and not field.name == "password" %}
         <span class="formgroup__help">
             {{ field.help_text }}
         </span>
     {% endif %}
 
+    {% block field %}
+        <div class="widget widget--{{ field|widget_type }}">
+            {{ field|add_error_attr:"aria-invalid:true" }}
+        </div>
+    {% endblock field %}
+
     {% if field.errors %}
         <ul class="errorlist" aria-live="assertive" aria-atomic="true">
             {% for error in field.errors %}

diff --git a/meinberlin/assets/scss/styles_user_facing/_form.scss b/meinberlin/assets/scss/styles_user_facing/_form.scss
@@ -15,4 +15,9 @@ button {
 
 .formgroup__help {
   font-size: 14px;
-}
+
+  label + & {
+    margin-top: -0.4em;
+    margin-bottom: 0.4em;
+  }
+}