Mercurial > gemma
diff client/src/components/importoverview/LogEntry.vue @ 2720:305af1e2975d
client: table headers: improved component to accept specific widths for columns
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Tue, 19 Mar 2019 12:26:52 +0100 |
parents | ef10f1cd6cb8 |
children | 9465749410ba |
line wrap: on
line diff
--- a/client/src/components/importoverview/LogEntry.vue Tue Mar 19 12:20:54 2019 +0100 +++ b/client/src/components/importoverview/LogEntry.vue Tue Mar 19 12:26:52 2019 +0100 @@ -1,44 +1,45 @@ <template> <div class="logentry"> <div class="row no-gutters text-left"> - <div style="width: 4%;" class="text-center"> + <div + style="width: 79px;" + class="table-cell d-flex justify-content-between" + > <font-awesome-icon @click="toggleDetails" - class="my-auto mr-1 text-info pointer" + class="my-auto text-info pointer" :icon="entry.id === show ? 'angle-down' : 'angle-right'" fixed-width ></font-awesome-icon> - </div> - <div style="width: 5%; padding-right: 10px;" class="text-right"> {{ entry.id }} </div> - <div style="width: 8%;" class="text-center"> + <div style="width: 53px;" class="table-cell text-center"> {{ entry.kind.toUpperCase() }} </div> - <div style="width: 25%;" class="text-center"> + <div style="width: 138px;" class="table-cell text-center"> {{ entry.enqueued | dateTime }} </div> - <div style="width: 16%;padding-right: 10px;" class="text-center truncate"> + <div style="width: 105px;" class="table-cell truncate"> {{ entry.user }} </div> - <div style="width: 16%;padding-left: 20px;" class="text-left truncate"> + <div style="width: 105px;" class="table-cell truncate"> {{ entry.signer }} </div> - <div style="width: 9%;" class="text-left"> + <div style="width: 72px;" class="table-cell text-center"> <span v-if="entry.state === 'failed'" class="text-danger">{{ entry.state }}</span> <span v-else>{{ entry.state }}</span> </div> - <div style="width: 2%;" class="text-left"> + <div style="width: 44px;" class="table-cell text-center"> <font-awesome-icon v-if="entry.warnings" - class="ml-1 text-warning" + class="text-warning" icon="exclamation-triangle" fixed-width ></font-awesome-icon> </div> - <div style="width: 8%" class="text-right"> + <div style="flex-grow: 1; padding: 0;" class="table-cell text-right"> <div v-if="entry.state === 'pending'"> <button :class="['actions approved', { active: isApproved }]" @@ -71,6 +72,37 @@ </div> </template> +<style lang="sass" scoped> +.logentry + font-size: 80% + &:hover + background: #fafafa + .actions + height: 100% + width: 50% + border: 0 + background: transparent + outline: none + &.approved + color: green + &.active, + &:hover + color: white + background: green + &.rejected + border-left: 1px solid #dee2e6 + color: red + &.active, + &:hover + color: white + background: red +.table-cell + padding: 0 3px + border-right: solid 1px #dee2e6 + &:last-child + border-right: none +</style> + <script> /* This is Free Software under GNU Affero General Public License v >= 3.0 * without warranty, see README.md and license for details. @@ -149,29 +181,3 @@ STATES: STATES }; </script> - -<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>