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":