diff client/src/layers/Layers.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
line wrap: on
line diff
--- a/client/src/layers/Layers.vue	Mon Nov 19 15:10:09 2018 +0100
+++ b/client/src/layers/Layers.vue	Mon Nov 19 15:20:22 2018 +0100
@@ -1,6 +1,6 @@
 <template>
-    <div class="layerselectmenu">
-        <div @click="$store.commit('application/showLayers', !showLayers)" class="d-flex flex-column ui-element minimizer">
+    <div class="position-relative ml-auto">
+        <div @click="$store.commit('application/showLayers', !showLayers)" class="d-flex flex-column ui-element minimizer position-absolute mt-1">
             <div>
                 <i class="fa fa-th-list"></i>
             </div>
@@ -20,12 +20,7 @@
 </template>
 
 <style lang="sass" scoped>
-.layerselectmenu
-  position: relative
-  margin-left: auto
-
 .layerselection
-  background-color: white
   opacity: $slight-transparent
 
 .layerselectioncollapsed
@@ -38,10 +33,8 @@
   width: $layerselect-width
 
 .minimizer
-  position: absolute
   z-index: 2
   right: 0
-  margin-top: $x-small-offset
   height: $icon-width
   width: $icon-height
 </style>
@@ -72,14 +65,13 @@
     ...mapGetters("map", ["layersForLegend"]),
     ...mapState("application", ["showLayers"]),
     layerSelectStyle() {
-      return {
-        "ui-element": true,
-        rounded: true,
-        layerselection: true,
-        shadow: true,
-        layerselectionexpanded: this.showLayers,
-        layerselectioncollapsed: !this.showLayers
-      };
+      return [
+        "ui-element rounded layerselection bg-white shadow",
+        {
+          layerselectionexpanded: this.showLayers,
+          layerselectioncollapsed: !this.showLayers
+        }
+      ];
     }
   },
   methods: {