# HG changeset patch
# User Thomas Junk <thomas.junk@intevation.de>
# Date 1542642604 -3600
# Node ID a20fcfacda988051d78846ae197e3dbaee4f3be8
# Parent  a8b682f3d13d54d75ded5d23638f5db813d8f00d
staging layout

diff -r a8b682f3d13d -r a20fcfacda98 client/src/staging/Staging.vue
--- a/client/src/staging/Staging.vue	Mon Nov 19 16:23:14 2018 +0100
+++ b/client/src/staging/Staging.vue	Mon Nov 19 16:50:04 2018 +0100
@@ -11,40 +11,43 @@
                 <h4>Staging area</h4>
                 <hr>
             </div>
-            <div class="d-flex flex-row input-group mb-4">
-                <table class="table">
+            <div class="d-flex flex-row input-group mb-5">
+                <table class="table mb-4">
                     <thead>
                         <tr>
                             <th>Name</th>
-                            <th>Location</th>
                             <th>Datatype</th>
                             <th>Importdate</th>
                             <th>ImportID</th>
                             <th>&nbsp;</th>
+                            <th>&nbsp;</th>
                         </tr>
                     </thead>
                     <tbody>
                         <tr v-for="data in filteredData" :key="data.id">
-                            <td>{{data.name}}</td>
                             <td>
-                                <a
-                                    @click="zoomTo(data.location)"
-                                    href="#"
-                                >{{data.location[0]}}, {{data.location[1]}}</a>
+                                <a @click="zoomTo(data.location)" href="#">{{data.name}}</a>
                             </td>
                             <td>{{data.type}}</td>
                             <td>{{data.date}}</td>
                             <td>{{data.importID}}</td>
                             <td>
-                                <input
-                                    type="checkbox"
-                                    aria-label="Checkbox for following text input"
-                                >
+                                <button class="btn btn-outline-info">
+                                    <i class="fa fa-thumbs-o-up"></i>
+                                </button>
+                            </td>
+                            <td>
+                                <button class="btn btn-outline-info">
+                                    <i class="fa fa-thumbs-o-down"></i>
+                                </button>
                             </td>
                         </tr>
                     </tbody>
                 </table>
             </div>
+            <div class="confirmbutton">
+                <button class="btn btn-info">Confirm</button>
+            </div>
         </div>
     </div>
 </template>
@@ -56,7 +59,7 @@
   {
     id: 1,
     name: "B1",
-    date: "2018-11-19",
+    date: "2018-11-19 10:23",
     location: [16.5364, 48.1471],
     status: "Not approved",
     importID: "123456789",
@@ -65,7 +68,7 @@
   {
     id: 2,
     name: "B2",
-    date: "2018-11-19",
+    date: "2018-11-19 10:24",
     location: [16.5364, 48.1472],
     status: "Not approved",
     importID: "123456789",
@@ -74,7 +77,7 @@
   {
     id: 3,
     name: "s1",
-    date: "2018-11-13",
+    date: "2018-11-13 10:25",
     location: [16.5364, 48.1473],
     status: "Not approved",
     importID: "987654321",
@@ -83,7 +86,7 @@
   {
     id: 4,
     name: "s2",
-    date: "2018-11-13",
+    date: "2018-11-13 10:26",
     location: [16.5364, 48.1474],
     status: "Not approved",
     importID: "987654321",
@@ -153,4 +156,9 @@
   border-top: 0px !important
   text-align: left
   padding: 0.5rem !important
+
+.confirmbutton
+  position: absolute
+  bottom: $offset
+  right: $large-offset
 </style>