changeset 1403:f7139b814a6c

improved bottleneck box height reacts to showSplitscreen
author Markus Kottlaender <markus@intevation.de>
date Wed, 28 Nov 2018 16:20:35 +0100
parents acb71a982837
children d4939311a99a
files client/src/components/map/contextbox/Bottlenecks.vue client/src/components/map/contextbox/Contextbox.vue
diffstat 2 files changed, 12 insertions(+), 5 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/map/contextbox/Bottlenecks.vue	Wed Nov 28 16:17:17 2018 +0100
+++ b/client/src/components/map/contextbox/Bottlenecks.vue	Wed Nov 28 16:20:35 2018 +0100
@@ -20,7 +20,11 @@
       </div>
       <div class="col-2"></div>
     </div>
-    <div class="bottleneck-list small text-left" v-if="filteredAndSortedBottlenecks().length">
+    <div
+      class="bottleneck-list small text-left"
+      :style="'max-height: ' + (showSplitscreen ? 18 : 35) + 'rem'"
+      v-if="filteredAndSortedBottlenecks().length"
+    >
       <div
         v-for="bottleneck in filteredAndSortedBottlenecks()"
         :key="bottleneck.properties.name"
@@ -40,7 +44,7 @@
         <div class="col-2 text-right">
           <button
             type="button"
-            class="btn btn-sm btn-outline-secondary"
+            class="btn btn-sm btn-info"
             @click="toggleBottleneck(bottleneck.properties.name)"
           >
             <font-awesome-icon icon="angle-down"></font-awesome-icon>
@@ -90,7 +94,11 @@
     };
   },
   computed: {
-    ...mapState("application", ["searchQuery", "showSearchbarLastState"]),
+    ...mapState("application", [
+      "searchQuery",
+      "showSearchbarLastState",
+      "showSplitscreen"
+    ]),
     ...mapState("bottlenecks", ["bottlenecks"]),
     sortIcon() {
       return this.sortDirection === "ASC"
@@ -205,7 +213,6 @@
 <style lang="sass" scoped>
 .bottleneck-list
   overflow-y: auto
-  max-height: 500px
 
 .surveys
   max-height: 0
--- a/client/src/components/map/contextbox/Contextbox.vue	Wed Nov 28 16:17:17 2018 +0100
+++ b/client/src/components/map/contextbox/Contextbox.vue	Wed Nov 28 16:20:35 2018 +0100
@@ -79,7 +79,7 @@
 
 .contextboxextended
   max-width: 600px
-  max-height: 600px
+  max-height: 640px
 
 .close-contextbox
   position: absolute