Change form structure and add relevant CSS rules

diff --git a/mediagoblin/static/css/base.css b/mediagoblin/static/css/base.css
index afd10207acbc730dc323a7bee0cf47379516cca1..a7b659c3773c327b3f59aa6114f5e4c98917a6dd 100644 (file)
--- a/mediagoblin/static/css/base.css
+++ b/mediagoblin/static/css/base.css
@@ -212,7 +212,11 @@ text-align: center;
   width: 100%;
 }
 
-.form_field_label,.form_field_input {
+.form_field_input {
+  margin-bottom: 10px;
+}
+
+.form_field_label {
   margin-bottom: 4px;
 }
 

diff --git a/mediagoblin/templates/mediagoblin/utils/wtforms.html b/mediagoblin/templates/mediagoblin/utils/wtforms.html
index 6a86fd24f3853fa0615caae3527b5aa149eff54b..39dca7cc75796a2f101dd7b5c896a4b3f866b8cb 100644 (file)
--- a/mediagoblin/templates/mediagoblin/utils/wtforms.html
+++ b/mediagoblin/templates/mediagoblin/utils/wtforms.html
@@ -18,18 +18,16 @@
 
 {# Generically render a field #}
 {% macro render_field_div(field) %}
-  <div class="form_field_box">
-    <div class="form_field_label">{{ _(field.label.text) }}</div>
-    <div class="form_field_input">{{ field }}</div>
+  <p class="form_field_label"><label for="{{ field.name }}">{{ _(field.label.text) }}</label></p>
+  <div class="form_field_input">
+    {{ field }}
     {%- if field.errors -%}
       {% for error in field.errors %}
-        <div class="form_field_error">
-          {{ error }}
-        </div>
+        <p class="form_field_error">{{ error }}</p>
       {% endfor %}
     {%- endif %}
     {% if field.description -%}
-      <div class="form_field_description">{{ _(field.description) }}</div>
+      <p class="form_field_description">{{ _(field.description) }}</p>
     {%- endif %}
   </div>
 {%- endmacro %}