From c1ac3e779f67a72e2a27bfb0217575278818a127 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Fri, 10 Apr 2020 21:28:39 +0200
Subject: [PATCH] Add instructions to client

---
 client/package-lock.json                 | 68 +++++++-----------------
 client/src/components/icons/BulbIcon.vue | 10 ++++
 client/src/graphql/gql/topicQuery.gql    |  1 +
 client/src/pages/topic.vue               | 43 ++++++++++++---
 4 files changed, 64 insertions(+), 58 deletions(-)
 create mode 100644 client/src/components/icons/BulbIcon.vue

diff --git a/client/package-lock.json b/client/package-lock.json
index d6e213e0..61db2fe7 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -9130,8 +9130,7 @@
         },
         "ansi-regex": {
           "version": "2.1.1",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -9149,13 +9148,11 @@
         },
         "balanced-match": {
           "version": "1.0.0",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
-          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -9168,18 +9165,15 @@
         },
         "code-point-at": {
           "version": "1.1.0",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "concat-map": {
           "version": "0.0.1",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "console-control-strings": {
           "version": "1.1.0",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -9282,8 +9276,7 @@
         },
         "inherits": {
           "version": "2.0.3",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "ini": {
           "version": "1.3.5",
@@ -9293,7 +9286,6 @@
         "is-fullwidth-code-point": {
           "version": "1.0.0",
           "bundled": true,
-          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -9306,20 +9298,17 @@
         "minimatch": {
           "version": "3.0.4",
           "bundled": true,
-          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
         },
         "minimist": {
           "version": "0.0.8",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "minipass": {
           "version": "2.2.4",
           "bundled": true,
-          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.1",
             "yallist": "^3.0.0"
@@ -9336,7 +9325,6 @@
         "mkdirp": {
           "version": "0.5.1",
           "bundled": true,
-          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -9409,8 +9397,7 @@
         },
         "number-is-nan": {
           "version": "1.0.1",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -9420,7 +9407,6 @@
         "once": {
           "version": "1.4.0",
           "bundled": true,
-          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -9496,8 +9482,7 @@
         },
         "safe-buffer": {
           "version": "5.1.1",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -9527,7 +9512,6 @@
         "string-width": {
           "version": "1.0.2",
           "bundled": true,
-          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -9545,7 +9529,6 @@
         "strip-ansi": {
           "version": "3.0.1",
           "bundled": true,
-          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -9584,13 +9567,11 @@
         },
         "wrappy": {
           "version": "1.0.2",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "yallist": {
           "version": "3.0.2",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         }
       }
     },
@@ -11636,8 +11617,7 @@
             "ansi-regex": {
               "version": "2.1.1",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "aproba": {
               "version": "1.2.0",
@@ -11680,8 +11660,7 @@
             "code-point-at": {
               "version": "1.1.0",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "concat-map": {
               "version": "0.0.1",
@@ -11692,8 +11671,7 @@
             "console-control-strings": {
               "version": "1.1.0",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "core-util-is": {
               "version": "1.0.2",
@@ -11810,8 +11788,7 @@
             "inherits": {
               "version": "2.0.3",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "ini": {
               "version": "1.3.5",
@@ -11823,7 +11800,6 @@
               "version": "1.0.0",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "number-is-nan": "^1.0.0"
               }
@@ -11853,7 +11829,6 @@
               "version": "2.3.5",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "safe-buffer": "^5.1.2",
                 "yallist": "^3.0.0"
@@ -11872,7 +11847,6 @@
               "version": "0.5.1",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "minimist": "0.0.8"
               }
@@ -11966,7 +11940,6 @@
               "version": "1.4.0",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "wrappy": "1"
               }
@@ -12052,8 +12025,7 @@
             "safe-buffer": {
               "version": "5.1.2",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "safer-buffer": {
               "version": "2.1.2",
@@ -12089,7 +12061,6 @@
               "version": "1.0.2",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "code-point-at": "^1.0.0",
                 "is-fullwidth-code-point": "^1.0.0",
@@ -12109,7 +12080,6 @@
               "version": "3.0.1",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "ansi-regex": "^2.0.0"
               }
@@ -12153,14 +12123,12 @@
             "wrappy": {
               "version": "1.0.2",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "yallist": {
               "version": "3.0.3",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             }
           }
         },
diff --git a/client/src/components/icons/BulbIcon.vue b/client/src/components/icons/BulbIcon.vue
new file mode 100644
index 00000000..872d5229
--- /dev/null
+++ b/client/src/components/icons/BulbIcon.vue
@@ -0,0 +1,10 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
+    <path
+      d="M50,6.41C25.74,6.41,6,26,6,50S25.74,93.59,50,93.59,94,74,94,50,74.26,6.41,50,6.41Zm0,82.43A39.1,39.1,0,0,1,10.74,50a39.26,39.26,0,0,1,78.52,0A39.1,39.1,0,0,1,50,88.85Z"/>
+    <path
+      d="M50,22.72A19,19,0,0,0,30.91,41.64a18.72,18.72,0,0,0,6.36,14.13c1.21,1.2,1.66.89,1.68,2.78l0,.84a3.34,3.34,0,0,0,1,2.47,3.53,3.53,0,0,0,2.38,1H57.64a3.39,3.39,0,0,0,2.39-1,3.55,3.55,0,0,0,1-2.57c-.06-1.61.22-2.1,1.75-3.62A18.87,18.87,0,0,0,50,22.72ZM64.35,41.64a14.26,14.26,0,0,1-4.77,10.52l-.24.24c-2.48,2.45-3,3.61-3,5.7H43.67c-.07-2.08-.57-3.22-3.18-5.8A14.27,14.27,0,1,1,64.35,41.64Z"/>
+    <path
+      d="M56.43,78.67H43.57a4,4,0,0,1-4-4v-4a4,4,0,0,1,4-4H56.43a4,4,0,0,1,4,4v4A4,4,0,0,1,56.43,78.67ZM43.57,70.76v4H56.43v-4Z"/>
+  </svg>
+</template>
diff --git a/client/src/graphql/gql/topicQuery.gql b/client/src/graphql/gql/topicQuery.gql
index e3538f3f..a477166a 100644
--- a/client/src/graphql/gql/topicQuery.gql
+++ b/client/src/graphql/gql/topicQuery.gql
@@ -6,6 +6,7 @@ query Topic($slug: String!){
     teaser
     description
     vimeoId
+    instructions
     modules {
       edges {
         node {
diff --git a/client/src/pages/topic.vue b/client/src/pages/topic.vue
index 091686a5..abbcf3fe 100644
--- a/client/src/pages/topic.vue
+++ b/client/src/pages/topic.vue
@@ -4,9 +4,16 @@
     <p class="topic__teaser">
       {{topic.teaser}}
     </p>
-    <div v-if="topic.vimeoId" class="topic__video-link" @click="openVideo">
-      <play class="topic__video-link-icon"></play>
-      <span class="topic__video-link-description">Video schauen</span>
+    <div class="topic__links">
+      <div v-if="topic.vimeoId" class="topic__video-link topic__link" @click="openVideo">
+        <play-icon class="topic__video-link-icon topic__link-icon"></play-icon>
+        <span class="topic__link-description">Video schauen</span>
+      </div>
+      <a target="_blank" :href="topic.instructions" v-if="me.isTeacher && topic.instructions" class="topic__instruction-link topic__link">
+        <bulb-icon class="topic__instruction-icon topic__link-icon"></bulb-icon>
+        <span class="topic__link-description">Anweisungen zum Thema anzeigen</span>
+      </a>
+
     </div>
     <div class="topic__modules">
       <module-teaser v-for="module in modules" :key="module.id" v-bind="module"></module-teaser>
@@ -16,15 +23,20 @@
 
 <script>
   import ModuleTeaser from '@/components/modules/ModuleTeaser.vue';
-  import Play from '@/components/icons/Play';
+  import PlayIcon from '@/components/icons/Play';
+  import BulbIcon from '@/components/icons/BulbIcon';
   import TOPIC_QUERY from '@/graphql/gql/topicQuery.gql';
+  import me from '@/mixins/me';
 
   export default {
     components: {
       ModuleTeaser,
-      Play
+      PlayIcon,
+      BulbIcon
     },
 
+    mixins: [me],
+
     apollo: {
       topic() {
         return {
@@ -75,22 +87,37 @@
       margin-bottom: $large-spacing;
     }
 
-    &__video-link {
+    &__links {
       margin-bottom: $large-spacing;
+      display: flex;
+    }
+
+    &__link {
       cursor: pointer;
       display: flex;
       align-items: center;
     }
 
-    &__video-link-icon {
+    &__video-link {
+      margin-right: $large-spacing;
+    }
+
+    &__link-icon {
       width: 40px;
+      height: 40px;
       margin-right: $medium-spacing;
     }
 
-    &__video-link-description {
+    &__link-description {
       @include heading-3;
     }
 
+    &__instruction-icon {
+      fill: $color-white;
+      border-radius: 20px;
+      background-color: $color-brand;
+    }
+
     &__modules {
       margin-top: 40px;
       display: flex;