From 48e88ddc4509b03ef1195f451cd772288c31cd77 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <donramonloco+github@gmail.com>
Date: Thu, 6 Sep 2018 15:31:13 +0200
Subject: [PATCH] Add exercise form component

---
 .../components/content-forms/ExerciseForm.vue | 38 ++++++++++++++++++-
 1 file changed, 36 insertions(+), 2 deletions(-)

diff --git a/client/src/components/content-forms/ExerciseForm.vue b/client/src/components/content-forms/ExerciseForm.vue
index c1f4dc25..3413212d 100644
--- a/client/src/components/content-forms/ExerciseForm.vue
+++ b/client/src/components/content-forms/ExerciseForm.vue
@@ -1,15 +1,49 @@
 <template>
   <div class="exercise-form">
-    <h1>Exercise Form</h1>
+    <input class="exercise-form__title skillbox-input" placeholder="Aufgabentitel">
+    <textarea class="exercise-form__exercise-text skillbox-textarea" placeholder="Aufgabe erfassen..."></textarea>
+    <info-icon class="exercise-form__help-icon help-text__icon"></info-icon>
+    <p class="exercise-form__help-description help-text__description">
+      Ein Eingabefeld für die Antwort wird automatisch hinzugefügt.
+    </p>
   </div>
 </template>
 
 <script>
-</script>
+  import InfoIcon from '@/components/icons/InfoIcon';
 
+  export default {
+    components: {
+      InfoIcon
+    }
+  }
+</script>
 <style scoped lang="scss">
   @import "@/styles/_variables.scss";
 
   .exercise-form {
+    display: grid;
+    grid-auto-rows: auto;
+    grid-row-gap: 13px;
+    grid-template-columns: 40px 1fr;
+    grid-column-gap: 16px;
+    align-items: center;
+
+    &__title {
+      width: $modal-input-width;
+      grid-column: span 2;
+    }
+
+    &__exercise-text {
+      width: $modal-input-width;
+      grid-column: span 2;
+    }
+
+    &__help-icon {
+      width: 40px;
+      height: 40px;
+    }
+
+    &__help-description {}
   }
 </style>