From bdc9fc6cb0e83ed3bad5a3690d0f24996b7d3c4a Mon Sep 17 00:00:00 2001
From: Ramon Wenger <donramonloco+github@gmail.com>
Date: Wed, 5 Sep 2018 17:54:01 +0200
Subject: [PATCH] Add preliminary input field to modal

---
 .../src/components/ContentBlockTitleInput.vue | 21 +++++++++++++++++++
 client/src/components/Modal.vue               | 14 +++++++++++--
 2 files changed, 33 insertions(+), 2 deletions(-)
 create mode 100644 client/src/components/ContentBlockTitleInput.vue

diff --git a/client/src/components/ContentBlockTitleInput.vue b/client/src/components/ContentBlockTitleInput.vue
new file mode 100644
index 00000000..e40b5482
--- /dev/null
+++ b/client/src/components/ContentBlockTitleInput.vue
@@ -0,0 +1,21 @@
+<template>
+  <div class="content-block-title-input">
+    <input placeholder="Titel für Inhaltsblock erfassen" class="content-block-title-input__inputfield"/>
+  </div>
+</template>
+
+<style scoped lang="scss">
+  @import "@/styles/_variables.scss";
+
+  .content-block-title-input {
+    &__inputfield {
+      display: flex;
+      width: 100%;
+      padding: 16px;
+      box-shadow: inset 0 1px 4px 0 rgba(0, 0, 0, 0.15);
+      border-radius: 4px;
+      box-sizing: border-box;
+      border: 1px solid $color-lightgrey;
+    }
+  }
+</style>
diff --git a/client/src/components/Modal.vue b/client/src/components/Modal.vue
index 8667fea6..a7e3b20f 100644
--- a/client/src/components/Modal.vue
+++ b/client/src/components/Modal.vue
@@ -1,6 +1,9 @@
 <template>
   <div class="modal__backdrop">
     <div class="modal">
+      <div class="modal__header">
+        <content-block-title-input></content-block-title-input>
+      </div>
       <div class="modal__body">
         <add-content-block-widget></add-content-block-widget>
       </div>
@@ -14,10 +17,12 @@
 
 <script>
   import AddContentBlockWidget from '@/components/AddContentBlockWidget';
+  import ContentBlockTitleInput from '@/components/ContentBlockTitleInput';
 
   export default {
     components: {
-      AddContentBlockWidget
+      AddContentBlockWidget,
+      ContentBlockTitleInput
     },
 
     methods: {
@@ -41,7 +46,7 @@
     box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15);
     border: 1px solid $color-lightgrey;
     display: grid;
-    grid-template-rows: 1fr 65px;
+    grid-template-rows: auto 1fr 65px;
 
     &__backdrop {
       display: grid;
@@ -54,6 +59,11 @@
       z-index: 90;
     }
 
+    &__header {
+      padding: 10px 30px;
+      border-bottom: 1px solid $color-lightgrey;
+    }
+
     &__body {
       padding: 10px 34px;
     }