Mercurial > gemma
changeset 1079:5979b63cce9d
prevent overlapping of sidebar menu and bottleneck list
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Fri, 26 Oct 2018 14:19:53 +0200 |
parents | 2ed3b4eaaab4 |
children | 264d328f9ebb |
files | client/src/application/Sidebar.vue client/src/bottlenecks/Bottlenecks.vue |
diffstat | 2 files changed, 7 insertions(+), 10 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/application/Sidebar.vue Fri Oct 26 14:06:13 2018 +0200 +++ b/client/src/application/Sidebar.vue Fri Oct 26 14:19:53 2018 +0200 @@ -4,7 +4,7 @@ <div class="menupoints" v-if="!this.sidebarCollapsed"> <router-link to="/" class="text-body d-flex flex-row nav-link"> <i class="fa fa-map-o align-self-center navicon"></i>Riverbed Morphology</router-link> - <a href="#" class="text-body d-flex flex-row nav-link" @click="toggleBottlenecks"> + <a href="#" class="text-body d-flex flex-row nav-link" @click="$store.commit('application/toggleBottlenecks');"> Bottlenecks </a> <div v-if="isSysAdmin"> @@ -66,12 +66,6 @@ "d-print-none": true }; } - }, - methods: { - toggleBottlenecks() { - this.$store.commit("application/toggleBottlenecks"); - this.$store.commit("application/toggleSidebar"); - } } }; </script>
--- a/client/src/bottlenecks/Bottlenecks.vue Fri Oct 26 14:06:13 2018 +0200 +++ b/client/src/bottlenecks/Bottlenecks.vue Fri Oct 26 14:19:53 2018 +0200 @@ -1,5 +1,5 @@ <template> - <div :class="bottlenecksStyle" style="overflow: hidden; background: #fff;"> + <div :class="bottlenecksStyle" :style="'left: ' + (sidebarCollapsed ? '64px' : '17rem')"> <div @click="$store.commit('application/toggleBottlenecks');" class="ui-element close-bottlenecks"> <i class="fa fa-close"></i> </div> @@ -60,7 +60,7 @@ * Author(s): * Markus Kottländer <markus.kottlaender@intevation.de> */ -import { mapState } from "vuex"; +import { mapState, mapGetters } from "vuex"; import { fromLonLat } from "ol/proj"; import { HTTP } from "../application/lib/http"; import { displayError } from "../application/lib/errors.js"; @@ -80,6 +80,7 @@ ...mapState("application", ["bottlenecksCollapsed"]), ...mapState("bottlenecks", ["bottlenecks"]), ...mapState("mapstore", ["openLayersMap"]), + ...mapGetters("application", ["sidebarCollapsed"]), bottlenecksStyle() { return { "ui-element": true, @@ -177,11 +178,13 @@ position: absolute; z-index: -2; top: $offset; - left: 64px; background-color: #ffffff; padding-top: $offset; opacity: $slight-transparent; border-radius: $border-radius; + transition: left .3s ease; + overflow: hidden; + background: #fff; } .bottleneckscollapsed {