Mercurial > gemma
changeset 1482:46636f863742
refac: logs in card-design
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Tue, 04 Dec 2018 11:43:12 +0100 |
parents | 7be4e0dfa104 |
children | 5ef81251af18 |
files | client/src/components/admin/Logs.vue |
diffstat | 1 files changed, 65 insertions(+), 42 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/admin/Logs.vue Tue Dec 04 11:32:55 2018 +0100 +++ b/client/src/components/admin/Logs.vue Tue Dec 04 11:43:12 2018 +0100 @@ -2,44 +2,54 @@ <div class="main d-flex flex-column"> <div class="d-flex flex-row"> <div :class="spacer"></div> - <div class="logoutput text-left bg-white shadow-xs mt-3 mx-3"> - <pre - id="code" - v-highlightjs="logs" - ><code class="bash hljs hljs-string"></code></pre> - </div> - </div> - <div class="d-flex flex-row logmenu"> - <div class="d-flex align-self-center"> - <ul class="nav nav-pills"> - <li class="nav-item"> - <a - @click="fetch('system/log/apache2/access.log', 'accesslog')" - :class="accesslogStyle" - href="#" - > - <translate>Accesslog</translate> - </a> - </li> - <li class="nav-item"> - <a - @click="fetch('system/log/apache2/error.log', 'errorlog')" - :class="errorlogStyle" - href="#" - > - <translate>Errorlog</translate> - </a> - </li> - </ul> - </div> - <div class="statuscontainer d-flex flex-row"> - <div class="statusline ml-3 mt-1 align-self-center"> - <h3><translate>Last refresh:</translate> {{ refreshed }}</h3> + <div class="card logs shadow-xs mt-3 mr-3"> + <h6 + class="mb-0 py-3 px-3 border-bottom d-flex text-info align-items-center" + > + <font-awesome-icon icon="book" class="mr-2"></font-awesome-icon> + <translate class="headline">Logs</translate> + </h6> + <div class="logoutput text-left bg-white"> + <pre id="code" v-highlightjs="logs"> + <code class="bash hljs hljs-string"></code> + </pre> </div> - <div class="refresh"> - <button class="btn btn-dark" @click="fetch(currentFile, currentLog)"> - <translate>Refresh</translate> - </button> + <div class="logmenu"> + <div class="d-flex align-self-center"> + <ul class="nav nav-pills"> + <li class="nav-item"> + <a + @click="fetch('system/log/apache2/access.log', 'accesslog')" + :class="accesslogStyle" + href="#" + > + <translate>Accesslog</translate> + </a> + </li> + <li class="nav-item"> + <a + @click="fetch('system/log/apache2/error.log', 'errorlog')" + :class="errorlogStyle" + href="#" + > + <translate>Errorlog</translate> + </a> + </li> + </ul> + </div> + <div class="statuscontainer d-flex flex-row mb-3"> + <div class="statusline align-self-center"> + <h3><translate>Last refresh:</translate> {{ refreshed }}</h3> + </div> + <div class="refresh"> + <button + class="btn btn-dark" + @click="fetch(currentFile, currentLog)" + > + <translate>Refresh</translate> + </button> + </div> + </div> </div> </div> </div> @@ -53,8 +63,13 @@ } .logmenu { - margin-left: 5rem; - min-width: 60vw; + position: relative; + margin-left: $offset; + margin-top: $offset; +} + +.logs { + height: 85vh; } #code { @@ -63,12 +78,15 @@ .refresh { position: absolute; - right: 0; + right: $offset; + bottom: 0; } .logoutput { - width: 95%; - height: 85vh; + margin-left: $offset; + margin-right: $offset; + margin-top: $offset; + height: 90%; overflow: auto; transition: $transition-fast; } @@ -90,6 +108,11 @@ position: absolute; right: 0; margin-right: 7rem; + bottom: -0.5rem; +} + +.statuscontainer { + width: 100%; } </style>