# HG changeset patch
# User Sascha L. Teichmann <sascha.teichmann@intevation.de>
# Date 1541603331 -3600
# Node ID dc9111a60926b7801ab9a37f0d651172a72ae587
# Parent  71ba4a66ec95a1177b0f6b3d41987f9b21f8b521# Parent  a047a2735b9c82b1c2276da9d729554bcc53e70a
Merged.

diff -r 71ba4a66ec95 -r dc9111a60926 client/src/App.vue
--- a/client/src/App.vue	Wed Nov 07 16:08:25 2018 +0100
+++ b/client/src/App.vue	Wed Nov 07 16:08:51 2018 +0100
@@ -7,7 +7,6 @@
             <div class="midcontainer d-flex flex-row">
                 <div class="leftcontainer">
                     <Sidebar :routeName="routeName"></Sidebar>
-                    <Zoom v-if="routeName == 'mainview'"></Zoom>
                     <Bottlenecks v-if="routeName == 'mainview'"></Bottlenecks>
                 </div>
                 <div class="middle"></div>
@@ -19,6 +18,7 @@
                 <Linetool v-if="routeName == 'mainview'"></Linetool>
                 <Pdftool v-if="routeName == 'mainview'"></Pdftool>
             </div>
+            <Zoom v-if="routeName == 'mainview'"></Zoom>
         </div>
         <div class="d-flex flex-column">
             <router-view/>
diff -r 71ba4a66ec95 -r dc9111a60926 client/src/application/assets/application.scss
--- a/client/src/application/assets/application.scss	Wed Nov 07 16:08:25 2018 +0100
+++ b/client/src/application/assets/application.scss	Wed Nov 07 16:08:51 2018 +0100
@@ -34,7 +34,6 @@
 $transition: 0.5s;
 $x-large-offset: 3rem;
 $x-small-offset: 0.25rem;
-$zoombutton-container-height: 120px;
 
 .debug {
   border: 1px solid red;
diff -r 71ba4a66ec95 -r dc9111a60926 client/src/zoom/zoom.vue
--- a/client/src/zoom/zoom.vue	Wed Nov 07 16:08:25 2018 +0100
+++ b/client/src/zoom/zoom.vue	Wed Nov 07 16:08:51 2018 +0100
@@ -1,23 +1,22 @@
 <template>
-    <div class="d-flex flex-column buttoncontainer align-content-between">
-        <button class="zoomButton shadow ui-element" @click="zoomIn">+</button>
-        <button class="zoomButton shadow ui-element" @click="zoomOut">-</button>
+    <div class="d-flex buttoncontainer shadow" :style="showSplitscreen ? 'margin-bottom: 51vh' : ''">
+        <button class="zoomButton rounded-left ui-element border-right" @click="zoomIn">+</button>
+        <button class="zoomButton rounded-right ui-element" @click="zoomOut">-</button>
     </div>
 </template>
+
 <style lang="scss" scoped>
 .buttoncontainer {
-  width: $icon-width;
-  height: $zoombutton-container-height;
-  margin-top: $sidebar-height;
-  margin-left: $offset;
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  margin-left: -$icon-width;
+  margin-bottom: $offset;
 }
 .zoomButton {
-  position: relative;
   background-color: white;
-  border-radius: $border-radius;
   min-height: $icon-width;
   min-width: $icon-width;
-  margin-right: $offset;
   margin-bottom: auto;
   z-index: 2;
   outline: none;
@@ -31,12 +30,13 @@
   name: "zoom",
   computed: {
     ...mapState("map", ["openLayersMap"]),
+    ...mapState("application", ["showSplitscreen"]),
     zoomLevel: {
       get() {
         return this.openLayersMap.getView().getZoom();
       },
       set(value) {
-        this.openLayersMap.getView().animate({ zoom: value }, 700);
+        this.openLayersMap.getView().animate({ zoom: value, duration: 300 });
       }
     }
   },