Mercurial > gemma

diff client/src/layers/Layers.vue @ 1249:104d41ea7c15

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
restyling of boxes to save screen space also fixed/improved animations and reduced/simplified html/css
author Markus Kottlaender <markus@intevation.de>
date Wed, 21 Nov 2018 11:42:00 +0100
parents c14353e2cdb9
children d1903250390b
line wrap: on
line diff
--- a/client/src/layers/Layers.vue	Wed Nov 21 11:38:35 2018 +0100
+++ b/client/src/layers/Layers.vue	Wed Nov 21 11:42:00 2018 +0100
@@ -1,37 +1,24 @@
 <template>
-    <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
-                        v-for="(layer, index) in layersForLegend"
-                        :layerindex="index"
-                        :layername="layer.name"
-                        :key="layer.name"
-                        :isVisible="layer.isVisible"
-                        @visibilityToggled="visibilityToggled"
-                    ></Layerselect>
-                </div>
+    <div :class="['box ui-element rounded bg-white mb-auto text-nowrap', { expanded: showLayers }]">
+        <div style="width: 16rem">
+            <h5 class="mb-0 py-2 border-bottom">
+              <i class="fa fa-th-list"></i>
+              Layers
+            </h5>
+            <div class="d-flex flex-column p-3 small">
+                <Layerselect
+                    v-for="(layer, index) in layersForLegend"
+                    :layerindex="index"
+                    :layername="layer.name"
+                    :key="layer.name"
+                    :isVisible="layer.isVisible"
+                    @visibilityToggled="visibilityToggled"
+                ></Layerselect>
             </div>
         </div>
     </div>
 </template>
 
-<style lang="sass" scoped>
-.layerselection
-  opacity: $slight-transparent
-
-.layerselectioncollapsed
-  min-height: 0
-  width: 0
-  transition: $transition-fast
-
-.layerselectionexpanded
-  min-height: $layerselect-height
-  width: $layerselect-width
-</style>
-
 <script>
 /*
  * This is Free Software under GNU Affero General Public License v >= 3.0
@@ -56,16 +43,7 @@
   },
   computed: {
     ...mapGetters("map", ["layersForLegend"]),
-    ...mapState("application", ["showLayers"]),
-    style() {
-      return [
-        "ui-element rounded layerselection bg-white shadow",
-        {
-          layerselectionexpanded: this.showLayers,
-          layerselectioncollapsed: !this.showLayers
-        }
-      ];
-    }
+    ...mapState("application", ["showLayers"])
   },
   methods: {
     visibilityToggled(layer) {