Mercurial > gemma

comparison client/src/layers/Layers.vue @ 1217:ba8cd80d68b6

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
made more use of bootstrap classes instead of custom css
author Markus Kottlaender <markus@intevation.de>
date Mon, 19 Nov 2018 15:20:22 +0100
parents 9d93968db2cd
children c14353e2cdb9
comparison
equal deleted inserted replaced
1216:1c7806728172 1217:ba8cd80d68b6
1 <template> 1 <template>
2 <div class="layerselectmenu"> 2 <div class="position-relative ml-auto">
3 <div @click="$store.commit('application/showLayers', !showLayers)" class="d-flex flex-column ui-element minimizer"> 3 <div @click="$store.commit('application/showLayers', !showLayers)" class="d-flex flex-column ui-element minimizer position-absolute mt-1">
4 <div> 4 <div>
5 <i class="fa fa-th-list"></i> 5 <i class="fa fa-th-list"></i>
6 </div> 6 </div>
7 </div> 7 </div>
8 <div :class="layerSelectStyle"> 8 <div :class="layerSelectStyle">
18 </div> 18 </div>
19 </div> 19 </div>
20 </template> 20 </template>
21 21
22 <style lang="sass" scoped> 22 <style lang="sass" scoped>
23 .layerselectmenu
24 position: relative
25 margin-left: auto
26
27 .layerselection 23 .layerselection
28 background-color: white
29 opacity: $slight-transparent 24 opacity: $slight-transparent
30 25
31 .layerselectioncollapsed 26 .layerselectioncollapsed
32 min-height: $icon-height 27 min-height: $icon-height
33 width: $icon-width 28 width: $icon-width
36 .layerselectionexpanded 31 .layerselectionexpanded
37 min-height: $layerselect-height 32 min-height: $layerselect-height
38 width: $layerselect-width 33 width: $layerselect-width
39 34
40 .minimizer 35 .minimizer
41 position: absolute
42 z-index: 2 36 z-index: 2
43 right: 0 37 right: 0
44 margin-top: $x-small-offset
45 height: $icon-width 38 height: $icon-width
46 width: $icon-height 39 width: $icon-height
47 </style> 40 </style>
48 41
49 <script> 42 <script>
70 }, 63 },
71 computed: { 64 computed: {
72 ...mapGetters("map", ["layersForLegend"]), 65 ...mapGetters("map", ["layersForLegend"]),
73 ...mapState("application", ["showLayers"]), 66 ...mapState("application", ["showLayers"]),
74 layerSelectStyle() { 67 layerSelectStyle() {
75 return { 68 return [
76 "ui-element": true, 69 "ui-element rounded layerselection bg-white shadow",
77 rounded: true, 70 {
78 layerselection: true, 71 layerselectionexpanded: this.showLayers,
79 shadow: true, 72 layerselectioncollapsed: !this.showLayers
80 layerselectionexpanded: this.showLayers, 73 }
81 layerselectioncollapsed: !this.showLayers 74 ];
82 };
83 } 75 }
84 }, 76 },
85 methods: { 77 methods: {
86 visibilityToggled(layer) { 78 visibilityToggled(layer) {
87 this.$store.commit("map/toggleVisibility", layer); 79 this.$store.commit("map/toggleVisibility", layer);