Lets us define homepage panels as “compact” (#67)

* Lets us define homepage panels as “compact”

* right-floating-image now only does things in wide screens

cms_pages/migrations/0017_auto_20160918_0945_squashed_0018_auto_20160919_0125_squashed_0018_auto_20160919_0134.py

@@ -0,0 +1,44 @@
+# -*- coding: utf-8 -*-
+# Generated by Django 1.9.7 on 2016-09-19 01:48
+from __future__ import unicode_literals
+
+import cms_pages.models
+from django.db import migrations
+import wagtail.wagtailcore.blocks
+import wagtail.wagtailcore.fields
+import wagtail.wagtailimages.blocks
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('cms_pages', '0016_auto_20160918_0517'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='contentpage',
+            name='body',
+            field=wagtail.wagtailcore.fields.StreamField([('rich_text', wagtail.wagtailcore.blocks.RichTextBlock(required=False)), ('raw_html', wagtail.wagtailcore.blocks.RawHTMLBlock(required=False)), ('floating_image', cms_pages.models.FloatingImageBlock()), ('anchor', cms_pages.models.AnchorBlock(help_text='Add a named anchor to this point in the page')), ('colophon_image_list', wagtail.wagtailcore.blocks.StructBlock([(b'do_nothing', wagtail.wagtailcore.blocks.BooleanBlock(required=False))]))]),
+        ),
+        migrations.AlterField(
+            model_name='newsindexpage',
+            name='body',
+            field=wagtail.wagtailcore.fields.StreamField([('rich_text', wagtail.wagtailcore.blocks.RichTextBlock(required=False)), ('raw_html', wagtail.wagtailcore.blocks.RawHTMLBlock(required=False)), ('floating_image', cms_pages.models.FloatingImageBlock()), ('anchor', cms_pages.models.AnchorBlock(help_text='Add a named anchor to this point in the page')), ('colophon_image_list', wagtail.wagtailcore.blocks.StructBlock([(b'do_nothing', wagtail.wagtailcore.blocks.BooleanBlock(required=False))]))]),
+        ),
+        migrations.AlterField(
+            model_name='newspage',
+            name='body',
+            field=wagtail.wagtailcore.fields.StreamField([('rich_text', wagtail.wagtailcore.blocks.RichTextBlock(required=False)), ('raw_html', wagtail.wagtailcore.blocks.RawHTMLBlock(required=False)), ('floating_image', cms_pages.models.FloatingImageBlock()), ('anchor', cms_pages.models.AnchorBlock(help_text='Add a named anchor to this point in the page')), ('colophon_image_list', wagtail.wagtailcore.blocks.StructBlock([(b'do_nothing', wagtail.wagtailcore.blocks.BooleanBlock(required=False))]))]),
+        ),
+        migrations.AlterField(
+            model_name='homepage',
+            name='body',
+            field=wagtail.wagtailcore.fields.StreamField([('basic_content', wagtail.wagtailcore.blocks.StructBlock([(b'panel_type', wagtail.wagtailcore.blocks.ChoiceBlock(choices=[('blue_left', 'Left-aligned image, blue-filtered image BG'), ('white_right', 'Right-aligned image, white background')])), (b'heading', wagtail.wagtailcore.blocks.CharBlock(required=True)), (b'inset_illustration', wagtail.wagtailcore.blocks.ChoiceBlock(choices=[('antarctica.svg', 'Antarctica'), ('bridge.svg', 'Bridge'), ('casino.svg', 'Casino'), ('cradle.svg', 'Cradle Mountain'), ('devil.svg', 'Tasmanian Devil'), ('falls.svg', 'Waterfall'), ('hobart.svg', 'Hobart'), ('lavender.svg', 'Lavender'), ('tuz.svg', 'Tuz'), ('wineglass.svg', 'Wineglass')])), (b'background_image', wagtail.wagtailimages.blocks.ImageChooserBlock(help_text="This is used as the background image of a blue-left block. It's not used for white-right.", required=False)), (b'body', wagtail.wagtailcore.blocks.RichTextBlock(required=True)), (b'link', wagtail.wagtailcore.blocks.StructBlock([('page', wagtail.wagtailcore.blocks.PageChooserBlock()), ('title', wagtail.wagtailcore.blocks.CharBlock(required=True))])), (b'external_links', wagtail.wagtailcore.blocks.ListBlock(cms_pages.models.ExternalLinksBlock)), (b'compact', wagtail.wagtailcore.blocks.BooleanBlock(help_text="True if this block is to be displayed in 'compact' mode"))])), ('keynotes', wagtail.wagtailcore.blocks.StructBlock([(b'heading', wagtail.wagtailcore.blocks.CharBlock(required=True)), (b'speakers', wagtail.wagtailcore.blocks.ListBlock(cms_pages.models.KeynoteSpeakerBlock))]))]),
+        ),
+        migrations.AlterField(
+            model_name='homepage',
+            name='body',
+            field=wagtail.wagtailcore.fields.StreamField([('basic_content', wagtail.wagtailcore.blocks.StructBlock([(b'panel_type', wagtail.wagtailcore.blocks.ChoiceBlock(choices=[('blue_left', 'Left-aligned image, blue-filtered image BG'), ('white_right', 'Right-aligned image, white background')])), (b'heading', wagtail.wagtailcore.blocks.CharBlock(required=True)), (b'inset_illustration', wagtail.wagtailcore.blocks.ChoiceBlock(choices=[('antarctica.svg', 'Antarctica'), ('bridge.svg', 'Bridge'), ('casino.svg', 'Casino'), ('cradle.svg', 'Cradle Mountain'), ('devil.svg', 'Tasmanian Devil'), ('falls.svg', 'Waterfall'), ('hobart.svg', 'Hobart'), ('lavender.svg', 'Lavender'), ('tuz.svg', 'Tuz'), ('wineglass.svg', 'Wineglass')])), (b'background_image', wagtail.wagtailimages.blocks.ImageChooserBlock(help_text="This is used as the background image of a blue-left block. It's not used for white-right.", required=False)), (b'body', wagtail.wagtailcore.blocks.RichTextBlock(required=True)), (b'link', wagtail.wagtailcore.blocks.StructBlock([('page', wagtail.wagtailcore.blocks.PageChooserBlock()), ('title', wagtail.wagtailcore.blocks.CharBlock(required=True))])), (b'external_links', wagtail.wagtailcore.blocks.ListBlock(cms_pages.models.ExternalLinksBlock)), (b'compact', wagtail.wagtailcore.blocks.BooleanBlock(help_text="True if this block is to be displayed in 'compact' mode", required=False))])), ('keynotes', wagtail.wagtailcore.blocks.StructBlock([(b'heading', wagtail.wagtailcore.blocks.CharBlock(required=True)), (b'speakers', wagtail.wagtailcore.blocks.ListBlock(cms_pages.models.KeynoteSpeakerBlock))]))]),
+        ),
+    ]

cms_pages/models.py

@@ -116,6 +116,10 @@ class BasicContentBlock(blocks.StructBlock):
         ("title", blocks.CharBlock(required=True)),
     ])
     external_links = blocks.ListBlock(ExternalLinksBlock)
+    compact = blocks.BooleanBlock(
+        required=False,
+        help_text="True if this block is to be displayed in 'compact' mode",
+    )
 
 
 class PresentationChooserBlock(blocks.ChooserBlock):

pinaxcon/templates/cms_pages/home_page_blocks/basic_content.html

@@ -1,10 +1,18 @@
+{% load lca2017_tags %}
 {% load staticfiles %}
 {% load wagtailcore_tags %}
 {% load wagtailimages_tags %}
 
+{% if value.compact %}
+  {% define "panel__compact" as compact %}
+{% else %}
+  {% define "" as compact %}
+{% endif %}
+
+
 {% if value.panel_type == "blue_left" %}
 
-<div class="panel panel__bg">
+<div class="panel panel__bg {{ compact }}">
   {% image value.background_image width-2000 as background_image %}
   <div style="background-image: url('{{ background_image.url }}');" class="panel--bg"></div>
   <div class="panel--content">
@@ -15,7 +23,7 @@
 
 {% elif value.panel_type == "white_right" %}
 
-<div class="panel">
+<div class="panel {{ compact }}">
   <div class="panel--content">
     {% include "cms_pages/home_page_blocks/basic_content_text_and_links.html" %}
     {% include "cms_pages/home_page_blocks/basic_content_illustration.html" %}

pinaxcon/templatetags/lca2017_tags.py

@@ -55,6 +55,11 @@ def speaker_photo(context, speaker, size):
         return url
 
 
+@register.simple_tag()
+def define(value):
+    return value
+
+
 @register.simple_tag()
 def presentation_bg_number(presentation, count):
     return sum(ord(i) for i in presentation.title) % count

static/src/lca2017/css/app.css

@@ -1127,11 +1127,13 @@ table.alt tr:not(:last-of-type) {
   }
 }
 
-.right-floating-image {
+@media (min-width: 48em) {
+  .right-floating-image {
     width: 30%;
     float: right;
     margin: 4rem;
     margin-right: 0;
+  }
 }
 
 .sponsor-logo {