# HG changeset patch
# User Thomas Junk <thomas.junk@intevation.de>
# Date 1545058467 -3600
# Node ID a4d8f284db934ef8b94b563cd98422c85804c779
# Parent  ef5cc5f1c757aaa6c02d08b30ae5cf057d57f7b0
spacer in admin interface added

diff -r ef5cc5f1c757 -r a4d8f284db93 client/src/components/Systemconfiguration.vue
--- a/client/src/components/Systemconfiguration.vue	Mon Dec 17 15:45:39 2018 +0100
+++ b/client/src/components/Systemconfiguration.vue	Mon Dec 17 15:54:27 2018 +0100
@@ -1,6 +1,6 @@
 <template>
   <div class="d-flex flex-row">
-    <div :class="spacerStyle"></div>
+    <Spacer></Spacer>
     <div class="card sysconfig mt-3 shadow-xs">
       <h6
         class="mb-0 py-2 px-3 border-bottom d-flex text-info align-items-center"
@@ -57,19 +57,6 @@
   width: 100%;
   height: 100%;
 }
-
-.spacer {
-  height: 100vh;
-}
-
-.spacer-collapsed {
-  min-width: $icon-width + $offset;
-  transition: $transition-fast;
-}
-
-.spacer-expanded {
-  min-width: $sidebar-width + $offset;
-}
 </style>
 
 <script>
@@ -93,6 +80,8 @@
 import { HTTP } from "../lib/http";
 import { displayError } from "../lib/errors.js";
 import { mapState } from "vuex";
+import Spacer from "./Spacer";
+
 export default {
   name: "systemconfiguration",
   data() {
@@ -105,19 +94,11 @@
   },
   components: {
     "chrome-picker": Chrome,
-    "compact-picker": Compact
+    "compact-picker": Compact,
+    Spacer
   },
   computed: {
-    ...mapState("application", ["showSidebar"]),
-    spacerStyle() {
-      return [
-        "spacer ml-3",
-        {
-          "spacer-expanded": this.showSidebar,
-          "spacer-collapsed": !this.showSidebar
-        }
-      ];
-    }
+    ...mapState("application", ["showSidebar"])
   },
   methods: {
     submit() {
diff -r ef5cc5f1c757 -r a4d8f284db93 client/src/components/importqueue/Importqueue.vue
--- a/client/src/components/importqueue/Importqueue.vue	Mon Dec 17 15:45:39 2018 +0100
+++ b/client/src/components/importqueue/Importqueue.vue	Mon Dec 17 15:54:27 2018 +0100
@@ -1,6 +1,6 @@
 <template>
   <div class="d-flex flex-row">
-    <div :class="spacerStyle"></div>
+    <Spacer></Spacer>
     <div class="mt-3 importqueuecard flex-grow-1">
       <div class="card shadow-xs">
         <h6
@@ -110,11 +110,13 @@
 import { mapState } from "vuex";
 import { HTTP } from "../../lib/http.js";
 import Importqueuedetail from "./Importqueuedetail";
+import Spacer from "../Spacer";
 
 export default {
   name: "importqueue",
   components: {
-    Importqueuedetail
+    Importqueuedetail,
+    Spacer
   },
   data() {
     return {
@@ -222,15 +224,6 @@
         });
       return filtered;
     },
-    spacerStyle() {
-      return [
-        "spacer ml-3",
-        {
-          "spacer-expanded": this.showSidebar,
-          "spacer-collapsed": !this.showSidebar
-        }
-      ];
-    },
     successfulStyle() {
       return {
         btn: true,
@@ -330,22 +323,8 @@
   bottom: $offset;
 }
 
-.spacer {
-  height: 100vh;
-}
-
-.spacer-collapsed {
-  min-width: $icon-width + $offset;
-  transition: $transition-fast;
-}
-
-.spacer-expanded {
-  min-width: $sidebar-width;
-}
-
 .importqueuecard {
   width: 97%;
-  margin-left: $offset;
   margin-right: $offset;
   min-height: 20rem;
 }
diff -r ef5cc5f1c757 -r a4d8f284db93 client/src/components/importschedule/Importschedule.vue
--- a/client/src/components/importschedule/Importschedule.vue	Mon Dec 17 15:45:39 2018 +0100
+++ b/client/src/components/importschedule/Importschedule.vue	Mon Dec 17 15:54:27 2018 +0100
@@ -1,6 +1,6 @@
 <template>
   <div class="d-flex flex-row">
-    <div :class="spacerStyle"></div>
+    <Spacer></Spacer>
     <div class="mt-3 w-100">
       <div class="card flex-grow-1 schedulecard shadow-xs">
         <h6
@@ -97,12 +97,14 @@
 
 import { mapState } from "vuex";
 import Importscheduledetail from "./Importscheduledetail";
+import Spacer from "../Spacer";
 //import { SCHEDULES } from "../../store/imports.js";
 
 export default {
   name: "importschedule",
   components: {
-    Importscheduledetail
+    Importscheduledetail,
+    Spacer
   },
   data() {
     return {
@@ -134,19 +136,6 @@
 </script>
 
 <style lang="scss" scoped>
-.spacer {
-  height: 100vh;
-}
-
-.spacer-collapsed {
-  min-width: $icon-width + $offset;
-  transition: $transition-fast;
-}
-
-.spacer-expanded {
-  min-width: $sidebar-width + $offset;
-}
-
 .schedulecard {
   margin-right: $offset;
   min-height: 20rem;
diff -r ef5cc5f1c757 -r a4d8f284db93 client/src/components/usermanagement/Usermanagement.vue
--- a/client/src/components/usermanagement/Usermanagement.vue	Mon Dec 17 15:45:39 2018 +0100
+++ b/client/src/components/usermanagement/Usermanagement.vue	Mon Dec 17 15:54:27 2018 +0100
@@ -1,6 +1,6 @@
 <template>
   <div class="main d-flex flex-row">
-    <div :class="spacerStyle"></div>
+    <Spacer></Spacer>
     <div class="d-flex content flex-column">
       <div class="d-flex flex-row">
         <div :class="userlistStyle">
@@ -131,19 +131,6 @@
 .userdetails {
   width: 50%;
 }
-.spacer {
-  height: 100vh;
-  margin-left: $offset;
-}
-
-.spacer-collapsed {
-  min-width: $icon-width + $offset;
-  transition: $transition-fast;
-}
-
-.spacer-expanded {
-  min-width: $sidebar-width + $offset;
-}
 
 .main {
   height: 100vh;
@@ -211,6 +198,7 @@
 import store from "../../store";
 import { mapGetters, mapState } from "vuex";
 import { displayError } from "../../lib/errors.js";
+import Spacer from "../Spacer";
 
 export default {
   name: "userview",
@@ -222,20 +210,12 @@
     };
   },
   components: {
-    Userdetail
+    Userdetail,
+    Spacer
   },
   computed: {
     ...mapGetters("usermanagement", ["isUserDetailsVisible"]),
     ...mapState("application", ["showSidebar"]),
-    spacerStyle() {
-      return [
-        "spacer",
-        {
-          "spacer-expanded": this.showSidebar,
-          "spacer-collapsed": !this.showSidebar
-        }
-      ];
-    },
     users() {
       let users = [...this.$store.getters["usermanagement/users"]];
       users.sort((a, b) => {