Mercurial > gemma
changeset 1249:104d41ea7c15
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 | 9f37424f0cfa |
| children | 2abeaadccbe6 d1903250390b |
| files | client/src/App.vue client/src/application/assets/application.sass client/src/identify/Identify.vue client/src/layers/Layers.vue client/src/layers/LegendElement.vue client/src/pdftool/Pdftool.vue client/src/toolbar/Toolbar.vue client/src/toolbar/buttons/Identify.vue client/src/toolbar/buttons/Layers.vue |
| diffstat | 9 files changed, 107 insertions(+), 143 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/App.vue Wed Nov 21 11:38:35 2018 +0100 +++ b/client/src/App.vue Wed Nov 21 11:42:00 2018 +0100 @@ -10,9 +10,9 @@ </div> </div> <div class="ml-auto d-flex"> + <Pdftool v-if="routeName == 'mainview'"></Pdftool> <Layers v-if="routeName == 'mainview'"></Layers> <Identify v-if="routeName == 'mainview'"></Identify> - <Pdftool v-if="routeName == 'mainview'"></Pdftool> <Toolbar v-if="routeName == 'mainview'"></Toolbar> </div> </div>
--- a/client/src/application/assets/application.sass Wed Nov 21 11:38:35 2018 +0100 +++ b/client/src/application/assets/application.sass Wed Nov 21 11:42:00 2018 +0100 @@ -18,10 +18,6 @@ $icon-height: 2rem $icon-width: 2rem $large-offset: 2rem -$layerselect-height: 20rem -$layerselect-width: 22rem -$identify-height: 16rem -$identify-width: 20rem $offset: 1rem $sidebar-height: 35rem $sidebar-width: 15rem @@ -49,3 +45,35 @@ .ui-element pointer-events: auto + +.box + max-height: 0 + max-width: 0 + overflow: hidden + margin-left: 0 + margin-right: 0 + box-shadow: 0 0.1rem 0.5rem rgba(0, 0, 0, 0.2) + transition: max-width .4s, max-height .4s, margin-left .4s, margin-right .4s + +.expanded + max-height: 999px + max-width: 999px + margin-left: 0.5rem + margin-right: 0.5rem + +.toolbar-button + height: $icon-width + width: $icon-height + align-items: center + justify-content: center + display: flex + background: #fff + margin-bottom: $offset + border-radius: $border-radius + box-shadow: 0 0.1rem 0.5rem rgba(0, 0, 0, 0.2) + z-index: 2 + pointer-events: auto + .inverted + color: #07f + .grey + color: #ddd
--- a/client/src/identify/Identify.vue Wed Nov 21 11:38:35 2018 +0100 +++ b/client/src/identify/Identify.vue Wed Nov 21 11:42:00 2018 +0100 @@ -1,62 +1,51 @@ <template> - <div class="position-relative mx-2"> - <div :class="style"> - <div v-if="showIdentify" class="p-3 d-flex flex-column"> - <h4 class="pb-3 border-bottom">Identified</h4> - <div class="d-flex flex-column features flex-grow-1"> - <small v-if="currentMeasurement"> - <b> - {{ currentMeasurement.quantity }} - ({{ currentMeasurement.unitSymbol }}): - </b><br> - {{ currentMeasurement.value }} - </small> - <div v-for="feature of identifiedFeatures" :key="feature.getId()" class="mt-2"> - <div v-if="feature.getId()"> - <b>{{ feature.getId().replace(/[.][^.]*$/,"") /* cut away everything from the last . to the end */}}:</b> - <small - v-for="(value, key) in prepareProperties(feature)" - :key="key" - > - <div v-if="value">{{key}}:{{value}}</div> - </small> - </div> - </div> - <div v-if="!currentMeasurement && !identifiedFeatures.length" class="text-muted small text-center my-auto"> - No features identified. + <div :class="['box ui-element rounded bg-white mb-auto text-nowrap', { expanded: showIdentify }]"> + <div style="width: 20rem"> + <h5 class="mb-0 py-2 border-bottom"> + <i class="fa fa-info"></i> + Identified + </h5> + <div class="d-flex flex-column features p-3 flex-grow-1 text-left"> + <div v-if="currentMeasurement"> + <b> + {{ currentMeasurement.quantity }} + ({{ currentMeasurement.unitSymbol }}): + </b><br> + <small>{{ currentMeasurement.value }}</small> + </div> + <div v-for="(feature, i) of identifiedFeatures" :key="feature.getId()" > + <div v-if="feature.getId()" :class="{ 'mt-2': i }"> + <b>{{ feature.getId().replace(/[.][^.]*$/,"") /* cut away everything from the last . to the end */}}:</b> + <small + v-for="(value, key) in prepareProperties(feature)" + :key="key" + > + <div v-if="value">{{key}}:{{value}}</div> + </small> </div> </div> - <div class="versioninfo border-top pt-1 mt-3"> - gemma - <a href="https://hg.intevation.de/gemma/file/tip">source-code</a> - {{ versionStr }} - <br>Some data © - <a href="https://www.openstreetmap.org/copyright">OpenSteetMap</a>contributors + <div v-if="!currentMeasurement && !identifiedFeatures.length" class="text-muted small text-center my-auto"> + No features identified. </div> </div> + <div class="versioninfo border-top p-3 text-left"> + gemma + <a href="https://hg.intevation.de/gemma/file/tip">source-code</a> + {{ versionStr }} + <br>Some data © + <a href="https://www.openstreetmap.org/copyright">OpenSteetMap</a>contributors + </div> </div> </div> </template> <style lang="sass" scoped> .features - max-height: $identify-height + max-height: 19rem overflow-y: auto .versioninfo font-size: 60% - -.identify - opacity: $slight-transparent - -.identifycollapsed - min-height: 0 - width: 0 - transition: $transition-fast - -.identifyexpanded - min-height: $identify-height - width: $identify-width </style> <script> @@ -81,16 +70,7 @@ computed: { ...mapGetters("application", ["versionStr"]), ...mapState("application", ["showIdentify"]), - ...mapState("map", ["identifiedFeatures", "currentMeasurement"]), - style() { - return [ - "ui-element rounded identify shadow bg-white text-left d-flex", - { - identifyexpanded: this.showIdentify, - identifycollapsed: !this.showIdentify - } - ]; - } + ...mapState("map", ["identifiedFeatures", "currentMeasurement"]) }, methods: { prepareProperties(feature) {
--- 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) {
--- a/client/src/layers/LegendElement.vue Wed Nov 21 11:38:35 2018 +0100 +++ b/client/src/layers/LegendElement.vue Wed Nov 21 11:42:00 2018 +0100 @@ -1,6 +1,5 @@ <template> - <div :id="id" class="bg-light shadow-sm rounded legendelement"></div> - + <div :id="id" class="legendelement"></div> </template> <script> @@ -118,9 +117,8 @@ }; </script> -<style scoped> -.legendelement { - max-height: 1.5rem; - width: 2rem; -} +<style lang="sass" scoped> +.legendelement + max-height: 1.5rem + width: 2rem </style>
--- a/client/src/pdftool/Pdftool.vue Wed Nov 21 11:38:35 2018 +0100 +++ b/client/src/pdftool/Pdftool.vue Wed Nov 21 11:42:00 2018 +0100 @@ -1,8 +1,11 @@ <template> - <div class="position-relative mx-2"> - <div :class="style"> - <div v-if="showPdfTool" class="p-3 d-flex flex-column"> - <h4 class="pb-3 border-bottom">Generate PDF</h4> + <div :class="['box ui-element rounded bg-white mb-auto text-nowrap', { expanded: showPdfTool }]"> + <div style="width: 15rem"> + <h5 class="mb-0 py-2 border-bottom"> + <i class="fa fa-file-pdf-o"></i> + Generate PDF + </h5> + <div class="p-3"> <b>Chose format:</b> <select v-model="form.format" class="d-block w-100"> <option>landscape</option> @@ -35,20 +38,6 @@ </div> </template> -<style lang="sass" scoped> -.pdftool - opacity: $slight-transparent - -.pdftoolcollapsed - min-height: 0 - width: 0 - transition: $transition-fast - -.pdftoolexpanded - min-height: 204px - width: 16rem -</style> - <script> /* * This is Free Software under GNU Affero General Public License v >= 3.0 @@ -57,7 +46,7 @@ * SPDX-License-Identifier: AGPL-3.0-or-later * License-Filename: LICENSES/AGPL-3.0.txt * - * Copyright (C) 2018 by via donau + * Copyright (C) 2018 by via donau * – Österreichische Wasserstraßen-Gesellschaft mbH * Software engineering by Intevation GmbH * @@ -79,16 +68,7 @@ }, computed: { ...mapState("application", ["showPdfTool"]), - ...mapState("bottlenecks", ["selectedSurvey"]), - style() { - return [ - "ui-element rounded pdftool bg-white shadow", - { - pdftoolexpanded: this.showPdfTool, - pdftoolcollapsed: !this.showPdfTool - } - ]; - } + ...mapState("bottlenecks", ["selectedSurvey"]) }, methods: { download() {
--- a/client/src/toolbar/Toolbar.vue Wed Nov 21 11:38:35 2018 +0100 +++ b/client/src/toolbar/Toolbar.vue Wed Nov 21 11:42:00 2018 +0100 @@ -1,5 +1,5 @@ <template> - <div class="ml-3"> + <div class="ml-2"> <Identify></Identify> <Layers></Layers> <Linetool></Linetool> @@ -20,7 +20,7 @@ background: #fff margin-bottom: $offset border-radius: $border-radius - box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) + box-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, 0.15) z-index: 2 pointer-events: auto .inverted
--- a/client/src/toolbar/buttons/Identify.vue Wed Nov 21 11:38:35 2018 +0100 +++ b/client/src/toolbar/buttons/Identify.vue Wed Nov 21 11:42:00 2018 +0100 @@ -1,6 +1,6 @@ <template> - <div @click="$store.commit('application/showLayers', !showLayers)" class="toolbar-button"> - <i :class="['fa fa-th-list', {inverted: showLayers}]"></i> + <div @click="$store.commit('application/showIdentify', !showIdentify)" class="toolbar-button"> + <i :class="['fa fa-info', {inverted: showIdentify}]"></i> </div> </template> @@ -21,9 +21,9 @@ import { mapState } from "vuex"; export default { - name: "layers", + name: "identify", computed: { - ...mapState("application", ["showLayers"]) + ...mapState("application", ["showIdentify"]) } }; </script>
--- a/client/src/toolbar/buttons/Layers.vue Wed Nov 21 11:38:35 2018 +0100 +++ b/client/src/toolbar/buttons/Layers.vue Wed Nov 21 11:42:00 2018 +0100 @@ -1,6 +1,6 @@ <template> - <div @click="$store.commit('application/showIdentify', !showIdentify)" class="toolbar-button"> - <i :class="['fa fa-info', {inverted: showIdentify}]"></i> + <div @click="$store.commit('application/showLayers', !showLayers)" class="toolbar-button"> + <i :class="['fa fa-th-list', {inverted: showLayers}]"></i> </div> </template> @@ -21,9 +21,9 @@ import { mapState } from "vuex"; export default { - name: "identify", + name: "layers", computed: { - ...mapState("application", ["showIdentify"]) + ...mapState("application", ["showLayers"]) } }; </script>