# HG changeset patch
# User Thomas Junk <thomas.junk@intevation.de>
# Date 1542637500 -3600
# Node ID b0c98a31cb4e5712f01b59706dcdd8a5c1d7f9e3
# Parent  ba8cd80d68b6689ff7efe0eb7484190a330fd25a
staging layout

diff -r ba8cd80d68b6 -r b0c98a31cb4e client/src/staging/Staging.vue
--- a/client/src/staging/Staging.vue	Mon Nov 19 15:20:22 2018 +0100
+++ b/client/src/staging/Staging.vue	Mon Nov 19 15:25:00 2018 +0100
@@ -1,8 +1,5 @@
 <template>
-    <div
-        v-if="showStagingArea"
-        class="ui-element staging-card bg-white mx-auto rounded position-relative"
-    >
+    <div v-if="showStagingArea" :class="stagingAreaStyle">
         <div class="p-3">
             <div
                 @click="$store.commit('application/showStagingArea', !showStagingArea);"
@@ -19,6 +16,7 @@
                     <thead>
                         <tr>
                             <th>Name</th>
+                            <th>Location</th>
                             <th>Datatype</th>
                             <th>Importdate</th>
                             <th>ImportID</th>
@@ -28,6 +26,7 @@
                     <tbody>
                         <tr v-for="data in filteredData" :key="data.id">
                             <td>{{data.name}}</td>
+                            <td>{{data.location}}</td>
                             <td>{{data.date}}</td>
                             <td>{{data.type}}</td>
                             <td>{{data.importID}}</td>
@@ -53,6 +52,7 @@
     id: 1,
     name: "B1",
     date: "2018-11-19",
+    location: "bla",
     status: "Not approved",
     importID: "123456789",
     type: "bottleneck"
@@ -61,6 +61,7 @@
     id: 2,
     name: "B2",
     date: "2018-11-19",
+    location: "bla",
     status: "Not approved",
     importID: "123456789",
     type: "bottleneck"
@@ -69,6 +70,7 @@
     id: 3,
     name: "s1",
     date: "2018-11-13",
+    location: "bla",
     status: "Not approved",
     importID: "987654321",
     type: "soundingresult"
@@ -77,6 +79,7 @@
     id: 4,
     name: "s2",
     date: "2018-11-13",
+    location: "bla",
     status: "Not approved",
     importID: "987654321",
     type: "soundingresult"
@@ -88,6 +91,15 @@
     ...mapState("application", ["showStagingArea"]),
     filteredData() {
       return demodata;
+    },
+    stagingAreaStyle() {
+      return [
+        "ui-element staging-card bg-white mx-auto rounded position-relative",
+        {
+          stagingcollapsed: !this.showStagingArea,
+          stagingextended: this.showStagingArea
+        }
+      ];
     }
   }
 };
@@ -101,11 +113,25 @@
   height: $icon-width
   width: $icon-height
 
+.stagingcollapsed
+  width: 0
+  height: 0
+  transition: $transition-fast
+
+.stagingextended
+  min-width: 600px
+
 .staging-card
-  width: 30rem
-  height: 28rem
+  position: relative
+  background-color: #ffffff
+  padding-top: $offset
   opacity: $slight-transparent
-  min-width: 600px
+  transition: left 0.3s ease
+  overflow: hidden
+  background: #fff
+  margin-left: $offset !important
+  margin-top: -$offset !important
+  width: 90%
 
 .table th,
 td