--- a/client/src/components/ImportSoundingresults.vue	Mon Dec 17 15:54:27 2018 +0100
+++ b/client/src/components/ImportSoundingresults.vue	Mon Dec 17 16:48:09 2018 +0100
@@ -1,135 +1,142 @@
 <template>
-  <div>
-    <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center">
-      <font-awesome-icon icon="upload" class="mr-2"></font-awesome-icon>
-      <translate>Import Soundingresults</translate>
-    </h6>
-    <div v-if="editState" class="ml-auto mr-auto mt-4 w-95">
-      <div class="d-flex flex-column">
-        <div class="d-flex flex-row">
-          <div class="mt-1 text-left w-50 ml-2 mr-4">
-            <small class="text-muted">
-              <translate>Bottleneck</translate>
+  <div class="main d-flex flex-column">
+    <div class="d-flex flex-row">
+      <Spacer></Spacer>
+      <div class="card shadow-xs mt-3 mr-3 w-100 importsoundingresultscard">
+        <h6
+          class="mb-0 py-2 px-3 border-bottom d-flex text-info align-items-center"
+        >
+          <font-awesome-icon icon="upload" class="mr-2"></font-awesome-icon>
+          <translate class="headline">Import Soundingresults</translate>
+        </h6>
+        <div v-if="editState" class="ml-auto mr-auto mt-4 w-95">
+          <div class="d-flex flex-column">
+            <div class="d-flex flex-row">
+              <div class="mt-1 text-left w-50 ml-2 mr-4">
+                <small class="text-muted">
+                  <translate>Bottleneck</translate>
+                </small>
+                <select v-model="bottleneck" class="custom-select">
+                  <option
+                    v-for="bottleneck in availableBottlenecks"
+                    :key="bottleneck"
+                    >{{ bottleneck }}</option
+                  >
+                </select>
+                <span class="text-danger">
+                  <small v-if="!bottleneck">
+                    <translate>Please select a bottleneck</translate>
+                  </small>
+                </span>
+              </div>
+              <div class="d-flex flex-column mt-1 text-left w-50 mr-2">
+                <small class="text-muted">
+                  <translate>Projection</translate>&nbsp;(EPSG)
+                </small>
+                <input
+                  class="form-control"
+                  v-model="projection"
+                  value="4326"
+                  placeholder="e.g. 4326"
+                  type="number"
+                />
+                <span class="text-left text-danger">
+                  <small v-if="!projection">
+                    <translate>Please enter a projection</translate>
+                  </small>
+                </span>
+              </div>
+            </div>
+            <div class="d-flex flex-row">
+              <div class="mt-1 text-left w-50 ml-2 mr-4">
+                <small class="text-muted">
+                  <translate>Depthreference</translate>
+                </small>
+                <select
+                  v-model="depthReference"
+                  class="custom-select"
+                  id="depthreference"
+                >
+                  <option
+                    v-for="option in this.$options.depthReferenceOptions"
+                    :key="option"
+                    >{{ option }}</option
+                  >
+                </select>
+                <span class="text-left text-danger">
+                  <small v-if="!depthReference">
+                    <translate>Please enter a reference</translate>
+                  </small>
+                </span>
+              </div>
+              <div class="mt-1 text-left w-50 mr-2">
+                <small class="text-muted"> <translate>Date</translate> </small>
+                <input
+                  id="importdate"
+                  type="date"
+                  class="form-control"
+                  placeholder="Date of import"
+                  aria-label="bottleneck"
+                  aria-describedby="bottlenecklabel"
+                  v-model="importDate"
+                />
+                <span class="text-left text-danger">
+                  <small v-if="!importDate">
+                    <translate>Please enter a date</translate>
+                  </small>
+                </span>
+              </div>
+            </div>
+          </div>
+          <div class="ml-2 mt-2 text-left">
+            <small v-for="(message, index) in messages" :key="index">
+              {{ message }}
             </small>
-            <select v-model="bottleneck" class="custom-select">
-              <option
-                v-for="bottleneck in availableBottlenecks"
-                :key="bottleneck"
-                >{{ bottleneck }}</option
-              >
-            </select>
-            <span class="text-danger">
-              <small v-if="!bottleneck">
-                <translate>Please select a bottleneck</translate>
-              </small>
-            </span>
-          </div>
-          <div class="d-flex flex-column mt-1 text-left w-50 mr-2">
-            <small class="text-muted">
-              <translate>Projection</translate>&nbsp;(EPSG)
-            </small>
-            <input
-              class="form-control"
-              v-model="projection"
-              value="4326"
-              placeholder="e.g. 4326"
-              type="number"
-            />
-            <span class="text-left text-danger">
-              <small v-if="!projection">
-                <translate>Please enter a projection</translate>
-              </small>
-            </span>
           </div>
         </div>
-        <div class="d-flex flex-row">
-          <div class="mt-1 text-left w-50 ml-2 mr-4">
-            <small class="text-muted">
-              <translate>Depthreference</translate>
-            </small>
-            <select
-              v-model="depthReference"
-              class="custom-select"
-              id="depthreference"
+        <div class="w-95 ml-auto mr-auto mt-4 mb-4">
+          <div v-if="uploadState" class="d-flex flex-row input-group mb-4">
+            <div class="custom-file">
+              <input
+                accept=".zip"
+                type="file"
+                @change="fileSelected"
+                class="custom-file-input"
+                id="uploadFile"
+              />
+              <label class="custom-file-label" for="uploadFile">
+                {{ uploadLabel }}
+              </label>
+            </div>
+          </div>
+          <div class="buttons text-right">
+            <a
+              v-if="editState"
+              download="meta.json"
+              :href="dataLink"
+              class="btn btn-outline-info pull-left mt-4"
             >
-              <option
-                v-for="option in this.$options.depthReferenceOptions"
-                :key="option"
-                >{{ option }}</option
-              >
-            </select>
-            <span class="text-left text-danger">
-              <small v-if="!depthReference">
-                <translate>Please enter a reference</translate>
-              </small>
-            </span>
-          </div>
-          <div class="mt-1 text-left w-50 mr-2">
-            <small class="text-muted"> <translate>Date</translate> </small>
-            <input
-              id="importdate"
-              type="date"
-              class="form-control"
-              placeholder="Date of import"
-              aria-label="bottleneck"
-              aria-describedby="bottlenecklabel"
-              v-model="importDate"
-            />
-            <span class="text-left text-danger">
-              <small v-if="!importDate">
-                <translate>Please enter a date</translate>
-              </small>
-            </span>
+              <translate>Download Meta.json</translate>
+            </a>
+            <button
+              v-if="editState"
+              @click="deleteTempData"
+              class="btn btn-danger mt-4"
+              type="button"
+            >
+              <translate>Cancel Upload</translate>
+            </button>
+            <button
+              :disabled="disableUploadButton"
+              @click="submit"
+              class="btn btn-info mt-4"
+              type="button"
+            >
+              {{ uploadState ? Upload : Confirm }}
+            </button>
           </div>
         </div>
       </div>
-      <div class="ml-2 mt-2 text-left">
-        <small v-for="(message, index) in messages" :key="index">
-          {{ message }}
-        </small>
-      </div>
-    </div>
-    <div class="w-95 ml-auto mr-auto mt-4 mb-4">
-      <div v-if="uploadState" class="d-flex flex-row input-group mb-4">
-        <div class="custom-file">
-          <input
-            accept=".zip"
-            type="file"
-            @change="fileSelected"
-            class="custom-file-input"
-            id="uploadFile"
-          />
-          <label class="custom-file-label" for="uploadFile">
-            {{ uploadLabel }}
-          </label>
-        </div>
-      </div>
-      <div class="buttons text-right">
-        <a
-          v-if="editState"
-          download="meta.json"
-          :href="dataLink"
-          class="btn btn-outline-info pull-left"
-        >
-          <translate>Download Meta.json</translate>
-        </a>
-        <button
-          v-if="editState"
-          @click="deleteTempData"
-          class="btn btn-danger"
-          type="button"
-        >
-          <translate>Cancel Upload</translate>
-        </button>
-        <button
-          :disabled="disableUploadButton"
-          @click="submit"
-          class="btn btn-info"
-          type="button"
-        >
-          {{ uploadState ? Upload : Confirm }}
-        </button>
-      </div>
     </div>
   </div>
 </template>
@@ -152,11 +159,15 @@
 import { HTTP } from "../lib/http";
 import { displayError, displayInfo } from "../lib/errors.js";
 import { mapState } from "vuex";
+import Spacer from "./Spacer";
 
 const IMPORTSTATE = { UPLOAD: "UPLOAD", EDIT: "EDIT" };
 
 export default {
   name: "imports",
+  components: {
+    Spacer
+  },
   data() {
     return {
       importState: IMPORTSTATE.UPLOAD,
@@ -355,6 +366,10 @@
 </script>
 
 <style lang="scss" scoped>
+.importsoundingresultscard {
+  height: 100%;
+}
+
 .projectionLabel {
   margin-left: $small-offset;
 }