Update new content block form

client/src/components/content-block-form/AddContentLink.vue

@@ -0,0 +1,36 @@
+<template>
+  <a class="add-content-link"><plus-icon class="add-content-link__icon"/> <span class="add-content-link__text">Neuer Inhalt</span></a>
+</template>
+
+<script>
+ import Cross from '@/components/icons/Cross';
+ import PlusIcon from '@/components/icons/PlusIcon';
+ export default {
+   components: {PlusIcon, Cross}
+
+   //
+ };
+</script>
+
+<style scoped lang="scss">
+    @import '~styles/helpers';
+    $color: $color-silver-dark;
+
+    .add-content-link {
+      display: flex;
+      align-items: center;
+
+      &__icon {
+        width: 20px;
+        height: 20px;
+        margin-right: $small-spacing;
+        fill: $color;
+      }
+      &__text {
+        // custom style, because the view needs this
+        @include link-base;
+        font-weight: $font-weight-bold;
+        color: $color;
+      }
+    }
+</style>

client/src/components/content-block-form/ContentFormSection.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="content-form-section">
+    <h2 class="content-form-section__heading">{{ title }}</h2>
+    <slot/>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: {
+      title: {
+        type: String,
+        default: ''
+      }
+    }
+  };
+</script>
+
+<style scoped lang="scss">
+  @import '~styles/helpers';
+
+  .content-form-section {
+    @include default-box-shadow;
+    border-radius: $default-border-radius;
+    padding: $small-spacing $medium-spacing;
+    margin-bottom: $medium-spacing;
+
+    &__heading {
+      @include heading-4;
+    }
+  }
+</style>

client/src/components/ui/InputWithLabel.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="input-with-label">
+    <label class="input-with-label__label">{{ label }}</label>
+    <input
+      :value="value"
+      :placeholder="placeholder"
+      class="skillbox-input"
+      @input="$emit('input', $event.target.value)">
+  </div>
+</template>
+
+<script>
+ export default {
+   props: {
+     value: {
+       type: String,
+       default: ''
+     },
+     label: {
+       type: String,
+       default: ''
+     },
+     placeholder: {
+       type: String,
+       default: ''
+     }
+   }
+ };
+</script>
+
+<style scoped lang="scss">
+    @import '~styles/helpers';
+
+    .input-with-label {
+      display: flex;
+      flex-direction: column;
+      &__label {
+        @include regular-text;
+        margin-bottom: $small-spacing;
+      }
+    }
+</style>

client/src/pages/createContentBlock.vue

@@ -1,12 +1,58 @@
 <template>
   <div class="create-content-block">
-    <h1 class="heading-1">Hello Velo</h1>
+    <div class="create-content-block__content">
+
+      <h1 class="heading-1 create-content-block__heading">Inhaltsblock erfassen</h1>
+
+      <toggle
+        :bordered="false"
+        :checked="true"
+        label="Inhaltsblock als Auftrag formatieren"/>
+      <content-form-section title="Titel">
+        <input-with-label
+          :value="val"
+          label="Name"
+          placeholder="z.B. Auftrag 3"
+          @input="val=$event"/>
+      </content-form-section>
+      <div>
+        <add-content-link/>
+      </div>
+      <ol class="content-list">
+        <li class="content-list__item">
+          asdas
+        </li>
+        <li class="content-list__item">
+          asdas
+        </li>
+      </ol>
+    </div>
+    <footer class="create-content-block__footer">
+      <a class="button button--primary">Speichern</a>
+      <a class="button">Abbrechen</a>
+    </footer>
   </div>
 </template>
 
 <script>
-  export default {
+  import Toggle from '@/components/ui/Toggle';
+  import ContentFormSection from '@/components/content-block-form/ContentFormSection';
+  import TextForm from '@/components/content-forms/TextForm';
+  import InputWithLabel from '@/components/ui/InputWithLabel';
+  import AddContentLink from '@/components/content-block-form/AddContentLink';
 
+  export default {
+    components: {
+      AddContentLink,
+      InputWithLabel,
+      TextForm,
+      ContentFormSection,
+      Toggle
+    },
+
+    data: () => ({
+      val: ''
+    })
   };
 </script>
 
@@ -14,6 +60,30 @@
   @import '~styles/helpers';
 
   .create-content-block {
+    width: 800px;
+    max-width: 100%;
+    display: grid;
+    grid-template-columns: 800px;
+    grid-template-rows: 1fr auto;
+    grid-template-areas:
+      'content'
+      'footer';
 
+    &__heading {
+      @include heading-1;
+    }
+
+    &__content {
+      grid-area: content;
+      overflow-x: visible;
+      overflow-y: auto;
+      padding: 10px;
+    }
+
+    &__footer {
+      margin-top: auto;
+      grid-area: footer;
+    }
   }
+
 </style>

client/src/router/module.routes.js

@@ -74,10 +74,13 @@ export default [
         },
       },
       {
-        path: 'create-content-block',
+        path: 'add',
         component: createContentBlock,
         meta: {
-          showFooter: false
+          // layout: LAYOUT_SIMPLE,
+          hideFooter: true,
+          hideHeader: true,
+          showSubNavigation: true
         },
       },
     ],