Mercurial > gemma

comparison client/src/components/map/contextbox/Bottlenecks.vue @ 1403:f7139b814a6c

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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 d4fc5f3c1252
comparison
equal deleted inserted replaced
1402:acb71a982837 1403:f7139b814a6c
18 <a href="#" @click="sortBy('chainage')" class="sort-link"><translate>Chainage</translate></a> 18 <a href="#" @click="sortBy('chainage')" class="sort-link"><translate>Chainage</translate></a>
19 <font-awesome-icon :icon="sortIcon" class="ml-1" v-if="sortColumn === 'chainage'"></font-awesome-icon> 19 <font-awesome-icon :icon="sortIcon" class="ml-1" v-if="sortColumn === 'chainage'"></font-awesome-icon>
20 </div> 20 </div>
21 <div class="col-2"></div> 21 <div class="col-2"></div>
22 </div> 22 </div>
23 <div class="bottleneck-list small text-left" v-if="filteredAndSortedBottlenecks().length"> 23 <div
24 class="bottleneck-list small text-left"
25 :style="'max-height: ' + (showSplitscreen ? 18 : 35) + 'rem'"
26 v-if="filteredAndSortedBottlenecks().length"
27 >
24 <div 28 <div
25 v-for="bottleneck in filteredAndSortedBottlenecks()" 29 v-for="bottleneck in filteredAndSortedBottlenecks()"
26 :key="bottleneck.properties.name" 30 :key="bottleneck.properties.name"
27 class="border-top row mx-0 py-2" 31 class="border-top row mx-0 py-2"
28 > 32 >
38 class="col-3" 42 class="col-3"
39 >{{ displayCurrentChainage(bottleneck.properties.from, bottleneck.properties.from) }}</div> 43 >{{ displayCurrentChainage(bottleneck.properties.from, bottleneck.properties.from) }}</div>
40 <div class="col-2 text-right"> 44 <div class="col-2 text-right">
41 <button 45 <button
42 type="button" 46 type="button"
43 class="btn btn-sm btn-outline-secondary" 47 class="btn btn-sm btn-info"
44 @click="toggleBottleneck(bottleneck.properties.name)" 48 @click="toggleBottleneck(bottleneck.properties.name)"
45 > 49 >
46 <font-awesome-icon icon="angle-down"></font-awesome-icon> 50 <font-awesome-icon icon="angle-down"></font-awesome-icon>
47 </button> 51 </button>
48 </div> 52 </div>
88 openBottleneck: null, 92 openBottleneck: null,
89 openBottleneckSurveys: null 93 openBottleneckSurveys: null
90 }; 94 };
91 }, 95 },
92 computed: { 96 computed: {
93 ...mapState("application", ["searchQuery", "showSearchbarLastState"]), 97 ...mapState("application", [
98 "searchQuery",
99 "showSearchbarLastState",
100 "showSplitscreen"
101 ]),
94 ...mapState("bottlenecks", ["bottlenecks"]), 102 ...mapState("bottlenecks", ["bottlenecks"]),
95 sortIcon() { 103 sortIcon() {
96 return this.sortDirection === "ASC" 104 return this.sortDirection === "ASC"
97 ? "sort-amount-down" 105 ? "sort-amount-down"
98 : "sort-amount-up"; 106 : "sort-amount-up";
203 </script> 211 </script>
204 212
205 <style lang="sass" scoped> 213 <style lang="sass" scoped>
206 .bottleneck-list 214 .bottleneck-list
207 overflow-y: auto 215 overflow-y: auto
208 max-height: 500px
209 216
210 .surveys 217 .surveys
211 max-height: 0 218 max-height: 0
212 overflow: hidden 219 overflow: hidden
213 transition: max-height 0.3s ease 220 transition: max-height 0.3s ease