Mercurial > gemma
changeset 2942:30c906733154
client: importsoverview: improved bottleneck details style and fixed bug when toggeling the first item
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Thu, 04 Apr 2019 18:23:49 +0200 |
parents | c0162cbb5775 |
children | 78affd725ba5 |
files | client/src/components/importoverview/BottleneckDetail.vue |
diffstat | 1 files changed, 38 insertions(+), 38 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/importoverview/BottleneckDetail.vue Thu Apr 04 17:44:07 2019 +0200 +++ b/client/src/components/importoverview/BottleneckDetail.vue Thu Apr 04 18:23:49 2019 +0200 @@ -9,39 +9,37 @@ <div v-for="(bottleneck, index) in bottlenecks" :key="index" - class="d-flex flex-row" + class="d-flex flex-column w-100" > - <div class="d-flex flex-column w-95"> - <div class="d-flex flex-row"> - <div - @click="showBottleneckDetails(index)" - class="mt-auto mb-auto text-info text-left" + <div class="d-flex flex-row pl-2"> + <div + @click="showBottleneckDetails(index)" + class="mt-auto mb-auto text-info text-left" + > + <UISpinnerButton + :state="showBottleneckDetail === index" + :icons="['angle-right', 'angle-down']" + class="text-info" + /> + </div> + <a @click="moveToBottleneck(index)" href="#"> + {{ bottleneck.properties.objnam }} + </a> + </div> + + <div class="ml-3 d-flex flex-row" v-if="showBottleneckDetail === index"> + <table> + <tr + v-for="(info, index) in Object.keys(bottleneck.properties)" + :key="index" + class="mr-1 condensed text-muted" > - <UISpinnerButton - :state="showBottleneckDetail === index" - :icons="['angle-right', 'angle-down']" - class="text-info" - /> - </div> - <a @click="moveToBottleneck(index)" href="#"> - {{ bottleneck.properties.objnam }} - </a> - </div> - - <div class="ml-3 d-flex flex-row" v-if="showBottleneckDetail === index"> - <table> - <tr - v-for="(info, index) in Object.keys(bottleneck.properties)" - :key="index" - class="mr-1 condensed text-muted" - > - <td class="text-left">{{ info }}</td> - <td class="pl-3 text-left"> - {{ bottleneck.properties[info] }} - </td> - </tr> - </table> - </div> + <td class="text-left">{{ info }}</td> + <td class="pl-3 text-left"> + {{ bottleneck.properties[info] }} + </td> + </tr> + </table> </div> </div> </div> @@ -58,6 +56,10 @@ .bottleneckdetails width: 100% overflow-y: auto + > div + border-top: dashed 1px #dee2e6 + &:first-child + border-top: none .split max-height: 35vh @@ -88,15 +90,13 @@ import { displayError } from "@/lib/errors.js"; import { mapState } from "vuex"; -const NO_BOTTLENECK = -1; - export default { name: "bottleneckdetails", props: ["entry"], data() { return { bottlenecks: [], - showBottleneckDetail: NO_BOTTLENECK + showBottleneckDetail: null }; }, mounted() { @@ -160,11 +160,11 @@ }); }, showBottleneckDetails(index) { - if (index == this.showBottleneckDetail) { - this.showBottleneckDetail = false; - return; + if (index === this.showBottleneckDetail) { + this.showBottleneckDetail = null; + } else { + this.showBottleneckDetail = index; } - this.showBottleneckDetail = index; } } };