Add basis for modal

client/src/App.vue

@@ -1,23 +1,32 @@
 <template>
-  <component :is="layout"></component>
+  <div :class="{'no-scroll': showModal}">
+    <modal v-if="showModal"></modal>
+    <component :is="layout"></component>
+  </div>
 </template>
 
 <script>
   import DefaultLayout from '@/layouts/DefaultLayout';
   import SimpleLayout from '@/layouts/SimpleLayout';
+  import Modal from '@/components/Modal';
 
   export default {
     name: 'App',
 
     components: {
       DefaultLayout,
-      SimpleLayout
+      SimpleLayout,
+      Modal
     },
 
     computed: {
       layout() {
         return (this.$route.meta.layout || 'default') + '-layout';
-      }
+      },
+      showModal() {
+        return this.$store.state.showModal
+      },
+
     },
 
     mounted() {
@@ -27,4 +36,9 @@
 
 <style lang="scss">
   @import "styles/main.scss";
+
+  .no-scroll {
+    height: 100vh;
+    overflow: hidden;
+  }
 </style>

client/src/components/Modal.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="modal__backdrop">
+    <div class="modal">
+      <div class="modal__body"></div>
+      <div class="modal__footer">
+        <a class="button button--active">Speichern</a>
+        <a class="button" v-on:click="hideModal">Abbrechen</a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    methods: {
+      hideModal(){
+        this.$store.dispatch('hideModal');
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  @import "@/styles/_variables.scss";
+
+  .modal {
+    align-self: center;
+    justify-self: center;
+    width: 700px;
+    height: 80vh;
+    background-color: $color-white;
+    border-radius: 12px;
+    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15);
+    border: 1px solid $color-lightgrey;
+    display: grid;
+    grid-template-rows: 1fr 65px;
+
+    &__backdrop {
+      display: grid;
+      position: fixed;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0;
+      background-color: rgba($color-white, 0.8);
+      z-index: 90;
+    }
+
+    &__content {
+      padding: 10px 34px;
+    }
+
+    &__footer {
+      border-top: 1px solid $color-lightgrey;
+      padding: 16px 30px;
+    }
+  }
+</style>

client/src/store/index.js

@@ -8,7 +8,8 @@ export default new Vuex.Store({
 
   state: {
     specialContainerClass: '',
-    showFilter: true
+    showFilter: true,
+    showModal: false
   },
 
   getters: {},
@@ -22,6 +23,9 @@ export default new Vuex.Store({
     },
     setSpecialContainerClass({commit}, payload) {
       commit('setSpecialContainerClass', payload);
+    },
+    hideModal({commit}){
+      commit('setModal', false);
     }
   },
 
@@ -29,6 +33,9 @@ export default new Vuex.Store({
     setFilter(state, payload) {
       state.showFilter = payload;
     },
+    setModal(state, payload) {
+      state.showModal = payload;
+    },
     setSpecialContainerClass(state, payload) {
       state.specialContainerClass = payload;
     }

client/src/styles/_buttons.scss

@@ -1,6 +1,13 @@
 .button {
   background: transparent;
-  border: 2px solid $color-brand;
+  border: 2px solid $color-grey;
   padding: 5px 15px;
   border-radius: 3px;
+  font-family: $sans-serif-font-family;
+  font-weight: 400;
+  display: inline-flex;
+
+  &--active {
+    border-color: $color-brand;
+  }
 }