diff client/src/layers/Layers.vue @ 1247:c14353e2cdb9

repositioning of buttons (issue225)
author Markus Kottlaender <markus@intevation.de>
date Wed, 21 Nov 2018 08:15:28 +0100
parents ba8cd80d68b6
children 104d41ea7c15
line wrap: on
line diff
--- a/client/src/layers/Layers.vue	Tue Nov 20 18:05:19 2018 +0100
+++ b/client/src/layers/Layers.vue	Wed Nov 21 08:15:28 2018 +0100
@@ -1,18 +1,17 @@
 <template>
-    <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>
-        </div>
-        <div :class="layerSelectStyle">
-            <div v-if="showLayers" class="p-3 border-0 layers">
-                <div class="headline">
-                    <h4>Layers</h4>
-                </div>
-                <hr>
+    <div class="position-relative mx-2">
+        <div :class="style">
+            <div v-if="showLayers" class="p-3">
+                <h4 class="pb-3 border-bottom">Layers</h4>
                 <div class="d-flex flex-column">
-                    <Layerselect :layerindex="index" :layername="layer.name" v-for="(layer, index) in layersForLegend" :key="layer.name" :isVisible="layer.isVisible" @visibilityToggled="visibilityToggled"></Layerselect>
+                    <Layerselect
+                        v-for="(layer, index) in layersForLegend"
+                        :layerindex="index"
+                        :layername="layer.name"
+                        :key="layer.name"
+                        :isVisible="layer.isVisible"
+                        @visibilityToggled="visibilityToggled"
+                    ></Layerselect>
                 </div>
             </div>
         </div>
@@ -24,19 +23,13 @@
   opacity: $slight-transparent
 
 .layerselectioncollapsed
-  min-height: $icon-height
-  width: $icon-width
+  min-height: 0
+  width: 0
   transition: $transition-fast
 
 .layerselectionexpanded
   min-height: $layerselect-height
   width: $layerselect-width
-
-.minimizer
-  z-index: 2
-  right: 0
-  height: $icon-width
-  width: $icon-height
 </style>
 
 <script>
@@ -64,7 +57,7 @@
   computed: {
     ...mapGetters("map", ["layersForLegend"]),
     ...mapState("application", ["showLayers"]),
-    layerSelectStyle() {
+    style() {
       return [
         "ui-element rounded layerselection bg-white shadow",
         {