diff client/src/components/importconfiguration/types/Soundingresults.vue @ 3281:439e1865a2d2

client: define stretches/imports: code cleanup / style improvements
author Markus Kottlaender <markus@intevation.de>
date Thu, 16 May 2019 09:52:32 +0200
parents cb3b31566e48
children c1c85e70a368
line wrap: on
line diff
--- a/client/src/components/importconfiguration/types/Soundingresults.vue	Thu May 16 09:35:37 2019 +0200
+++ b/client/src/components/importconfiguration/types/Soundingresults.vue	Thu May 16 09:52:32 2019 +0200
@@ -1,19 +1,19 @@
 <template>
   <div>
-    <div v-if="editState" class="mb-3">
+    <div v-if="editState" class="mb-2 p-2">
       <div
         v-for="(message, index) in messages"
         :key="index"
-        class="alert alert-warning small rounded-0"
+        class="alert alert-warning small"
       >
         {{ message }}
       </div>
-      <div class="d-flex flex-row w-100">
+      <div class="d-flex w-100">
         <div class="w-50 mr-2 text-left">
           <small class="text-muted">
             <translate>Bottleneck</translate>
           </small>
-          <select v-model="bottleneck" class="custom-select">
+          <select v-model="bottleneck" class="custom-select custom-select-sm">
             <option
               v-for="bottleneck in availableBottlenecks"
               :value="bottleneck"
@@ -33,7 +33,7 @@
             <translate>Projection</translate>&nbsp;(EPSG)
           </small>
           <input
-            class="form-control"
+            class="form-control form-control-sm"
             v-model="projection"
             value="4326"
             placeholder="e.g. 4326"
@@ -53,7 +53,7 @@
           </small>
           <select
             v-model="depthReference"
-            class="custom-select"
+            class="custom-select custom-select-sm"
             id="depthreference"
           >
             <option
@@ -73,7 +73,7 @@
           <input
             id="importdate"
             type="date"
-            class="form-control"
+            class="form-control form-control-sm"
             placeholder="Date of import"
             aria-label="bottleneck"
             aria-describedby="bottlenecklabel"
@@ -87,8 +87,8 @@
         </div>
       </div>
     </div>
-    <div class="mt-3">
-      <div v-if="uploadState" class="input-group">
+    <div class="mt-2">
+      <div v-if="uploadState" class="input-group px-2">
         <div :key="1" class="flex-column mr-4">
           <div class="flex-row text-left">
             <small class="text-muted">
@@ -122,33 +122,40 @@
           </label>
         </div>
       </div>
-      <div class="d-flex justify-content-between mt-3" v-if="editState">
-        <a
-          download="meta.json"
-          :href="dataLink"
-          :class="[
-            'btn btn-outline-info',
-            { disabled: !bottleneck || !importDate || !depthReference }
-          ]"
+      <div
+        class="d-flex justify-content-between mt-2 p-2 border-top"
+        v-if="editState"
+      >
+        <button
+          :key="1"
+          @click="deleteTempData()"
+          class="btn btn-sm btn-warning"
         >
-          <translate>Download Meta.json</translate>
-        </a>
+          Back
+        </button>
         <span>
+          <a
+            download="meta.json"
+            :href="dataLink"
+            :class="[
+              'btn btn-sm btn-outline-info',
+              { disabled: !bottleneck || !importDate || !depthReference }
+            ]"
+          >
+            <translate>Download Meta.json</translate>
+          </a>
           <button
             :disabled="disableUploadButton"
             @click="confirm"
-            class="btn btn-info mr-2"
+            class="btn btn-sm btn-info ml-2"
             type="button"
           >
             <translate>Confirm</translate>
           </button>
-          <button :key="1" @click="deleteTempData()" class="btn btn-warning">
-            Back
-          </button>
         </span>
       </div>
-      <div v-if="uploadState" class="d-flex flex-row-100 mt-3">
-        <button :key="2" @click="back()" class="ml-auto btn btn-warning">
+      <div v-if="uploadState" class="d-flex mt-2 p-2 border-top">
+        <button :key="2" @click="back()" class="btn btn-sm btn-warning">
           Back
         </button>
       </div>