Mercurial > gemma

changeset 1171:d61be0d972d8

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
fixed searchbar overlapping issue utilized flexbox to make boxes in topbar more flexible
author Markus Kottlaender <markus@intevation.de>
date Wed, 14 Nov 2018 12:54:13 +0100
parents 3807b6c2cfbf
children c3955e3db074 fdab87f013e2
files client/src/App.vue client/src/application/Sidebar.vue client/src/application/Topbar.vue client/src/application/assets/application.scss client/src/bottlenecks/Bottlenecks.vue
diffstat 5 files changed, 87 insertions(+), 119 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/App.vue	Wed Nov 14 12:31:15 2018 +0100
+++ b/client/src/App.vue	Wed Nov 14 12:54:13 2018 +0100
@@ -4,13 +4,7 @@
             <div class="topcontainer">
                 <Topbar :routeName="routeName"></Topbar>
             </div>
-            <div class="midcontainer d-flex flex-row">
-                <div class="leftcontainer">
-                    <Bottlenecks v-if="routeName == 'mainview'"></Bottlenecks>
-                </div>
-                <div class="middle"></div>
-                <div class="rightcontainer"></div>
-            </div>
+            <div class="flex-fill"></div>
             <div class="bottomcontainer d-flex flex-row align-items-end">
                 <Morphtool v-if="routeName == 'mainview'"></Morphtool>
                 <Pdftool v-if="routeName == 'mainview'"></Pdftool>
@@ -24,50 +18,30 @@
     </div>
 </template>
 
-<style lang="scss" scoped>
-.topcontainer {
-  height: 10vh;
-}
-
-.bottomcontainer {
-  height: 10vh;
-}
+<style lang="sass" scoped>
+.topcontainer
+  height: 10vh
 
-.midcontainer {
-  height: 80vh;
-}
-
-.rightcontainer {
-  width: 20vw;
-}
-
-.leftcontainer {
-  width: 20vw;
-}
+.bottomcontainer
+  height: 10vh
 
-.middle {
-  width: 60vw;
-}
+.userinterface
+  position: absolute
+  top: 0
+  left: 0
+  height: 100vh
+  width: 100vw
+  z-index: 4
+  pointer-events: none
 
-.userinterface {
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 100vh;
-  width: 100vw;
-  z-index: 4;
-  pointer-events: none;
-}
-
-#app {
-  height: 100vh;
-  width: 100vw;
-  font-family: "Avenir", Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-}
+#app
+  height: 100vh
+  width: 100vw
+  font-family: "Avenir", Helvetica, Arial, sans-serif
+  -webkit-font-smoothing: antialiased
+  -moz-osx-font-smoothing: grayscale
+  text-align: center
+  color: #2c3e50
 </style>
 
 <script>
@@ -98,7 +72,6 @@
     }
   },
   components: {
-    Bottlenecks: () => import("./bottlenecks/Bottlenecks"),
     Topbar: () => import("./application/Topbar"),
     Drawtool: () => import("./drawtool/Drawtool"),
     Morphtool: () => import("./morphtool/Morphtool"),
--- a/client/src/application/Sidebar.vue	Wed Nov 14 12:31:15 2018 +0100
+++ b/client/src/application/Sidebar.vue	Wed Nov 14 12:54:13 2018 +0100
@@ -76,7 +76,7 @@
     },
     sidebarStyle() {
       return [
-        "ui-element position-relative sidebar shadow d-print-none",
+        "ui-element position-relative sidebar shadow d-print-none mb-auto",
         {
           sidebarcollapsed: !this.showSidebar,
           sidebarextended: this.showSidebar
@@ -130,6 +130,7 @@
   transition: $transition-fast
 
 .sidebarextended
-  min-height: $sidebar-height
+  height: $sidebar-height
+  width: $sidebar-width
   min-width: $sidebar-width
 </style>
--- a/client/src/application/Topbar.vue	Wed Nov 14 12:31:15 2018 +0100
+++ b/client/src/application/Topbar.vue	Wed Nov 14 12:54:13 2018 +0100
@@ -1,6 +1,7 @@
 <template>
     <div class="topbar d-flex flex-row">
         <Sidebar :routeName="routeName"></Sidebar>
+        <Bottlenecks v-if="routeName == 'mainview'"></Bottlenecks>
         <div v-if="routeName == 'mainview'" :class="searchbarContainerStyle">
             <div class="input-group-prepend shadow">
                 <span @click="toggleSearchbar" :class="searchButtonStyle" for="search">
@@ -46,8 +47,9 @@
   border-radius: 0.25rem
 
 .searchbar-expanded
-  margin-left: 22vw
+  margin-left: auto
   margin-right: auto
+  padding-left: $offset
   width: $searchbar-width !important
   .searchbar
     border-top-left-radius: 0 !important
@@ -103,6 +105,7 @@
 import Identify from "../identify/Identify";
 import Layers from "../layers/Layers";
 import Sidebar from "./Sidebar";
+import Bottlenecks from "../bottlenecks/Bottlenecks";
 
 const setFocus = () => document.querySelector("#search").focus();
 
@@ -111,7 +114,8 @@
   components: {
     Identify,
     Layers,
-    Sidebar
+    Sidebar,
+    Bottlenecks
   },
   data() {
     return {
--- a/client/src/application/assets/application.scss	Wed Nov 14 12:31:15 2018 +0100
+++ b/client/src/application/assets/application.scss	Wed Nov 14 12:54:13 2018 +0100
@@ -24,7 +24,7 @@
 $identify-width: 20rem;
 $offset: 1rem;
 $searchbar-width: 50vw;
-$sidebar-height: 16rem;
+$sidebar-height: 27rem;
 $sidebar-width: 15rem;
 $slight-transparent: 0.96;
 $small-offset: 0.5rem;
--- a/client/src/bottlenecks/Bottlenecks.vue	Wed Nov 14 12:31:15 2018 +0100
+++ b/client/src/bottlenecks/Bottlenecks.vue	Wed Nov 14 12:54:13 2018 +0100
@@ -1,5 +1,5 @@
 <template>
-    <div :class="bottlenecksStyle" :style="'left: ' + (showSidebar ? '17rem' : '64px')">
+    <div :class="bottlenecksStyle">
         <div @click="$store.commit('application/showBottlenecks', !showBottlenecks);" class="ui-element close-bottlenecks">
             <i class="fa fa-close"></i>
         </div>
@@ -85,22 +85,22 @@
     ...mapState("bottlenecks", ["bottlenecks"]),
     ...mapState("map", ["openLayersMap"]),
     bottlenecksStyle() {
-      return {
-        "ui-element": true,
-        bottlenecks: true,
-        overlay: true,
-        bottleneckscollapsed: !this.showBottlenecks,
-        bottlenecksextended: this.showBottlenecks,
-        shadow: true
-      };
+      return [
+        "ui-element shadow bottlenecks",
+        {
+          bottleneckscollapsed: !this.showBottlenecks,
+          bottlenecksextended: this.showBottlenecks
+        }
+      ];
     },
     sortClass() {
-      return {
-        fa: true,
-        "fa-sort-amount-asc": this.sortDirection === "ASC",
-        "fa-sort-amount-desc": this.sortDirection === "DESC",
-        "ml-1": true
-      };
+      return [
+        "fa ml-1",
+        {
+          "fa-sort-amount-asc": this.sortDirection === "ASC",
+          "fa-sort-amount-desc": this.sortDirection === "DESC"
+        }
+      ];
     }
   },
   methods: {
@@ -207,62 +207,52 @@
 };
 </script>
 
-<style lang="scss" scoped>
-.bottlenecks {
-  position: absolute;
-  z-index: -2;
-  top: $offset;
-  background-color: #ffffff;
-  padding-top: $offset;
-  opacity: $slight-transparent;
-  border-radius: $border-radius;
-  transition: left 0.3s ease;
-  overflow: hidden;
-  background: #fff;
-}
+<style lang="sass" scoped>
+.bottlenecks
+  position: relative
+  background-color: #ffffff
+  padding-top: $offset
+  opacity: $slight-transparent
+  border-radius: $border-radius
+  transition: left 0.3s ease
+  overflow: hidden
+  background: #fff
+  margin-left: $offset
 
-.bottleneckscollapsed {
-  width: 0;
-  height: 0;
-  transition: $transition-fast;
-}
+.bottleneckscollapsed
+  width: 0
+  height: 0
+  transition: $transition-fast
 
-.bottlenecksextended {
-  width: 600px;
-}
+.bottlenecksextended
+  min-width: 600px
 
-.close-bottlenecks {
-  position: absolute;
-  z-index: 2;
-  right: 0;
-  top: 7px;
-  border-radius: $border-radius;
-  height: $icon-width;
-  width: $icon-height;
-  display: none;
-}
+.close-bottlenecks
+  position: absolute
+  z-index: 2
+  right: 0
+  top: 7px
+  border-radius: $border-radius
+  height: $icon-width
+  width: $icon-height
+  display: none
 
-.bottlenecksextended .close-bottlenecks {
-  display: block;
-}
+.bottlenecksextended .close-bottlenecks
+  display: block
 
-.bottleneck-list {
-  overflow-y: auto;
-  max-height: 500px;
-}
+.bottleneck-list
+  overflow-y: auto
+  max-height: 500px
 
-.surveys {
-  max-height: 0;
-  overflow: hidden;
-  transition: max-height 0.3s ease;
-}
+.surveys
+  max-height: 0
+  overflow: hidden
+  transition: max-height 0.3s ease
 
-.surveys.open {
-  max-height: 999px;
-}
+.surveys.open
+  max-height: 999px
 
-.sort-link {
-  color: #444;
-  font-weight: bold;
-}
+.sort-link
+  color: #444
+  font-weight: bold
 </style>