Mercurial > gemma
changeset 1415:d4fc5f3c1252
improved style of bottleneck list
added loading spinner for survey loading
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Thu, 29 Nov 2018 11:02:51 +0100 |
parents | 92d9dec88add |
children | 3af7ad9717e2 |
files | client/src/components/map/contextbox/Bottlenecks.vue |
diffstat | 1 files changed, 32 insertions(+), 16 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/map/contextbox/Bottlenecks.vue Thu Nov 29 10:29:57 2018 +0100 +++ b/client/src/components/map/contextbox/Bottlenecks.vue Thu Nov 29 11:02:51 2018 +0100 @@ -28,32 +28,36 @@ <div v-for="bottleneck in filteredAndSortedBottlenecks()" :key="bottleneck.properties.name" - class="border-top row mx-0 py-2" + class="border-top row bottleneck-row mx-0" > - <div class="col-5 text-left"> + <div class="col-5 py-2 text-left"> <a href="#" - class="d-block" @click="moveToBottleneck(bottleneck)" >{{ bottleneck.properties.name }}</a> </div> - <div class="col-2">{{ displayCurrentSurvey(bottleneck.properties.current) }}</div> - <div - class="col-3" - >{{ displayCurrentChainage(bottleneck.properties.from, bottleneck.properties.from) }}</div> - <div class="col-2 text-right"> + <div class="col-2 py-2"> + {{ displayCurrentSurvey(bottleneck.properties.current) }} + </div> + <div class="col-3 py-2"> + {{ displayCurrentChainage(bottleneck.properties.from, bottleneck.properties.from) }} + </div> + <div class="col-2 pr-0 text-right"> <button type="button" - class="btn btn-sm btn-info" + class="btn btn-sm btn-info rounded-0 h-100" @click="toggleBottleneck(bottleneck.properties.name)" + v-if="bottleneck.properties.current" > - <font-awesome-icon icon="angle-down"></font-awesome-icon> + <font-awesome-icon icon="spinner" fixed-width spin v-if="loading === bottleneck.properties.name"></font-awesome-icon> + <font-awesome-icon icon="angle-down" fixed-width v-if="loading !== bottleneck.properties.name && openBottleneck !== bottleneck.properties.name"></font-awesome-icon> + <font-awesome-icon icon="angle-up" fixed-width v-if="loading !== bottleneck.properties.name && openBottleneck === bottleneck.properties.name"></font-awesome-icon> </button> </div> - <div :class="['col-12', 'surveys', {open: openBottleneck === bottleneck.properties.name}]"> + <div :class="['col-12 p-0', 'surveys', {open: openBottleneck === bottleneck.properties.name}]"> <a href="#" - class="d-block p-2" + class="d-block px-3 py-2" v-for="(survey, index) in openBottleneckSurveys" :key="index" @click="selectSurvey(survey, bottleneck)" @@ -90,7 +94,8 @@ sortColumn: "name", sortDirection: "ASC", openBottleneck: null, - openBottleneckSurveys: null + openBottleneckSurveys: null, + loading: null }; }, computed: { @@ -178,6 +183,7 @@ this.openBottleneck = null; } else { this.openBottleneck = name; + this.loading = name; HTTP.get("/surveys/" + name, { headers: { @@ -194,7 +200,8 @@ title: "Backend Error", message: `${status}: ${data.message || data}` }); - }); + }) + .finally(() => (this.loading = null)); } }, displayCurrentSurvey(current) { @@ -213,14 +220,23 @@ <style lang="sass" scoped> .bottleneck-list overflow-y: auto + .bottleneck-row + a + text-decoration: none + &:hover + background: #fbfbfb .surveys max-height: 0 + min-height: 0 overflow: hidden - transition: max-height 0.3s ease + a + &:hover + background: #f3f3f3 .surveys.open - max-height: 999px + max-height: 250px + overflow: auto .sort-link color: #444