changeset 1148:67c45d2d1aad

feat: Import sounding results UI improvements. Layout cleanup.
author Thomas Junk <thomas.junk@intevation.de>
date Tue, 13 Nov 2018 11:23:03 +0100
parents c84dbc608b85
children cc854d5dc96e
files client/src/imports/Imports.vue
diffstat 1 files changed, 17 insertions(+), 10 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/imports/Imports.vue	Tue Nov 13 11:12:54 2018 +0100
+++ b/client/src/imports/Imports.vue	Tue Nov 13 11:23:03 2018 +0100
@@ -6,7 +6,7 @@
                     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 mb-5">
                         <div class="input-group-prepend">
                             <span class="input-group-text" id="bottlenecklabel">Bottleneck</span>
                         </div>
@@ -19,7 +19,7 @@
                             v-model="bottleneck"
                         >
                     </div>
-                    <div class="input-group mb-4">
+                    <div class="input-group mb-5">
                         <div class="input-group-prepend">
                             <span class="input-group-text" id="importdatelabel">Date</span>
                         </div>
@@ -32,7 +32,7 @@
                             v-model="importDate"
                         >
                     </div>
-                    <div class="input-group mb-3">
+                    <div class="input-group mb-5">
                         <div class="input-group-prepend">
                             <label class="input-group-text" for="inputGroupSelect01">Depth reference</label>
                         </div>
@@ -43,21 +43,19 @@
                             >{{option}}</option>
                         </select>
                     </div>
-                    <div class="input-group">
+                    <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>
                         </div>
-                        <div class="input-group-append">
-                            <button class="btn btn-outline-info" type="button">Upload!</button>
-                        </div>
                     </div>
                     <div class="downloadbtn">
                         <a
                             download="meta.json"
                             :href="dataLink "
-                            class="btn btn-info text-white"
+                            class="btn btn-outline-info"
                         >Generate Meta.json</a>
+                        <button class="btn btn-info" type="button">Upload!</button>
                     </div>
                 </div>
             </div>
@@ -116,17 +114,22 @@
 </script>
 
 <style lang="scss" scoped>
+.input-group-text {
+  width: 10rem;
+}
 .importcard {
   height: 100%;
 }
 .importcardbody {
   position: relative;
   height: 100%;
+  width: 90%;
+  margin: auto;
 }
 .imports {
   background-color: white;
-  width: 60rem;
-  height: 40rem;
+  width: 40rem;
+  height: 30rem;
   margin-left: auto;
   margin-right: auto;
   margin-top: $offset;
@@ -136,4 +139,8 @@
   right: $offset;
   bottom: $offset;
 }
+
+.downloadbtn a {
+  margin-right: $offset;
+}
 </style>