Add new fields to locations. Style detail page

bakerydemo/locations/migrations/0004_auto_20170215_1334.py

@@ -0,0 +1,29 @@
+# -*- coding: utf-8 -*-
+# Generated by Django 1.10.5 on 2017-02-15 13:34
+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 = [
+        ('locations', '0003_auto_20170214_2220'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='locationpage',
+            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.AddField(
+            model_name='locationpage',
+            name='introduction',
+            field=models.TextField(blank=True, help_text='Text to describe the index page'),
+        ),
+    ]

bakerydemo/locations/migrations/0005_locationoperatinghours_closed.py

@@ -0,0 +1,21 @@
+# -*- coding: utf-8 -*-
+# Generated by Django 1.10.5 on 2017-02-15 13:38
+from __future__ import unicode_literals
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('locations', '0004_auto_20170215_1334'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='locationoperatinghours',
+            name='closed',
+            field=models.BooleanField(default='False', help_text='Tick if location is closed', verbose_name='Closed?'),
+            preserve_default=False,
+        ),
+    ]

bakerydemo/locations/migrations/0006_auto_20170215_1408.py

@@ -0,0 +1,30 @@
+# -*- coding: utf-8 -*-
+# Generated by Django 1.10.5 on 2017-02-15 14:08
+from __future__ import unicode_literals
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('locations', '0005_locationoperatinghours_closed'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='locationoperatinghours',
+            name='closed',
+            field=models.BooleanField(help_text='Tick if location is closed on this day', verbose_name='Closed?'),
+        ),
+        migrations.AlterField(
+            model_name='locationoperatinghours',
+            name='closing_time',
+            field=models.TimeField(blank=True),
+        ),
+        migrations.AlterField(
+            model_name='locationoperatinghours',
+            name='opening_time',
+            field=models.TimeField(blank=True),
+        ),
+    ]

bakerydemo/locations/migrations/0007_auto_20170215_1411.py

@@ -0,0 +1,25 @@
+# -*- coding: utf-8 -*-
+# Generated by Django 1.10.5 on 2017-02-15 14:11
+from __future__ import unicode_literals
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('locations', '0006_auto_20170215_1408'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='locationoperatinghours',
+            name='closing_time',
+            field=models.TimeField(blank=True, null=True),
+        ),
+        migrations.AlterField(
+            model_name='locationoperatinghours',
+            name='opening_time',
+            field=models.TimeField(blank=True, null=True),
+        ),
+    ]

bakerydemo/locations/models.py

@@ -3,11 +3,19 @@ from django.db import models
 
 from modelcluster.fields import ParentalKey
 
-from wagtail.wagtailadmin.edit_handlers import FieldPanel, InlinePanel
+from wagtail.wagtailadmin.edit_handlers import (
+    FieldPanel,
+    InlinePanel,
+    StreamFieldPanel)
 from wagtail.wagtailcore.models import Orderable, Page
-from wagtail.wagtailimages.edit_handlers import ImageChooserPanel
+from wagtail.wagtailimages.edit_handlers import (
+    ImageChooserPanel,
+    )
+from wagtail.wagtailcore.fields import StreamField
 from wagtail.wagtailsearch import index
 
+from bakerydemo.base.blocks import BaseStreamBlock
+
 
 class OperatingHours(models.Model):
     """
@@ -36,13 +44,23 @@ class OperatingHours(models.Model):
         choices=DAY_CHOICES,
         default=MONDAY,
     )
-    opening_time = models.TimeField()
-    closing_time = models.TimeField()
+    opening_time = models.TimeField(
+        blank=True,
+        null=True)
+    closing_time = models.TimeField(
+        blank=True,
+        null=True)
+    closed = models.BooleanField(
+        "Closed?",
+        blank=True,
+        help_text='Tick if location is closed on this day'
+        )
 
     panels = [
         FieldPanel('day'),
         FieldPanel('opening_time'),
         FieldPanel('closing_time'),
+        FieldPanel('closed'),
     ]
 
     class Meta:
@@ -81,7 +99,9 @@ class LocationPage(Page):
     """
     Detail for a specific bakery location.
     """
-
+    introduction = models.TextField(
+        help_text='Text to describe the index page',
+        blank=True)
     address = models.TextField()
     image = models.ForeignKey(
         'wagtailimages.Image',
@@ -102,6 +122,13 @@ class LocationPage(Page):
             ),
         ]
     )
+    body = StreamField(
+        BaseStreamBlock(), verbose_name="About page detail", blank=True
+    )
+    # We've defined the StreamBlock() within blocks.py that we've imported on
+    # line 12. Defining it in a different file gives us consistency across the
+    # site, though StreamFields _can_ be created on a per model basis if you
+    # have a use case for it
 
     # Search index configuration
     search_fields = Page.search_fields + [
@@ -110,10 +137,12 @@ class LocationPage(Page):
 
     # Editor panels configuration
     content_panels = Page.content_panels + [
+        FieldPanel('introduction', classname="full"),
         FieldPanel('address', classname="full"),
         FieldPanel('lat_long'),
         ImageChooserPanel('image'),
-        InlinePanel('hours_of_operation', label="Hours of Operation")
+        InlinePanel('hours_of_operation', label="Hours of Operation"),
+        StreamFieldPanel('body')
     ]
 
     def __str__(self):

bakerydemo/static/css/main.css

@@ -119,7 +119,7 @@ p {
   }
 
   p {
-    margin: 0 0 50px;
+    margin: 0 0 30px;
   }
 
 }
@@ -496,8 +496,10 @@ li.has-submenu a.allow-toggle {
   background-color: #fff;
 }
 
-.location-list {
+/* Location list page */
+.location-list-item {
   text-align: center;
+  margin-bottom: 30px;
 }
 .location-list-title {
   line-height: 270px;
@@ -521,18 +523,39 @@ li.has-submenu a.allow-toggle {
   font-weight: 300;
   position: relative;
 }
-.location-list address {
+.location-list-item address {
   font-weight: 300;
   font-family: 'Lato', sans-serif;
   font-size: 1.4em;
   padding: 10px 40px;
 }
-/*.location-list-title .hero-gradient-mask {
-  left: 0;
+
+/* Location detail page */
+.template-location-page .intro {
+  margin-bottom: 0;
+}
+.location-opening h3 {
+  margin-top: 0;
+}
+span.day {
+  font-weight: bold;
+  font-family: 'Lato', sans-serif;
+}
+time.location-time {
+  display: block;
+}
+
+.map-container {
+  height: 550px;
+}
+
+.location-address {
+  background-color: rgba(233,228,221,1);
+  padding: 10px 30px;
+  margin-bottom: -200px;
+  position: relative;
+  z-index: 1;
 }
-.location-list-title .hero-gradient-mask:hover {
-  display: none;
-}*/
 
 /* No gutters */
 .row.no-gutters {

bakerydemo/templates/base.html

@@ -4,7 +4,7 @@
     {% include "includes/head.html" %}
 {% endblock head %}
 
-<body>
+<body class="{% block body_class %}template-{{ self.get_verbose_name|slugify }}{% endblock %}">
 {% wagtailuserbar %}
 
 {% block header %}

bakerydemo/templates/locations/location_page.html

@@ -1,5 +1,5 @@
 {% extends "base.html" %}
-{% load wagtailimages_tags %}
+{% load wagtailimages_tags navigation_tags %}
 
 {% block head-extra %}
   <style>
@@ -10,28 +10,81 @@
       .maps.embed-container {
          pointer-events: none;
       }
-      html, body {
-        height: 100%;
-        margin: 0;
-        padding: 0;
-      }
   </style>
 {% endblock head-extra %}
 
+
 {% block content-header %}
-    <h1>{{ page.title }}</h1>
-    <figure>
-      {% image self.image fill-600x600 %}
-    </figure>
+{# @TODO This is identical to the header within blog_page.html. We should create an include #}
+{% 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">
+        <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 %}
-    <p>{{ page.address|linebreaks }}</p>
+<div class="container">
+    <div class="row">
+        <div class="col-md-7 col-md-offset-2">
+          <div class="row">
+            {% if page.introduction %}
+                <div class="intro col-md-7"><p>{{ page.introduction }}</p></div>
+            {% endif %}
+            
+            {% if page.opening_hours %}
+                <div class="col-md-4 col-md-offset-1 location-opening">
+                <h3>Opening hours</h3>
+                {% for hours in page.opening_hours %}
+                  <time itemprop="openingHours" datetime="{{ hours }}" class="location-time">
+                    <span class="day">{{ hours.day }}</span>:   
+                    <span class="hours">
+                      {% if hours.closed == True %}
+                        Closed
+                        {% else %}
+                        {% if hours.opening_time %}
+                          {{ hours.opening_time }}
+                        {% endif %} - 
+                        {% if hours.closing_time %}
+                          {{ hours.closing_time }}
+                        {% endif %}
+                      {% endif %}
+                      </span></time>
+                {% endfor %}
+                </div>
+            {% endif %}
+          </div>
+        </div>
+    </div>
+</div>
+<div class="container-flex">
+  <div class="row">
+    <div class="col-md-2 col-md-offset-7 location-address">
+      <h3>Address</h3>
+        <address>{{ page.address|linebreaks }}</address>
+    </div>
+    {# @TODO align address to opening hours? #}
+  </div>
+
+  <div class="map-container">
     <div id="map" class="maps embed-container"></div>
+  </div>
+</div>
 
-    {% for hours in page.opening_hours %}
-        <li>{{ hours }}</li>
-    {% endfor %}
+<div class="container">
+  <div class="row">
+    <div class="col-md-7 col-md-offset-2 location-body">
+      {{ page.body }}
+    </div>
+  </div>
+</div>
 
     <script>
       var map;

bakerydemo/templates/locations/locations_index_page.html

@@ -5,7 +5,7 @@
 <div class="container">
     <div class="row">
         <div class="col-md-12">
-            {{ page.title }}
+            <h1>{{ page.title }}</h1>
         </div>
     </div>
 </div>
@@ -15,12 +15,12 @@
 <div class="container">
     <div class="row no-gutters">
         {% for location in locations %}
-            <div class="col-md-6 location-list">
+            <div class="col-md-6 location-list-item">
                 <a href="{% pageurl location %}">
                 <h1 class="location-list-title">
                 
         
-                    {% image location.image fill-480x270 as image %}
+                    {% image location.image fill-660x270-c75 as image %}
                     <img src="{{ image.url }}" width="{{ image.width }}" height="{{ image.height }}" alt="{{ image.alt }}" class="" />
                     
                     <span class="title">{{ location.title }}</span>