From 03d8ed67121fc31aaa3c7bfecc3e1e44e1a67e25 Mon Sep 17 00:00:00 2001
From: Christian Cueni <christian.cueni@iterativ.ch>
Date: Mon, 8 Jul 2019 14:24:12 +0200
Subject: [PATCH] Add subtitle block, update font sizes

---
 client/src/components/ContentBlock.vue            |  6 ++++++
 .../components/content-blocks/SubtitleBlock.vue   | 15 +++++++++++++++
 client/src/styles/_typography.scss                |  9 +++++++--
 server/books/blocks.py                            |  4 ++++
 server/books/models/contentblock.py               |  3 ++-
 5 files changed, 34 insertions(+), 3 deletions(-)
 create mode 100644 client/src/components/content-blocks/SubtitleBlock.vue

diff --git a/client/src/components/ContentBlock.vue b/client/src/components/ContentBlock.vue
index 2d52e701..4abe4df6 100644
--- a/client/src/components/ContentBlock.vue
+++ b/client/src/components/ContentBlock.vue
@@ -39,6 +39,7 @@
   import DocumentBlock from '@/components/content-blocks/DocumentBlock';
   import InfogramBlock from '@/components/content-blocks/InfogramBlock';
   import GeniallyBlock from '@/components/content-blocks/GeniallyBlock';
+  import SubtitleBlock from '@/components/content-blocks/SubtitleBlock';
   import Assignment from '@/components/content-blocks/assignment/Assignment';
   import Solution from '@/components/content-blocks/Solution';
   import AddContentBlockButton from '@/components/AddContentBlockButton';
@@ -64,6 +65,7 @@
       'document_block': DocumentBlock,
       'infogram_block': InfogramBlock,
       'genially_block': GeniallyBlock,
+      'subtitle': SubtitleBlock,
       Solution,
       Assignment,
       Task,
@@ -150,7 +152,11 @@
     &--task {
       .content-block__title {
         color: $color-brand;
+        margin-top: $default-padding;
         @include light-border(bottom);
+        @include desktop {
+          margin-top: 0;
+        }
       }
     }
 
diff --git a/client/src/components/content-blocks/SubtitleBlock.vue b/client/src/components/content-blocks/SubtitleBlock.vue
new file mode 100644
index 00000000..c99e870a
--- /dev/null
+++ b/client/src/components/content-blocks/SubtitleBlock.vue
@@ -0,0 +1,15 @@
+<template>
+  <h5 class="subtitle" v-html="value.text"></h5>
+</template>
+
+<script>
+  export default {
+    props: ['value']
+  }
+</script>
+
+<style scoped lang="scss">
+  .subtitle {
+    margin-bottom: 30px;
+  }
+</style>
diff --git a/client/src/styles/_typography.scss b/client/src/styles/_typography.scss
index e0343a54..c37a822f 100644
--- a/client/src/styles/_typography.scss
+++ b/client/src/styles/_typography.scss
@@ -41,12 +41,12 @@ h1 {
 }
 
 h2 {
-  font-size: 2.625rem; // 42px
+  font-size: 2.75rem; // 44px
   margin-bottom: 24px;
 }
 
 h3 {
-  font-size: 2.13rem; // 34px
+  font-size: 2.125rem; // 34px
   line-height: 2.63rem; // 42px
   margin-bottom: 52px;
 }
@@ -56,6 +56,11 @@ h4 {
   margin-bottom: 24px;
 }
 
+h5 {
+  font-size: 1.125rem; // 18px
+  margin-bottom: 24px;
+}
+
 input, textarea, select, button {
   font-family: $sans-serif-font-family;
   font-weight: $font-weight-regular;
diff --git a/server/books/blocks.py b/server/books/blocks.py
index 5343cb7b..70317c80 100644
--- a/server/books/blocks.py
+++ b/server/books/blocks.py
@@ -73,6 +73,10 @@ class InfogramBlock(blocks.StructBlock):
 class GeniallyBlock(blocks.StructBlock):
     id = blocks.TextBlock()
 
+
+class SubtitleBlock(blocks.StructBlock):
+    text = blocks.TextBlock()
+
 # 'text_block' 'task' 'basic_knowledge' 'student_entry' 'image_block'
 #
 # url = blocks.URLBlock()
diff --git a/server/books/models/contentblock.py b/server/books/models/contentblock.py
index 907efe5f..9044abd7 100644
--- a/server/books/models/contentblock.py
+++ b/server/books/models/contentblock.py
@@ -6,7 +6,7 @@ from wagtail.core.fields import StreamField
 from wagtail.images.blocks import ImageChooserBlock
 
 from books.blocks import TextBlock, BasicKnowledgeBlock, LinkBlock, VideoBlock, DocumentBlock, \
-    ImageUrlBlock, AssignmentBlock, InfogramBlock, GeniallyBlock
+    ImageUrlBlock, AssignmentBlock, InfogramBlock, GeniallyBlock, SubtitleBlock
 from core.wagtail_utils import StrictHierarchyPage
 from users.models import SchoolClass
 
@@ -46,6 +46,7 @@ class ContentBlock(StrictHierarchyPage):
         ('document_block', DocumentBlock()),
         ('infogram_block', InfogramBlock()),
         ('genially_block', GeniallyBlock()),
+        ('subtitle', SubtitleBlock()),
     ], null=True, blank=True)
 
     type = models.CharField(