Mercurial > gemma

changeset 2942:30c906733154

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: importsoverview: improved bottleneck details style and fixed bug when toggeling the first item
author Markus Kottlaender <markus@intevation.de>
date Thu, 04 Apr 2019 18:23:49 +0200
parents c0162cbb5775
children 78affd725ba5
files client/src/components/importoverview/BottleneckDetail.vue
diffstat 1 files changed, 38 insertions(+), 38 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/importoverview/BottleneckDetail.vue	Thu Apr 04 17:44:07 2019 +0200
+++ b/client/src/components/importoverview/BottleneckDetail.vue	Thu Apr 04 18:23:49 2019 +0200
@@ -9,39 +9,37 @@
     <div
       v-for="(bottleneck, index) in bottlenecks"
       :key="index"
-      class="d-flex flex-row"
+      class="d-flex flex-column w-100"
     >
-      <div class="d-flex flex-column w-95">
-        <div class="d-flex flex-row">
-          <div
-            @click="showBottleneckDetails(index)"
-            class="mt-auto mb-auto text-info text-left"
+      <div class="d-flex flex-row pl-2">
+        <div
+          @click="showBottleneckDetails(index)"
+          class="mt-auto mb-auto text-info text-left"
+        >
+          <UISpinnerButton
+            :state="showBottleneckDetail === index"
+            :icons="['angle-right', 'angle-down']"
+            class="text-info"
+          />
+        </div>
+        <a @click="moveToBottleneck(index)" href="#">
+          {{ bottleneck.properties.objnam }}
+        </a>
+      </div>
+
+      <div class="ml-3 d-flex flex-row" v-if="showBottleneckDetail === index">
+        <table>
+          <tr
+            v-for="(info, index) in Object.keys(bottleneck.properties)"
+            :key="index"
+            class="mr-1 condensed  text-muted"
           >
-            <UISpinnerButton
-              :state="showBottleneckDetail === index"
-              :icons="['angle-right', 'angle-down']"
-              class="text-info"
-            />
-          </div>
-          <a @click="moveToBottleneck(index)" href="#">
-            {{ bottleneck.properties.objnam }}
-          </a>
-        </div>
-
-        <div class="ml-3 d-flex flex-row" v-if="showBottleneckDetail === index">
-          <table>
-            <tr
-              v-for="(info, index) in Object.keys(bottleneck.properties)"
-              :key="index"
-              class="mr-1 condensed  text-muted"
-            >
-              <td class="text-left">{{ info }}</td>
-              <td class="pl-3 text-left">
-                {{ bottleneck.properties[info] }}
-              </td>
-            </tr>
-          </table>
-        </div>
+            <td class="text-left">{{ info }}</td>
+            <td class="pl-3 text-left">
+              {{ bottleneck.properties[info] }}
+            </td>
+          </tr>
+        </table>
       </div>
     </div>
   </div>
@@ -58,6 +56,10 @@
 .bottleneckdetails
   width: 100%
   overflow-y: auto
+  > div
+    border-top: dashed 1px #dee2e6
+    &:first-child
+      border-top: none
 
 .split
   max-height: 35vh
@@ -88,15 +90,13 @@
 import { displayError } from "@/lib/errors.js";
 import { mapState } from "vuex";
 
-const NO_BOTTLENECK = -1;
-
 export default {
   name: "bottleneckdetails",
   props: ["entry"],
   data() {
     return {
       bottlenecks: [],
-      showBottleneckDetail: NO_BOTTLENECK
+      showBottleneckDetail: null
     };
   },
   mounted() {
@@ -160,11 +160,11 @@
       });
     },
     showBottleneckDetails(index) {
-      if (index == this.showBottleneckDetail) {
-        this.showBottleneckDetail = false;
-        return;
+      if (index === this.showBottleneckDetail) {
+        this.showBottleneckDetail = null;
+      } else {
+        this.showBottleneckDetail = index;
       }
-      this.showBottleneckDetail = index;
     }
   }
 };