Implement Bio page layout

.gitignore

@@ -3,3 +3,4 @@ db.sqlite3
 node_modules
 local.py
 reset_import.sh
+media

decruck/main/migrations/0013_auto_20200423_0156.py

@@ -0,0 +1,31 @@
+# Generated by Django 2.2.12 on 2020-04-23 01:56
+
+from django.db import migrations
+import wagtail.core.blocks
+import wagtail.core.fields
+import wagtail.images.blocks
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('main', '0012_auto_20200421_0332'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='biographypage',
+            name='body',
+            field=wagtail.core.fields.StreamField([('row', wagtail.core.blocks.StructBlock([('left_column', wagtail.core.blocks.StreamBlock([('rich_text', wagtail.core.blocks.RichTextBlock()), ('image', wagtail.images.blocks.ImageChooserBlock())])), ('right_column', wagtail.core.blocks.StreamBlock([('rich_text', wagtail.core.blocks.RichTextBlock()), ('image', wagtail.images.blocks.ImageChooserBlock())]))])), ('block_quote', wagtail.core.blocks.BlockQuoteBlock())]),
+        ),
+        migrations.AlterField(
+            model_name='biographypage',
+            name='body_en',
+            field=wagtail.core.fields.StreamField([('row', wagtail.core.blocks.StructBlock([('left_column', wagtail.core.blocks.StreamBlock([('rich_text', wagtail.core.blocks.RichTextBlock()), ('image', wagtail.images.blocks.ImageChooserBlock())])), ('right_column', wagtail.core.blocks.StreamBlock([('rich_text', wagtail.core.blocks.RichTextBlock()), ('image', wagtail.images.blocks.ImageChooserBlock())]))])), ('block_quote', wagtail.core.blocks.BlockQuoteBlock())], null=True),
+        ),
+        migrations.AlterField(
+            model_name='biographypage',
+            name='body_fr',
+            field=wagtail.core.fields.StreamField([('row', wagtail.core.blocks.StructBlock([('left_column', wagtail.core.blocks.StreamBlock([('rich_text', wagtail.core.blocks.RichTextBlock()), ('image', wagtail.images.blocks.ImageChooserBlock())])), ('right_column', wagtail.core.blocks.StreamBlock([('rich_text', wagtail.core.blocks.RichTextBlock()), ('image', wagtail.images.blocks.ImageChooserBlock())]))])), ('block_quote', wagtail.core.blocks.BlockQuoteBlock())], null=True),
+        ),
+    ]

decruck/main/migrations/0014_auto_20200423_0202.py

@@ -0,0 +1,31 @@
+# Generated by Django 2.2.12 on 2020-04-23 02:02
+
+from django.db import migrations
+import wagtail.core.blocks
+import wagtail.core.fields
+import wagtail.images.blocks
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('main', '0013_auto_20200423_0156'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='biographypage',
+            name='body',
+            field=wagtail.core.fields.StreamField([('heading', wagtail.core.blocks.StructBlock([('left_column', wagtail.core.blocks.CharBlock()), ('right_column', wagtail.core.blocks.CharBlock())])), ('row', wagtail.core.blocks.StructBlock([('left_column', wagtail.core.blocks.StreamBlock([('rich_text', wagtail.core.blocks.RichTextBlock()), ('image', wagtail.images.blocks.ImageChooserBlock())])), ('right_column', wagtail.core.blocks.StreamBlock([('rich_text', wagtail.core.blocks.RichTextBlock()), ('image', wagtail.images.blocks.ImageChooserBlock())]))])), ('block_quote', wagtail.core.blocks.BlockQuoteBlock())]),
+        ),
+        migrations.AlterField(
+            model_name='biographypage',
+            name='body_en',
+            field=wagtail.core.fields.StreamField([('heading', wagtail.core.blocks.StructBlock([('left_column', wagtail.core.blocks.CharBlock()), ('right_column', wagtail.core.blocks.CharBlock())])), ('row', wagtail.core.blocks.StructBlock([('left_column', wagtail.core.blocks.StreamBlock([('rich_text', wagtail.core.blocks.RichTextBlock()), ('image', wagtail.images.blocks.ImageChooserBlock())])), ('right_column', wagtail.core.blocks.StreamBlock([('rich_text', wagtail.core.blocks.RichTextBlock()), ('image', wagtail.images.blocks.ImageChooserBlock())]))])), ('block_quote', wagtail.core.blocks.BlockQuoteBlock())], null=True),
+        ),
+        migrations.AlterField(
+            model_name='biographypage',
+            name='body_fr',
+            field=wagtail.core.fields.StreamField([('heading', wagtail.core.blocks.StructBlock([('left_column', wagtail.core.blocks.CharBlock()), ('right_column', wagtail.core.blocks.CharBlock())])), ('row', wagtail.core.blocks.StructBlock([('left_column', wagtail.core.blocks.StreamBlock([('rich_text', wagtail.core.blocks.RichTextBlock()), ('image', wagtail.images.blocks.ImageChooserBlock())])), ('right_column', wagtail.core.blocks.StreamBlock([('rich_text', wagtail.core.blocks.RichTextBlock()), ('image', wagtail.images.blocks.ImageChooserBlock())]))])), ('block_quote', wagtail.core.blocks.BlockQuoteBlock())], null=True),
+        ),
+    ]

decruck/main/migrations/0015_auto_20200423_0218.py

@@ -0,0 +1,31 @@
+# Generated by Django 2.2.12 on 2020-04-23 02:18
+
+from django.db import migrations
+import wagtail.core.blocks
+import wagtail.core.fields
+import wagtail.images.blocks
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('main', '0014_auto_20200423_0202'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='biographypage',
+            name='body',
+            field=wagtail.core.fields.StreamField([('heading', wagtail.core.blocks.StructBlock([('left_column', wagtail.core.blocks.CharBlock()), ('right_column', wagtail.core.blocks.CharBlock())])), ('row', wagtail.core.blocks.StructBlock([('left_column', wagtail.core.blocks.StreamBlock([('rich_text', wagtail.core.blocks.RichTextBlock(features=['bold', 'italic', 'ol', 'ul', 'link', 'embed'])), ('caption_image', wagtail.core.blocks.StructBlock([('image', wagtail.images.blocks.ImageChooserBlock()), ('caption', wagtail.core.blocks.CharBlock())]))])), ('right_column', wagtail.core.blocks.StreamBlock([('rich_text', wagtail.core.blocks.RichTextBlock(features=['bold', 'italic', 'ol', 'ul', 'link', 'embed'])), ('caption_image', wagtail.core.blocks.StructBlock([('image', wagtail.images.blocks.ImageChooserBlock()), ('caption', wagtail.core.blocks.CharBlock())]))]))])), ('block_quote', wagtail.core.blocks.StructBlock([('quote', wagtail.core.blocks.CharBlock()), ('caption', wagtail.core.blocks.RichTextBlock(features=['bold', 'italic']))]))]),
+        ),
+        migrations.AlterField(
+            model_name='biographypage',
+            name='body_en',
+            field=wagtail.core.fields.StreamField([('heading', wagtail.core.blocks.StructBlock([('left_column', wagtail.core.blocks.CharBlock()), ('right_column', wagtail.core.blocks.CharBlock())])), ('row', wagtail.core.blocks.StructBlock([('left_column', wagtail.core.blocks.StreamBlock([('rich_text', wagtail.core.blocks.RichTextBlock(features=['bold', 'italic', 'ol', 'ul', 'link', 'embed'])), ('caption_image', wagtail.core.blocks.StructBlock([('image', wagtail.images.blocks.ImageChooserBlock()), ('caption', wagtail.core.blocks.CharBlock())]))])), ('right_column', wagtail.core.blocks.StreamBlock([('rich_text', wagtail.core.blocks.RichTextBlock(features=['bold', 'italic', 'ol', 'ul', 'link', 'embed'])), ('caption_image', wagtail.core.blocks.StructBlock([('image', wagtail.images.blocks.ImageChooserBlock()), ('caption', wagtail.core.blocks.CharBlock())]))]))])), ('block_quote', wagtail.core.blocks.StructBlock([('quote', wagtail.core.blocks.CharBlock()), ('caption', wagtail.core.blocks.RichTextBlock(features=['bold', 'italic']))]))], null=True),
+        ),
+        migrations.AlterField(
+            model_name='biographypage',
+            name='body_fr',
+            field=wagtail.core.fields.StreamField([('heading', wagtail.core.blocks.StructBlock([('left_column', wagtail.core.blocks.CharBlock()), ('right_column', wagtail.core.blocks.CharBlock())])), ('row', wagtail.core.blocks.StructBlock([('left_column', wagtail.core.blocks.StreamBlock([('rich_text', wagtail.core.blocks.RichTextBlock(features=['bold', 'italic', 'ol', 'ul', 'link', 'embed'])), ('caption_image', wagtail.core.blocks.StructBlock([('image', wagtail.images.blocks.ImageChooserBlock()), ('caption', wagtail.core.blocks.CharBlock())]))])), ('right_column', wagtail.core.blocks.StreamBlock([('rich_text', wagtail.core.blocks.RichTextBlock(features=['bold', 'italic', 'ol', 'ul', 'link', 'embed'])), ('caption_image', wagtail.core.blocks.StructBlock([('image', wagtail.images.blocks.ImageChooserBlock()), ('caption', wagtail.core.blocks.CharBlock())]))]))])), ('block_quote', wagtail.core.blocks.StructBlock([('quote', wagtail.core.blocks.CharBlock()), ('caption', wagtail.core.blocks.RichTextBlock(features=['bold', 'italic']))]))], null=True),
+        ),
+    ]

decruck/main/migrations/0016_auto_20200502_1707.py

@@ -0,0 +1,31 @@
+# Generated by Django 2.2.12 on 2020-05-02 17:07
+
+from django.db import migrations
+import wagtail.core.blocks
+import wagtail.core.fields
+import wagtail.images.blocks
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('main', '0015_auto_20200423_0218'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='biographypage',
+            name='body',
+            field=wagtail.core.fields.StreamField([('heading', wagtail.core.blocks.StructBlock([('left_column', wagtail.core.blocks.CharBlock()), ('right_column', wagtail.core.blocks.CharBlock())], icon='bold', template='main/blocks/bio-heading.html')), ('row', wagtail.core.blocks.StructBlock([('left_column', wagtail.core.blocks.StreamBlock([('rich_text', wagtail.core.blocks.RichTextBlock(features=['bold', 'italic', 'ol', 'ul', 'link', 'embed'])), ('caption_image', wagtail.core.blocks.StructBlock([('image', wagtail.images.blocks.ImageChooserBlock()), ('caption', wagtail.core.blocks.CharBlock())], icon='image', template='main/blocks/bio-caption-image.html'))])), ('right_column', wagtail.core.blocks.StreamBlock([('rich_text', wagtail.core.blocks.RichTextBlock(features=['bold', 'italic', 'ol', 'ul', 'link', 'embed'])), ('caption_image', wagtail.core.blocks.StructBlock([('image', wagtail.images.blocks.ImageChooserBlock()), ('caption', wagtail.core.blocks.CharBlock())], icon='image', template='main/blocks/bio-caption-image.html'))]))], icon='pilcrow', template='main/blocks/bio-row.html')), ('block_quote', wagtail.core.blocks.StructBlock([('quote', wagtail.core.blocks.CharBlock()), ('caption', wagtail.core.blocks.RichTextBlock(features=['bold', 'italic']))], icon='openquote', template='main/blocks/bio-quote.html'))]),
+        ),
+        migrations.AlterField(
+            model_name='biographypage',
+            name='body_en',
+            field=wagtail.core.fields.StreamField([('heading', wagtail.core.blocks.StructBlock([('left_column', wagtail.core.blocks.CharBlock()), ('right_column', wagtail.core.blocks.CharBlock())], icon='bold', template='main/blocks/bio-heading.html')), ('row', wagtail.core.blocks.StructBlock([('left_column', wagtail.core.blocks.StreamBlock([('rich_text', wagtail.core.blocks.RichTextBlock(features=['bold', 'italic', 'ol', 'ul', 'link', 'embed'])), ('caption_image', wagtail.core.blocks.StructBlock([('image', wagtail.images.blocks.ImageChooserBlock()), ('caption', wagtail.core.blocks.CharBlock())], icon='image', template='main/blocks/bio-caption-image.html'))])), ('right_column', wagtail.core.blocks.StreamBlock([('rich_text', wagtail.core.blocks.RichTextBlock(features=['bold', 'italic', 'ol', 'ul', 'link', 'embed'])), ('caption_image', wagtail.core.blocks.StructBlock([('image', wagtail.images.blocks.ImageChooserBlock()), ('caption', wagtail.core.blocks.CharBlock())], icon='image', template='main/blocks/bio-caption-image.html'))]))], icon='pilcrow', template='main/blocks/bio-row.html')), ('block_quote', wagtail.core.blocks.StructBlock([('quote', wagtail.core.blocks.CharBlock()), ('caption', wagtail.core.blocks.RichTextBlock(features=['bold', 'italic']))], icon='openquote', template='main/blocks/bio-quote.html'))], null=True),
+        ),
+        migrations.AlterField(
+            model_name='biographypage',
+            name='body_fr',
+            field=wagtail.core.fields.StreamField([('heading', wagtail.core.blocks.StructBlock([('left_column', wagtail.core.blocks.CharBlock()), ('right_column', wagtail.core.blocks.CharBlock())], icon='bold', template='main/blocks/bio-heading.html')), ('row', wagtail.core.blocks.StructBlock([('left_column', wagtail.core.blocks.StreamBlock([('rich_text', wagtail.core.blocks.RichTextBlock(features=['bold', 'italic', 'ol', 'ul', 'link', 'embed'])), ('caption_image', wagtail.core.blocks.StructBlock([('image', wagtail.images.blocks.ImageChooserBlock()), ('caption', wagtail.core.blocks.CharBlock())], icon='image', template='main/blocks/bio-caption-image.html'))])), ('right_column', wagtail.core.blocks.StreamBlock([('rich_text', wagtail.core.blocks.RichTextBlock(features=['bold', 'italic', 'ol', 'ul', 'link', 'embed'])), ('caption_image', wagtail.core.blocks.StructBlock([('image', wagtail.images.blocks.ImageChooserBlock()), ('caption', wagtail.core.blocks.CharBlock())], icon='image', template='main/blocks/bio-caption-image.html'))]))], icon='pilcrow', template='main/blocks/bio-row.html')), ('block_quote', wagtail.core.blocks.StructBlock([('quote', wagtail.core.blocks.CharBlock()), ('caption', wagtail.core.blocks.RichTextBlock(features=['bold', 'italic']))], icon='openquote', template='main/blocks/bio-quote.html'))], null=True),
+        ),
+    ]

decruck/main/models.py

@@ -14,7 +14,9 @@
 )
 from wagtail.search.backends import get_search_backend
 from wagtail.contrib.routable_page.models import RoutablePageMixin, route
-from wagtail.core.blocks import RichTextBlock
+from wagtail.core.blocks import (
+    RichTextBlock, StructBlock, StreamBlock, BlockQuoteBlock, CharBlock
+)
 from wagtail.core.fields import StreamField, RichTextField
 from wagtail.core.models import Page
 from wagtail.images.blocks import ImageChooserBlock
@@ -57,8 +59,36 @@ class Meta:
 
 class BiographyPage(Page, MenuPageMixin):
     body = StreamField([
-        ('rich_text', RichTextBlock()),
-        ('image', ImageChooserBlock())
+        ('heading', StructBlock([
+            ('left_column', CharBlock()),
+            ('right_column', CharBlock())
+        ], template='main/blocks/bio-heading.html', icon='bold')),
+        ('row', StructBlock([
+            ('left_column', StreamBlock([
+                ('rich_text', RichTextBlock(
+                    features=['bold', 'italic', 'ol', 'ul', 'link', 'embed']
+                )),
+                ('caption_image', StructBlock([
+                    ('image', ImageChooserBlock()),
+                    ('caption', CharBlock())
+                ], template='main/blocks/bio-caption-image.html', icon='image')),  # noqa E501
+            ])),
+            ('right_column', StreamBlock([
+                ('rich_text', RichTextBlock(
+                    features=['bold', 'italic', 'ol', 'ul', 'link', 'embed']
+                )),
+                ('caption_image', StructBlock([
+                    ('image', ImageChooserBlock()),
+                    ('caption', CharBlock())
+                ], template='main/blocks/bio-caption-image.html', icon='image')),  # noqa E501
+            ])),
+        ], template='main/blocks/bio-row.html', icon='pilcrow')),
+        ('block_quote', StructBlock([
+            ('quote', CharBlock()),
+            ('caption', RichTextBlock(
+                features=['bold', 'italic']
+            ))
+        ], template='main/blocks/bio-quote.html', icon='openquote')),
     ])
 
     class Meta:

decruck/static/build/main.css

@@ -5295,3 +5295,64 @@ h3, .h3 {
   text-transform: uppercase;
   margin-bottom: 1em; }
 
+#biography__title {
+  text-align: center; }
+
+.biography__col--left {
+  border-right: solid 2px #37332e;
+  text-align: right; }
+  @media (min-width: 768px) {
+    .biography__col--left {
+      padding-right: 30px; } }
+
+.biography__col--right {
+  border-left: solid 2px #37332e; }
+  @media (min-width: 768px) {
+    .biography__col--right {
+      padding-left: 30px; } }
+
+.biography__header--left {
+  font-family: "Abhaye Libre", "serif";
+  font-weight: 900;
+  letter-spacing: 0.1em;
+  font-size: 2em;
+  padding-bottom: 1em; }
+
+.biography__header--right {
+  font-family: "Lato", "sans-serif";
+  font-weight: 900;
+  letter-spacing: 0.1em;
+  font-size: 2em;
+  padding-bottom: 1em; }
+
+@media (min-width: 768px) {
+  .biography__img-container {
+    max-width: 430px; }
+  .biography__col--left .biography__img-container {
+    margin-left: auto; }
+  .biography__col--right .biography__img-container {
+    margin-right: auto; } }
+
+.biography__img-caption {
+  margin-top: 1em;
+  text-align: center;
+  font-size: 0.9em; }
+
+.biography__block-quote {
+  margin-top: 1em;
+  margin-bottom: 1em; }
+  @media (min-width: 768px) {
+    .biography__block-quote {
+      max-width: 80%;
+      margin-left: auto;
+      margin-right: auto; } }
+
+.biography__block-quote--quote {
+  font-family: "Abhaye Libre", "serif";
+  font-size: 1.8em;
+  letter-spacing: 0;
+  text-align: center; }
+
+.biography__block-quote--caption {
+  text-align: center; }
+

decruck/static/src/scss/main.scss

@@ -30,3 +30,4 @@
 @import "./pages/homepage";
 @import "./pages/composition_listing_page";
 @import "./pages/composition_page";
+@import "./pages/biography_page";

decruck/static/src/scss/pages/biography_page.scss

@@ -0,0 +1,86 @@
+#biography__title {
+    text-align: center;
+}
+
+.biography__col--left {
+    border-right: solid 2px $dark-brown;
+    text-align: right;
+    @include media-breakpoint-up(md) {
+        & {
+            padding-right: 30px;
+        }
+    }
+}
+
+.biography__col--right {
+    border-left: solid 2px $dark-brown;
+    @include media-breakpoint-up(md) {
+        & {
+            padding-left: 30px;
+        }
+    }
+}
+
+$bio-header-spacing: 0.1em;
+$bio-header-size: 2em;
+$bio-header-padding: 1em;
+
+.biography__header--left {
+    font-family: $font-family-serif;
+    font-weight: 900;
+    letter-spacing: $bio-header-spacing;
+    font-size: $bio-header-size;
+    padding-bottom: $bio-header-padding;
+}
+
+.biography__header--right {
+    font-family: $font-family-sans-serif;
+    font-weight: 900;
+    letter-spacing: $bio-header-spacing;
+    font-size: $bio-header-size;
+    padding-bottom: $bio-header-padding;
+}
+
+// Bio Images
+@include media-breakpoint-up(md) {
+    .biography__img-container {
+        max-width: 430px;
+    }
+    .biography__col--left .biography__img-container {
+        margin-left: auto;
+    }
+    .biography__col--right .biography__img-container {
+        margin-right: auto;
+    }
+}
+
+.biography__img-caption {
+    margin-top: 1em;
+    text-align: center;
+    font-size: 0.9em;
+}
+
+// Block Quote
+.biography__block-quote {
+    margin-top: 1em;
+    margin-bottom: 1em;
+    @include media-breakpoint-up(md) {
+        & {
+            max-width: 80%;
+            margin-left: auto;
+            margin-right: auto;
+        }
+    }
+}
+
+
+.biography__block-quote--quote {
+    font-family: $font-family-serif;
+    font-size: 1.8em;
+    letter-spacing: 0;
+    text-align: center;
+}
+
+.biography__block-quote--caption {
+    text-align: center;
+}

decruck/templates/main/biography_page.html

@@ -0,0 +1,18 @@
+{% extends 'base.html' %}
+{% load i18n %}
+{% load wagtailcore_tags %}
+
+{% block content %}
+<main>
+<div class="container">
+    <div class="row">
+        <div class="col-12">
+            <h1 id="biography__title">{{ page.title }}</h1>
+        </div>
+    </div>
+</div>
+<div class="container">
+    {% include_block page.body %}
+</div>
+</main>
+{% endblock %}

decruck/templates/main/blocks/bio-caption-image.html

@@ -0,0 +1,13 @@
+{% load wagtailcore_tags wagtailimages_tags %}
+
+{# The max width is 538px * 80% = 430px#}
+<div class="biography__img-container">
+    <div class="biography__img">
+        {% image value.image max-538x538 %}
+    </div>
+    {% if value.caption %}
+    <div class="biography__img-caption">
+        {% include_block value.caption %}
+    </div>
+    {% endif %}
+</div>

decruck/templates/main/blocks/bio-heading.html

@@ -0,0 +1,13 @@
+{% load wagtailcore_tags wagtailimages_tags %}
+
+<div class="row">
+    <div class="sr-only">
+        <h2>{% include_block value.left_column %} {% include_block value.right_column %}</h2>
+    </div>
+    <div class="col-md-6 biography__col--left" aria-hidden="true">
+        <div class="biography__header--left">{% include_block value.left_column %}</div>
+    </div>
+    <div class="col-md-6 biography__col--right" aria-hidden="true">
+        <div class="biography__header--right">{% include_block value.right_column %}</div>
+    </div>
+</div>