Add video form and other components

client/src/components/ContentBlockChooserWidget.vue

@@ -1,26 +1,26 @@
 <template>
-  <div class="content-block-chooser-widget" v-on:click="$emit('change-type', index)">
+  <div class="content-block-chooser-widget">
-    <div class="content-block-chooser-widget__link">
+    <div class="content-block-chooser-widget__link" v-on:click="$emit('change-type', index, 'link')">
       <link-icon class="content-block-chooser-widget__link-icon"></link-icon>
       <div class="content-block-chooser-widget__link-title">Link</div>
     </div>
-    <div class="content-block-chooser-widget__link">
+    <div class="content-block-chooser-widget__link" v-on:click="$emit('change-type', index, 'video')">
       <video-icon class="content-block-chooser-widget__link-icon"></video-icon>
       <div class="content-block-chooser-widget__link-title">Video</div>
     </div>
-    <div class="content-block-chooser-widget__link">
+    <div class="content-block-chooser-widget__link" v-on:click="$emit('change-type', index, 'image')">
       <image-icon class="content-block-chooser-widget__link-icon"></image-icon>
       <div class="content-block-chooser-widget__link-title">Bild</div>
     </div>
-    <div class="content-block-chooser-widget__link">
+    <div class="content-block-chooser-widget__link" v-on:click="$emit('change-type', index, 'text')">
       <text-icon class="content-block-chooser-widget__link-icon"></text-icon>
       <div class="content-block-chooser-widget__link-title">Text</div>
     </div>
-    <div class="content-block-chooser-widget__link">
+    <div class="content-block-chooser-widget__link" v-on:click="$emit('change-type', index, 'exercise')">
       <speech-bubble-icon class="content-block-chooser-widget__link-icon"></speech-bubble-icon>
       <div class="content-block-chooser-widget__link-title">Aufgabe&nbsp;& Ergebnis</div>
     </div>
-    <div class="content-block-chooser-widget__link">
+    <div class="content-block-chooser-widget__link" v-on:click="$emit('change-type', index, 'document')">
       <document-icon class="content-block-chooser-widget__link-icon"></document-icon>
       <div class="content-block-chooser-widget__link-title">Dokument</div>
     </div>

client/src/components/Modal.vue

@@ -65,7 +65,7 @@
       grid-area: body;
       padding: 10px $modal-lateral-padding;
       overflow: auto;
-      width: 90%;
+      box-sizing: border-box;
     }
 
     &__footer {

client/src/components/NewContentBlockWizard.vue

@@ -2,10 +2,12 @@
   <modal>
     <content-block-title-input slot="header"></content-block-title-input>
     <div v-for="(element, index) in elements" :key="index" class="new-content-block-wizard__element">
-      <component :is="type(element)"
+      <component
-                 :class="{'new-content-block-wizard__chooser': type(element) === 'content-block-chooser-widget'}"
+        class="new-content-block-wizard__element-component"
-                 :element="element" :index="index"
+        :is="type(element)"
-                 v-on:change-type="changeType"
+        :class="{'new-content-block-wizard__chooser': type(element) === 'content-block-chooser-widget'}"
+        :element="element" :index="index"
+        v-on:change-type="changeType"
       ></component>
       <a class="new-content-block-wizard__remove" v-on:click="removeElement(index)">
         <trash-icon v-if="type(element) !== 'content-block-chooser-widget'"
@@ -26,6 +28,11 @@
   import ContentBlockTitleInput from '@/components/ContentBlockTitleInput';
   import AddContentElement from '@/components/AddContentElement';
   import LinkForm from '@/components/content-forms/LinkForm';
+  import VideoForm from '@/components/content-forms/VideoForm';
+  import ImageForm from '@/components/content-forms/ImageForm';
+  import DocumentForm from '@/components/content-forms/DocumentForm';
+  import ExerciseForm from '@/components/content-forms/ExerciseForm';
+  import TextForm from '@/components/content-forms/TextForm';
   import TrashIcon from '@/components/icons/TrashIcon';
 
   export default {
@@ -35,6 +42,11 @@
       ContentBlockTitleInput,
       AddContentElement,
       LinkForm,
+      VideoForm,
+      ImageForm,
+      DocumentForm,
+      ExerciseForm,
+      TextForm,
       TrashIcon
     },
 
@@ -42,7 +54,17 @@
       type(element) {
         switch (element.type) {
           case 'link':
-            return 'link-form'
+            return 'link-form';
+          case 'video':
+            return 'video-form';
+          case 'image':
+            return 'image-form';
+          case 'text':
+            return 'text-form';
+          case 'exercise':
+            return 'exercise-form';
+          case 'document':
+            return 'document-form';
         }
         return 'content-block-chooser-widget'
       },
@@ -52,8 +74,8 @@
       addElement(index) {
         this.elements.splice(index + 1, 0, {})
       },
-      changeType(index) {
+      changeType(index, type) {
-        this.elements.splice(index, 1, {type: 'link'});
+        this.elements.splice(index, 1, {type: type});
       }
     },
 
@@ -61,16 +83,24 @@
       return {
         elements: [
           {
-            id: 1,
             type: 'link'
           },
           {
-            id: 2,
+            type: 'text'
-            type: 'link'
           },
           {
-            id: 3
+            type: 'video'
-          }
+          },
+          {
+            type: 'document'
+          },
+          {
+            type: 'exercise'
+          },
+          {
+            type: 'image'
+          },
+          {}
         ]
       }
     }
@@ -87,7 +117,11 @@
       display: grid;
       grid-template-columns: 1fr 50px;
       grid-auto-rows: auto;
-      width: 97%; // reserve space for scrollbar
+      /*width: 95%; // reserve space for scrollbar*/
+    }
+
+    &__element-component {
+      margin-bottom: 25px;
     }
 
     &__remove {

client/src/components/content-forms/DocumentForm.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="document-form">
+    <h1>Document Form</h1>
+  </div>
+</template>
+
+<script>
+</script>
+
+<style scoped lang="scss">
+  @import "@/styles/_variables.scss";
+
+  .document-form {
+  }
+</style>

client/src/components/content-forms/ExerciseForm.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="exercise-form">
+    <h1>Exercise Form</h1>
+  </div>
+</template>
+
+<script>
+</script>
+
+<style scoped lang="scss">
+  @import "@/styles/_variables.scss";
+
+  .exercise-form {
+  }
+</style>

client/src/components/content-forms/ImageForm.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="image-form">
+    <h1>Image Form</h1>
+  </div>
+</template>
+
+<script>
+</script>
+
+<style scoped lang="scss">
+  @import "@/styles/_variables.scss";
+
+  .image-form {
+  }
+</style>

client/src/components/content-forms/LinkForm.vue

@@ -10,13 +10,6 @@
 </template>
 
 <script>
-  import TrashIcon from '@/components/icons/TrashIcon';
-
-  export default {
-    components: {
-      TrashIcon
-    }
-  }
 </script>
 
 <style scoped lang="scss">

client/src/components/content-forms/TextForm.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="text-form">
+    <h1>Text Form</h1>
+  </div>
+</template>
+
+<script>
+</script>
+
+<style scoped lang="scss">
+  @import "@/styles/_variables.scss";
+
+  .text-form {
+  }
+</style>

client/src/components/content-forms/VideoForm.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="video-form">
+
+    <info-icon class="video-form__help-icon"></info-icon>
+    <p class="video-form__help-description">
+      Sie können Videos auf <a class="video-form__platform-link" href="https://youtube.com/" target="_blank">Youtube</a>
+      oder <a class="video-form__platform-link" href="https://vimeo.com/" target="_blank">Vimeo</a>
+      hochladen und anschliessen einen Link hier einfügen.
+    </p>
+
+    <input class="video-form__video-link skillbox-input" placeholder="Bsp: https://www.youtube.com/watch?v=dQw4w9WgXcQ">
+
+  </div>
+</template>
+
+<script>
+  import InfoIcon from '@/components/icons/InfoIcon';
+
+  export default {
+    components: {
+      InfoIcon
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  @import "@/styles/_variables.scss";
+  @import "@/styles/_functions.scss";
+
+  .video-form {
+    display: grid;
+    grid-auto-rows: auto;
+    grid-template-columns: 40px 1fr;
+    grid-column-gap: 16px;
+    grid-row-gap: 20px;
+    align-items: center;
+
+    &__help-icon {
+      width: 40px;
+      height: 40px;
+      fill: $color-brand;
+    }
+
+    &__help-description {
+      font-family: $sans-serif-font-family;
+      font-size: toRem(17px);
+      font-weight: 500;
+    }
+
+    &__platform-link {
+      font-family: $sans-serif-font-family;
+      text-decoration: underline;
+      font-weight: 500;
+      font-size: toRem(17px);
+    }
+
+    &__video-link {
+      grid-column: 1 / span 2;
+      width: $modal-input-width
+    }
+
+  }
+</style>

client/src/components/icons/InfoIcon.vue

@@ -0,0 +1,8 @@
+<template>
+  <svg id="shape" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+    <path
+      d="M50,6.48A43.62,43.62,0,0,0,6.56,47.08S6.5,48.46,6.5,50s.06,2.83.06,2.92A43.52,43.52,0,1,0,50,6.48Zm0,82.15A38.62,38.62,0,1,1,88.6,50,38.67,38.67,0,0,1,50,88.62Z"/>
+    <path d="M50,46.17a2.45,2.45,0,0,0-2.45,2.45V72.49a2.45,2.45,0,1,0,4.9,0V48.62A2.45,2.45,0,0,0,50,46.17Z"/>
+    <circle cx="50" cy="30.56" r="3.5"/>
+  </svg>
+</template>