diff --git a/bakerydemo/static/css/main.css b/bakerydemo/static/css/main.css index 7bb2af1..2729688 100644 --- a/bakerydemo/static/css/main.css +++ b/bakerydemo/static/css/main.css @@ -84,7 +84,7 @@ a.btn-sm { border-radius: 4px; } -input { +.header input { border-radius: 3px; border: none; font-size: 18px; @@ -698,6 +698,38 @@ span.outline { padding: 3px 6px; text-transform: uppercase; } + +/* Forms */ +/* Form detail page */ +.form-page input, textarea, select { + display: block; + min-width: 350px; + max-width: 350px; +} + +.form-page li input[type=checkbox], input[type=radio] { + display: inline-block; + margin-right: 10px; +} + +.form-page .fieldWrapper ul, li { + list-style: none; + padding: 0; + margin: 0; +} + +.form-page .required { + color: red; +} + +.form-page .help { + color: #999; + font-family: 'Lato', sans-serif; + font-size: 0.8em; + margin-top: 10px; + max-width: 350px; +} + /* No gutters */ .row.no-gutters { margin-right: 0; diff --git a/bakerydemo/templates/base/form_page.html b/bakerydemo/templates/base/form_page.html index f0e1a35..6deb371 100644 --- a/bakerydemo/templates/base/form_page.html +++ b/bakerydemo/templates/base/form_page.html @@ -2,12 +2,49 @@ {% load wagtailcore_tags %} {% block content %} - {{ page.title }} - {{ page.intro|richtext }} - -
- {% csrf_token %} - {{ form.as_p }} - -
+
+
+
+

{{ page.title }}

+ +

{{ page.intro|richtext }}

+
+
+
+ +
+
+
+ {% comment %} + You could render your form using a Django rendering shortcut such as `{{ form.as_p }}` but that will tend towards unsemantic code, and make it difficult to style. You can read more on Django form at: + https://docs.djangoproject.com/en/1.10/topics/forms/#form-rendering-options + {% endcomment %} +
+ {% csrf_token %} + {% if form.subject.errors %} +
    + {% for error in form.subject.errors %} +
  1. {{ error|escape }}
  2. + {% endfor %} +
+ {% endif %} + + {% for field in form %} +
+ + {{ field.label_tag }}{% if field.field.required %}*{% endif %} + + {{ field }} + + {% if field.help_text %} +

{{ field.help_text|safe }}

+ {% endif %} +
+ {% endfor %} + + +
+
+
+
{% endblock content %}