Mercurial > gemma
comparison client/src/identify/Identify.vue @ 1217:ba8cd80d68b6
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="identifymenu"> | 2 <div class="position-relative ml-3"> |
3 <div | 3 <div |
4 @click="$store.commit('application/showIdentify', !showIdentify)" | 4 @click="$store.commit('application/showIdentify', !showIdentify)" |
5 class="d-flex flex-column ui-element minimizer" | 5 class="d-flex flex-column ui-element minimizer mt-1" |
6 > | 6 > |
7 <div :class="infoStyle"> | 7 <div :class="infoStyle"> |
8 <i class="fa fa-info"></i> | 8 <i class="fa fa-info"></i> |
9 </div> | 9 </div> |
10 </div> | 10 </div> |
52 overflow-y: auto | 52 overflow-y: auto |
53 | 53 |
54 .versioninfo | 54 .versioninfo |
55 font-size: 60% | 55 font-size: 60% |
56 | 56 |
57 .identifymenu | |
58 position: relative | |
59 margin-left: $offset | |
60 | |
61 .identify | 57 .identify |
62 background-color: white | |
63 opacity: $slight-transparent | 58 opacity: $slight-transparent |
64 text-align: left | |
65 | 59 |
66 .identifycollapsed | 60 .identifycollapsed |
67 min-height: $icon-height | 61 min-height: $icon-height |
68 width: $icon-width | 62 width: $icon-width |
69 transition: $transition-fast | 63 transition: $transition-fast |
73 | 67 |
74 .minimizer | 68 .minimizer |
75 position: absolute | 69 position: absolute |
76 z-index: 2 | 70 z-index: 2 |
77 right: 0 | 71 right: 0 |
78 margin-top: $x-small-offset | |
79 height: $icon-width | 72 height: $icon-width |
80 width: $icon-height | 73 width: $icon-height |
81 </style> | 74 </style> |
82 | 75 |
83 <script> | 76 <script> |
102 computed: { | 95 computed: { |
103 ...mapGetters("application", ["versionStr"]), | 96 ...mapGetters("application", ["versionStr"]), |
104 ...mapState("application", ["showIdentify"]), | 97 ...mapState("application", ["showIdentify"]), |
105 ...mapState("map", ["identifiedFeatures", "currentMeasurement"]), | 98 ...mapState("map", ["identifiedFeatures", "currentMeasurement"]), |
106 identifyStyle() { | 99 identifyStyle() { |
107 return { | 100 return [ |
108 "ui-element": true, | 101 "ui-element rounded identify shadow bg-white text-left", |
109 rounded: true, | 102 { |
110 identify: true, | 103 identifyexpanded: this.showIdentify, |
111 shadow: true, | 104 identifycollapsed: !this.showIdentify |
112 identifyexpanded: this.showIdentify, | 105 } |
113 identifycollapsed: !this.showIdentify | 106 ]; |
114 }; | |
115 }, | 107 }, |
116 infoStyle() { | 108 infoStyle() { |
117 return { | 109 return { |
118 info: true, | 110 info: true, |
119 "text-info": | 111 "text-info": |