Merge pull request #73 from wagtail/15-style-formpage

Styling form page

bakerydemo/base/migrations/0013_auto_20170227_2216.py

@@ -0,0 +1,20 @@
+# -*- coding: utf-8 -*-
+# Generated by Django 1.10.5 on 2017-02-27 22:16
+from __future__ import unicode_literals
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('base', '0012_auto_20170222_0756'),
+    ]
+
+    operations = [
+        migrations.RenameField(
+            model_name='formpage',
+            old_name='header_image',
+            new_name='image',
+        ),
+    ]

bakerydemo/base/models.py

@@ -200,7 +200,7 @@ class FormField(AbstractFormField):
 
 
 class FormPage(AbstractEmailForm):
-    header_image = models.ForeignKey(
+    image = models.ForeignKey(
         'wagtailimages.Image',
         null=True,
         blank=True,
@@ -210,7 +210,7 @@ class FormPage(AbstractEmailForm):
     body = StreamField(BaseStreamBlock())
     thank_you_text = RichTextField(blank=True)
     content_panels = AbstractEmailForm.content_panels + [
-        ImageChooserPanel('header_image'),
+        ImageChooserPanel('image'),
         StreamFieldPanel('body'),
         InlinePanel('form_fields', label="Form fields"),
         FieldPanel('thank_you_text', classname="full"),

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;
@@ -788,6 +788,42 @@ span.outline {
   max-width: 450px;
 }
 
+/* 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;
+}
+
+/* Form thank you page */
+.form-page-thanks h1 {
+  margin-bottom: 30px;
+}
+
 /* Generic title image header include */
 .base-header img {
   height: auto;

bakerydemo/templates/base/form_page.html

@@ -1,13 +1,52 @@
 {% extends "base.html" %}
-{% load wagtailcore_tags %}
+{% load wagtailcore_tags navigation_tags wagtailimages_tags %}
 
 {% block content %}
-    {{ page.title }}
-    {{ page.intro|richtext }}
-
-    <form action="{% pageurl page %}" method="POST">
-        {% csrf_token %}
-        {{ form.as_p }}
-        <input type="submit">
-    </form>
+{% include "base/include/header-hero.html" %}
+
+<div class="container">
+    <div class="row">
+        <div class="col-md-8">
+            {% if page.intro %}
+                <p class="intro">{{ page.intro|richtext }}</p>
+            {% endif %}
+        </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 %}

bakerydemo/templates/base/form_page_landing.html

@@ -2,7 +2,13 @@
 {% load wagtailcore_tags %}
 
 {% block content %}
-    <h1>{{ page.title }}</h1>
+{% include "base/include/header-hero.html" %}
 
-    {{ page.thank_you_text|richtext }}
+<div class="container form-page-thanks">
+    <div class="row">
+        <div class="col-md-7">
+            {{ page.thank_you_text|richtext }}
+        </div>
+    </div>
+</div>
 {% endblock content %}

bakerydemo/templates/base/include/header-hero.html

@@ -0,0 +1,23 @@
+{% load wagtailcore_tags wagtailimages_tags %}
+
+{% if page.image %}
+    {% image page.image fill-1920x600 as image %}
+    <div class="container-fluid hero" style="background-image:url('{{ image.url }}')">
+    <div class="hero-gradient-mask"></div>
+        <div class="container">
+            <div class="row">
+                <div class="col-md-7">
+                    <h1>{{ page.title }}</h1>
+                </div>
+            </div>
+        </div>
+    </div>
+{% else %}
+    <div class="container">
+        <div class="row">
+            <div class="col-md-7">
+                <h1>{{ page.title }}</h1>
+            </div>
+        </div>
+    </div>
+{% endif %}