Initial styling of form page. Workson #15

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;

bakerydemo/templates/base/form_page.html

@@ -2,12 +2,49 @@
 {% load wagtailcore_tags %}
 
 {% block content %}
-    {{ page.title }}
-    {{ page.intro|richtext }}
-
-    <form action="{% pageurl page %}" method="POST">
-        {% csrf_token %}
-        {{ form.as_p }}
-        <input type="submit">
-    </form>
+<div class="container">
+    <div class="row">
+        <div class="col-md-8">
+            <h1>{{ page.title }}</h1>
+            
+            <p class="intro">{{ page.intro|richtext }}</p>
+        </div>
+    </div>
+</div>
+
+<div class="container">
+    <div class="row">
+        <div class="col-md-8 form-page">
+        {% 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 %}
+            <form action="{% pageurl page %}" method="POST">
+                {% csrf_token %}
+                {% if form.subject.errors %}
+                    <ol>
+                    {% for error in form.subject.errors %}
+                        <li><strong>{{ error|escape }}</strong></li>
+                    {% endfor %}
+                    </ol>
+                {% endif %}
+
+                {% for field in form %}
+                    <div class="fieldWrapper">
+                        
+                        {{ field.label_tag }}{% if field.field.required %}<span class="required">*</span>{% endif %}
+
+                        {{ field }}
+                        
+                        {% if field.help_text %}
+                            <p class="help">{{ field.help_text|safe }}</p>
+                        {% endif %}
+                    </div>
+                {% endfor %}
+
+                <input type="submit">
+            </form>
+        </div>
+    </div>
+</div>
 {% endblock content %}