Mercurial > gemma

changeset 1079:5979b63cce9d

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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 {