Add basics for project entry wizard

client/src/components/Modal.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="modal__backdrop">
-    <div class="modal">
+    <div class="modal" :class="{'modal--hide-header': hideHeader}">
       <div class="modal__header">
         <slot name="header"></slot>
       </div>
@@ -19,6 +19,13 @@
 
 <script>
   export default {
+    props: {
+      hideHeader: {
+        type: Boolean,
+        default: false
+      }
+    },
+
     methods: {
       hideModal() {
         this.$store.dispatch('hideModal');
@@ -44,6 +51,19 @@
     grid-template-areas: "header" "body" "footer";
     position: relative;
 
+    &--hide-header {
+      grid-template-rows: 1fr 65px;
+      grid-template-areas: "body" "footer";
+    }
+
+    &--hide-header &__header {
+      display: none;
+    }
+
+    &--hide-header &__body {
+      padding: $default-padding;
+    }
+
     &__backdrop {
       display: grid;
       position: fixed;

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

@@ -0,0 +1,57 @@
+<template>
+  <div class="text-form-with-help-text">
+    <h3 class="text-form-with-help-text__heading"><span class="text-form-with-help-text__title">{{title}}</span>
+      <info-icon class="text-form-with-help-text__icon"></info-icon>
+    </h3>
+    <text-form @text-change-value="$emit('change', $event.target.value)" :value="v"></text-form>
+  </div>
+</template>
+
+<script>
+  import TextForm from '@/components/content-forms/TextForm';
+  import InfoIcon from '@/components/icons/InfoIcon';
+
+  export default {
+    props: ['title', 'value'],
+
+    components: {
+      TextForm,
+      InfoIcon
+    },
+
+    computed: {
+      v() {
+        return {
+          text: this.value
+        }
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  @import "@/styles/_variables.scss";
+  @import "@/styles/_functions.scss";
+
+  .text-form-with-help-text {
+    margin-bottom: 30px;
+
+    &__heading {
+      margin-bottom: 15px;
+      display: flex;
+      justify-items: center;
+    }
+
+    &__title {
+      font-size: toRem(22px);
+      font-weight: 600;
+      margin-right: 8px;
+    }
+
+    &__icon {
+      width: 20px;
+      height: 20px;
+      fill: $color-grey;
+    }
+  }
+</style>

client/src/components/portfolio/NewProjectEntryWizard.vue

@@ -1,15 +1,30 @@
 <template>
-  <modal>
+  <modal :hide-header="true">
-    <h1>Hello</h1>
+    <div class="project-entry-modal">
+      <text-form-with-help-text title="Tätigkeit" :value="value">
+      </text-form-with-help-text>
+      <text-form-with-help-text title="Reflexion" :value="value">
+      </text-form-with-help-text>
+      <text-form-with-help-text title="Nächste Schritte" :value="value">
+      </text-form-with-help-text>
+    </div>
   </modal>
 </template>
 
 <script>
   import Modal from '@/components/Modal';
+  import TextFormWithHelpText from '@/components/content-forms/TextFormWithHelpText';
 
   export default {
     components: {
-      Modal
+      Modal,
+      TextFormWithHelpText
     },
+
+    data() {
+      return {
+        value: ''
+      }
+    }
   }
 </script>

client/src/styles/_variables.scss

@@ -54,3 +54,6 @@ $input-border-radius: 3px;
 //modal stuff
 $modal-lateral-padding: 34px;
 $modal-input-width: 560px;
+
+
+$default-padding: 30px;