Mercurial > gemma
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", {