Mercurial > gemma
changeset 1179:320e2720fe3d
importqueue broader layout and all button removed
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Thu, 15 Nov 2018 10:45:06 +0100 |
parents | 1ffb4b9ca5ee |
children | 03c820e25573 |
files | client/src/importqueue/Importqueue.vue |
diffstat | 1 files changed, 68 insertions(+), 53 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/importqueue/Importqueue.vue Thu Nov 15 09:30:05 2018 +0100 +++ b/client/src/importqueue/Importqueue.vue Thu Nov 15 10:45:06 2018 +0100 @@ -1,52 +1,54 @@ <template> - <div class="importqueue d-flex flex-row"> - <div class="card importqueuecard"> - <div class="card-header shadow-sm text-white bg-info mb-3">Importqueue</div> - <div class="card-body importcardbody"> + <div class="d-flex flex-row"> + <div :class="spacerStyle"></div> + <div class="importqueue"> + <div class="card importqueuecard"> + <div class="card-header shadow-sm text-white bg-info mb-3">Importqueue</div> <div class="card-body importcardbody"> - <div class="searchandfilter d-flex flex-row"> - <div class="searchgroup input-group"> - <div class="input-group-prepend"> - <span class="input-group-text" id="search"> - <i class="fa fa-search"></i> - </span> + <div class="card-body importcardbody"> + <div class="searchandfilter d-flex flex-row"> + <div class="searchgroup input-group"> + <div class="input-group-prepend"> + <span class="input-group-text" id="search"> + <i class="fa fa-search"></i> + </span> + </div> + <input + type="text" + class="form-control" + placeholder="" + aria-label="Search" + aria-describedby="search" + > </div> - <input - type="text" - class="form-control" - placeholder="" - aria-label="Search" - aria-describedby="search" - > + <div class="filters"> + <button + @click="setFilter('successful')" + :class="successfulStyle" + >Successful</button> + <button @click="setFilter('failed')" :class="failedStyle">Failed</button> + <button @click="setFilter('pending')" :class="pendingStyle">Pending</button> + </div> </div> - <div class="filters"> - <button @click="setFilter('all')" :class="allStyle">All</button> - <button - @click="setFilter('successful')" - :class="successfulStyle" - >Successful</button> - <button @click="setFilter('failed')" :class="failedStyle">Failed</button> - <button @click="setFilter('pending')" :class="pendingStyle">Pending</button> - </div> + <table class="table"> + <thead> + <tr> + <th>Enqueued</th> + <th>Kind</th> + <th>User</th> + <th>State</th> + </tr> + </thead> + <tbody> + <tr v-for="job in imports" :key="job.id"> + <td>{{job.enqueued}}</td> + <td>{{job.kind}}</td> + <td>{{job.user}}</td> + <td>{{job.state}}</td> + </tr> + </tbody> + </table> </div> - <table class="table"> - <thead> - <tr> - <th>Enqueued</th> - <th>Kind</th> - <th>User</th> - <th>State</th> - </tr> - </thead> - <tbody> - <tr v-for="job in imports" :key="job.id"> - <td>{{job.enqueued}}</td> - <td>{{job.kind}}</td> - <td>{{job.user}}</td> - <td>{{job.state}}</td> - </tr> - </tbody> - </table> </div> </div> </div> @@ -61,7 +63,6 @@ name: "importqueue", data() { return { - all: false, successful: false, failed: false, pending: false @@ -71,7 +72,7 @@ setFilter(name) { this[name] = !this[name]; const allSet = this.successful && this.failed && this.pending; - if (name === "all" || allSet) { + if (allSet) { this.all = false; this.successful = false; this.failed = false; @@ -81,11 +82,12 @@ }, computed: { ...mapState("imports", ["imports"]), - allStyle() { + ...mapState("application", ["showSidebar"]), + spacerStyle() { return { - btn: true, - "btn-light": !this.all, - "btn-dark": this.all + spacer: true, + "spacer-expanded": this.showSidebar, + "spacer-collapsed": !this.showSidebar }; }, successfulStyle() { @@ -123,19 +125,32 @@ </script> <style lang="scss" scoped> +.spacer { + margin-left: $offset; + height: 100vh; +} + +.spacer-collapsed { + min-width: $icon-width + $offset; + transition: $transition-fast; +} +.spacer-expanded { + min-width: $sidebar-width + $offset; +} + .importqueue { margin-top: $offset; + margin-right: auto; margin-left: auto; - margin-right: auto; } .importqueuecard { - width: 60vw; + width: 80vw; min-height: 20rem; } .card-body { - width: 90%; + width: 100%; margin-left: auto; margin-right: auto; }