Mercurial > gemma

changeset 1179:320e2720fe3d

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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;
 }