diff client/src/importqueue/Importqueue.vue @ 1217:ba8cd80d68b6

made more use of bootstrap classes instead of custom css
author Markus Kottlaender <markus@intevation.de>
date Mon, 19 Nov 2018 15:20:22 +0100
parents b23622905a3f
children
line wrap: on
line diff
--- a/client/src/importqueue/Importqueue.vue	Mon Nov 19 15:10:09 2018 +0100
+++ b/client/src/importqueue/Importqueue.vue	Mon Nov 19 15:20:22 2018 +0100
@@ -1,7 +1,7 @@
 <template>
     <div class="d-flex flex-row">
         <div :class="spacerStyle"></div>
-        <div class="importqueue">
+        <div class="mt-3 mx-auto">
             <div class="card importqueuecard">
                 <div class="card-header shadow-sm text-white bg-info mb-3">Importqueue</div>
                 <div class="card-body importcardbody">
@@ -84,11 +84,13 @@
     ...mapState("imports", ["imports"]),
     ...mapState("application", ["showSidebar"]),
     spacerStyle() {
-      return {
-        spacer: true,
-        "spacer-expanded": this.showSidebar,
-        "spacer-collapsed": !this.showSidebar
-      };
+      return [
+        "spacer ml-3",
+        {
+          "spacer-expanded": this.showSidebar,
+          "spacer-collapsed": !this.showSidebar
+        }
+      ];
     },
     successfulStyle() {
       return {
@@ -126,7 +128,6 @@
 
 <style lang="sass" scoped>
 .spacer
-  margin-left: $offset
   height: 100vh
 
 .spacer-collapsed
@@ -136,11 +137,6 @@
 .spacer-expanded
   min-width: $sidebar-width + $offset
 
-.importqueue
-  margin-top: $offset
-  margin-right: auto
-  margin-left: auto
-
 .importqueuecard
   width: 80vw
   min-height: 20rem