Merge branch 'master' of github.com:wagtail/bakerydemo

app.json

@@ -2,7 +2,6 @@
   "name": "WagtailBakeryDemo",
   "description": "WagtailBakeryDemo",
   "repository": "https://github.com/wagtail/bakerydemo",
-  "logo": "http://wagtail.io/static/wagtailsite/images/navlogo2.png",
   "keywords": ["wagtail", "django"],
   "env": {
     "DJANGO_SETTINGS_MODULE": "bakerydemo.settings.heroku"

bakerydemo/base/blocks.py

@@ -54,7 +54,6 @@ class BaseStreamBlock(StreamBlock):
     """
     Define the custom blocks that `StreamField` will utilize
     """
-    intro_block = TextBlock()
     heading_block = HeadingBlock()
     paragraph_block = RichTextBlock(
         icon="fa-paragraph",

bakerydemo/base/management/commands/load_initial_data.py

@@ -11,3 +11,4 @@ class Command(BaseCommand):
         fixture_file = os.path.join(fixtures_dir, 'bakerydemo.json')
 
         call_command('loaddata', fixture_file, verbosity=0)
+        print("Awesome. Your data is loaded! The bakery's doors are almost ready to open...")

bakerydemo/base/migrations/0008_auto_20170211_2232.py

@@ -0,0 +1,34 @@
+# -*- coding: utf-8 -*-
+# Generated by Django 1.10.5 on 2017-02-11 22:32
+from __future__ import unicode_literals
+
+from django.db import migrations
+import wagtail.wagtailcore.blocks
+import wagtail.wagtailcore.fields
+import wagtail.wagtailembeds.blocks
+import wagtail.wagtailimages.blocks
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('base', '0007_merge_20170210_1627'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='aboutpage',
+            name='body',
+            field=wagtail.wagtailcore.fields.StreamField((('heading_block', wagtail.wagtailcore.blocks.StructBlock((('heading_text', wagtail.wagtailcore.blocks.CharBlock(classname='title', required=True)), ('size', wagtail.wagtailcore.blocks.ChoiceBlock(blank=True, choices=[('', 'Select a header size'), ('h2', 'H2'), ('h3', 'H3'), ('h4', 'H4')], required=False))))), ('paragraph_block', wagtail.wagtailcore.blocks.RichTextBlock(icon='fa-paragraph', template='blocks/paragraph_block.html')), ('image_block', wagtail.wagtailcore.blocks.StructBlock((('image', wagtail.wagtailimages.blocks.ImageChooserBlock(required=True)), ('caption', wagtail.wagtailcore.blocks.CharBlock(required=False)), ('attribution', wagtail.wagtailcore.blocks.CharBlock(required=False))))), ('block_quote', wagtail.wagtailcore.blocks.StructBlock((('text', wagtail.wagtailcore.blocks.TextBlock()), ('attribute_name', wagtail.wagtailcore.blocks.CharBlock(blank=True, label='e.g. Guy Picciotto', required=False))))), ('embed_block', wagtail.wagtailembeds.blocks.EmbedBlock(help_text='Insert an embed URL e.g https://www.youtube.com/embed/SGJFWirQ3ks', icon='fa-s15', template='blocks/embed_block.html'))), blank=True, verbose_name='About page detail'),
+        ),
+        migrations.AlterField(
+            model_name='formpage',
+            name='body',
+            field=wagtail.wagtailcore.fields.StreamField((('heading_block', wagtail.wagtailcore.blocks.StructBlock((('heading_text', wagtail.wagtailcore.blocks.CharBlock(classname='title', required=True)), ('size', wagtail.wagtailcore.blocks.ChoiceBlock(blank=True, choices=[('', 'Select a header size'), ('h2', 'H2'), ('h3', 'H3'), ('h4', 'H4')], required=False))))), ('paragraph_block', wagtail.wagtailcore.blocks.RichTextBlock(icon='fa-paragraph', template='blocks/paragraph_block.html')), ('image_block', wagtail.wagtailcore.blocks.StructBlock((('image', wagtail.wagtailimages.blocks.ImageChooserBlock(required=True)), ('caption', wagtail.wagtailcore.blocks.CharBlock(required=False)), ('attribution', wagtail.wagtailcore.blocks.CharBlock(required=False))))), ('block_quote', wagtail.wagtailcore.blocks.StructBlock((('text', wagtail.wagtailcore.blocks.TextBlock()), ('attribute_name', wagtail.wagtailcore.blocks.CharBlock(blank=True, label='e.g. Guy Picciotto', required=False))))), ('embed_block', wagtail.wagtailembeds.blocks.EmbedBlock(help_text='Insert an embed URL e.g https://www.youtube.com/embed/SGJFWirQ3ks', icon='fa-s15', template='blocks/embed_block.html')))),
+        ),
+        migrations.AlterField(
+            model_name='homepage',
+            name='body',
+            field=wagtail.wagtailcore.fields.StreamField((('heading_block', wagtail.wagtailcore.blocks.StructBlock((('heading_text', wagtail.wagtailcore.blocks.CharBlock(classname='title', required=True)), ('size', wagtail.wagtailcore.blocks.ChoiceBlock(blank=True, choices=[('', 'Select a header size'), ('h2', 'H2'), ('h3', 'H3'), ('h4', 'H4')], required=False))))), ('paragraph_block', wagtail.wagtailcore.blocks.RichTextBlock(icon='fa-paragraph', template='blocks/paragraph_block.html')), ('image_block', wagtail.wagtailcore.blocks.StructBlock((('image', wagtail.wagtailimages.blocks.ImageChooserBlock(required=True)), ('caption', wagtail.wagtailcore.blocks.CharBlock(required=False)), ('attribution', wagtail.wagtailcore.blocks.CharBlock(required=False))))), ('block_quote', wagtail.wagtailcore.blocks.StructBlock((('text', wagtail.wagtailcore.blocks.TextBlock()), ('attribute_name', wagtail.wagtailcore.blocks.CharBlock(blank=True, label='e.g. Guy Picciotto', required=False))))), ('embed_block', wagtail.wagtailembeds.blocks.EmbedBlock(help_text='Insert an embed URL e.g https://www.youtube.com/embed/SGJFWirQ3ks', icon='fa-s15', template='blocks/embed_block.html'))), blank=True, verbose_name='Home page detail'),
+        ),
+    ]

bakerydemo/blog/migrations/0003_auto_20170211_2120.py

@@ -0,0 +1,29 @@
+# -*- coding: utf-8 -*-
+# Generated by Django 1.10.5 on 2017-02-11 21:20
+from __future__ import unicode_literals
+
+from django.db import migrations, models
+import wagtail.wagtailcore.blocks
+import wagtail.wagtailcore.fields
+import wagtail.wagtailembeds.blocks
+import wagtail.wagtailimages.blocks
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('blog', '0002_auto_20170210_1556'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='blogpage',
+            name='introduction',
+            field=models.CharField(blank=True, max_length=255),
+        ),
+        migrations.AlterField(
+            model_name='blogpage',
+            name='body',
+            field=wagtail.wagtailcore.fields.StreamField((('heading_block', wagtail.wagtailcore.blocks.StructBlock((('heading_text', wagtail.wagtailcore.blocks.CharBlock(classname='title', required=True)), ('size', wagtail.wagtailcore.blocks.ChoiceBlock(blank=True, choices=[('', 'Select a header size'), ('h2', 'H2'), ('h3', 'H3'), ('h4', 'H4')], required=False))))), ('paragraph_block', wagtail.wagtailcore.blocks.RichTextBlock(icon='fa-paragraph', template='blocks/paragraph_block.html')), ('image_block', wagtail.wagtailcore.blocks.StructBlock((('image', wagtail.wagtailimages.blocks.ImageChooserBlock(required=True)), ('caption', wagtail.wagtailcore.blocks.CharBlock(required=False)), ('attribution', wagtail.wagtailcore.blocks.CharBlock(required=False))))), ('block_quote', wagtail.wagtailcore.blocks.StructBlock((('text', wagtail.wagtailcore.blocks.TextBlock()), ('attribute_name', wagtail.wagtailcore.blocks.CharBlock(blank=True, label='e.g. Guy Picciotto', required=False))))), ('embed_block', wagtail.wagtailembeds.blocks.EmbedBlock(help_text='Insert an embed URL e.g https://www.youtube.com/embed/SGJFWirQ3ks', icon='fa-s15', template='blocks/embed_block.html'))), blank=True, verbose_name='Blog post'),
+        ),
+    ]

bakerydemo/blog/models.py

@@ -11,7 +11,7 @@ from taggit.models import Tag, TaggedItemBase
 
 from wagtail.contrib.wagtailroutablepage.models import RoutablePageMixin, route
 from wagtail.wagtailadmin.edit_handlers import (
-    FieldPanel, InlinePanel, StreamFieldPanel,
+    FieldPanel, InlinePanel, StreamFieldPanel, MultiFieldPanel
 )
 from wagtail.wagtailcore.fields import StreamField
 from wagtail.wagtailcore.models import Page, Orderable
@@ -47,6 +47,7 @@ class BlogPage(Page):
     A Blog Page (Post)
     """
     subtitle = models.CharField(blank=True, max_length=255)
+    introduction = models.CharField(blank=True, max_length=255)
     image = models.ForeignKey(
         'wagtailimages.Image',
         null=True,
@@ -65,7 +66,10 @@ class BlogPage(Page):
     )
 
     content_panels = Page.content_panels + [
-        FieldPanel('subtitle'),
+        MultiFieldPanel([
+            FieldPanel('subtitle'),
+            FieldPanel('introduction'),
+        ]),
         ImageChooserPanel('image'),
         StreamFieldPanel('body'),
         FieldPanel('date_published'),

bakerydemo/locations/migrations/0002_auto_20170211_2229.py

@@ -0,0 +1,21 @@
+# -*- coding: utf-8 -*-
+# Generated by Django 1.10.5 on 2017-02-11 22:29
+from __future__ import unicode_literals
+
+import django.core.validators
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('locations', '0001_initial'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='locationpage',
+            name='lat_long',
+            field=models.CharField(help_text="Comma separated lat/long. (Ex. 64.144367, -21.939182)                    Right click Google Maps and click 'What's Here'", max_length=36, validators=[django.core.validators.RegexValidator(code='invalid_lat_long', message='Lat Long must be a comma separated numeric lat and long', regex='^(\\-?\\d+(\\.\\d+)?),\\s*(\\-?\\d+(\\.\\d+)?)$')]),
+        ),
+    ]

bakerydemo/locations/models.py

@@ -1,3 +1,4 @@
+from django.core.validators import RegexValidator
 from django.db import models
 
 from modelcluster.fields import ParentalKey
@@ -78,7 +79,7 @@ class LocationsIndexPage(Page):
 
 class LocationPage(Page):
     """
-    Detail for a specific location
+    Detail for a specific bakery location.
     """
 
     address = models.TextField()
@@ -92,7 +93,14 @@ class LocationPage(Page):
     lat_long = models.CharField(
         max_length=36,
         help_text="Comma separated lat/long. (Ex. 64.144367, -21.939182) \
-                   Right click Google Maps and click 'What\'s Here'"
+                   Right click Google Maps and select 'What\'s Here'",
+        validators=[
+            RegexValidator(
+                regex='^(\-?\d+(\.\d+)?),\s*(\-?\d+(\.\d+)?)$',
+                message='Lat Long must be a comma-separated numeric lat and long',
+                code='invalid_lat_long'
+            ),
+        ]
     )
 
     # Search index configuration

bakerydemo/search/views.py

@@ -11,7 +11,7 @@ from bakerydemo.locations.models import LocationPage
 
 def search(request):
     # Search
-    search_query = request.GET.get('query', None)
+    search_query = request.GET.get('q', None)
     if search_query:
         """
         Because we can't use ElasticSearch for the demo, we use the native db search.

bakerydemo/settings/heroku.py

@@ -8,7 +8,7 @@ DEBUG = True
 # Accept all hostnames, since we don't know in advance which hostname will be used for any given Heroku instance.
 # IMPORTANT: Set this to a real hostname when using this in production!
 # See https://docs.djangoproject.com/en/1.10/ref/settings/#allowed-hosts
-ALLOWED_HOSTS = ['*', 'wagtailbakerydemo.herokuapp.com']
+ALLOWED_HOSTS = ['*', ]
 
 EMAIL_BACKEND = 'django.core.mail.backends.console.EmailBackend'
 
@@ -22,8 +22,3 @@ DATABASES['default'].update(db_from_env)
 # https://warehouse.python.org/project/whitenoise/
 
 STATICFILES_STORAGE = 'whitenoise.django.GzipManifestStaticFilesStorage'
-
-try:
-    from .local import *
-except ImportError:
-    pass

bakerydemo/static/css/main.css

@@ -10,7 +10,7 @@ body {
   background: -webkit-linear-gradient(-45deg,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 50%,rgba(233,228,221,1) 100%); /* Chrome10-25,Safari5.1-6 */
   background: linear-gradient(135deg,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 50%,rgba(233,228,221,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e9e4dd',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
-
+  min-height: 100vh;
 }
 
 @media (min-width: 768px) {
@@ -20,21 +20,14 @@ body {
 }
 
 h1 {
-  color: white;
   font-weight: 900;
   font-family: 'Lato', sans-serif;
   position: relative;
 }
 
-/*h1:before {
-  position: absolute;
-  top: -40px;
-  left: -100px;
-  width: 200px;
-  height: 1px;
-  background-color: #d4566b;
-  content: '';
-}*/
+.hero h1 {
+  color: white;
+}
 
 h2 {
   font-weight: 900;
@@ -236,20 +229,37 @@ nav {
   }
 }
 
-.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover {
+.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover,
+.nav-pills>li.active, .nav-pills>li:hover, .breadcrumb>li+li:hover:before,
+.nav>li>a:focus, .nav>li>a:hover {
   color: #d4566b;
   background-color: transparent;
   border-top: 1px solid #d4566b;
   font-weight: 600;
 }
 
-.nav>li>a:focus, .nav>li>a:hover {
-  text-decoration: none;
+.nav .open>a, .nav .open>a:focus, .nav .open>a:hover {
   background-color: transparent;
   border-top: 1px solid #d4566b;
-  color: #d4566b;
 }
 
+.dropdown-menu {
+  background-color: rgba(25,17,18,1);
+  border-radius: 0;
+  border: transparent;
+}
+
+.dropdown-menu > li> a {
+  border-bottom: 1px solid #371c19;
+  color: #fff;
+  font-family: 'Lato', sans-serif;
+  padding: 10px 20px;
+}
+
+.dropdown-menu > li> a:hover {
+  background-color: transparent;
+  color: #d4566b;
+}
 /* Everything but the jumbotron gets side spacing for mobile first views */
 .footer {
   font-size: 16px;
@@ -269,7 +279,11 @@ nav {
   padding: 15px 0 15px;
 /*  position: absolute;*/
   width: 100%;
-  background-color: rgba(25,17,18,1);
+  background: rgb(25,17,18); /* Old browsers */
+  background: -moz-linear-gradient(-45deg,  rgba(25,17,18,1) 0%, rgba(55,28,25,1) 100%); /* FF3.6-15 */
+  background: -webkit-linear-gradient(-45deg,  rgba(25,17,18,1) 0%,rgba(55,28,25,1) 100%); /* Chrome10-25,Safari5.1-6 */
+  background: linear-gradient(135deg,  rgba(25,17,18,1) 0%,rgba(55,28,25,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#191112', endColorstr='#371c19',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
   z-index: 10;
 }
 /* Make the masthead heading the same height as the navigation */
@@ -477,3 +491,8 @@ li.has-submenu a.allow-toggle {
   content: "\00BB";
 }
 
+/* Mobile nav */
+.navbar-toggle .icon-bar {
+  background-color: #fff;
+}
+

bakerydemo/static/css/main2.css

@@ -1,5 +0,0 @@
-.hero{
-	height: 600px;
-	background-size: cover;
-	background-position: center;
-}

bakerydemo/templates/404.html

@@ -4,8 +4,8 @@
 
 {% block body_class %}template-404{% endblock %}
 
-{% block content %}
+{% block content-header %}
     <h1>Page not found</h1>
 
     <h2>Sorry, this page could not be found.</h2>
-{% endblock %}
+{% endblock content-header %}

bakerydemo/templates/about_page.html

@@ -1,13 +1,15 @@
 {% extends "base.html" %}
 {% load wagtailimages_tags %}
 
-{% block content %}
+{% block content-header %}
     {{ page.title }}
 
     <div class="image">
         {% image page.image width-500 as photo %}
               <img src="{{ photo.url }}" width="{{ photo.width }}" height="{{ photo.height }}" alt="{{ photo.alt }}" />
     </div>
+{% endblock content-header %}
 
+{% block content-body %}
     {{ page.body }}
-{% endblock content %}
+{% endblock content-body %}

bakerydemo/templates/base.html

@@ -1,145 +1,48 @@
 {% load navigation_tags static wagtailuserbar %}
 
-<!DOCTYPE html>
-<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
-<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
-<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
-<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
-    <head>
-        <meta charset="utf-8">
-        <meta http-equiv="X-UA-Compatible" content="IE=edge">
-        <title>
-            {% block title %}
-                {% block title_prefix %}
-                    Wagtail demo bakery
-                {% endblock %}
-                {% if self.seo_title %}
-                    {{ self.seo_title }}
-                {% else %}
-                    {{ self.title }}
-                {% endif %}
-            {% endblock %}
-        </title>
-        <meta name="description" content="{% if self.search_description %}{{ self.search_description }}{% endif %}">
-        <meta name="viewport" content="width=device-width, initial-scale=1">
-
-        <!-- Bootstrap Core CSS -->
-        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
-
-        <!-- Custom Fonts -->
-        <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
-
-        <!-- Theme CSS -->
-        {# <link href="css/clean-blog.min.css" rel="stylesheet">#}
-        <link rel="stylesheet" type="text/css" href="{% static 'css/main.css' %}">
-        <link rel="stylesheet" type="text/css" href="{% static 'css/main2.css' %}">
-
-
-        <link href='https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
-        <link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
-
-        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
-        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
-        <!--[if lt IE 9]>
-            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
-            <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
-        <![endif]-->
-
-</head>
+{% block head %}
+    {% include "includes/head.html" %}
+{% endblock head %}
 
 <body>
+{% wagtailuserbar %}
 
-    {% wagtailuserbar %}
+{% block header %}
+    {% include "includes/header.html" with parent=site_root calling_page=self %}
+    {# Header contains the main_navigation block #}
+{% endblock header %}
 
-    <div class="header clearfix">
-      <div class="container">
-        <div class="row">
-          <div class="col-lg-12">
-            <a href="#" class="logo">The Wagtail Bakery 🍞</a>
-            <form action="/search" method="get" class="search" _lpchecked="1">
-              <input name="q" type="text" placeholder="Search the site" id="" aria-label="Search the site" autocomplete="off">
-              <a href="#" class="search-icon">
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 451 451"><path d="M447.05 428l-109.6-109.6c29.4-33.8 47.2-77.9 47.2-126.1C384.65 86.2 298.35 0 192.35 0 86.25 0 .05 86.3.05 192.3s86.3 192.3 192.3 192.3c48.2 0 92.3-17.8 126.1-47.2L428.05 447c2.6 2.6 6.1 4 9.5 4s6.9-1.3 9.5-4c5.2-5.2 5.2-13.8 0-19zM26.95 192.3c0-91.2 74.2-165.3 165.3-165.3 91.2 0 165.3 74.2 165.3 165.3s-74.1 165.4-165.3 165.4c-91.1 0-165.3-74.2-165.3-165.4z"></path></svg>
-              </a>
-            </form>
-            {% block main_navigation %}
-            <nav>
-              <ul class="nav nav-pills">
-                {% get_site_root as site_root %}
-                {% top_menu parent=site_root calling_page=self %}
-                {# main_menu is defined in base/templatetags/navigation_tags.py #}
-              </ul>
-            </nav>
-          </div>
-        </div>
-      </div>
-      {% endblock %}
-    </div>
+{% block head-extra %}
+{% endblock head-extra %}
 
-    {% if messages %}
-    <div>
-        <ul class="messages">
-            {% for message in messages %}
-            <li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</li>
-            {% endfor %}
-        </ul>
-    </div>
-    {% endif %}
+{% block messages %}
+    {% include "includes/messages.html" %}
+{% endblock messages %}
 
-    {% block breadcrumbs %}
-        {% breadcrumbs %}
-    {# breadcrumbs is defined in base/templatetags/navigation_tags.py #}
-    {% endblock %}
+    <content>
+        {% block content-header %}
+        {% endblock content-header %}
 
-    <content> 
-        {% block content %}
-        {% endblock %}
+        {% block breadcrumbs %}
+            {% breadcrumbs %}
+            {# breadcrumbs is defined in base/templatetags/navigation_tags.py #}
+        {% endblock breadcrumbs %}
+
+        {% block content-body %}
+        {% endblock content-body %}
     </content>
 
     <hr>
 
     <!-- Footer -->
     <footer>
-        <div class="container">
-            <div class="row">
-                <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
-                    <ul class="list-inline text-center">
-                        <li>
-                            <a href="#">
-                                <span class="fa-stack fa-lg">
-                                    <i class="fa fa-circle fa-stack-2x"></i>
-                                    <i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
-                                </span>
-                            </a>
-                        </li>
-                        <li>
-                            <a href="#">
-                                <span class="fa-stack fa-lg">
-                                    <i class="fa fa-circle fa-stack-2x"></i>
-                                    <i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
-                                </span>
-                            </a>
-                        </li>
-                        <li>
-                            <a href="#">
-                                <span class="fa-stack fa-lg">
-                                    <i class="fa fa-circle fa-stack-2x"></i>
-                                    <i class="fa fa-github fa-stack-1x fa-inverse"></i>
-                                </span>
-                            </a>
-                        </li>
-                    </ul>
-                    <p class="copyright text-center text-muted">{% get_footer_text %}</p>
-                </div>
-            </div>
-        </div>
+        {% include "includes/footer.html" %}
     </footer>
 
     <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
 
-
     <!-- Theme JavaScript -->
     <script src="{% static 'js/clean-blog.min.js' %}"></script>
 

bakerydemo/templates/base/about_page.html

@@ -1,13 +1,15 @@
 {% extends "base.html" %}
 {% load wagtailimages_tags %}
 
-{% block content %}
+{% block content-header %}
     {{ page.title }}
 
     <div class="image">
         {% image page.image width-500 as photo %}
               <img src="{{ photo.url }}" width="{{ photo.width }}" height="{{ photo.height }}" alt="{{ photo.alt }}" />
     </div>
+{% endblock content-header %}
 
+{% block content-body %}
     {{ page.body }}
-{% endblock content %}
+{% endblock content-body %}

bakerydemo/templates/base/form_page.html

@@ -1,12 +1,15 @@
 {% extends "base.html" %}
 {% load wagtailcore_tags %}
 
-{% block content %}
+{% block content-header %}
+    {{ page.title }}
     {{ page.intro|richtext }}
+{% endblock content-header %}
 
+{% block content-body %}
     <form action="{% pageurl page %}" method="POST">
         {% csrf_token %}
         {{ form.as_p }}
         <input type="submit">
     </form>
-{% endblock content %}
+{% endblock content-body %}

bakerydemo/templates/base/form_page_landing.html

@@ -1,7 +1,13 @@
 {% extends "base.html" %}
 {% load wagtailcore_tags %}
 
-{% block content %}
+{% block content-header %}
     <h1>{{ page.title }}</h1>
+{% endblock content-header %}
+
+{% block breadcrumbs %}
+{% endblock breadcrumbs %}
+
+{% block content-body %}
     {{ page.thank_you_text|richtext }}
-{% endblock content %}
+{% endblock content-body %}

bakerydemo/templates/base/gallery_page.html

@@ -1,13 +1,15 @@
 {% extends "base.html" %}
 {% load wagtailimages_tags gallery_tags %}
 
-{% block content %}
+{% block content-header %}
     {{ page.title }}
 
     <div class="image">
         {% image page.image width-500 as photo %}
               <img src="{{ photo.url }}" width="{{ photo.width }}" height="{{ photo.height }}" alt="{{ photo.alt }}" />
     </div>
+{% endblock content-header %}
 
+{% block content-body %}
     {% gallery page.choices %}
 {% endblock content %}

bakerydemo/templates/base/home_page.html

@@ -1,13 +1,15 @@
 {% extends "base.html" %}
 {% load wagtailimages_tags %}
 
-{% block content %}
+{% block content-header %}
     {{ page.title }}
 
     <div class="image">
         {% image page.image width-500 as photo %}
-              <img src="{{ photo.url }}" width="{{ photo.width }}" height="{{ photo.height }}" alt="{{ photo.alt }}" />
+        <img src="{{ photo.url }}" width="{{ photo.width }}" height="{{ photo.height }}" alt="{{ photo.alt }}" />
     </div>
+{% endblock content-header %}
 
+{% block content-body %}
     {{ page.body }}
-{% endblock content %}
+{% endblock content-body %}

bakerydemo/templates/blog/blog_index_page.html

@@ -1,16 +1,31 @@
 {% extends "base.html" %}
 {% load wagtailimages_tags %}
 
-{% block content %}
-    {{ page.title }}
-    {% for blog in blogs %}
-        <div>
-            <h2><a href="{{ blog.full_url }}">{{ blog.title }}</a></h2>
-            {{ blog.body|truncatewords_html:10 }}
+{% block content-header %}
+<div class="container">
+    <div class="row">
+        <div class="col-md-7 col-md-offset-2">
+            {{ page.title }}
+        </div>
+    </div>
+</div>
+{% endblock content-header %}
+
+{% block content-body %}
+<div class="container">
+    <div class="row">
+        <div class="col-md-7 col-md-offset-2">
+            {% for blog in blogs %}
+                <div>
+                    <h2><a href="{{ blog.url }}">{{ blog.title }}</a></h2>
+                    {{ blog.body|truncatewords_html:10 }}
 
-            {% for tag in blog.get_tags  %}
-                <a href="{{ tag.url }}">{{ tag }}</a>
+                    {% for tag in blog.get_tags  %}
+                        <a href="{{ tag.url }}">{{ tag }}</a>
+                    {% endfor %}
+                </div>
             {% endfor %}
         </div>
-    {% endfor %}
-{% endblock content %}
+    </div>
+</div>
+{% endblock content-body %}

bakerydemo/templates/blog/blog_page.html

@@ -1,19 +1,35 @@
 {% extends "base.html" %}
-{% load wagtailimages_tags %}
+{% load navigation_tags wagtailimages_tags %}
 
-{% block content %}
+{% block content-header %}
 {% image self.image fill-1920x600 as hero_img %}
 <div class="container-fluid hero" style="background-image:url('{{ hero_img.url }}')">
+<div class="hero-gradient-mask"></div>
     <div class="container">
-        <h1>{{ page.title }}</h1>
-        <h2>{{ page.subtitle }}</h2>
+        <div class="row">
+            <div class="col-md-7 col-md-offset-2">
+                <h1>{{ page.title }}</h1>
+                <p class="stand-first">{{ page.subtitle }}</p>
+            </div>
+        </div>
     </div>
 </div>
+{% endblock content-header %}
+
+{% block content-body %}
 <div class="container">
     <div class="row">
         <div class="col-md-7 col-md-offset-2">
+            {% if page.introduction %}
+                <p class="intro">{{ page.introduction }}</p>
+            {% endif %}
+
             {{ page.body }}
+
+            {% for tag in page.get_tags  %}
+                <a href="{{ tag.url }}">{{ tag }}</a>
+            {% endfor %}
         </div>
     </div>
 </div>
-{% endblock content %}
+{% endblock content-body %}

bakerydemo/templates/breads/bread_page.html

@@ -1,12 +1,15 @@
 {% extends "base.html" %}
 {% load wagtailimages_tags %}
 
-{% block content %}
+{% block content-header %}
     <h1>{{ page.title }}</h1>
     <figure>
       {% image self.image fill-600x600 %}
     </figure>
+{% endblock content-header %}
+
+{% block content-body %}
     <p>{{ page.origin }}</p>
     <p>{{ page.bread_type }}</p>
     {{ page.description }}
-{% endblock content %}
+{% endblock content-body %}

bakerydemo/templates/breads/breads_index_page.html

@@ -1,7 +1,7 @@
 {% extends "base.html" %}
 {% load wagtailimages_tags %}
 
-{% block content %}
+{% block content-header %}
     {{ page.title }}
     {% for bread in resources %}
 		<div>
@@ -10,7 +10,9 @@
 			</div>
 		</div>
 	{% endfor %}
+{% block content-header %}
 
+{% block content-body %}
 	{% if resources.has_other_pages %}
 	<div class="clearfix">
 	  <div class="pagination-wrapper">
@@ -36,5 +38,4 @@
 	  </div>
 	</div>
 	{% endif %}
-
-{% endblock content %}
+{% endblock content-body %}

bakerydemo/templates/includes/footer.html

@@ -0,0 +1,35 @@
+{% load navigation_tags static %}
+
+<div class="container">
+    <div class="row">
+        <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
+            <ul class="list-inline text-center">
+                <li>
+                    <a href="#">
+                        <span class="fa-stack fa-lg">
+                            <i class="fa fa-circle fa-stack-2x"></i>
+                            <i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
+                        </span>
+                    </a>
+                </li>
+                <li>
+                    <a href="#">
+                        <span class="fa-stack fa-lg">
+                            <i class="fa fa-circle fa-stack-2x"></i>
+                            <i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
+                        </span>
+                    </a>
+                </li>
+                <li>
+                    <a href="#">
+                        <span class="fa-stack fa-lg">
+                            <i class="fa fa-circle fa-stack-2x"></i>
+                            <i class="fa fa-github fa-stack-1x fa-inverse"></i>
+                        </span>
+                    </a>
+                </li>
+            </ul>
+            <p class="copyright text-center text-muted">{% get_footer_text %}</p>
+        </div>
+    </div>
+</div>

bakerydemo/templates/includes/head.html

@@ -0,0 +1,48 @@
+{% load static %}
+
+<!DOCTYPE html>
+<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
+<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
+<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
+<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>
+        {% block title %}
+            {% block title_prefix %}
+                Wagtail demo bakery
+            {% endblock %}
+            {% if self.seo_title %}
+                {{ self.seo_title }}
+            {% else %}
+                {{ self.title }}
+            {% endif %}
+        {% endblock %}
+    </title>
+    <meta name="description" content="{% if self.search_description %}{{ self.search_description }}{% endif %}">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <!-- Bootstrap Core CSS -->
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+
+    <!-- Custom Fonts -->
+    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
+    <link href="https://fonts.googleapis.com/css?family=Alegreya:400,700|Lato:300,400,700,900" rel="stylesheet">
+
+    <!-- Theme CSS -->
+    <link rel="stylesheet" type="text/css" href="{% static 'css/main.css' %}">
+
+    <link href='https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
+    <link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
+
+    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
+    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
+    <!--[if lt IE 9]>
+        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
+        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
+    <![endif]-->
+    
+    {% block head-extra %}
+    {% endblock head-extra %}
+</head>

bakerydemo/templates/includes/header.html

@@ -0,0 +1,32 @@
+{% load navigation_tags %}
+<div class="header clearfix">
+  <div class="container">
+    <div class="row">
+      <div class="col-lg-12">
+        <a href="#" class="logo">The Wagtail Bakery</a>
+          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-navigation" aria-expanded="false">
+            <span class="sr-only">Toggle navigation</span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+          </button>
+        <form action="/search" method="get" class="search" _lpchecked="1">
+          <input name="q" type="text" placeholder="Search the site" id="" aria-label="Search the site" autocomplete="off">
+          <a href="#" class="search-icon">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 451 451"><path d="M447.05 428l-109.6-109.6c29.4-33.8 47.2-77.9 47.2-126.1C384.65 86.2 298.35 0 192.35 0 86.25 0 .05 86.3.05 192.3s86.3 192.3 192.3 192.3c48.2 0 92.3-17.8 126.1-47.2L428.05 447c2.6 2.6 6.1 4 9.5 4s6.9-1.3 9.5-4c5.2-5.2 5.2-13.8 0-19zM26.95 192.3c0-91.2 74.2-165.3 165.3-165.3 91.2 0 165.3 74.2 165.3 165.3s-74.1 165.4-165.3 165.4c-91.1 0-165.3-74.2-165.3-165.4z"></path></svg>
+          </a>
+        </form>
+        
+        {% block main_navigation %}
+          <nav class="collapse navbar-collapse" id="main-navigation">
+            <ul class="nav nav-pills">
+              {% get_site_root as site_root %}
+              {% top_menu parent=site_root calling_page=self %}
+              {# main_menu is defined in base/templatetags/navigation_tags.py #}
+            </ul>
+          </nav>
+        {% endblock %}
+      </div>
+    </div>
+  </div> 
+</div>

bakerydemo/templates/includes/messages.html

@@ -0,0 +1,9 @@
+{% if messages %}
+    <div>
+        <ul class="messages">
+            {% for message in messages %}
+            <li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</li>
+            {% endfor %}
+        </ul>
+    </div>
+{% endif %}

bakerydemo/templates/locations/location_page.html

@@ -1,28 +1,38 @@
 {% extends "base.html" %}
 {% load wagtailimages_tags %}
 
-{% block content %}
-
-    <style>
+{% block head-extra %}
+  <style>
       /* Needed for Google map embed */
       #map {
         height: 100%;
       }
+      .maps.embed-container {
+         pointer-events: none;
+      }
       html, body {
         height: 100%;
         margin: 0;
         padding: 0;
       }
-    </style>
+  </style>
+{% endblock head-extra %}
 
+{% block content-header %}
     <h1>{{ page.title }}</h1>
     <figure>
       {% image self.image fill-600x600 %}
     </figure>
-    <p>{{ page.address }}</p>
-    <p>{{ page.lat_long }}</p>
+{% endblock content-header %}
+
+{% block content-body %}
+    <p>{{ page.address|linebreaks }}</p>
+    <div id="map" class="maps embed-container"></div>
+
+    {% for hours in page.opening_hours %}
+        <li>{{ hours }}</li>
+    {% endfor %}
 
-    <div id="map"></div>
     <script>
       var map;
       function initMap() {
@@ -45,7 +55,4 @@
     </script>
     <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD31CT9P9KxvNUJOwDq2kcFEIG8ADgaFgw&callback=initMap" async defer></script>
 
-    {% for hours in page.opening_hours %}
-        <li>{{ hours }}</li>
-    {% endfor %}
-{% endblock content %}
+{% endblock content-body %}

bakerydemo/templates/locations/locations_index_page.html

@@ -1,10 +1,12 @@
 {% extends "base.html" %}
-{% load wagtailimages_tags %}
+{% load wagtailcore_tags %}
 
-{% block content %}
+{% block content-header %}
     {{ page.title }}
+{% endblock content-header %}
 
+{% block content-body %}
     {% for location in locations %}
-        <div><a href="{{ location.slug }}">{{ location.title }}</a></div>
+        <div><a href="{% pageurl location %}">{{ location.title }}</a></div>
     {% endfor %}
-{% endblock content %}
+{% endblock content-body %}

bakerydemo/templates/search/search_results.html

@@ -3,11 +3,15 @@
 
 {% block title %}Search{% if search_results %} results{% endif %}{% endblock %}
 
-{% block content %}
+{% block content-header %}
     <h1>
-        Search results{% if request.GET.query %} for “{{ request.GET.query }}”{% endif %}
+        Search results
     </h1>
+{% endblock content-header %}
+
+{% block content-body %}
     {% if search_results %}
+    You searched <p>{% if request.GET.query %} for “{{ request.GET.query }}”{% endif %}</p>
         <ul>
             {% for result in search_results %}
                 <li>
@@ -30,4 +34,4 @@
     {% else %}
         You didn’t search for anything!
     {% endif %}
-{% endblock %}
+{% endblock content-body %}

readme.md

@@ -1,5 +1,3 @@
-[![Deploy](https://www.herokucdn.com/deploy/button.svg)](https://heroku.com/deploy?template=https://github.com/wagtail/bakerydemo)
-
 Wagtail demo project
 =======================
 
@@ -26,12 +24,14 @@ Setup with Vagrant
 ### Installation
 Run the following commands:
 
-    git clone https://github.com/torchbox/bakerydemo.git
-    cd wagtaildemo
-    vagrant up
-    vagrant ssh
-      (then, within the SSH session:)
-    ./manage.py runserver 0.0.0.0:8000
+```bash
+git clone git@github.com:wagtail/bakerydemo.git
+cd wagtaildemo
+vagrant up
+vagrant ssh
+# then, within the SSH session:
+./manage.py runserver 0.0.0.0:8000
+```
 
 The demo site will now be accessible at [http://localhost:8000/](http://localhost:8000/) and the Wagtail admin
 interface at [http://localhost:8000/admin/](http://localhost:8000/admin/).
@@ -49,9 +49,9 @@ Don't want to set up a whole VM to try out Wagtail? No problem.
 
 With PIP installed run the following commands:
 
-    git clone https://github.com/torchbox/bakerydemo.git
+    git clone git@github.com:wagtail/bakerydemo.git
     cd wagtaildemo
-    pip install -r requirements.txt
+    pip install -r requirements/base.txt
     ./manage.py migrate
     ./manage.py load_initial_data
     ./manage.py runserver
@@ -64,4 +64,24 @@ Because we can't (easily) use ElasticSearch for this demo, we use wagtail's nati
 However, native DB search can't search specific fields in our models on a generalized `Page` query.
 So for demo purposes ONLY, we hard-code the model names we want to search into `search.views`, which is
 not ideal. In production, use ElasticSearch and a simplified search query, per
-http://docs.wagtail.io/en/v1.8.1/topics/search/searching.html
+[http://docs.wagtail.io/en/v1.8.1/topics/search/searching.html](http://docs.wagtail.io/en/v1.8.1/topics/search/searching.html).
+
+### Heroku deployment:
+
+If you need to deploy your demo site to a publicly accessible server [Heroku](https://heroku.com)
+provides a one-click deployment solution:
+
+[![Deploy](https://www.herokucdn.com/deploy/button.svg)](https://heroku.com/deploy?template=https://github.com/wagtail/bakerydemo)
+
+If you do not have a Heroku account, clicking the above button will walk you through the steps
+to generate one.  After which, you will be presented with a screen to configure your app. For our purposes,
+we will accept all of the defaults and click `Deploy`.  The status of the deployment will dynamically
+update in the browser. Once finished, click `View` to see the public site.
+
+Log into the admin with the credentials ``admin / changeme``.
+
+To learn more about Heroku, read [Deploying Python and Django Apps on Heroku](https://devcenter.heroku.com/articles/deploying-python).
+
+
+
+

requirements.txt

@@ -1,11 +1 @@
-Django
-elasticsearch
-wagtail
-wagtailfontawesome
-Pillow
-
-# Dependencies for Heroku deployment
-dj-database-url==0.4.1
-whitenoise==3.2.2
-gunicorn==19.6.0
-psycopg2==2.6.2
+-r requirements/heroku.txt

requirements/base.txt

@@ -0,0 +1,5 @@
+Django
+elasticsearch
+wagtail
+wagtailfontawesome
+Pillow

requirements/heroku.txt

@@ -0,0 +1,6 @@
+-r base.txt
+# Additional dependencies for Heroku deployment
+dj-database-url
+gunicorn
+psycopg2
+whitenoise

vagrant/provision.sh

@@ -25,7 +25,7 @@ su - vagrant -c "echo $PROJECT_DIR > $VIRTUALENV_DIR/.project"
 su - vagrant -c "$PIP install --upgrade pip"
 
 # Install PIP requirements
-su - vagrant -c "$PIP install -r $PROJECT_DIR/requirements.txt"
+su - vagrant -c "$PIP install -r $PROJECT_DIR/requirements/base.txt"
 
 
 # Set execute permissions on manage.py as they get lost if we build from a zip file