Merge pull request #80 from wagtail/58-homepage-style

Homepage style

bakerydemo/base/migrations/0014_merge_20170228_0902.py

@@ -0,0 +1,16 @@
+# -*- coding: utf-8 -*-
+# Generated by Django 1.10.5 on 2017-02-28 09:02
+from __future__ import unicode_literals
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('base', '0013_auto_20170227_2216'),
+        ('base', '0013_auto_20170228_0714'),
+    ]
+
+    operations = [
+    ]

bakerydemo/base/migrations/0015_auto_20170228_1555.py

@@ -0,0 +1,81 @@
+# -*- coding: utf-8 -*-
+# Generated by Django 1.10.5 on 2017-02-28 15:55
+from __future__ import unicode_literals
+
+from django.db import migrations, models
+import django.db.models.deletion
+import wagtail.wagtailcore.fields
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('wagtailcore', '0032_add_bulk_delete_page_permission'),
+        ('wagtailimages', '0018_remove_rendition_filter'),
+        ('base', '0014_merge_20170228_0902'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='homepage',
+            name='featured_section_1',
+            field=models.ForeignKey(blank=True, help_text='First featured section for the homepage. Will display up to three child items.', null=True, on_delete=django.db.models.deletion.SET_NULL, related_name='+', to='wagtailcore.Page', verbose_name='Featured section 1'),
+        ),
+        migrations.AddField(
+            model_name='homepage',
+            name='featured_section_1_title',
+            field=models.CharField(blank=True, help_text='Title to display above the promo copy', max_length=255, null=True),
+        ),
+        migrations.AddField(
+            model_name='homepage',
+            name='featured_section_2',
+            field=models.ForeignKey(blank=True, help_text='Second featured section for the homepage. Will display up to three child items.', null=True, on_delete=django.db.models.deletion.SET_NULL, related_name='+', to='wagtailcore.Page', verbose_name='Featured section 2'),
+        ),
+        migrations.AddField(
+            model_name='homepage',
+            name='featured_section_2_title',
+            field=models.CharField(blank=True, help_text='Title to display above the promo copy', max_length=255, null=True),
+        ),
+        migrations.AddField(
+            model_name='homepage',
+            name='featured_section_3',
+            field=models.ForeignKey(blank=True, help_text='Third featured section for the homepage. Will display up to six child items.', null=True, on_delete=django.db.models.deletion.SET_NULL, related_name='+', to='wagtailcore.Page', verbose_name='Featured section 3'),
+        ),
+        migrations.AddField(
+            model_name='homepage',
+            name='featured_section_3_title',
+            field=models.CharField(blank=True, help_text='Title to display above the promo copy', max_length=255, null=True),
+        ),
+        migrations.AddField(
+            model_name='homepage',
+            name='hero_cta',
+            field=models.CharField(default='', help_text='Text to display on CTA', max_length=255),
+            preserve_default=False,
+        ),
+        migrations.AddField(
+            model_name='homepage',
+            name='hero_cta_link',
+            field=models.ForeignKey(blank=True, help_text='Choose a page to link to for the CTA', null=True, on_delete=django.db.models.deletion.SET_NULL, related_name='+', to='wagtailcore.Page'),
+        ),
+        migrations.AddField(
+            model_name='homepage',
+            name='hero_text',
+            field=models.CharField(default='', help_text='Write an introduction for the bakery', max_length=255),
+            preserve_default=False,
+        ),
+        migrations.AddField(
+            model_name='homepage',
+            name='promo_image',
+            field=models.ForeignKey(blank=True, help_text='Promo image', null=True, on_delete=django.db.models.deletion.SET_NULL, related_name='+', to='wagtailimages.Image'),
+        ),
+        migrations.AddField(
+            model_name='homepage',
+            name='promo_text',
+            field=wagtail.wagtailcore.fields.RichTextField(blank=True, help_text='Write some promotional copy', null=True),
+        ),
+        migrations.AddField(
+            model_name='homepage',
+            name='promo_title',
+            field=models.CharField(blank=True, help_text='Title to display above the promo copy', max_length=255, null=True),
+        ),
+    ]

bakerydemo/base/models.py

@@ -159,14 +159,126 @@ class HomePage(Page):
         related_name='+',
         help_text='Homepage image'
     )
+    hero_text = models.CharField(
+        max_length=255,
+        help_text='Write an introduction for the bakery'
+        )
+    hero_cta = models.CharField(
+        verbose_name='Hero CTA',
+        max_length=255,
+        help_text='Text to display on CTA'
+        )
+    hero_cta_link = models.ForeignKey(
+        'wagtailcore.Page',
+        null=True,
+        blank=True,
+        on_delete=models.SET_NULL,
+        related_name='+',
+        verbose_name='Hero CTA link',
+        help_text='Choose a page to link to for the CTA'
+    )
 
     body = StreamField(
-        BaseStreamBlock(), verbose_name="Home page detail", blank=True
+        BaseStreamBlock(), verbose_name="Home content block", blank=True
+    )
+
+    promo_image = models.ForeignKey(
+        'wagtailimages.Image',
+        null=True,
+        blank=True,
+        on_delete=models.SET_NULL,
+        related_name='+',
+        help_text='Promo image'
+    )
+    promo_title = models.CharField(
+        null=True,
+        blank=True,
+        max_length=255,
+        help_text='Title to display above the promo copy'
+    )
+    promo_text = RichTextField(
+        null=True,
+        blank=True,
+        help_text='Write some promotional copy'
+    )
+
+    featured_section_1_title = models.CharField(
+        null=True,
+        blank=True,
+        max_length=255,
+        help_text='Title to display above the promo copy'
+    )
+    featured_section_1 = models.ForeignKey(
+        'wagtailcore.Page',
+        null=True,
+        blank=True,
+        on_delete=models.SET_NULL,
+        related_name='+',
+        help_text='First featured section for the homepage. Will display up to three child items.',
+        verbose_name='Featured section 1'
+    )
+
+    featured_section_2_title = models.CharField(
+        null=True,
+        blank=True,
+        max_length=255,
+        help_text='Title to display above the promo copy'
+    )
+    featured_section_2 = models.ForeignKey(
+        'wagtailcore.Page',
+        null=True,
+        blank=True,
+        on_delete=models.SET_NULL,
+        related_name='+',
+        help_text='Second featured section for the homepage. Will display up to three child items.',
+        verbose_name='Featured section 2'
+    )
+
+    featured_section_3_title = models.CharField(
+        null=True,
+        blank=True,
+        max_length=255,
+        help_text='Title to display above the promo copy'
+    )
+    featured_section_3 = models.ForeignKey(
+        'wagtailcore.Page',
+        null=True,
+        blank=True,
+        on_delete=models.SET_NULL,
+        related_name='+',
+        help_text='Third featured section for the homepage. Will display up to six child items.',
+        verbose_name='Featured section 3'
     )
 
     content_panels = Page.content_panels + [
-        ImageChooserPanel('image'),
+        MultiFieldPanel([
+            ImageChooserPanel('image'),
+            FieldPanel('hero_text', classname="full"),
+            MultiFieldPanel([
+                FieldPanel('hero_cta'),
+                PageChooserPanel('hero_cta_link'),
+                ])
+            ], heading="Hero section"),
+        MultiFieldPanel([
+                ImageChooserPanel('promo_image'),
+                FieldPanel('promo_title'),
+                FieldPanel('promo_text'),
+            ], heading="Promo section"),
         StreamFieldPanel('body'),
+        MultiFieldPanel([
+            MultiFieldPanel([
+                FieldPanel('featured_section_1_title'),
+                PageChooserPanel('featured_section_1'),
+                ]),
+            MultiFieldPanel([
+                FieldPanel('featured_section_2_title'),
+                PageChooserPanel('featured_section_2'),
+                ]),
+            MultiFieldPanel([
+                FieldPanel('featured_section_3_title'),
+                PageChooserPanel('featured_section_3'),
+                ])
+        ], heading="Featured homepage sections", classname="collapsible")
     ]
 
     def __str__(self):

bakerydemo/blog/models.py

@@ -114,6 +114,9 @@ class BlogIndexPage(BasePageFieldsMixin, RoutablePageMixin, Page):
     # What pages types can live under this page type?
     subpage_types = ['BlogPage']
 
+    def children(self):
+        return self.get_children().specific().live()
+
     def get_context(self, request):
         context = super(BlogIndexPage, self).get_context(request)
         context['posts'] = BlogPage.objects.descendant_of(

bakerydemo/breads/models.py

@@ -133,6 +133,9 @@ class BreadsIndexPage(BasePageFieldsMixin, Page):
         return BreadPage.objects.live().descendant_of(
             self).order_by('-first_published_at')
 
+    def children(self):
+        return self.get_children().specific().live()
+
     def paginate(self, request, *args):
         page = request.GET.get('page')
         paginator = Paginator(self.get_breads(), 12)

bakerydemo/locations/models.py

@@ -100,6 +100,9 @@ class LocationsIndexPage(BasePageFieldsMixin, Page):
     """
     subpage_types = ['LocationPage']
 
+    def children(self):
+        return self.get_children().specific().live()
+
     def get_context(self, request):
         context = super(LocationsIndexPage, self).get_context(request)
         context['locations'] = LocationPage.objects.descendant_of(

bakerydemo/static/css/main.css

@@ -20,7 +20,7 @@ body {
 }
 
 h1 {
-  font-weight: 900;
+  font-weight: 300;
   font-family: 'Lato', sans-serif;
   position: relative;
 }
@@ -838,6 +838,230 @@ span.outline {
   }
 }
 
+/* Homepage */
+.homepage .hero {
+  margin: 0;
+  padding: 200px 0 30px 0;
+}
+
+.homepage .hero h1 {
+  font-size: 2.2em;
+  text-transform: uppercase;
+}
+
+.homepage .hero h1:after {
+  background-color: rgba(255,255,255, 0.7);
+  content: "";
+  display: block;
+  height: 5px;
+  margin: 20px auto;
+  width: 250px;
+}
+
+.homepage .home-hero {
+  margin-bottom: 0;
+  padding-bottom: 60px;
+  text-align: center;
+}
+.homepage .home-hero .lead {
+  color: #ddd;
+  font-size: 1.6em;
+  margin: 40px auto;
+}
+
+.homepage .home-hero .hero-cta-link {
+  color: #fff;
+  border: 1px solid #aaa;
+  border-radius: 4px;
+  padding: 10px 34px 10px 10px;
+  display: inline-block;
+  vertical-align: middle;
+  transform: perspective(1px) translateZ(0);
+  box-shadow: 0 0 1px transparent;
+  position: relative;
+  transition-duration: 0.1s;
+}
+.homepage .home-hero .hero-cta-link:before {
+  content: "\f18e";
+  font-family: FontAwesome;
+  font-size: 1.2em;
+  font-weight: 200;
+  opacity: 0.8;
+  padding: 0 1px;
+  position: absolute;
+  right: 0.2em;
+  top: 0.2em;
+  transform: translateZ(0);
+  transition-duration: 0.1s;
+  transition-property: transform;
+  transition-timing-function: ease-out;
+}
+.homepage .home-hero .hero-cta-link:hover:before,
+.homepage .home-hero .hero-cta-link:focus:before,
+.homepage .home-hero .hero-cta-link:active:before {
+  transform: translateX(4px);
+}
+
+.homepage .streamfield {
+  background: linear-gradient(45deg, rgba(170,170,170,1) 0%,rgba(238,238,238,1) 44%);
+}
+.homepage .streamfield-column {
+  padding: 60px;
+  margin: 0 auto;
+  float: none;
+}
+.homepage .streamfield-column h1,
+.homepage .streamfield-column h2,
+.homepage .streamfield-column h3,
+.homepage .streamfield-column h4,
+.homepage .streamfield-column h5 {
+  text-align: center;
+}
+
+.homepage .promo-row {
+  padding: 40px 0 40px 0;
+}
+.homepage .promo {
+  background: linear-gradient(190deg, rgba(0,4,8,1) 0%,rgba(55,28,25,1) 100%);
+  border-radius: 0px 0px 10px 10px;
+  color: #fff;
+  height: 100%;
+  margin-bottom: 20px;
+  margin-top: -40px;
+  padding: 40px 60px;
+  text-align: center;
+}
+.homepage .promo h1,
+.homepage .promo h2,
+.homepage .promo h3,
+.homepage .promo h4 {
+  color: #eb7400;
+  font-weight: 200;
+}
+.homepage .promo p,
+.homepage .promo li {
+  color: #ccc;
+  line-height: 1.6em;
+}
+.homepage .promo a {
+  color: #fff;
+}
+@media (max-width: 970px) {
+  .homepage .promo {
+    padding: 30px 40px;
+  }
+  .homepage .promo figure img {
+    max-width: 120px;
+    height: auto;
+  }
+  .homepage .promo p {
+    color: #fff;
+    font-size: 1em;
+  }
+}
+@media (max-width: 766px) {
+  .homepage .promo {
+    margin-left: 15px;
+    margin-right: 15px;
+  }
+}
+
+.homepage .promo figure img {
+  border-radius: 100%;
+  margin: auto;
+  width: auto;
+}
+
+.homepage .feature-1 h2 {
+  margin-top: 0;
+  margin-bottom: 20px;
+}
+
+.homepage .feature-1 .featured-children li {
+  border: 1px solid #ccc;
+  border-radius: 3px;
+  margin-bottom: 10px;
+}
+
+.homepage .feature-1 .featured-children li figure {
+  width: 100%;
+  overflow: hidden;
+  margin: 0;
+}
+
+.homepage .feature-1 .featured-children li img {
+  width: auto;
+}
+
+.homepage .feature-1 .featured-children li h3 {
+  margin-top: 40px;
+  font-weight: 300;
+  font-size: 1.4em;
+}
+
+.homepage .feature-2 {
+  padding: 40px 0 20px;
+}
+
+.homepage .feature-2 .feature-2-row {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.homepage .feature-2 h2,
+.homepage .feature-3 h2 {
+  text-align: center;
+  margin: 20px;
+}
+
+.homepage .feature-2 .feature-2-item {
+  display: flex;
+  flex-direction: column;
+  margin: 0 auto 20px;
+}
+
+.homepage .feature-2 .feature-2-item figure {
+  margin-bottom: 0;
+}
+
+.homepage .feature-2 .feature-2-item img {
+  min-height: 210px;
+}
+
+.homepage .feature-2 .feature-2-item .feature-2-text {
+  background-color: #dfdfdf;
+  border-radius: 0 0 10px 10px;
+  padding: 0 20px;
+  flex: 1;
+}
+
+.homepage .feature-2 figure,
+.homepage .feature-3 figure {
+  background-color: #eb7400;
+  margin: 0;
+}
+
+@media (max-width: 766px) {
+  .homepage .feature-2 .feature-2-row {
+    display: inline-block;
+  }
+}
+
+.homepage .feature-3 h3 {
+  color: #fff;
+  font-weight: 300;
+  font-size: 1.8em;
+  margin-bottom: 135px;
+  margin-top: -145px;
+  position: relative;
+  text-align: center;
+  text-shadow: 0px 0px 30px rgba(0, 0, 0, 1);
+  z-index: 1;
+}
+.homepage .feature-2 li:hover img,
+.homepage .feature-3 li:hover img {
+  opacity: 0.3;
+}
 /* No gutters */
 .row.no-gutters {
   margin-right: 0;
@@ -868,3 +1092,28 @@ span.outline {
     display: none;
   }
 }
+
+/* From Wagtail core */
+/* Responsive image/video classes */
+.rich-text img {
+    max-width: 100%;
+    height: auto;
+}
+.richtext-image.left{
+    float:left;
+}
+.richtext-image.right{
+    float:right;
+}
+.responsive-object {
+    position: relative;
+}
+.responsive-object iframe,
+.responsive-object object,
+.responsive-object embed {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}

bakerydemo/templates/base/home_page.html

@@ -2,6 +2,125 @@
 {% load wagtailimages_tags %}
 
 {% block content %}
+<div class="homepage">
 
-    {{ page.body }}
+{% 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-8 col-md-offset-2 home-hero">
+                <h1>{{ page.title }}</h1>
+                <p class="lead">{{ page.hero_text }}</p>
+                <a href="{{ page.hero_cta_link }}" class="hero-cta-link hvr-icon-forward">{{ page.hero_cta }}</a>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="container">
+    <div class="row promo-row">
+        <div class="col-sm-5 promo">
+            {% if page.promo_image or page.promo_title or page.promo_text %}
+                <figure>{% image page.promo_image fill-200x200-c100 %}</figure>
+                <div class="promo-text">
+                    <h3>{{ page.promo_title }}</h3>
+                    {{ page.promo_text|safe }}
+                </div>
+            {% endif %}
+        </div>
+
+        <div class="col-sm-6 col-sm-offset-1 feature-1">
+            {% if page.featured_section_1 %}
+            <h2>{{ page.featured_section_1_title }}</h2>
+                <div class="featured-children">
+                    {% for childpage in page.featured_section_1.specific.children|slice:"4" %}
+                        <li>
+                            <div class="row">
+                                <div class="col-xs-4">
+                                    <a href="{{childpage.url}}">
+                                        <figure>
+                                            {% image childpage.image fill-180x140-c100 %}
+                                        </figure>
+                                    </a>
+                                </div>
+                                <div class="col-xs-8">
+                                    <h3><a href="{{childpage.url}}">{{childpage.title}}</a></h3>
+                                </div>
+                            </div>
+                        </li>
+                    {% endfor %}
+                </div>
+            {% endif %}
+        </div>
+    </div>
+</div>
+
+{% if page.body %}
+<div class="container-fluid streamfield">
+    <div class="container">
+        <div class="row">
+            <div class="col-md-7 streamfield-column">
+                {{ page.body }}
+            </div>
+        </div>
+    </div>
+</div>
+{% endif %}
+
+<div class="container">
+    <div class="row">
+        <div class="col-md-12 feature-2">
+            {% if page.featured_section_2 %}
+            <h2>{{ page.featured_section_2_title }}</h2>
+                <div class="featured-children row feature-2-row">
+                    {% for childpage in page.featured_section_2.specific.children|slice:"3" %}
+                        <li class="col-sm-4 feature-2-item">
+                            <a href="{{childpage.url}}">
+                                <figure>
+                                    {% image childpage.image height-210 %}
+                                </figure>
+                            </a>
+                            <div class="feature-2-text">
+                                <h3><a href="{{childpage.url}}">{{childpage.title}}</a></h3>
+                                <p>{{ childpage.introduction|truncatewords:15 }}</p>
+                            </div>
+                        </li>
+                    {% endfor %}
+                </div>
+            {% endif %}
+        </div>
+    </div>
+</div>
+
+<div class="container">
+    <div class="row">
+        <div class="col-md-12 feature-3">
+            {% if page.featured_section_3 %}
+            <h2>{{ page.featured_section_3_title }}</h2>
+                <div class="featured-children row">
+                    {% for childpage in page.featured_section_3.specific.children|slice:"6" %}
+                        <li class="col-md-4">
+                            <a href="{{childpage.url}}">
+                                <figure>
+                                    {% image childpage.image width-380 %}
+                                </figure>
+                                <h3>{{childpage.title}}</h3>
+                            </a>
+                        </li>
+                    {% endfor %}
+                </div>
+            {% endif %}
+        </div>
+    </div>
+</div>
+</div>
 {% endblock content %}
+
+HERO
+----
+promo | bread
+-----
+Blog x3
+-----
+Location x 6