Mercurial > gemma
changeset 2617:359f5f0037f5
client: importoverview2: improved table layout to save more space
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Wed, 13 Mar 2019 14:45:07 +0100 |
parents | be60888e7c43 |
children | 655c1db641b7 |
files | client/src/assets/application.scss client/src/components/importoverview/ImportOverviewAlt.vue client/src/components/importoverview/LogEntry.vue |
diffstat | 3 files changed, 59 insertions(+), 80 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/assets/application.scss Wed Mar 13 13:18:27 2019 +0100 +++ b/client/src/assets/application.scss Wed Mar 13 14:45:07 2019 +0100 @@ -183,3 +183,9 @@ .empty { margin-right: 1.25rem; } + +.truncate { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +}
--- a/client/src/components/importoverview/ImportOverviewAlt.vue Wed Mar 13 13:18:27 2019 +0100 +++ b/client/src/components/importoverview/ImportOverviewAlt.vue Wed Mar 13 14:45:07 2019 +0100 @@ -15,9 +15,9 @@ </button> </div> </div> - <div class="ml-3 mr-2 mt-2 w-95 "> + <div class="mt-2"> <LogEntry - class="logentry border-bottom d-flex-flex-column w-100" + class="border-top d-flex-flex-column w-100" :entry="entry" v-for="entry in imports" :key="entry.id" @@ -87,12 +87,3 @@ } }; </script> - -<style lang="scss" scoped> -.logentry { - font-size: 90%; -} -.logentry:hover { - background: #fafafa; -} -</style>
--- a/client/src/components/importoverview/LogEntry.vue Wed Mar 13 13:18:27 2019 +0100 +++ b/client/src/components/importoverview/LogEntry.vue Wed Mar 13 14:45:07 2019 +0100 @@ -1,29 +1,26 @@ <template> - <div> - <div class="d-flex flex-row text-left"> - <font-awesome-icon - v-if="entry.id === show" - @click="toggleDetails" - class="my-auto mr-1 text-info pointer" - icon="angle-down" - fixed-width - ></font-awesome-icon> - <font-awesome-icon - v-if="entry.id !== show" - @click="toggleDetails" - class="my-auto mr-1 text-info pointer" - icon="angle-right" - fixed-width - ></font-awesome-icon> - <div class="id"> - <span v-if="entry.id > 9">{{ entry.id }}</span> - <span v-else> {{ entry.id }}</span> + <div class="logentry"> + <div class="row no-gutters text-left"> + <div style="width: 4%;" class="text-center"> + <font-awesome-icon + @click="toggleDetails" + class="my-auto mr-1 text-info pointer" + :icon="entry.id === show ? 'angle-down' : 'angle-right'" + fixed-width + ></font-awesome-icon> </div> - <div class="kind">{{ entry.kind.toUpperCase() }}</div> - <div class="enqueued">{{ entry.enqueued | dateTime }}</div> - <div class="user">{{ entry.user }}</div> - <div class="signer">{{ entry.signer }}</div> - <div> + <div style="width: 7%; padding-right: 10px;" class="text-right"> + {{ entry.id }} + </div> + <div style="width: 8%;"> + {{ entry.kind.toUpperCase() }} + </div> + <div style="width: 22%;"> + {{ entry.enqueued | dateTime }} + </div> + <div style="width: 23%;" class="truncate">{{ entry.user }}</div> + <div style="width: 23%;" class="truncate">{{ entry.signer }}</div> + <div style="width: 6%;" class="text-center"> <font-awesome-icon v-if="entry.warnings" class="ml-1 text-warning" @@ -31,39 +28,24 @@ fixed-width ></font-awesome-icon> </div> - <div v-if="reviewable" class="controls d-flex flex-row ml-auto"> - <div> + <div style="width: 7%" class="text-right"> + <div v-if="entry.state === 'pending'"> <button - :class="{ - 'ml-3': true, - 'mr-3': true, - btn: true, - 'btn-outline-success': needsApproval || isRejected, - 'btn-success': isApproved, - actions: true - }" + :class="['actions approved', { active: isApproved }]" @click="toggleApproval($options.STATES.APPROVED)" > <font-awesome-icon - class="mx-auto small pointer mb-2" + class="small pointer" icon="check" ></font-awesome-icon> </button> - </div> - <div> <button - :class="{ - 'mr-3': true, - btn: true, - 'btn-outline-danger': needsApproval || isApproved, - 'btn-danger': isRejected, - actions: true - }" + :class="['actions rejected', { active: isRejected }]" @click="toggleApproval($options.STATES.REJECTED)" > <font-awesome-icon icon="times" - class="small pointer mb-2" + class="small pointer" ></font-awesome-icon> </button> </div> @@ -126,34 +108,34 @@ }, isApproved() { return this.entry.status === STATES.APPROVED; - }, - reviewable() { - return this.entry.state === "pending"; } }, STATES: STATES }; </script> -<style lang="scss" scoped> -.id { - width: 10%; -} -.kind { - width: 10%; -} -.enqueued { - width: 20%; -} -.user { - width: 10%; -} -.signer { - width: 10%; -} -button { - height: 19px; - width: 19px; - padding: 0.1rem; -} +<style lang="sass" scoped> +.logentry + font-size: 80% + &:hover + background: #fafafa + .actions + height: 100% + width: 22px + border: 0 + background: transparent + border-left: 1px solid #dee2e6 + outline: none + &.approved + color: green + &.active, + &:hover + color: white + background: green + &.rejected + color: red + &.active, + &:hover + color: white + background: red </style>