Mercurial > gemma

changeset 1217:ba8cd80d68b6

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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 1c7806728172
children b0c98a31cb4e
files client/src/App.vue client/src/application/Search.vue client/src/application/Sidebar.vue client/src/bottlenecks/Bottlenecks.vue client/src/drawtool/Drawtool.vue client/src/fairway/Fairwayprofile.vue client/src/identify/Identify.vue client/src/importqueue/Importqueue.vue client/src/imports/Imports.vue client/src/layers/Layers.vue client/src/login/Login.vue client/src/logs/logs.vue client/src/morphtool/Morphtool.vue client/src/pdftool/Pdftool.vue client/src/systemconfiguration/systemconfiguration.vue client/src/usermanagement/Userdetail.vue client/src/usermanagement/Usermanagement.vue client/src/usermanagement/Users.vue client/src/zoom/zoom.vue
diffstat 19 files changed, 107 insertions(+), 234 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/App.vue	Mon Nov 19 15:10:09 2018 +0100
+++ b/client/src/App.vue	Mon Nov 19 15:20:22 2018 +0100
@@ -1,7 +1,7 @@
 <template>
     <div id="app" class="main">
         <div v-if="isAuthenticated" class="d-flex flex-column userinterface">
-            <div class="topbar d-flex">
+            <div class="topbar d-flex pt-3 mx-3">
                 <div class="mr-auto d-flex">
                     <Sidebar :routeName="routeName"></Sidebar>
                     <div class="d-flex flex-column" style="max-width: 600px;">
@@ -41,9 +41,6 @@
   pointer-events: none
 
 .topbar
-  padding-top: $offset
-  margin-left: $offset
-  margin-right: $offset
   position: relative
   z-index: 2
 
--- a/client/src/application/Search.vue	Mon Nov 19 15:10:09 2018 +0100
+++ b/client/src/application/Search.vue	Mon Nov 19 15:20:22 2018 +0100
@@ -25,7 +25,6 @@
 
 <style lang="sass" scoped>
   .searchcontainer
-    margin-left: $offset
     height: $icon-height
 
   .searchbar-expanded
@@ -46,7 +45,6 @@
       border-top-right-radius: $border-radius !important
 
   .searchlabel
-    background-color: white !important
     &.rounded-top-left
       border-radius: 0 !important
       border-top-left-radius: $border-radius !important
@@ -118,7 +116,7 @@
     },
     searchbarContainerStyle() {
       return [
-        "input-group searchcontainer shadow",
+        "input-group searchcontainer ml-3 shadow",
         {
           "searchbar-collapsed": !this.showSearchbar,
           "searchbar-expanded": this.showSearchbar,
@@ -135,7 +133,7 @@
     },
     searchButtonStyle() {
       return [
-        "ui-element input-group-text p-0 d-flex border-0 justify-content-center searchlabel d-print-none",
+        "ui-element input-group-text p-0 d-flex border-0 justify-content-center searchlabel bg-white d-print-none",
         {
           rounded: !this.showSearchbar,
           "rounded-left": this.showSearchbar,
--- a/client/src/application/Sidebar.vue	Mon Nov 19 15:10:09 2018 +0100
+++ b/client/src/application/Sidebar.vue	Mon Nov 19 15:20:22 2018 +0100
@@ -2,7 +2,7 @@
     <div :class="sidebarStyle">
         <div
             @click="$store.commit('application/showSidebar', !showSidebar)"
-            class="menubutton rounded position-absolute d-flex justify-content-center"
+            class="menubutton p-2 bg-white rounded position-absolute d-flex justify-content-center"
         >
             <i class="ui-element d-print-none fa fa-bars"></i>
         </div>
@@ -158,8 +158,6 @@
   text-align: left
 
 .menubutton
-  background-color: white
-  padding: $small-offset
   height: $icon-height
   width: $icon-width
   top: 0
--- a/client/src/bottlenecks/Bottlenecks.vue	Mon Nov 19 15:10:09 2018 +0100
+++ b/client/src/bottlenecks/Bottlenecks.vue	Mon Nov 19 15:20:22 2018 +0100
@@ -106,7 +106,7 @@
     ...mapState("map", ["openLayersMap"]),
     bottlenecksStyle() {
       return [
-        "ui-element shadow bottlenecks rounded-bottom border-top",
+        "ui-element shadow bottlenecks pt-3 ml-3 rounded-bottom border-top",
         {
           bottleneckscollapsed: !this.showBottlenecks,
           bottlenecksextended: this.showBottlenecks
@@ -238,12 +238,10 @@
 .bottlenecks
   position: relative
   background-color: #ffffff
-  padding-top: $offset
   opacity: $slight-transparent
   transition: left 0.3s ease
   overflow: hidden
   background: #fff
-  margin-left: $offset
 
 .bottleneckscollapsed
   width: 0
--- a/client/src/drawtool/Drawtool.vue	Mon Nov 19 15:10:09 2018 +0100
+++ b/client/src/drawtool/Drawtool.vue	Mon Nov 19 15:20:22 2018 +0100
@@ -1,12 +1,12 @@
 <template>
     <div class="d-flex flex-column">
-        <div @click="toggleLineMode" class="ui-element d-flex shadow drawtool rounded">
+        <div @click="toggleLineMode" class="ui-element d-flex shadow drawtool bg-white mx-3 mb-3 p-2 rounded">
             <i :class="['fa fa-pencil', {inverted: drawMode === 'LineString'}]"></i>
         </div>
-        <div @click="togglePolygonMode" class="ui-element d-flex shadow drawtool rounded">
+        <div @click="togglePolygonMode" class="ui-element d-flex shadow drawtool bg-white mx-3 mb-3 p-2 rounded">
             <i :class="['fa fa-edit', {inverted: drawMode === 'Polygon'}]"></i>
         </div>
-        <div @click="toggleCutMode" class="ui-element d-flex shadow drawtool rounded" v-if="selectedSurvey">
+        <div @click="toggleCutMode" class="ui-element d-flex shadow drawtool bg-white mx-3 mb-3 p-2 rounded" v-if="selectedSurvey">
             <i :class="['fa fa-area-chart', {inverted: cutMode}]"></i>
         </div>
     </div>
@@ -14,13 +14,8 @@
 
 <style lang="sass" scoped>
 .drawtool
-  background-color: white
-  padding: $small-offset
-  margin-left: $offset
   height: $icon-width
   width: $icon-height
-  margin-bottom: $offset
-  margin-right: $offset
   z-index: 2
 
 .inverted
--- a/client/src/fairway/Fairwayprofile.vue	Mon Nov 19 15:10:09 2018 +0100
+++ b/client/src/fairway/Fairwayprofile.vue	Mon Nov 19 15:20:22 2018 +0100
@@ -12,10 +12,10 @@
             v-if="showSplitscreen">
             <i class="fa fa-times text-danger"></i>
         </button>
-        <div class="profile d-flex flex-column pr-5">
+        <div class="profile bg-white position-relative d-flex flex-column pr-5">
             <h5 class="mb-0 mt-2">{{ selectedBottleneck }} ({{ selectedSurvey.date_info }})</h5>
             <div class="d-flex flex-fill">
-                <div class="fairwayprofile flex-grow-1"></div>
+                <div class="fairwayprofile m-3 mt-0 bg-white flex-grow-1"></div>
                 <div class="additionalsurveys d-flex flex-column">
                     <small>
                         Additional Surveys
@@ -91,11 +91,9 @@
 
 <style lang="sass" scoped>
 .profile
-  background-color: white
   width: 100vw
   height: 0
   overflow: hidden
-  position: relative
   z-index: 2
 
 .splitscreen-toggle,
@@ -127,11 +125,6 @@
 
 .additionalsurveys input
   margin-right: $small-offset
-
-.fairwayprofile
-  background-color: white
-  margin: $offset
-  margin-top: 0
 </style>
 
 <script>
--- a/client/src/identify/Identify.vue	Mon Nov 19 15:10:09 2018 +0100
+++ b/client/src/identify/Identify.vue	Mon Nov 19 15:20:22 2018 +0100
@@ -1,8 +1,8 @@
 <template>
-    <div class="identifymenu">
+    <div class="position-relative ml-3">
         <div
             @click="$store.commit('application/showIdentify', !showIdentify)"
-            class="d-flex flex-column ui-element minimizer"
+            class="d-flex flex-column ui-element minimizer mt-1"
         >
             <div :class="infoStyle">
                 <i class="fa fa-info"></i>
@@ -54,14 +54,8 @@
 .versioninfo
   font-size: 60%
 
-.identifymenu
-  position: relative
-  margin-left: $offset
-
 .identify
-  background-color: white
   opacity: $slight-transparent
-  text-align: left
 
 .identifycollapsed
   min-height: $icon-height
@@ -75,7 +69,6 @@
   position: absolute
   z-index: 2
   right: 0
-  margin-top: $x-small-offset
   height: $icon-width
   width: $icon-height
 </style>
@@ -104,14 +97,13 @@
     ...mapState("application", ["showIdentify"]),
     ...mapState("map", ["identifiedFeatures", "currentMeasurement"]),
     identifyStyle() {
-      return {
-        "ui-element": true,
-        rounded: true,
-        identify: true,
-        shadow: true,
-        identifyexpanded: this.showIdentify,
-        identifycollapsed: !this.showIdentify
-      };
+      return [
+        "ui-element rounded identify shadow bg-white text-left",
+        {
+          identifyexpanded: this.showIdentify,
+          identifycollapsed: !this.showIdentify
+        }
+      ];
     },
     infoStyle() {
       return {
--- 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
--- a/client/src/imports/Imports.vue	Mon Nov 19 15:10:09 2018 +0100
+++ b/client/src/imports/Imports.vue	Mon Nov 19 15:20:22 2018 +0100
@@ -141,7 +141,7 @@
     },
     importStyle() {
       return [
-        "ui-element shadow imports rounded",
+        "ui-element shadow imports ml-3 pt-3 rounded",
         {
           importscollapsed: !this.showImportSoundingResults,
           importsextended: this.showImportSoundingResults
@@ -190,15 +190,14 @@
 <style lang="sass" scoped>
 .uploadsection
   width: 90%
+
 .imports
   position: relative
   background-color: #ffffff
-  padding-top: $offset
   opacity: $slight-transparent
   transition: left 0.3s ease
   overflow: hidden
   background: #fff
-  margin-left: $offset
   margin-top: -$offset
   width: 90%
 
--- a/client/src/layers/Layers.vue	Mon Nov 19 15:10:09 2018 +0100
+++ b/client/src/layers/Layers.vue	Mon Nov 19 15:20:22 2018 +0100
@@ -1,6 +1,6 @@
 <template>
-    <div class="layerselectmenu">
-        <div @click="$store.commit('application/showLayers', !showLayers)" class="d-flex flex-column ui-element minimizer">
+    <div class="position-relative ml-auto">
+        <div @click="$store.commit('application/showLayers', !showLayers)" class="d-flex flex-column ui-element minimizer position-absolute mt-1">
             <div>
                 <i class="fa fa-th-list"></i>
             </div>
@@ -20,12 +20,7 @@
 </template>
 
 <style lang="sass" scoped>
-.layerselectmenu
-  position: relative
-  margin-left: auto
-
 .layerselection
-  background-color: white
   opacity: $slight-transparent
 
 .layerselectioncollapsed
@@ -38,10 +33,8 @@
   width: $layerselect-width
 
 .minimizer
-  position: absolute
   z-index: 2
   right: 0
-  margin-top: $x-small-offset
   height: $icon-width
   width: $icon-height
 </style>
@@ -72,14 +65,13 @@
     ...mapGetters("map", ["layersForLegend"]),
     ...mapState("application", ["showLayers"]),
     layerSelectStyle() {
-      return {
-        "ui-element": true,
-        rounded: true,
-        layerselection: true,
-        shadow: true,
-        layerselectionexpanded: this.showLayers,
-        layerselectioncollapsed: !this.showLayers
-      };
+      return [
+        "ui-element rounded layerselection bg-white shadow",
+        {
+          layerselectionexpanded: this.showLayers,
+          layerselectioncollapsed: !this.showLayers
+        }
+      ];
     }
   },
   methods: {
--- a/client/src/login/Login.vue	Mon Nov 19 15:10:09 2018 +0100
+++ b/client/src/login/Login.vue	Mon Nov 19 15:20:22 2018 +0100
@@ -1,15 +1,15 @@
 (<template>
-    <div class="d-flex flex-column login shadow-lg">
-        <div class="loginmask">
+    <div class="d-flex flex-column login bg-white shadow">
+        <div class="m-5">
             <!-- logo section -->
             <div class="d-flex flex-row justify-content-center mb-3">
-                <div class="logo"><img src="../application/assets/logo.png"></div>
+                <div class="logo mr-3"><img src="../application/assets/logo.png"></div>
                 <div class="title">
                     <h1>{{ appTitle }}</h1>
                 </div>
             </div>
             <!-- end logo section -->
-            <form class="loginform" @submit.prevent="login">
+            <form class="loginform mx-auto" @submit.prevent="login">
                 <div id="alert" :style="errorMessageStyle" :class="errorMessageClass" role="alert">
                     <span>{{ errorMessage }}</span>
                 </div>
@@ -46,40 +46,25 @@
             </form>
 
             <!-- bottom logo section -->
-            <div class="mb-3 secondary-logo"><img :src="secondaryLogo"></div>
+            <div class="mb-3 secondary-logo mx-auto mb-auto"><img :src="secondaryLogo"></div>
         </div>
     </div>
 </template>)
 
 <style lang="sass" scoped>
 .login
-  background-color: white
   min-width: 375px
   min-height: 500px
   @extend %fully-centered
 
 .loginform
   max-width: 375px
-  margin-left: auto
-  margin-right: auto
-
-.loginmask
-  position: relative
-  margin-left: $large-offset
-  margin-right: $large-offset
-  margin-top: $large-offset
-
-.logo
-  margin-right: $offset
 
 .alert
   padding: 0.5rem
 
 .secondary-logo
   max-width: 375px
-  margin-left: auto
-  margin-right: auto
-  margin-bottom: auto
 
 /* avoid IE and Edge show a password reveal as we do our own */
 input[type="password"]::-ms-reveal
--- a/client/src/logs/logs.vue	Mon Nov 19 15:10:09 2018 +0100
+++ b/client/src/logs/logs.vue	Mon Nov 19 15:20:22 2018 +0100
@@ -2,7 +2,7 @@
     <div class="main d-flex flex-column">
         <div class="d-flex flex-row">
             <div :class="spacer"></div>
-            <div class="logoutput shadow">
+            <div class="logoutput text-left bg-white shadow mt-3 mx-3">
                 <pre id="code" v-highlightjs="logs"><code class="bash hljs hljs-string"></code></pre>
             </div>
         </div>
@@ -26,7 +26,7 @@
                 </ul>
             </div>
             <div class="statuscontainer d-flex flex-row">
-                <div class="statusline align-self-center">
+                <div class="statusline ml-3 mt-1 align-self-center">
                     <h3>Last refresh: {{refreshed}}</h3>
                 </div>
                 <div class="refresh">
@@ -56,16 +56,10 @@
 .logoutput
   width: 95%
   height: 85vh
-  margin-top: $offset
-  margin-right: $offset
-  margin-left: $offset
-  text-align: left
-  background-color: white
   overflow: auto
   transition: $transition-fast
 
 .spacer
-  margin-left: $offset
   height: 90vh
 
 .spacer-collapsed
@@ -78,8 +72,6 @@
 .statusline
   position: absolute
   right: 0
-  margin-top: 0.3rem
-  margin-left: $offset
   margin-right: 7rem
 </style>
 
@@ -153,11 +145,13 @@
       };
     },
     spacer() {
-      return {
-        spacer: true,
-        "spacer-expanded": this.showSidebar,
-        "spacer-collapsed": !this.showSidebar
-      };
+      return [
+        "spacer ml-3",
+        {
+          "spacer-expanded": this.showSidebar,
+          "spacer-collapsed": !this.showSidebar
+        }
+      ];
     }
   }
 };
--- a/client/src/morphtool/Morphtool.vue	Mon Nov 19 15:10:09 2018 +0100
+++ b/client/src/morphtool/Morphtool.vue	Mon Nov 19 15:20:22 2018 +0100
@@ -1,28 +1,26 @@
 <template>
-    <div class="morphcontainer rounded position-relative">
+    <div class="mb-3 ml-auto rounded position-relative">
         <div v-if="selectedBottleneck && surveys && !selectedSurvey" class="ui-element bg-white rounded p-3 shadow">
-            <div class="headline">
-                <h4>{{ selectedBottleneck }}</h4>
-                <hr>
+            <h4 class="text-center mx-4">{{ selectedBottleneck }}</h4>
+            <hr>
+            <div
+                @click="$store.dispatch('fairwayprofile/clearSelection');"
+                class="ui-element d-flex morphtoolminus position-absolute"
+            >
+                <i class="fa fa-close p-2"></i>
+            </div>
+            <div>
                 <div
-                    @click="$store.dispatch('fairwayprofile/clearSelection');"
-                    class="float-left ui-element d-flex morphtoolminus"
-                >
-                    <i class="fa fa-close morphtoolsminus"></i>
-                </div>
-            </div>
-            <ul class="list-group surveylist">
-                <li
                     v-for="survey of surveys"
                     :key="survey.data_info"
-                    class="list-group-item"
+                    class="my-1"
                     @click.prevent="$store.commit('bottlenecks/setSelectedSurvey', survey)"
                 >
                     <a href="#" @click.prevent>{{ survey.date_info }}</a>
-                </li>
-            </ul>
+                </div>
+            </div>
         </div>
-        <div v-if="selectedSurvey && !showSplitscreen" class="ui-element shadow morphtool rounded">
+        <div v-if="selectedSurvey && !showSplitscreen" class="ui-element shadow morphtool rounded position-relative bg-white my-auto">
             <div class="d-flex flex-row justify-content-between">
                 <h6 class="my-auto px-2">
                     {{ selectedBottleneck }}
@@ -36,40 +34,13 @@
 </template>
 
 <style scoped lang="sass">
-.headline
-  margin-right: $offset
-  margin-left: $offset
-  
-.morphcontainer
-  margin-bottom: $offset
-  margin-left: auto
-  
-.surveylist
-  text-align: left
-  margin-bottom: $offset !important
-  margin-left: $offset
-  margin-right: $offset
-
-.surveylist li
-  margin-left: auto
-  margin-right: auto
-  border-style: none
-  padding-bottom: 0rem
-
 .morphtool
-  position: relative
-  background-color: white
   height: $icon-width
-  margin-top: auto
-  margin-bottom: auto
   z-index: 2
 
 .morphtoolminus
-  position: absolute
   top: 0
   right: 0
-  background-color: white
-  padding: $small-offset
   height: $icon-width
   width: $icon-height
   z-index: 2
--- a/client/src/pdftool/Pdftool.vue	Mon Nov 19 15:10:09 2018 +0100
+++ b/client/src/pdftool/Pdftool.vue	Mon Nov 19 15:20:22 2018 +0100
@@ -1,6 +1,6 @@
 <template>
-    <div class="pdftool" :style="selectedSurvey ? 'bottom: 140px' : ''">
-        <div @click="$store.commit('application/showPdfTool', !showPdfTool)" class="d-flex flex-column ui-element minimizer">
+    <div class="pdftool position-absolute mr-3 mb-3" :style="selectedSurvey ? 'bottom: 140px' : ''">
+        <div @click="$store.commit('application/showPdfTool', !showPdfTool)" class="d-flex flex-column ui-element minimizer position-absolute mt-1">
             <i :class="['fa', 'mt-1', {'fa-file-pdf-o': !showPdfTool}, {'fa-close': showPdfTool}]"></i>
         </div>
         <div :class="style">
@@ -44,17 +44,11 @@
 
 <style lang="sass" scoped>
 .pdftool
-  position: absolute
-  margin-right: $offset
-  margin-bottom: $offset
   bottom: 96px
   right: 0
 
 .inner
-  background-color: white
-  margin-left: $small-offset
   opacity: $slight-transparent
-  text-align: left
 
 .pdftoolcollapsed
   min-height: $icon-height
@@ -65,11 +59,9 @@
   width: $identify-width
 
 .minimizer
-  position: absolute
   z-index: 2
   right: 0
   top: 0
-  margin-top: $x-small-offset
   height: $icon-width
   width: $icon-height
 </style>
@@ -106,14 +98,13 @@
     ...mapState("application", ["showPdfTool"]),
     ...mapState("bottlenecks", ["selectedSurvey"]),
     style() {
-      return {
-        "ui-element": true,
-        rounded: true,
-        inner: true,
-        shadow: true,
-        pdftoolexpanded: this.showPdfTool,
-        pdftoolcollapsed: !this.showPdfTool
-      };
+      return [
+        "ui-element rounded inner ml-2 bg-white text-left shadow",
+        {
+          pdftoolexpanded: this.showPdfTool,
+          pdftoolcollapsed: !this.showPdfTool
+        }
+      ];
     }
   },
   methods: {
--- a/client/src/systemconfiguration/systemconfiguration.vue	Mon Nov 19 15:10:09 2018 +0100
+++ b/client/src/systemconfiguration/systemconfiguration.vue	Mon Nov 19 15:20:22 2018 +0100
@@ -1,6 +1,6 @@
 <template>
     <div class="d-flex flex-row">
-        <div class="card sysconfig">
+        <div class="card sysconfig mt-3 mx-auto">
             <div class="card-header shadow-sm text-white bg-info mb-6">
                 Systemconfiguration
             </div>
@@ -38,9 +38,6 @@
   margin-right: auto
   
 .sysconfig
-  margin-top: $offset
-  margin-left: auto
-  margin-right: auto
   width: 30vw
 </style>
 
--- a/client/src/usermanagement/Userdetail.vue	Mon Nov 19 15:10:09 2018 +0100
+++ b/client/src/usermanagement/Userdetail.vue	Mon Nov 19 15:20:22 2018 +0100
@@ -1,5 +1,5 @@
 <template>
-    <div class="userdetails shadow fadeIn animated">
+    <div class="userdetails h-100 mt-3 mr-auto shadow fadeIn animated">
         <div class="card">
             <div class="card-header shadow-sm text-white bg-info mb-3">
                 {{ this.cardHeader }}
@@ -8,7 +8,7 @@
                 </span>
             </div>
             <div class="card-body">
-                <form @submit.prevent="save">
+                <form @submit.prevent="save" clas="ml-3">
                     <div class="formfields">
                         <div v-if="currentUser.isNew" class="form-group row">
                             <label for="user">Username</label>
@@ -78,13 +78,9 @@
   width: 10vw
 
 .userdetails
-  margin-top: $offset
   min-width: 40vw
-  margin-right: auto
-  height: 100%
 
 form
-  margin-left: $offset
   font-size: $smaller
 </style>
 
--- a/client/src/usermanagement/Usermanagement.vue	Mon Nov 19 15:10:09 2018 +0100
+++ b/client/src/usermanagement/Usermanagement.vue	Mon Nov 19 15:20:22 2018 +0100
@@ -56,10 +56,10 @@
                             </table>
                         </div>
                         <div class="d-flex flex-row pagination">
-                            <i @click=" prevPage " v-if="this.currentPage!=1 " class="backwards btn btn-sm btn-light align-self-center pages fa fa-caret-left "></i> {{this.currentPage}} / {{this.pages}}
-                            <i @click="nextPage " class="forwards btn btn-sm btn-light align-self-center pages fa fa-caret-right "></i>
+                            <i @click=" prevPage " v-if="this.currentPage!=1 " class="mr-2 btn btn-sm btn-light align-self-center pages fa fa-caret-left "></i> {{this.currentPage}} / {{this.pages}}
+                            <i @click="nextPage " class="ml-2 btn btn-sm btn-light align-self-center pages fa fa-caret-right "></i>
                         </div>
-                        <div class="adduser ">
+                        <div class="mr-3 pb-3">
                             <button @click="addUser " class="btn btn-info pull-right shadow-sm ">Add User</button>
                         </div>
                     </div>
@@ -74,7 +74,6 @@
 @import "../application/assets/tooltip.sass"
 
 .spacer
-  margin-left: $offset
   height: 100vh
 
 .spacer-collapsed
@@ -92,15 +91,9 @@
 .main
   height: 100vh
 
-.backwards
-  margin-right: $small-offset
-
-.forwards
-  margin-left: $small-offset
-
 @media screen and (min-width: 600px)
   .content
-    margin-left: $offset
+    margin-left: $sidebar-width
     margin-right: auto
 
 @media screen and (min-width: 1650px)
@@ -108,16 +101,10 @@
     margin-left: $sidebar-width
     margin-right: auto
 
-.adduser
-  margin-right: $offset
-  padding-bottom: $offset
-
 .icon
   font-size: large
 
 .userlist
-  margin-top: $offset
-  margin-right: $offset
   min-width: 520px
   height: 100%
 
@@ -190,11 +177,13 @@
     ...mapGetters("usermanagement", ["isUserDetailsVisible"]),
     ...mapState("application", ["showSidebar", "showUsermenu"]),
     spacerStyle() {
-      return {
-        spacer: true,
-        "spacer-expanded": this.showUsermenu && this.showSidebar,
-        "spacer-collapsed": !this.showUsermenu && this.showSidebar
-      };
+      return [
+        "spacer ml-3",
+        {
+          "spacer-expanded": this.showUsermenu && this.showSidebar,
+          "spacer-collapsed": !this.showUsermenu && this.showSidebar
+        }
+      ];
     },
     users() {
       let users = [...this.$store.getters["usermanagement/users"]];
@@ -228,12 +217,13 @@
       };
     },
     userlistStyle() {
-      return {
-        userlist: true,
-        shadow: true,
-        userlistsmall: this.isUserDetailsVisible,
-        userlistextended: !this.isUserDetailsVisible
-      };
+      return [
+        "userlist mt-3 mr-3 shadow",
+        {
+          userlistsmall: this.isUserDetailsVisible,
+          userlistextended: !this.isUserDetailsVisible
+        }
+      ];
     }
   },
   methods: {
--- a/client/src/usermanagement/Users.vue	Mon Nov 19 15:10:09 2018 +0100
+++ b/client/src/usermanagement/Users.vue	Mon Nov 19 15:20:22 2018 +0100
@@ -58,7 +58,7 @@
                             <i @click=" prevPage " v-if="this.currentPage!=1 " class="backwards btn btn-sm btn-light align-self-center pages fa fa-caret-left "></i> {{this.currentPage}} / {{this.pages}}
                             <i @click="nextPage " class="forwards btn btn-sm btn-light align-self-center pages fa fa-caret-right "></i>
                         </div>
-                        <div class="adduser ">
+                        <div class="mr-3 pb-3 ">
                             <button @click="addUser " class="btn btn-info pull-right shadow-sm ">Add User</button>
                         </div>
                     </div>
@@ -86,16 +86,11 @@
   margin-left: auto
   margin-right: auto
 
-.adduser
-  margin-right: $offset
-  padding-bottom: $offset
-
 .icon
   font-size: large
 
 .userlist
   margin-top: $topbarheight
-  margin-right: $offset
   min-width: 520px
   height: 100%
 
@@ -199,12 +194,13 @@
       };
     },
     userlistStyle() {
-      return {
-        userlist: true,
-        shadow: true,
-        userlistsmall: this.isUserDetailsVisible,
-        userlistextended: !this.isUserDetailsVisible
-      };
+      return [
+        "userlist mr-3 shadow",
+        {
+          userlistsmall: this.isUserDetailsVisible,
+          userlistextended: !this.isUserDetailsVisible
+        }
+      ];
     }
   },
   methods: {
--- a/client/src/zoom/zoom.vue	Mon Nov 19 15:10:09 2018 +0100
+++ b/client/src/zoom/zoom.vue	Mon Nov 19 15:20:22 2018 +0100
@@ -1,9 +1,9 @@
 <template>
-    <div class="d-flex buttoncontainer shadow" :style="showSplitscreen ? 'margin-bottom: 51vh' : ''">
-        <button class="zoomButton rounded-left ui-element border-right" @click="zoomIn">
+    <div class="d-flex buttoncontainer shadow mb-3 position-absolute" :style="showSplitscreen ? 'margin-bottom: 51vh' : ''">
+        <button class="zoomButton border-0 bg-white rounded-left ui-element border-right" @click="zoomIn">
             <i class="fa fa-plus"></i>
         </button>
-        <button class="zoomButton rounded-right ui-element" @click="zoomOut">
+        <button class="zoomButton border-0 bg-white rounded-right ui-element" @click="zoomOut">
             <i class="fa fa-minus"></i>
         </button>
     </div>
@@ -11,20 +11,15 @@
 
 <style lang="sass" scoped>
 .buttoncontainer
-  position: absolute
   bottom: 0
   left: 50%
   margin-left: -$icon-width
-  margin-bottom: $offset
 
 .zoomButton
-  background-color: white
   min-height: $icon-width
   min-width: $icon-width
-  margin-bottom: auto
   z-index: 2
   outline: none
-  border: 0px
 </style>
 <script>
 import { mapState } from "vuex";