Mercurial > gemma
changeset 2442:9b7138751f5b
staging: layout logs
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Fri, 01 Mar 2019 12:07:34 +0100 |
parents | 9de710bdb535 |
children | 6694603471a5 |
files | client/src/components/importoverview/importlogs/LogDetail.vue |
diffstat | 1 files changed, 62 insertions(+), 89 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/importoverview/importlogs/LogDetail.vue Fri Mar 01 10:53:52 2019 +0100 +++ b/client/src/components/importoverview/importlogs/LogDetail.vue Fri Mar 01 12:07:34 2019 +0100 @@ -51,72 +51,62 @@ </div> <div class="detailstable d-flex flex-row"> <div :class="collapse"> - <table class="table table-responsive"> - <thead> - <tr> - <th class="type pb-0"> - <small class="condensed"><translate>Kind</translate></small> - </th> - <th class="datetime pb-0"> - <a href="#" @click="sortAsc = !sortAsc" class="sort-link" - ><small class="condensed"><translate>Date</translate></small> - <small class="condensed" - ><font-awesome-icon - :icon="sortIcon" - class="ml-1" - ></font-awesome-icon></small - ></a> - </th> - <th class="message pb-0"> - <small class="condensed"><translate>Message</translate></small> - </th> - </tr> - </thead> - <tbody> - <tr - v-for="(entry, index) in sortedEntries" - :key="index" - class="detailsrow" + <div class="text-left"> + <small style="margin-right:10px" class="type condensed" + ><translate>Kind</translate></small + > + <a + href="#" + @click="sortAsc = !sortAsc" + style="margin-right:58px" + class="datetime sort-link" + ><small class="condensed"><translate>Date</translate></small> + <small class="message condensed" + ><font-awesome-icon + :icon="sortIcon" + class="ml-1" + ></font-awesome-icon></small + ></a> + <small class="condensed"><translate>Message</translate></small> + </div> + <div class="logentries"> + <div + v-for="(entry, index) in sortedEntries" + :key="index" + class="detailsrow text-left" + > + <small + :class="[ + 'condensed type', + { + 'text-danger': entry.kind.toUpperCase() == 'ERROR', + 'text-warning': entry.kind.toUpperCase() == 'WARN' + } + ]" + >{{ entry.kind.toUpperCase() }}</small > - <td class="type"> - <span - :class="[ - 'condensed', - { - 'text-danger': entry.kind.toUpperCase() == 'ERROR', - 'text-warning': entry.kind.toUpperCase() == 'WARN' - } - ]" - >{{ entry.kind.toUpperCase() }}</span - > - </td> - <td class="datetime"> - <span - :class="[ - 'condensed', - { - 'text-danger': entry.kind.toUpperCase() == 'ERROR', - 'text-warning': entry.kind.toUpperCase() == 'WARN' - } - ]" - >{{ formatDateTime(entry.time) }}</span - > - </td> - <td class="message"> - <span - :class="[ - 'condensed', - { - 'text-danger': entry.kind.toUpperCase() == 'ERROR', - 'text-warning': entry.kind.toUpperCase() == 'WARN' - } - ]" - >{{ entry.message }}</span - > - </td> - </tr> - </tbody> - </table> + <small + :class="[ + 'condensed datetime', + { + 'text-danger': entry.kind.toUpperCase() == 'ERROR', + 'text-warning': entry.kind.toUpperCase() == 'WARN' + } + ]" + >{{ formatDateTime(entry.time) }}</small + > + <small + :class="[ + 'condensed message', + { + 'text-danger': entry.kind.toUpperCase() == 'ERROR', + 'text-warning': entry.kind.toUpperCase() == 'WARN' + } + ]" + >{{ entry.message }}</small + > + </div> + </div> </div> </div> </div> @@ -265,6 +255,10 @@ </script> <style lang="scss" scoped> +.logentries { + overflow: auto; +} + .condensed { font-stretch: condensed; } @@ -316,41 +310,20 @@ } .detailsrow { - line-height: 0.1em; + line-height: 0.7rem; } .type { - width: 65px; white-space: nowrap; - padding-left: 0px; - border-top: 0px; - padding-bottom: $small-offset; } .datetime { - width: 200px; white-space: nowrap; - padding-left: 0px; - border-top: 0px; - padding-bottom: $small-offset; + padding-left: 10px; + padding-right: 10px; } .message { - min-width: 700px; white-space: nowrap; - padding-left: 0px; - border-top: 0px; - padding-bottom: $small-offset; -} - -thead, -tbody { - display: block; -} - -tbody { - height: 150px; - overflow-y: auto; - overflow-x: auto; } </style>