Mercurial > gemma
changeset 2523:40bd6bb7886b
staging: small UI improvements
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Wed, 06 Mar 2019 12:54:47 +0100 |
parents | 24bab584f0a1 |
children | f15ee4e84c0c |
files | client/src/components/importoverview/ImportOverview.vue client/src/components/importoverview/staging/Staging.vue client/src/components/importoverview/staging/StagingDetail.vue |
diffstat | 3 files changed, 51 insertions(+), 24 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/importoverview/ImportOverview.vue Wed Mar 06 10:48:18 2019 +0100 +++ b/client/src/components/importoverview/ImportOverview.vue Wed Mar 06 12:54:47 2019 +0100 @@ -1,5 +1,5 @@ <template> - <div> + <div class="overview"> <UIBoxHeader icon="clipboard-check" title="Staging Area" @@ -144,4 +144,9 @@ }; </script> -<style></style> +<style lang="scss" scoped> +.overview { + max-height: 850px; + overflow-y: auto; +} +</style>
--- a/client/src/components/importoverview/staging/Staging.vue Wed Mar 06 10:48:18 2019 +0100 +++ b/client/src/components/importoverview/staging/Staging.vue Wed Mar 06 12:54:47 2019 +0100 @@ -7,7 +7,6 @@ </button> </div> <StagingDetail - class="mb-3 border-bottom" :key="data.id" v-for="data in filteredData" :data="data"
--- a/client/src/components/importoverview/staging/StagingDetail.vue Wed Mar 06 10:48:18 2019 +0100 +++ b/client/src/components/importoverview/staging/StagingDetail.vue Wed Mar 06 12:54:47 2019 +0100 @@ -55,13 +55,16 @@ 'ml-3': true, 'mr-3': true, btn: true, - 'btn-sm': true, 'btn-outline-success': needsApproval(data) || isRejected(data), - 'btn-success': isApproved(data) + 'btn-success': isApproved(data), + actions: true }" @click="toggleApproval(data.id, $options.STATES.APPROVED)" > - <font-awesome-icon icon="check"></font-awesome-icon> + <font-awesome-icon + class="small pointer mb-2" + icon="check" + ></font-awesome-icon> </button> </div> <div> @@ -69,13 +72,16 @@ :class="{ 'mr-3': true, btn: true, - 'btn-sm': true, 'btn-outline-danger': needsApproval(data) || isApproved(data), - 'btn-danger': isRejected(data) + 'btn-danger': isRejected(data), + actions: true }" @click="toggleApproval(data.id, $options.STATES.REJECTED)" > - <font-awesome-icon icon="times" class="pointer"></font-awesome-icon> + <font-awesome-icon + icon="times" + class="small pointer mb-2" + ></font-awesome-icon> </button> </div> <div @@ -169,8 +175,8 @@ :key="index" class="mr-1 small text-muted" > - <td class="condensed text-left">{{ info }}</td> - <td class="condensed pl-3 text-left"> + <td class="text-left">{{ info }}</td> + <td class="pl-3 text-left"> {{ bottleneck.properties[info] }} </td> </tr> @@ -179,32 +185,28 @@ </div> </div> </div> - <div v-if="showAGMDetails"> + <div class="agmdetails" v-if="showAGMDetails"> <div class="pl-3 d-flex flex-row"> - <span class="condensed agmcode text-left" + <span class="agmcode text-left" ><small><translate>ISRS Code</translate></small></span > - <span class="condensed agmdetail text-left" + <span class="agmdetail text-left" ><small><translate>Date of measurement</translate></small></span > </div> <div class="diffs"> <div v-for="(result, index) in data.summary" :key="index"> <div class="pl-3 d-flex flex-row"> - <span - v-if="result.versions.length == 1" - class="condensed agmcode text-left" + <span v-if="result.versions.length == 1" class="agmcode text-left" ><small >{{ result["fk-gauge-id"] }} <translate>( New )</translate></small ></span > - <span - v-if="result.versions.length == 2" - class="condensed agmcode text-left" + <span v-if="result.versions.length == 2" class="agmcode text-left" ><small>{{ result["fk-gauge-id"] }}</small></span > - <span class="condensed agmdetail text-left" + <span class="agmdetail text-left" ><small>{{ formatDateTime(result["measure-date"]) }}</small></span > <div @@ -227,7 +229,7 @@ </div> <div v-if="showDiff == index" class="pl-3 d-flex flex-row"> <div> - <div class="d-flex flex-row condensed pl-3 text-left"> + <div class="d-flex flex-row pl-3 text-left"> <div class="header border-bottom agmdetailskeys"> <small><translate>Value</translate></small> </div> @@ -242,7 +244,7 @@ </div> </div> <div - class="d-flex flex-row condensed pl-3 text-left" + class="d-flex flex-row pl-3 text-left" v-for="(entry, index) in Object.keys(result.versions[0])" :key="index" > @@ -335,6 +337,7 @@ }, detail() { return [ + "staging", "pb-2", "pt-2", "d-flex", @@ -515,4 +518,24 @@ }; </script> -<style lang="scss" scoped></style> +<style lang="scss" scoped> +.actions { + padding: 1px; + width: 1rem; + height: 1rem; +} + +.bottlenecksdetails { + max-height: 300px; + overflow-y: auto; + font-stretch: condensed; + line-height: 0.9rem; +} + +.agmdetails { + max-height: 300px; + overflow-y: auto; + font-stretch: condensed; + line-height: 0.9rem; +} +</style>