# HG changeset patch
# User Thomas Junk <thomas.junk@intevation.de>
# Date 1549895004 -3600
# Node ID 256f98e1d9546aaf62e85ae301e4987ebcc31bfd
# Parent  20d9b71f4125b3714723fe5c8fd0dd1807628b20
staging: dynamic scrollbar for agm

diff -r 20d9b71f4125 -r 256f98e1d954 client/src/components/staging/StagingDetail.vue
--- a/client/src/components/staging/StagingDetail.vue	Mon Feb 11 13:04:36 2019 +0100
+++ b/client/src/components/staging/StagingDetail.vue	Mon Feb 11 15:23:24 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;
 }