Add chapter and content block components

client/src/components/Chapter.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="chapter">
+    <h3>{{chapter.title}}</h3>
+    <content-block></content-block>
+    <content-block></content-block>
+    <content-block></content-block>
+
+  </div>
+</template>
+
+<script>
+  import ContentBlock from '@/components/ContentBlock.vue';
+
+  export default {
+    props: ['chapter'],
+    components: {
+      ContentBlock
+    }
+  }
+</script>

client/src/components/ContentBlock.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="content-block">
+    <h4>{{title}}</h4>
+
+    <component v-for="component in contents" :key="component.id" :is="component.type"
+               v-bind:data="component"></component>
+
+  </div>
+</template>
+
+<script>
+  import TextBlock from '@/components/TextBlock.vue';
+
+  export default {
+    components: {
+      TextBlock
+    },
+
+    data() {
+      return {
+        title: 'Auftrag 1',
+        contents: [
+          {
+            type: 'text-block',
+            id: 1,
+            content: `
+              <p>
+      Sie haben diesen Sommer Ihre Lehre begonnen. Was bedeutet dieser neue Abschnitt für Sie?
+    </p>
+    <p>
+      Halten Sie Ihre Erfahrungen im Bereich <a href alt>«Zusammenarbeit»</a>
+      fest und stellen Sie diese anschliessend der Klasse vor.
+    </p>
+`
+          }
+        ]
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  .content-block {
+    margin-bottom: 2.5em;
+
+    /deep/ p {
+      font-size: 1.125rem;
+      line-height: 1.5;
+      margin-bottom: 1em;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+</style>

client/src/components/Module.vue

@@ -10,8 +10,8 @@
     <h3>Lernziele</h3>
     <objective-group v-for="group in module.objectiveGroups" :key="group.id" :group="group"></objective-group>
 
+    <chapter :chapter="chapter"></chapter>
     <h3>1.1 Lehrbeginn</h3>
-    <h4>Auftrag 1</h4>
     <h4>Das Interview</h4>
     <h4>Tipp</h4>
     <h3>1.2  Die drei Lernorte</h3>
@@ -23,12 +23,12 @@
 
 <script>
   import ObjectiveGroup from '@/components/ObjectiveGroup.vue';
+  import Chapter from '@/components/Chapter.vue';
 
   export default {
-    name: 'module',
-
     components: {
-      ObjectiveGroup
+      ObjectiveGroup,
+      Chapter
     },
 
     props: {
@@ -40,6 +40,9 @@
 
     data() {
       return {
+        chapter: {
+          title: '1.1 Lehrbeginn'
+        }
       }
     },
 
@@ -64,6 +67,7 @@
     &__hero {
       margin-bottom: 35px;
       border-radius: 12px;
+      max-width: 100%;
     }
 
     &__meta-title {
@@ -75,10 +79,14 @@
     &__intro {
       font-size: 1.5625rem;
       line-height: 1.5;
-      margin-bottom: 1em;
+      margin-bottom: 3em;
 
       > /deep/ p {
         margin-bottom: 1.5em;
+
+        &:last-child {
+          margin-bottom: 0;
+        }
       }
     }
   }

client/src/components/ObjectiveGroup.vue

@@ -43,6 +43,7 @@
     &__objective {
       font-size: 1.2857142857142858rem;
       margin-bottom: 28px;
+      line-height: 1.5;
     }
   }
 </style>

client/src/components/TextBlock.vue

@@ -0,0 +1,9 @@
+<template>
+  <div v-html="data.content"></div>
+</template>
+
+<script>
+  export default {
+    props: ['data']
+  }
+</script>