From ecba0d84bccfb79252ee4adaa40a390b4e052417 Mon Sep 17 00:00:00 2001
From: Christian Cueni <christian.cueni@iterativ.ch>
Date: Tue, 9 Jul 2019 15:36:51 +0200
Subject: [PATCH] Add subtitle to contentblock, style instrument widget

---
 client/src/components/ContentBlock.vue        | 32 +++++++++++++++++--
 .../content-blocks/InstrumentWidget.vue       |  2 +-
 client/src/styles/_mixins.scss                |  6 ++--
 client/src/styles/_typography.scss            | 10 ++++++
 client/src/styles/_variables.scss             |  3 ++
 5 files changed, 46 insertions(+), 7 deletions(-)

diff --git a/client/src/components/ContentBlock.vue b/client/src/components/ContentBlock.vue
index d839f2b9..a408d85a 100644
--- a/client/src/components/ContentBlock.vue
+++ b/client/src/components/ContentBlock.vue
@@ -12,6 +12,7 @@
         </a>
       </div>
 
+      <p v-if="subtitle !== ''" class="content-block__subtitle text-regular">{{subtitle}}</p>
       <h4 class="content-block__title">{{contentBlock.title}}</h4>
 
       <component v-for="component in contentBlock.contents"
@@ -51,6 +52,11 @@
   import CHAPTER_QUERY from '@/graphql/gql/chapterQuery.gql';
   import DELETE_CONTENT_BLOCK_MUTATION from '@/graphql/gql/mutations/deleteContentBlock.gql';
 
+  const INSTRUMENTS = {
+    base_communication: 'Sprache & Kommunikation',
+    base_society: 'Gesellschaft'
+  }
+
   export default {
     props: ['contentBlock', 'parent'],
 
@@ -79,6 +85,14 @@
     computed: {
       specialClass() {
         return `content-block--${this.contentBlock.type.toLowerCase()}`
+      },
+      subtitle() {
+        const contentType = this.contentBlock.type.toLowerCase()
+        if (!(contentType in INSTRUMENTS)) {
+          return ''
+        }
+
+        return `Instrument - ${INSTRUMENTS[contentType]}`
       }
     },
 
@@ -134,6 +148,10 @@
       line-height: 1.5;
     }
 
+    &__subtitle {
+      margin-bottom: 0 !important;
+    }
+
     &__actions {
       position: absolute;
       left: -70px;
@@ -146,12 +164,16 @@
     }
 
     &--base_communication {
-      @include content-box($color-accent-1);
+      @include content-box($color-accent-1-list);
+
+      .content-block__subtitle {
+        color: $color-accent-1-dark;
+      }
     }
 
     &--task {
       @include light-border(bottom);
-      
+
       .content-block__title {
         color: $color-brand;
         margin-top: $default-padding;
@@ -163,7 +185,11 @@
     }
 
     &--base_society {
-      @include content-box($color-accent-2);
+      @include content-box($color-accent-2-list);
+
+      .content-block__subtitle {
+        color: $color-accent-2-dark;
+      }
     }
 
     /deep/ p {
diff --git a/client/src/components/content-blocks/InstrumentWidget.vue b/client/src/components/content-blocks/InstrumentWidget.vue
index 5d9672d7..7cbdb9ad 100644
--- a/client/src/components/content-blocks/InstrumentWidget.vue
+++ b/client/src/components/content-blocks/InstrumentWidget.vue
@@ -2,7 +2,7 @@
   <div class="instrument-widget">
     <div class="instrument-widget__description" v-html="value.description"></div>
     <router-link class="instrument-widget__button button" tag="button"
-                 :to="{name: 'instrument', params: { slug: value.slug }}">Instrument lesen
+                 :to="{name: 'instrument', params: { slug: value.slug }}">Instrument anzeigen
     </router-link>
   </div>
 </template>
diff --git a/client/src/styles/_mixins.scss b/client/src/styles/_mixins.scss
index 42084e7e..99e96450 100644
--- a/client/src/styles/_mixins.scss
+++ b/client/src/styles/_mixins.scss
@@ -57,14 +57,14 @@
 
 }
 
-@mixin content-box($main-color) {
-  background-color: rgba($main-color, 0.15);
+@mixin content-box($color-list) {
+  background-color: nth($color-list, 2);
   padding: 15px;
   align-items: start;
   border-radius: $default-border-radius;
 
   /deep/ .button {
-    border-color: $main-color;
+    border-color: nth($color-list, 1);
     background-color: $color-white;
   }
 }
diff --git a/client/src/styles/_typography.scss b/client/src/styles/_typography.scss
index ba98ae3f..ec6c573a 100644
--- a/client/src/styles/_typography.scss
+++ b/client/src/styles/_typography.scss
@@ -72,3 +72,13 @@ input, textarea, select, button {
   margin-bottom: 7.5px;
   font-weight: 600;
 }
+
+.text-regular {
+  font-family: $sans-serif-font-family;
+  font-weight: $font-weight-regular;
+  font-size: toRem(18px);
+
+  &--small {
+    font-size: toRem(16px);
+  }
+}
diff --git a/client/src/styles/_variables.scss b/client/src/styles/_variables.scss
index cb4a296d..2cf324e0 100644
--- a/client/src/styles/_variables.scss
+++ b/client/src/styles/_variables.scss
@@ -19,6 +19,9 @@ $color-accent-5-dark: #09496F;
 $color-accent-5: #004E7C;
 $color-accent-5: #DBE6EC;
 
+$color-accent-1-list: $color-accent-1 $color-accent-1-light $color-accent-1-dark;
+$color-accent-2-list: $color-accent-2 $color-accent-2-light $color-accent-2-dark;
+
 /* brand */
 $color-brand-dark: #138E72;
 $color-brand: #17A887;