# HG changeset patch
# User Thomas Junk <thomas.junk@intevation.de>
# Date 1542106214 -3600
# Node ID a499f450420e2808b2fbb202f3d51ef06635f60e
# Parent  7acd24889f1df8a6979b5251415afb0ce2f288f1
feat: Import sounding results UI improvements

diff -r 7acd24889f1d -r a499f450420e client/src/imports/Imports.vue
--- a/client/src/imports/Imports.vue	Tue Nov 13 11:44:46 2018 +0100
+++ b/client/src/imports/Imports.vue	Tue Nov 13 11:50:14 2018 +0100
@@ -6,11 +6,16 @@
                     class="card-header shadow-sm text-white bg-info mb-3"
                 >Import of sounding results</div>
                 <div class="card-body importcardbody">
-                    <div class="input-group mb-4">
-                        <div class="input-group-prepend">
-                            <span class="input-group-text" id="bottlenecklabel">Bottleneck</span>
+                    <div class="d-flex flex-row input-group mb-4">
+                        <div class="">
+                            <label
+                                for="bottleneck"
+                                class="label-text"
+                                id="bottlenecklabel"
+                            >Bottleneck</label>
                         </div>
                         <input
+                            id="bottleneck"
                             type="text"
                             class="form-control"
                             placeholder="Name of Bottleneck"
@@ -19,12 +24,13 @@
                             v-model="bottleneck"
                         >
                     </div>
-                    <div class="input-group mb-4">
-                        <div class="input-group-prepend">
-                            <span class="input-group-text" id="importdatelabel">Date</span>
+                    <div class="d-flex flex-row input-group mb-4">
+                        <div class="">
+                            <label class="label-text" for="importdate" id="importdatelabel">Date</label>
                         </div>
                         <input
-                            type="text"
+                            id="importdate"
+                            type="date"
                             class="form-control"
                             placeholder="Date of import"
                             aria-label="bottleneck"
@@ -32,9 +38,9 @@
                             v-model="importDate"
                         >
                     </div>
-                    <div class="input-group mb-4">
-                        <div class="input-group-prepend">
-                            <label class="input-group-text" for="inputGroupSelect01">Depth reference</label>
+                    <div class="d-flex flex-row input-group mb-5">
+                        <div class="">
+                            <label class="label-text" for="depthreference">Depth reference</label>
                         </div>
                         <select v-model="depthReference" class="custom-select" id="depthreference">
                             <option
@@ -43,7 +49,7 @@
                             >{{option}}</option>
                         </select>
                     </div>
-                    <div class="input-group mb-4">
+                    <div class="input-group mb-5">
                         <div class="custom-file">
                             <input type="file" class="custom-file-input" id="inputGroupFile04">
                             <label class="custom-file-label" for="inputGroupFile04">Choose file</label>
@@ -114,8 +120,10 @@
 </script>
 
 <style lang="scss" scoped>
-.input-group-text {
+.label-text {
   width: 10rem;
+  text-align: left;
+  line-height: 2.25rem;
 }
 .importcard {
   height: 100%;
@@ -129,7 +137,7 @@
 .imports {
   background-color: white;
   width: 40rem;
-  height: 25rem;
+  height: 28rem;
   margin-left: auto;
   margin-right: auto;
   margin-top: $offset;