# HG changeset patch
# User Markus Kottlaender <markus@intevation.de>
# Date 1554452941 -7200
# Node ID 73f5373792034ce7b254caa8b2cee37746b3294f
# Parent  78affd725ba528978e80da4fcce8a9e29daacafc
client: importoverview: improved style

diff -r 78affd725ba5 -r 73f537379203 client/src/components/importoverview/ApprovedGaugeMeasurementDetail.vue
--- a/client/src/components/importoverview/ApprovedGaugeMeasurementDetail.vue	Thu Apr 04 18:46:17 2019 +0200
+++ b/client/src/components/importoverview/ApprovedGaugeMeasurementDetail.vue	Fri Apr 05 10:29:01 2019 +0200
@@ -7,74 +7,53 @@
     }"
   >
     <div v-for="(result, index) in details.summary" :key="index">
-      <div class="pl-2 d-flex">
-        <div @click="toggleDiff(index)" class="my-auto text-left">
-          <UISpinnerButton
-            :state="showDiff === index"
-            :icons="['angle-right', 'angle-down']"
-            classes="text-info"
-          />
+      <div class="px-2 d-flex justify-content-between">
+        <div class="d-flex">
+          <div @click="toggleDiff(index)" class="my-auto text-left">
+            <UISpinnerButton
+              :state="showDiff === index"
+              :icons="['angle-right', 'angle-down']"
+              classes="text-info"
+            />
+          </div>
+          <div>
+            {{ result["fk-gauge-id"] }}
+            <sup v-if="isNew(result)" class="text-success">
+              (<translate>New</translate>)
+            </sup>
+          </div>
         </div>
-        <span v-if="result.versions.length == 1" class="agmcode text-left"
-          ><div>
-            {{ result["fk-gauge-id"] }} <translate>( New )</translate>
-          </div></span
-        >
-        <span v-if="result.versions.length == 2" class="agmcode text-left"
-          ><div>{{ result["fk-gauge-id"] }}</div></span
+        <div>{{ result["measure-date"] | dateTime }}</div>
+      </div>
+      <div v-if="showDiff === index" class="compare-table">
+        <div class="row no-gutters px-4 text-left font-weight-bold">
+          <div :class="isNew(result) ? 'col-6' : 'col-4'">
+            <translate>Value</translate>
+          </div>
+          <div v-if="isOld(result)" class="col-4">
+            <translate>Old</translate>
+          </div>
+          <div :class="isNew(result) ? 'col-6' : 'col-4'">
+            <translate>New</translate>
+          </div>
+        </div>
+        <div
+          class="row no-gutters px-4 text-left"
+          v-for="(entry, index) in Object.keys(result.versions[0])"
+          :key="index"
+          v-if="isNew(result) || isDifferent(result, entry)"
         >
-        <span class="text-left"
-          ><div>{{ result["measure-date"] | dateTime }}</div></span
-        >
-      </div>
-      <div v-if="showDiff === index" class="pl-3 d-flex flex-row">
-        <div class="w-100">
-          <div class="d-flex flex-row pl-3 text-left w-95">
-            <div class="header border-bottom agmdetailskeys">
-              <small><translate>Value</translate></small>
-            </div>
-            <div
-              v-if="result.versions.length == 2"
-              class="header border-bottom agmdetailsvalues"
-            >
-              <small><translate>Old</translate></small>
-            </div>
-            <div class="header border-bottom agmdetailsvalues">
-              <small><translate>New</translate></small>
-            </div>
+          <div :class="isNew(result) ? 'col-6' : 'col-4'">
+            {{ entry }}
+          </div>
+          <div :class="isNew(result) ? 'col-6' : 'col-4'">
+            {{ result.versions[0][entry] }}
           </div>
           <div
-            class="line d-flex flex-row pl-3 text-left w-95"
-            v-for="(entry, index) in Object.keys(result.versions[0])"
-            :key="index"
+            v-if="isOld(result) && isDifferent(result, entry)"
+            :class="isNew(result) ? 'col-6' : 'col-4'"
           >
-            <div
-              v-if="
-                result.versions.length == 1 ||
-                  result.versions[0][entry] != result.versions[1][entry]
-              "
-              class="agmdetailskeys"
-            >
-              <small>{{ entry }}</small>
-            </div>
-            <div
-              v-if="
-                result.versions.length == 1 ||
-                  result.versions[0][entry] != result.versions[1][entry]
-              "
-              class="agmdetailsvalues"
-            >
-              <small>{{ result.versions[0][entry] }}</small>
-            </div>
-            <div
-              v-if="
-                result.versions.length == 2 &&
-                  result.versions[0][entry] != result.versions[1][entry]
-              "
-              class="agmdetailsvalues"
-            >
-              <small>{{ result.versions[1][entry] }}</small>
-            </div>
+            {{ result.versions[1][entry] }}
           </div>
         </div>
       </div>
@@ -90,18 +69,21 @@
     border-top: dashed 1px #dee2e6
     &:first-child
       border-top: none
-
-.line:nth-child(odd)
-  background: #f8f8f8
-
-.agmcode
-  width: 35%
-
-.agmdetailskeys
-  width: 33%
-
-.agmdetailsvalues
-  width: 33%
+    .compare-table
+      position: relative
+      overflow: hidden
+      &::after
+        content: ''
+        position: absolute
+        top: 0
+        right: -5px
+        bottom: 0
+        left: -5px
+        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.4)
+      > div
+        font-size: 0.7rem
+        &:nth-child(odd)
+          background-color: #f8f9fa
 
 .split
   max-height: 35vh
@@ -127,8 +109,6 @@
 import { mapState } from "vuex";
 
 export default {
-  name: "agmdetails",
-  props: ["entry"],
   data() {
     return {
       showDiff: 0 // open first item by default
@@ -144,6 +124,18 @@
       } else {
         this.showDiff = false;
       }
+    },
+    isNew(result) {
+      return result && result.versions && result.versions.length === 1;
+    },
+    isOld(result) {
+      return !this.isNew(result);
+    },
+    isDifferent(result, entry) {
+      return (
+        this.isOld(result) &&
+        result.versions[0][entry] != result.versions[1][entry]
+      );
     }
   }
 };
diff -r 78affd725ba5 -r 73f537379203 client/src/components/importoverview/BottleneckDetail.vue
--- a/client/src/components/importoverview/BottleneckDetail.vue	Thu Apr 04 18:46:17 2019 +0200
+++ b/client/src/components/importoverview/BottleneckDetail.vue	Fri Apr 05 10:29:01 2019 +0200
@@ -6,12 +6,8 @@
       split: showLogs
     }"
   >
-    <div
-      v-for="(bottleneck, index) in bottlenecks"
-      :key="index"
-      class="d-flex flex-column w-100"
-    >
-      <div class="d-flex flex-row pl-2">
+    <div v-for="(bottleneck, index) in bottlenecks" :key="index">
+      <div class="d-flex pl-2">
         <div
           @click="showBottleneckDetails(index)"
           class="mt-auto mb-auto text-info text-left"
@@ -27,15 +23,14 @@
         </a>
       </div>
 
-      <div class="ml-3 d-flex flex-row" v-if="showBottleneckDetail === index">
-        <table>
+      <div class="d-flex properties" v-if="showBottleneckDetail === index">
+        <table class="w-100">
           <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">
+            <td class="pl-4">{{ info }}</td>
+            <td>
               {{ bottleneck.properties[info] }}
             </td>
           </tr>
@@ -46,13 +41,6 @@
 </template>
 
 <style lang="sass" scoped>
-
-table
-  width: 100%
-
-tr:nth-child(even)
-  background: #f8f8f8
-
 .bottleneckdetails
   width: 100%
   overflow-y: auto
@@ -60,6 +48,21 @@
     border-top: dashed 1px #dee2e6
     &:first-child
       border-top: none
+    .properties
+      position: relative
+      overflow: hidden
+      &::after
+        content: ''
+        position: absolute
+        top: 0
+        right: -5px
+        bottom: 0
+        left: -5px
+        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.4)
+      tr
+        font-size: 0.7rem
+        &:nth-child(odd)
+          background-color: #f8f9fa
 
 .split
   max-height: 35vh
@@ -91,8 +94,6 @@
 import { mapState } from "vuex";
 
 export default {
-  name: "bottleneckdetails",
-  props: ["entry"],
   data() {
     return {
       bottlenecks: [],
diff -r 78affd725ba5 -r 73f537379203 client/src/components/importoverview/LogDetail.vue
--- a/client/src/components/importoverview/LogDetail.vue	Thu Apr 04 18:46:17 2019 +0200
+++ b/client/src/components/importoverview/LogDetail.vue	Fri Apr 05 10:29:01 2019 +0200
@@ -34,8 +34,8 @@
       v-if="entry.id === showAdditional && isPending && (isFD || isAGM || isBN)"
       class="d-flex border-bottom"
     >
-      <FairwayDimensionDetail :entry="entry" v-if="isFD" />
-      <ApprovedGaugeMeasurementDetail :entry="entry" v-if="isAGM" />
+      <FairwayDimensionDetail v-if="isFD" />
+      <ApprovedGaugeMeasurementDetail v-if="isAGM" />
       <BottleneckDetail :entry="entry" v-if="isBN" />
     </div>
     <div class="d-flex" style="padding-left: 3px;">