Mercurial > gemma
changeset 1126:a047a2735b9c
moved zoom buttons to better location and fix animation duration
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Wed, 07 Nov 2018 13:19:46 +0100 |
parents | dbc663b74724 |
children | dc9111a60926 2fda33d55d81 |
files | client/src/App.vue client/src/application/assets/application.scss client/src/zoom/zoom.vue |
diffstat | 3 files changed, 12 insertions(+), 13 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/App.vue Tue Nov 06 13:54:10 2018 +0100 +++ b/client/src/App.vue Wed Nov 07 13:19:46 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 Tue Nov 06 13:54:10 2018 +0100 +++ b/client/src/application/assets/application.scss Wed Nov 07 13:19:46 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 Tue Nov 06 13:54:10 2018 +0100 +++ b/client/src/zoom/zoom.vue Wed Nov 07 13:19:46 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 }); } } },