# HG changeset patch
# User Thomas Junk <thomas.junk@intevation.de>
# Date 1545146703 -3600
# Node ID eeddc5dcb80c91772bbe2a65accb5bc4351da39c
# Parent  2e4ec4251c5718a6212650fc19694bbe905b4be7
staging now with details

diff -r 2e4ec4251c57 -r eeddc5dcb80c client/src/components/staging/Staging.vue
--- a/client/src/components/staging/Staging.vue	Tue Dec 18 16:09:44 2018 +0100
+++ b/client/src/components/staging/Staging.vue	Tue Dec 18 16:25:03 2018 +0100
@@ -20,8 +20,9 @@
         </div>
         <div class="ml-3 controls"></div>
       </div>
-      <div class="ml-3 mr-3 mt-2" v-if="filteredData.length">
+      <div class="ml-3 mr-3 mt-3" v-if="filteredData.length">
         <StagingDetail
+          class="mb-3 border-bottom"
           :key="data.id"
           v-for="data in filteredData"
           :data="data"
diff -r 2e4ec4251c57 -r eeddc5dcb80c client/src/components/staging/StagingDetail.vue
--- a/client/src/components/staging/StagingDetail.vue	Tue Dec 18 16:09:44 2018 +0100
+++ b/client/src/components/staging/StagingDetail.vue	Tue Dec 18 16:25:03 2018 +0100
@@ -1,74 +1,90 @@
 <template>
-  <div class="mt-3 d-flex flex-row w-100">
-    <div class="mt-auto mb-auto small name text-left">
-      <a
-        v-if="!isBottleneck(data.kind.toUpperCase())"
-        @click="zoomTo()"
-        href="#"
-        >{{ data.summary.bottleneck }}</a
-      >
-      <span v-else class="">*</span>
-    </div>
-    <div class="mt-auto mb-auto small text-left type">
-      {{ data.kind.toUpperCase() }}
-    </div>
-    <div class="mt-auto mb-auto small text-left date">
-      {{ formatSurveyDate(data.summary.date) }}
-    </div>
-    <div class="mt-auto mb-auto small text-left imported">
-      {{ formatSurveyDate(data.enqueued.split("T")[0]) }}
-    </div>
-    <div class="mt-auto mb-auto small text-left username">{{ data.user }}</div>
-    <div class="controls d-flex flex-row justify-content-end">
-      <div>
-        <button
-          :class="{
-            'ml-3': true,
-            'mr-3': true,
-            btn: true,
-            'btn-sm': true,
-            'btn-outline-success': needsApproval(data) || isRejected(data),
-            'btn-success': isApproved(data)
-          }"
-          @click="toggleApproval(data.id, $options.STATES.APPROVED)"
+  <div class="pb-2 d-flex flex-column w-100">
+    <div class="d-flex flex-row">
+      <div class="mt-auto d-flex flex-row mb-auto small name text-left">
+        <a
+          v-if="!isBottleneck(data.kind.toUpperCase())"
+          @click="zoomTo()"
+          href="#"
+          >{{ data.summary.bottleneck }}</a
         >
-          <font-awesome-icon icon="check"></font-awesome-icon>
-        </button>
+        <span v-else class="mr-auto ml-auto">*</span>
+      </div>
+      <div class="mt-auto mb-auto small text-left type">
+        {{ data.kind.toUpperCase() }}
       </div>
-      <div>
-        <button
-          :class="{
-            'mr-3': true,
-            btn: true,
-            'btn-sm': true,
-            'btn-outline-danger': needsApproval(data) || isApproved(data),
-            'btn-danger': isRejected(data)
-          }"
-          @click="toggleApproval(data.id, $options.STATES.REJECTED)"
-        >
-          <font-awesome-icon icon="times"></font-awesome-icon>
-        </button>
+      <div class="mt-auto mb-auto small text-left date">
+        {{ formatSurveyDate(data.summary.date) }}
+      </div>
+      <div class="mt-auto mb-auto small text-left imported">
+        {{ formatSurveyDate(data.enqueued.split("T")[0]) }}
+      </div>
+      <div class="mt-auto mb-auto small text-left username">
+        {{ data.user }}
       </div>
-      <div v-if="isBottleneck(data.kind.toUpperCase())">
-        <div @click="showDetails()" class="mt-auto mb-auto text-info text-left">
-          <font-awesome-icon
-            v-if="show"
-            icon="angle-up"
-            fixed-width
-          ></font-awesome-icon>
-          <font-awesome-icon
-            v-if="loading"
-            icon="spinner"
-            fixed-width
-          ></font-awesome-icon>
-          <font-awesome-icon
-            v-if="!show && !loading"
-            icon="angle-down"
-            fixed-width
-          ></font-awesome-icon>
+      <div class="controls d-flex flex-row justify-content-end">
+        <div>
+          <button
+            :class="{
+              'ml-3': true,
+              'mr-3': true,
+              btn: true,
+              'btn-sm': true,
+              'btn-outline-success': needsApproval(data) || isRejected(data),
+              'btn-success': isApproved(data)
+            }"
+            @click="toggleApproval(data.id, $options.STATES.APPROVED)"
+          >
+            <font-awesome-icon icon="check"></font-awesome-icon>
+          </button>
+        </div>
+        <div>
+          <button
+            :class="{
+              'mr-3': true,
+              btn: true,
+              'btn-sm': true,
+              'btn-outline-danger': needsApproval(data) || isApproved(data),
+              'btn-danger': isRejected(data)
+            }"
+            @click="toggleApproval(data.id, $options.STATES.REJECTED)"
+          >
+            <font-awesome-icon icon="times"></font-awesome-icon>
+          </button>
         </div>
+        <div v-if="isBottleneck(data.kind.toUpperCase())">
+          <div
+            @click="showDetails()"
+            class="mt-auto mb-auto text-info text-left"
+          >
+            <font-awesome-icon
+              v-if="show"
+              icon="angle-up"
+              fixed-width
+            ></font-awesome-icon>
+            <font-awesome-icon
+              v-if="loading"
+              icon="spinner"
+              fixed-width
+            ></font-awesome-icon>
+            <font-awesome-icon
+              v-if="!show && !loading"
+              icon="angle-down"
+              fixed-width
+            ></font-awesome-icon>
+          </div>
+        </div>
+        <div v-else class="empty"></div>
       </div>
-      <div v-else class="empty"></div>
+    </div>
+    <div class="d-flex flex-row" v-if="show">
+      <a
+        class="small"
+        v-for="(bottleneck, index) in data.summary.bottlenecks"
+        :key="index"
+        href="#"
+        >{{ bottleneck }}</a
+      >
     </div>
   </div>
 </template>