Mercurial > gemma
changeset 1128:dc9111a60926
Merged.
author | Sascha L. Teichmann <sascha.teichmann@intevation.de> |
---|---|
date | Wed, 07 Nov 2018 16:08:51 +0100 |
parents | 71ba4a66ec95 (current diff) a047a2735b9c (diff) |
children | 04598cc4f695 |
files | |
diffstat | 3 files changed, 12 insertions(+), 13 deletions(-) [+] |
line wrap: on
line diff
--- 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/>
--- 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;
--- 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 }); } } },