# HG changeset patch
# User Sascha L. Teichmann <sascha.teichmann@intevation.de>
# Date 1549897040 -3600
# Node ID 7ae0b6be0203c7a3f788eb7677cbe8ddb11b1637
# Parent  bd09d6ad4c149fa1c786da4133643d83bcd58c9a# Parent  256f98e1d9546aaf62e85ae301e4987ebcc31bfd
Merged.

diff -r bd09d6ad4c14 -r 7ae0b6be0203 client/src/components/staging/StagingDetail.vue
--- a/client/src/components/staging/StagingDetail.vue	Mon Feb 11 15:56:59 2019 +0100
+++ b/client/src/components/staging/StagingDetail.vue	Mon Feb 11 15:57:20 2019 +0100
@@ -180,85 +180,93 @@
           ><small><translate>Date of measurement</translate></small></span
         >
       </div>
-      <div v-for="(result, index) in data.summary" :key="index">
-        <div @click="toggleDiff(index)" class="pl-3 d-flex flex-row">
-          <span
-            v-if="result.versions.length == 1"
-            class="condensed agmcode text-left"
-            ><small
-              >{{ result["fk-gauge-id"] }} <translate>( New )</translate></small
-            ></span
-          >
-          <span
-            v-if="result.versions.length == 2"
-            class="condensed agmcode text-left"
-            ><small>{{ result["fk-gauge-id"] }}</small></span
-          >
-          <span class="condensed agmdetail text-left"
-            ><small>{{ formatSurveyDate(result["measure-date"]) }}</small></span
-          >
-          <div class="small ml-auto mt-auto mb-auto text-info text-left">
-            <font-awesome-icon
-              class="pointer"
-              v-if="showDiff == index"
-              icon="angle-up"
-              fixed-width
-            ></font-awesome-icon>
-            <font-awesome-icon
-              class="pointer"
-              v-if="showDiff != index"
-              icon="angle-down"
-              fixed-width
-            ></font-awesome-icon>
+      <div class="diffs">
+        <div v-for="(result, index) in data.summary" :key="index">
+          <div class="pl-3 d-flex flex-row">
+            <span
+              v-if="result.versions.length == 1"
+              class="condensed agmcode text-left"
+              ><small
+                >{{ result["fk-gauge-id"] }}
+                <translate>( New )</translate></small
+              ></span
+            >
+            <span
+              v-if="result.versions.length == 2"
+              class="condensed agmcode text-left"
+              ><small>{{ result["fk-gauge-id"] }}</small></span
+            >
+            <span class="condensed agmdetail text-left"
+              ><small>{{
+                formatSurveyDate(result["measure-date"])
+              }}</small></span
+            >
+            <div
+              @click="toggleDiff(index)"
+              class="small ml-auto mt-auto mb-auto text-info text-left"
+            >
+              <font-awesome-icon
+                class="pointer"
+                v-if="showDiff == index"
+                icon="angle-up"
+                fixed-width
+              ></font-awesome-icon>
+              <font-awesome-icon
+                class="pointer"
+                v-if="showDiff != index"
+                icon="angle-down"
+                fixed-width
+              ></font-awesome-icon>
+            </div>
           </div>
-        </div>
-        <div v-if="showDiff == index" class="pl-3 d-flex flex-row">
-          <div>
-            <div class="d-flex flex-row condensed pl-3 text-left">
-              <div class="header border-bottom agmdetailskeys">
-                <small><translate>Value</translate></small>
+          <div v-if="showDiff == index" class="pl-3 d-flex flex-row">
+            <div>
+              <div class="d-flex flex-row condensed pl-3 text-left">
+                <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>
               <div
-                v-if="result.versions.length == 2"
-                class="header border-bottom agmdetailsvalues"
+                class="d-flex flex-row condensed pl-3 text-left"
+                v-for="(entry, index) in Object.keys(result.versions[0])"
+                :key="index"
               >
-                <small><translate>Old</translate></small>
-              </div>
-              <div class="header border-bottom agmdetailsvalues">
-                <small><translate>New</translate></small>
-              </div>
-            </div>
-            <div
-              class="d-flex flex-row condensed pl-3 text-left"
-              v-for="(entry, index) in Object.keys(result.versions[0])"
-              :key="index"
-            >
-              <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
+                  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>
               </div>
             </div>
           </div>
@@ -487,6 +495,11 @@
 </script>
 
 <style lang="scss" scoped>
+.diffs {
+  overflow-y: auto;
+  max-height: 250px;
+}
+
 .highlight {
   background-color: #f9f9f9;
 }