# HG changeset patch
# User Markus Kottlaender <markus@intevation.de>
# Date 1557993152 -7200
# Node ID 439e1865a2d2cad83702e8f6aab8c80b4a44297f
# Parent  8fb81b45085fcaddba705f4d15986eea9a7f821c
client: define stretches/imports: code cleanup / style improvements

diff -r 8fb81b45085f -r 439e1865a2d2 client/src/components/importconfiguration/Import.vue
--- a/client/src/components/importconfiguration/Import.vue	Thu May 16 09:35:37 2019 +0200
+++ b/client/src/components/importconfiguration/Import.vue	Thu May 16 09:52:32 2019 +0200
@@ -1,7 +1,7 @@
 <template>
   <div>
     <UIBoxHeader icon="clock" :title="title" :closeCallback="$parent.close" />
-    <div v-if="mode === $options.MODES.LIST" class="mb-3">
+    <div v-if="mode === $options.MODES.LIST">
       <UISpinnerOverlay v-if="loading" />
       <UITableHeader
         :columns="[
@@ -17,13 +17,13 @@
         :isActive="item => currentSchedule && item.id === currentSchedule.id"
       >
         <template v-slot:row="{ item: schedule }">
-          <div class="table-cell col-1">{{ schedule.id }}</div>
-          <div class="table-cell col-2">
+          <div class="table-cell py-1 col-1">{{ schedule.id }}</div>
+          <div class="table-cell py-1 col-2">
             {{ schedule.kind.toUpperCase() }}
           </div>
-          <div class="table-cell col-2">{{ schedule.user }}</div>
-          <div class="table-cell col-2">{{ schedule.config.cron }}</div>
-          <div class="table-cell col-2">
+          <div class="table-cell py-1 col-2">{{ schedule.user }}</div>
+          <div class="table-cell py-1 col-2">{{ schedule.config.cron }}</div>
+          <div class="table-cell py-1 col-2">
             <font-awesome-icon
               v-if="schedule.config['send-email']"
               class="fa-fw mr-2"
@@ -31,7 +31,7 @@
               icon="check"
             />
           </div>
-          <div class="table-cell col justify-content-end">
+          <div class="table-cell py-1 col justify-content-end">
             <button
               @click="triggerManualImport(schedule.id)"
               class="btn btn-xs btn-dark mr-1"
@@ -58,21 +58,17 @@
       </UITableBody>
     </div>
     <ImportDetails v-if="mode === $options.MODES.EDIT"></ImportDetails>
-    <div class="d-flex flex-row w-100 mb-3">
-      <button
-        :key="3"
-        v-if="mode === $options.MODES.LIST && !isOnetime"
-        @click="newConfiguration()"
-        class="ml-auto btn btn-info mr-3"
-      >
+    <div
+      class="text-right border-top p-2"
+      v-if="mode === $options.MODES.LIST && !isOnetime"
+    >
+      <button :key="3" @click="newConfiguration()" class="btn btn-sm btn-info">
         <translate>New import</translate>
       </button>
     </div>
   </div>
 </template>
 
-<style></style>
-
 <script>
 /* This is Free Software under GNU Affero General Public License v >= 3.0
  * without warranty, see README.md and license for details.
diff -r 8fb81b45085f -r 439e1865a2d2 client/src/components/importconfiguration/ImportDetails.vue
--- a/client/src/components/importconfiguration/ImportDetails.vue	Thu May 16 09:35:37 2019 +0200
+++ b/client/src/components/importconfiguration/ImportDetails.vue	Thu May 16 09:52:32 2019 +0200
@@ -1,68 +1,76 @@
 <template>
-  <div class="mt-3 mb-3 mr-3 ml-3 text-left">
-    <small class="text-muted">
-      <translate>Import type</translate>
-    </small>
-    <select v-model="Import" class="custom-select" id="importtype">
-      <optgroup :label="regularLabel">
-        <option :value="$options.IMPORTTYPES.BOTTLENECK">
-          <translate>Bottlenecks</translate>
-        </option>
-        <option :value="$options.IMPORTTYPES.WATERWAYAXIS">
-          <translate>Waterway axis</translate>
-        </option>
-        <option :value="$options.IMPORTTYPES.GAUGEMEASUREMENT">
-          <translate>Gauge measurement</translate>
-        </option>
-        <option :value="$options.IMPORTTYPES.FAIRWAYAVAILABILITY">
-          <translate>Available fairway depths</translate>
-        </option>
-        <option :value="$options.IMPORTTYPES.WATERWAYAREA">
-          <translate>Waterway area</translate>
-        </option>
-        <option :value="$options.IMPORTTYPES.FAIRWAYDIMENSION">
-          <translate>Fairway dimension</translate>
-        </option>
-        <option :value="$options.IMPORTTYPES.WATERWAYGAUGES">
-          <translate>Waterway gauges</translate>
-        </option>
-        <option :value="$options.IMPORTTYPES.DISTANCEMARKSVIRTUAL">
-          <translate>Distance marks virtual</translate>
-        </option>
-        <option :value="$options.IMPORTTYPES.DISTANCEMARKSASHORE">
-          <translate>Distance marks ashore</translate>
-        </option>
-      </optgroup>
-      <optgroup :label="onetimeLabel">
-        <option :value="$options.IMPORTTYPES.SOUNDINGRESULTS">
-          <translate>Soundingresults</translate>
-        </option>
-        <option :value="$options.IMPORTTYPES.APPROVEDGAUGEMEASUREMENTS">
-          <translate>Approved Gaugemeasurements</translate>
-        </option>
-        <option :value="$options.IMPORTTYPES.WATERWAYPROFILES">
-          <translate>Waterway Profiles</translate>
-        </option>
-      </optgroup>
-    </select>
-    <ApprovedGaugeMeasurement
-      v-if="Import === $options.IMPORTTYPES.APPROVEDGAUGEMEASUREMENTS"
-      class="mt-1"
-    />
-    <WaterwayProfiles
-      class="mt-1"
-      v-if="Import === $options.IMPORTTYPES.WATERWAYPROFILES"
-    />
-    <SoundingResults
-      class="mt-1"
-      v-if="Import === $options.IMPORTTYPES.SOUNDINGRESULTS"
-    />
-    <ScheduledImports
-      class="mt-1"
-      v-if="Import && !isOnetime"
-    ></ScheduledImports>
-    <div v-if="!Import" class="d-flex flex-row w-100 mt-3">
-      <button :key="1" @click="back()" class="ml-auto btn btn-warning">
+  <div class="text-left">
+    <div>
+      <div class="p-2 pb-3 border-bottom">
+        <small class="text-muted">
+          <translate>Import type</translate>
+        </small>
+        <select
+          v-model="Import"
+          class="custom-select custom-select-sm"
+          id="importtype"
+        >
+          <optgroup :label="regularLabel">
+            <option :value="$options.IMPORTTYPES.BOTTLENECK">
+              <translate>Bottlenecks</translate>
+            </option>
+            <option :value="$options.IMPORTTYPES.WATERWAYAXIS">
+              <translate>Waterway axis</translate>
+            </option>
+            <option :value="$options.IMPORTTYPES.GAUGEMEASUREMENT">
+              <translate>Gauge measurement</translate>
+            </option>
+            <option :value="$options.IMPORTTYPES.FAIRWAYAVAILABILITY">
+              <translate>Available fairway depths</translate>
+            </option>
+            <option :value="$options.IMPORTTYPES.WATERWAYAREA">
+              <translate>Waterway area</translate>
+            </option>
+            <option :value="$options.IMPORTTYPES.FAIRWAYDIMENSION">
+              <translate>Fairway dimension</translate>
+            </option>
+            <option :value="$options.IMPORTTYPES.WATERWAYGAUGES">
+              <translate>Waterway gauges</translate>
+            </option>
+            <option :value="$options.IMPORTTYPES.DISTANCEMARKSVIRTUAL">
+              <translate>Distance marks virtual</translate>
+            </option>
+            <option :value="$options.IMPORTTYPES.DISTANCEMARKSASHORE">
+              <translate>Distance marks ashore</translate>
+            </option>
+          </optgroup>
+          <optgroup :label="onetimeLabel">
+            <option :value="$options.IMPORTTYPES.SOUNDINGRESULTS">
+              <translate>Soundingresults</translate>
+            </option>
+            <option :value="$options.IMPORTTYPES.APPROVEDGAUGEMEASUREMENTS">
+              <translate>Approved Gaugemeasurements</translate>
+            </option>
+            <option :value="$options.IMPORTTYPES.WATERWAYPROFILES">
+              <translate>Waterway Profiles</translate>
+            </option>
+          </optgroup>
+        </select>
+      </div>
+      <ApprovedGaugeMeasurement
+        v-if="Import === $options.IMPORTTYPES.APPROVEDGAUGEMEASUREMENTS"
+        class="mt-1"
+      />
+      <WaterwayProfiles
+        class="mt-1"
+        v-if="Import === $options.IMPORTTYPES.WATERWAYPROFILES"
+      />
+      <SoundingResults
+        class="mt-1"
+        v-if="Import === $options.IMPORTTYPES.SOUNDINGRESULTS"
+      />
+      <ScheduledImports
+        class="mt-1"
+        v-if="Import && !isOnetime"
+      ></ScheduledImports>
+    </div>
+    <div v-if="!Import" class="p-2">
+      <button :key="1" @click="back()" class="btn btn-sm btn-warning">
         Back
       </button>
     </div>
diff -r 8fb81b45085f -r 439e1865a2d2 client/src/components/importconfiguration/ScheduledImports.vue
--- a/client/src/components/importconfiguration/ScheduledImports.vue	Thu May 16 09:35:37 2019 +0200
+++ b/client/src/components/importconfiguration/ScheduledImports.vue	Thu May 16 09:52:32 2019 +0200
@@ -1,12 +1,10 @@
 <template>
   <form @submit.prevent="save" class="w-100">
-    <div class="d-flex flex-row">
-      <div :key="1" class="flex-column mr-4">
-        <div class="flex-row text-left">
-          <small class="text-muted">
-            <translate>Email Notification</translate>
-          </small>
-        </div>
+    <div class="d-flex px-2">
+      <div :key="1" class="flex-column">
+        <small class="text-muted">
+          <translate>Email Notification</translate>
+        </small>
         <div class="flex-flex-row text-left">
           <toggle-button
             v-model="eMailNotification"
@@ -21,12 +19,14 @@
           />
         </div>
       </div>
-      <div :key="2" v-if="directImportAvailable" class="flex-column text-left">
-        <div>
-          <small class="text-muted">
-            <translate>Import via</translate>
-          </small>
-        </div>
+      <div
+        :key="2"
+        v-if="directImportAvailable"
+        class="flex-column text-left ml-3"
+      >
+        <small class="text-muted">
+          <translate>Import via</translate>
+        </small>
         <div>
           <!-- '#75c791' is the DEFAULT_COLOR_CHECKED
                   from vue-js-toggle-button as here both states are active -->
@@ -130,7 +130,7 @@
       :sortBy="sortBy"
     />
 
-    <div class="d-flex flex-row mt-3">
+    <div class="d-flex p-2">
       <template v-if="!directImport || !directImportAvailable">
         <div class="flex-column mr-4">
           <div class="flex-row text-left">
@@ -183,7 +183,7 @@
             <input
               style="width:120px;"
               v-model="trys"
-              class="mr-1 form-control"
+              class="mr-1 form-control form-control-sm"
               type="number"
             />
           </div>
@@ -198,33 +198,36 @@
             <input
               style="width:120px;"
               v-model="waitRetry"
-              class="ml-1 form-control"
+              class="ml-1 form-control form-control-sm"
             />
           </div>
         </div>
       </template>
     </div>
     <template v-if="!directImport || !directImportAvailable">
-      <div class="flex-column w-100 mr-2">
+      <div class="flex-column w-100 px-2 pb-3">
         <div class="flex-row text-left">
           <small class="text-muted">
             <translate>Schedule</translate>
           </small>
         </div>
         <div v-if="easyCron" class="text-left w-50">
-          <select :disabled="!scheduled" v-model="simple" class="form-control"
+          <select
+            :disabled="!scheduled"
+            v-model="simple"
+            class="form-control form-control-sm"
             ><option value="weekly"><translate>Weekly</translate></option>
             <option value="monthly"><translate>Monthly</translate> </option>
           </select>
         </div>
         <div v-if="!easyCron" class="text-left w-100">
           <div class="d-flex flex-row">
-            <h4 class="mt-auto mb-auto mr-2">{{ $options.EVERY }}</h4>
+            <div class="my-auto mr-2">{{ $options.EVERY }}</div>
             <select
               :disabled="!scheduled"
               style="width: 130px;"
               v-model="cronMode"
-              class="form-control"
+              class="form-control form-control-sm"
               @change="clearInputs"
             >
               <option :value="null"></option>
@@ -236,34 +239,38 @@
               >
             </select>
             <div v-if="cronMode == 'hour'" class="ml-1 d-flex flex-row">
-              <h4 class="mt-auto mb-auto">{{ $options.ON }}</h4>
+              <div class="mt-auto mb-auto">{{ $options.ON }}</div>
               <input
                 :disabled="!scheduled"
                 v-model="minutes"
-                class="cronfield ml-1 mr-1 form-control"
+                class="cronfield ml-1 mr-1 form-control form-control-sm"
                 type="number"
               />
-              <h4 class="mt-auto mb-auto">{{ $options.MINUTESPAST }}</h4>
+              <div class="mt-auto mb-auto">{{ $options.MINUTESPAST }}</div>
             </div>
             <div v-if="cronMode == 'day'" class="ml-1 d-flex flex-row">
-              <h4 class="mt-auto mb-auto">{{ $options.AT }}</h4>
+              <div class="mt-auto mb-auto">{{ $options.AT }}</div>
               <input
                 :disabled="!scheduled"
                 v-model="hour"
-                class="cronfield ml-1 mr-1 form-control"
+                class="cronfield ml-1 mr-1 form-control form-control-sm"
                 type="number"
               />
               <input
                 :disabled="!scheduled"
                 v-model="minutes"
-                class="cronfield ml-1 mr-1 form-control"
+                class="cronfield ml-1 mr-1 form-control form-control-sm"
                 type="number"
               />
-              <h4 class="mt-auto mb-auto">{{ $options.OCLOCK }}</h4>
+              <div class="mt-auto mb-auto">{{ $options.OCLOCK }}</div>
             </div>
             <div v-if="cronMode == 'week'" class="ml-1 d-flex flex-row">
-              <h4 class="ml-1 mr-1 mt-auto mb-auto">{{ $options.ON }}</h4>
-              <select :disabled="!scheduled" v-model="day" class="form-control">
+              <div class="ml-1 mr-1 mt-auto mb-auto">{{ $options.ON }}</div>
+              <select
+                :disabled="!scheduled"
+                v-model="day"
+                class="form-control form-control-sm"
+              >
                 <option
                   v-for="(option, key) in $options.DAYSOFWEEK"
                   :key="key"
@@ -271,56 +278,56 @@
                   >{{ option }}</option
                 >
               </select>
-              <h4 class="ml-1 mt-auto mb-auto">{{ $options.AT }}</h4>
+              <div class="ml-1 mt-auto mb-auto">{{ $options.AT }}</div>
               <input
                 :disabled="!scheduled"
                 v-model="hour"
-                class="cronfield ml-1 mr-1 form-control"
+                class="cronfield ml-1 mr-1 form-control form-control-sm"
                 type="number"
               />
               <input
                 :disabled="!scheduled"
                 v-model="minutes"
-                class="cronfield ml-1 mr-1 form-control"
+                class="cronfield ml-1 mr-1 form-control form-control-sm"
                 type="number"
               />
             </div>
             <div v-if="cronMode == 'month'" class="ml-1 d-flex flex-row">
-              <h4 class="ml-1 mt-auto mb-auto">{{ $options.ON }}</h4>
+              <div class="ml-1 mt-auto mb-auto">{{ $options.ON }}</div>
               <input
                 :disabled="!scheduled"
                 v-model="dayOfMonth"
-                class="cronfield ml-1 mr-1 form-control"
+                class="cronfield ml-1 mr-1 form-control form-control-sm"
                 type="number"
               />
-              <h4 class="mt-auto mb-auto">{{ $options.AT }}</h4>
+              <div class="mt-auto mb-auto">{{ $options.AT }}</div>
               <input
                 :disabled="!scheduled"
                 v-model="hour"
-                class="cronfield ml-1 mr-2 form-control"
+                class="cronfield ml-1 mr-2 form-control form-control-sm"
                 type="number"
               />
               <input
                 :disabled="!scheduled"
                 v-model="minutes"
-                class="cronfield ml-1 mr-2 form-control"
+                class="cronfield ml-1 mr-2 form-control form-control-sm"
                 type="number"
               />
-              <h4 class="mt-auto mb-auto">{{ $options.OCLOCK }}</h4>
+              <div class="mt-auto mb-auto">{{ $options.OCLOCK }}</div>
             </div>
             <div v-if="cronMode == 'year'" class="ml-1 d-flex flex-row">
-              <h4 class="ml-1 mt-auto mb-auto">{{ $options.ON }}</h4>
+              <div class="ml-1 mt-auto mb-auto">{{ $options.ON }}</div>
               <input
                 :disabled="!scheduled"
                 v-model="dayOfMonth"
-                class="cronfield ml-1 mr-1 form-control"
+                class="cronfield ml-1 mr-1 form-control form-control-sm"
                 type="number"
               />
-              <h4 class="mt-auto mb-auto">{{ $options.OF }}</h4>
+              <div class="mt-auto mb-auto">{{ $options.OF }}</div>
               <select
                 :disabled="!scheduled"
                 v-model="month"
-                class="ml-1 mr-1 form-control"
+                class="ml-1 mr-1 form-control form-control-sm"
               >
                 <option
                   v-for="(option, key) in $options.MONTHS"
@@ -329,28 +336,28 @@
                   >{{ option }}</option
                 >
               </select>
-              <h4 class="mt-auto mb-auto">{{ $options.ON }}</h4>
+              <div class="mt-auto mb-auto">{{ $options.ON }}</div>
               <input
                 :disabled="!scheduled"
                 v-model="hour"
-                class="cronfield ml-1 mr-1 form-control"
+                class="cronfield ml-1 mr-1 form-control form-control-sm"
                 type="number"
               />
               <input
                 :disabled="!scheduled"
                 v-model="minutes"
-                class="cronfield ml-1 mr-1 form-control"
+                class="cronfield ml-1 mr-1 form-control form-control-sm"
                 type="number"
               />
             </div>
           </div>
-          <div class="mt-3 w-50 d-flex flex-row">
-            <h5 class="mt-auto mb-auto mr-2">
+          <div class="mt-3 w-50 d-flex">
+            <div class="my-auto mr-2">
               <translate>Cronstring</translate>
-            </h5>
+            </div>
             <input
               :disabled="!scheduled"
-              class="form-control"
+              class="form-control form-control-sm"
               v-model="cronString"
               type="text"
             />
@@ -358,14 +365,14 @@
         </div>
       </div>
     </template>
-    <div v-else class="d-flex flex-row text-left">
-      <div class="mt-3 mb-3 flex-column w-100">
+    <div v-else class="d-flex text-left px-2 pb-3">
+      <div class="flex-column w-100">
         <div class="custom-file">
           <input
             accept=".xml"
             type="file"
             @change="fileSelected"
-            class="custom-file-input"
+            class="custom-file-input custom-file-input-sm"
             id="uploadFile"
           />
           <label class="pointer custom-file-label" for="uploadFile">
@@ -374,27 +381,29 @@
         </div>
       </div>
     </div>
-    <div class="w-100 d-flex flex-row mt-3">
-      <button
-        @click="triggerManualImport"
-        type="button"
-        class="shadow-sm btn btn-outline-info mr-auto"
-        :disabled="!triggerActive || !isValid"
-      >
-        <font-awesome-icon class="fa-fw mr-2" fixed-width icon="play" />
-        <translate>Trigger import</translate>
-      </button>
-      <button
-        v-if="!directImport || !directImportAvailable"
-        :disabled="!isValid"
-        type="submit"
-        class="shadow-sm btn btn-info mr-3"
-      >
-        <translate>Save</translate>
-      </button>
-      <button :key="1" @click="back()" class="btn btn-warning">
+    <div class="d-flex justify-content-between p-2 border-top">
+      <button :key="1" @click="back()" class="btn btn-sm btn-warning">
         Back
       </button>
+      <div>
+        <button
+          @click="triggerManualImport"
+          type="button"
+          class="btn btn-sm btn-outline-info"
+          :disabled="!triggerActive || !isValid"
+        >
+          <font-awesome-icon fixed-width icon="play" />
+          <translate>Trigger import</translate>
+        </button>
+        <button
+          v-if="!directImport || !directImportAvailable"
+          :disabled="!isValid"
+          type="submit"
+          class="btn btn-sm btn-info ml-3"
+        >
+          <translate>Save</translate>
+        </button>
+      </div>
     </div>
   </form>
 </template>
@@ -488,10 +497,6 @@
     import_() {
       return this.currentSchedule.importType;
     },
-    dialogLabel() {
-      if (this.id) return this.$gettext("Import") + " " + this.id;
-      return this.$gettext("New Import");
-    },
     directImportAvailable() {
       switch (this.import_) {
         case this.$options.IMPORTTYPES.BOTTLENECK:
diff -r 8fb81b45085f -r 439e1865a2d2 client/src/components/importconfiguration/types/ApprovedGaugeMeasurement.vue
--- a/client/src/components/importconfiguration/types/ApprovedGaugeMeasurement.vue	Thu May 16 09:35:37 2019 +0200
+++ b/client/src/components/importconfiguration/types/ApprovedGaugeMeasurement.vue	Thu May 16 09:52:32 2019 +0200
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="d-flex flex-row">
+    <div class="d-flex px-2">
       <div :key="1" class="flex-column mr-4">
         <div class="flex-row text-left">
           <small class="text-muted">
@@ -30,7 +30,7 @@
         <input
           type="text"
           v-model="originator"
-          class="form-control"
+          class="form-control form-control-sm"
           id="originator"
         />
         <span class="text-left text-danger">
@@ -40,7 +40,7 @@
         </span>
       </div>
     </div>
-    <div class="mt-4 flex-column w-100">
+    <div class="mt-4 flex-column px-2 w-100">
       <div class="custom-file">
         <input
           accept=".csv"
@@ -54,15 +54,15 @@
         </label>
       </div>
     </div>
-    <div class="d-flex flex-row-reverse w-100 mt-3">
-      <button :key="1" @click="back()" class="btn btn-warning">
+    <div class="d-flex w-100 mt-3 border-top justify-content-between p-2">
+      <button :key="1" @click="back()" class="btn btn-sm btn-warning">
         Back
       </button>
       <button
         :key="2"
         type="submit"
         @click="submit"
-        class="shadow-sm btn btn-info submit-button  mr-3"
+        class="btn btn-sm btn-info"
       >
         <translate>Submit</translate>
       </button>
diff -r 8fb81b45085f -r 439e1865a2d2 client/src/components/importconfiguration/types/Availablefairwaydepth.vue
--- a/client/src/components/importconfiguration/types/Availablefairwaydepth.vue	Thu May 16 09:35:37 2019 +0200
+++ b/client/src/components/importconfiguration/types/Availablefairwaydepth.vue	Thu May 16 09:52:32 2019 +0200
@@ -1,21 +1,21 @@
 <template>
   <div>
-    <div class="d-flex flex-row">
-      <div class="flex-column mt-3 mr-3 w-100">
+    <div class="d-flex px-2">
+      <div class="flex-column w-100">
         <div class="flex-row text-left">
           <small class="text-muted"> <translate>URL</translate> </small>
         </div>
         <div class="w-100">
           <input
             @input="urlChanged"
-            class="url form-control"
+            class="url form-control form-control-sm"
             type="url"
             :value="url"
           />
         </div>
       </div>
     </div>
-    <div v-if="!url" class="d-flex flex-row">
+    <div v-if="!url" class="d-flex px-2">
       <small
         ><translate class="text-danger">Please enter a URL</translate></small
       >
diff -r 8fb81b45085f -r 439e1865a2d2 client/src/components/importconfiguration/types/Bottleneck.vue
--- a/client/src/components/importconfiguration/types/Bottleneck.vue	Thu May 16 09:35:37 2019 +0200
+++ b/client/src/components/importconfiguration/types/Bottleneck.vue	Thu May 16 09:52:32 2019 +0200
@@ -1,22 +1,24 @@
 <template>
-  <div>
-    <div class="d-flex flex-row">
-      <div class="flex-column mt-3 mr-3 w-100">
+  <div class="p-2">
+    <div class="d-flex">
+      <div class="flex-column w-100">
         <template v-if="!directImport">
           <div class="flex-row text-left">
-            <small class="text-muted"> <translate>URL</translate> </small>
+            <small class="text-muted">
+              <translate>URL</translate>
+            </small>
           </div>
           <div class="w-100">
             <input
               @input="urlChanged"
-              class="url form-control"
+              class="url form-control form-control-sm"
               type="url"
               :value="url"
             />
           </div>
         </template>
       </div>
-      <div v-if="false" class="flex-column mt-3 text-left">
+      <div v-if="false" class="flex-column mt-2 text-left">
         <div class="d-flex flex-row">
           <small class="text-muted mr-2"
             ><translate>Insecure</translate>
@@ -42,13 +44,13 @@
         </div>
       </div>
     </div>
-    <div v-if="!directImport && !url" class="d-flex flex-row">
+    <div v-if="!directImport && !url" class="d-flex">
       <small
         ><translate class="text-danger">Please enter a URL</translate></small
       >
     </div>
-    <div class="d-flex flex-row">
-      <div class="flex-column mt-3 mr-3 w-50">
+    <div class="d-flex">
+      <div class="flex-column mt-2 mr-3 w-50">
         <div class="flex-row text-left">
           <small class="text-muted">
             <translate>Tolerance for snapping of waterway axis [m]</translate>
@@ -57,13 +59,13 @@
         <div class="w-100">
           <input
             @input="toleranceChanged"
-            class="tolerance form-control"
+            class="tolerance form-control form-control-sm"
             type="number"
             min="0"
             :value="tolerance"
           />
         </div>
-        <div v-if="!tolerance" class="d-flex flex-row">
+        <div v-if="!tolerance" class="d-flex">
           <small
             ><translate class="text-danger"
               >Please enter a tolerance value</translate
diff -r 8fb81b45085f -r 439e1865a2d2 client/src/components/importconfiguration/types/Distancemarksashore.vue
--- a/client/src/components/importconfiguration/types/Distancemarksashore.vue	Thu May 16 09:35:37 2019 +0200
+++ b/client/src/components/importconfiguration/types/Distancemarksashore.vue	Thu May 16 09:52:32 2019 +0200
@@ -1,34 +1,34 @@
 <template>
   <div>
-    <div class="d-flex flex-row">
-      <div class="flex-column mt-3 mr-3 w-100">
+    <div class="d-flex px-2">
+      <div class="flex-column w-100">
         <div class="flex-row text-left">
           <small class="text-muted"> <translate>URL</translate> </small>
         </div>
         <div class="w-100">
           <input
             @input="urlChanged"
-            class="url form-control"
+            class="url form-control form-control-sm"
             type="url"
             :value="url"
           />
         </div>
       </div>
     </div>
-    <div v-if="!url" class="d-flex flex-row">
+    <div v-if="!url" class="d-flex px-2">
       <small
         ><translate class="text-danger">Please enter a URL</translate></small
       >
     </div>
-    <div class="d-flex flex-row">
-      <div class="flex-column mt-3 mr-3 w-50">
+    <div class="d-flex px-2">
+      <div class="flex-column mt-2 mr-3 w-50">
         <div class="flex-row text-left">
           <small class="text-muted"> <translate>Featuretype</translate> </small>
         </div>
         <div class="w-100">
           <input
             @input="featureTypeChanged"
-            class="featuretype form-control"
+            class="featuretype form-control form-control-sm"
             type="text"
             :value="featureType"
           />
@@ -41,14 +41,14 @@
           >
         </div>
       </div>
-      <div class="flex-column mt-3 w-50">
+      <div class="flex-column mt-2 w-50">
         <div class="flex-row text-left">
           <small class="text-muted"> <translate>SortBy</translate> </small>
         </div>
         <div class="w-100">
           <input
             @input="sortByChanged"
-            class="sortby form-control"
+            class="sortby form-control form-control-sm"
             type="text"
             :value="sortBy"
           />
diff -r 8fb81b45085f -r 439e1865a2d2 client/src/components/importconfiguration/types/Distancemarksvirtual.vue
--- a/client/src/components/importconfiguration/types/Distancemarksvirtual.vue	Thu May 16 09:35:37 2019 +0200
+++ b/client/src/components/importconfiguration/types/Distancemarksvirtual.vue	Thu May 16 09:52:32 2019 +0200
@@ -1,34 +1,34 @@
 <template>
   <div>
-    <div class="d-flex flex-row">
-      <div class="flex-column mt-3 mr-3 w-100">
+    <div class="d-flex px-2">
+      <div class="flex-column w-100">
         <div class="flex-row text-left">
           <small class="text-muted"> <translate>URL</translate> </small>
         </div>
         <div class="w-100">
           <input
             @input="urlChanged"
-            class="url form-control"
+            class="url form-control form-control-sm"
             type="url"
             :value="url"
           />
         </div>
       </div>
     </div>
-    <div v-if="!url" class="d-flex flex-row">
+    <div v-if="!url" class="d-flex px-2">
       <small
         ><translate class="text-danger">Please enter a URL</translate></small
       >
     </div>
-    <div class="d-flex flex-row">
-      <div class="flex-column mt-3 mr-3 w-50">
+    <div class="d-flex px-2">
+      <div class="flex-column mt-2 mr-3 w-50">
         <div class="flex-row text-left">
           <small class="text-muted"> <translate>Username</translate> </small>
         </div>
         <div class="w-100">
           <input
             @input="usernameChanged"
-            class="username form-control"
+            class="username form-control form-control-sm"
             type="text"
             :value="username"
           />
@@ -41,14 +41,14 @@
           >
         </div>
       </div>
-      <div class="flex-column mt-3 w-50">
+      <div class="flex-column mt-2 w-50">
         <div class="flex-row text-left">
           <small class="text-muted"> <translate>Password</translate> </small>
         </div>
         <div class="w-100 d-flex flex-row">
           <input
             @input="passwordChanged"
-            class="pasword form-control"
+            class="pasword form-control form-control-sm"
             :type="showPassword"
             :value="password"
           />
diff -r 8fb81b45085f -r 439e1865a2d2 client/src/components/importconfiguration/types/Fairwaydimensions.vue
--- a/client/src/components/importconfiguration/types/Fairwaydimensions.vue	Thu May 16 09:35:37 2019 +0200
+++ b/client/src/components/importconfiguration/types/Fairwaydimensions.vue	Thu May 16 09:52:32 2019 +0200
@@ -1,34 +1,34 @@
 <template>
   <div>
-    <div class="d-flex flex-row">
-      <div class="flex-column mt-3 mr-3 w-100">
+    <div class="d-flex px-2">
+      <div class="flex-column w-100">
         <div class="flex-row text-left">
           <small class="text-muted"> <translate>URL</translate> </small>
         </div>
         <div class="w-100">
           <input
             @input="urlChanged"
-            class="url form-control"
+            class="url form-control form-control-sm"
             type="url"
             :value="url"
           />
         </div>
       </div>
     </div>
-    <div v-if="!url" class="d-flex flex-row">
+    <div v-if="!url" class="d-flex px-2">
       <small
         ><translate class="text-danger">Please enter a URL</translate></small
       >
     </div>
-    <div class="d-flex flex-row">
-      <div class="flex-column mt-3 mr-3 w-50">
+    <div class="d-flex px-2">
+      <div class="flex-column mt-2 mr-3 w-50">
         <div class="flex-row text-left">
           <small class="text-muted"> <translate>Featuretype</translate> </small>
         </div>
         <div class="w-100">
           <input
             @input="featureTypeChanged"
-            class="featuretype form-control"
+            class="featuretype form-control form-control-sm"
             type="text"
             :value="featureType"
           />
@@ -41,14 +41,14 @@
           >
         </div>
       </div>
-      <div class="flex-column mt-3 w-50">
+      <div class="flex-column mt-2 w-50">
         <div class="flex-row text-left">
           <small class="text-muted"> <translate>SortBy</translate> </small>
         </div>
         <div class="w-100">
           <input
             @input="sortByChanged"
-            class="sortby form-control"
+            class="sortby form-control form-control-sm"
             type="text"
             :value="sortBy"
           />
@@ -62,13 +62,13 @@
         </div>
       </div>
     </div>
-    <div class="d-flex flex-row">
-      <div class="flex-column mt-3 mr-3 w-50">
+    <div class="d-flex px-2">
+      <div class="flex-column mt-2 mr-3 w-50">
         <div class="flex-row text-left">
           <small class="text-muted"> <translate>LOS</translate> </small>
         </div>
         <div class="w-100">
-          <select v-model="los" class="form-control">
+          <select v-model="los" class="form-control form-control-sm">
             <option>1</option>
             <option>2</option>
             <option>3</option>
@@ -82,14 +82,14 @@
           >
         </div>
       </div>
-      <div class="flex-column mt-3 w-50">
+      <div class="flex-column mt-2 w-50">
         <div class="flex-row text-left">
           <small class="text-muted"> <translate>Depth</translate> </small>
         </div>
         <div class="d-flex flex-row">
           <input
             @input="depthChanged"
-            class="depth form-control"
+            class="depth form-control form-control-sm"
             type="number"
             :value="depth"
           />
@@ -104,15 +104,15 @@
         </div>
       </div>
     </div>
-    <div class="d-flex flex-row">
-      <div class="flex-column mt-3 mr-3 w-50">
+    <div class="d-flex px-2">
+      <div class="flex-column mt-2 mr-3 w-50">
         <div class="flex-row text-left">
           <small class="text-muted"> <translate>MinWidth</translate> </small>
         </div>
         <div class="d-flex flex-row">
           <input
             @input="minWidthChanged"
-            class="minwidth form-control"
+            class="minwidth form-control form-control-sm"
             type="number"
             :value="minWidth"
           />
@@ -126,14 +126,14 @@
           >
         </div>
       </div>
-      <div class="flex-column mt-3 w-50">
+      <div class="flex-column mt-2 w-50">
         <div class="flex-row text-left">
           <small class="text-muted"> <translate>MaxWidth</translate> </small>
         </div>
         <div class="d-flex flex-row">
           <input
             @input="maxWidthChanged"
-            class="maxwidth form-control"
+            class="maxwidth form-control form-control-sm"
             type="number"
             :value="maxWidth"
           />
@@ -148,8 +148,8 @@
         </div>
       </div>
     </div>
-    <div class="d-flex flex-row">
-      <div class="flex-column mt-3 mr-3 w-50">
+    <div class="d-flex px-2">
+      <div class="flex-column mt-2 w-50">
         <div class="flex-row text-left">
           <small class="text-muted">
             <translate>Source orgranization</translate>
@@ -158,7 +158,7 @@
         <div class="w-100">
           <input
             @input="sourceOrganizationChanged"
-            class="sourceorganization form-control"
+            class="sourceorganization form-control form-control-sm"
             type="text"
             :value="sourceOrganization"
           />
diff -r 8fb81b45085f -r 439e1865a2d2 client/src/components/importconfiguration/types/Gaugemeasurement.vue
--- a/client/src/components/importconfiguration/types/Gaugemeasurement.vue	Thu May 16 09:35:37 2019 +0200
+++ b/client/src/components/importconfiguration/types/Gaugemeasurement.vue	Thu May 16 09:52:32 2019 +0200
@@ -1,21 +1,21 @@
 <template>
   <div>
-    <div class="d-flex flex-row">
-      <div class="flex-column mt-3 mr-3 w-100">
+    <div class="d-flex px-2">
+      <div class="flex-column w-100">
         <div class="flex-row text-left">
           <small class="text-muted"> <translate>URL</translate> </small>
         </div>
         <div class="w-100">
           <input
             @input="urlChanged"
-            class="url form-control"
+            class="url form-control form-control-sm"
             type="url"
             :value="url"
           />
         </div>
       </div>
     </div>
-    <div v-if="!url" class="d-flex flex-row">
+    <div v-if="!url" class="d-flex px-2">
       <small
         ><translate class="text-danger">Please enter a URL</translate></small
       >
diff -r 8fb81b45085f -r 439e1865a2d2 client/src/components/importconfiguration/types/Soundingresults.vue
--- 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>
diff -r 8fb81b45085f -r 439e1865a2d2 client/src/components/importconfiguration/types/WaterwayProfiles.vue
--- a/client/src/components/importconfiguration/types/WaterwayProfiles.vue	Thu May 16 09:35:37 2019 +0200
+++ b/client/src/components/importconfiguration/types/WaterwayProfiles.vue	Thu May 16 09:52:32 2019 +0200
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="mb-4">
+    <div class="mb-2 px-2">
       <div :key="1" class="flex-column mr-4">
         <div class="flex-row text-left">
           <small class="text-muted">
@@ -27,7 +27,11 @@
             <small class="text-muted"> <translate>URL</translate> </small>
           </div>
           <div class="w-100">
-            <input class="form-control" type="url" v-model="url" />
+            <input
+              class="form-control form-control-sm"
+              type="url"
+              v-model="url"
+            />
           </div>
         </div>
       </div>
@@ -37,14 +41,18 @@
         >
       </div>
       <div class="d-flex flex-row">
-        <div class="flex-column mt-3 mr-3 w-50">
+        <div class="flex-column mt-2 mr-3 w-50">
           <div class="flex-row text-left">
             <small class="text-muted">
               <translate>Featuretype</translate>
             </small>
           </div>
           <div class="w-100">
-            <input class="form-control" type="text" v-model="featureType" />
+            <input
+              class="form-control form-control-sm"
+              type="text"
+              v-model="featureType"
+            />
           </div>
           <div v-if="!featureType" class="d-flex flex-row">
             <small
@@ -54,14 +62,18 @@
             >
           </div>
         </div>
-        <div class="flex-column mt-3 w-50">
+        <div class="flex-column mt-2 w-50">
           <div class="flex-row text-left">
             <small class="text-muted">
               <translate>SortBy</translate>
             </small>
           </div>
           <div class="w-100">
-            <input class="form-control" type="text" v-model="sortBy" />
+            <input
+              class="form-control form-control-sm"
+              type="text"
+              v-model="sortBy"
+            />
           </div>
           <div v-if="!sortBy" class="d-flex flex-row">
             <small
@@ -73,7 +85,7 @@
         </div>
       </div>
     </div>
-    <div class="d-flex flex-row text-left">
+    <div class="d-flex text-left px-2">
       <div class="mt-3 mb-3 flex-column w-100">
         <div class="custom-file">
           <input
@@ -89,15 +101,15 @@
         </div>
       </div>
     </div>
-    <div class="d-flex flex-row-reverse w-100 mt-3">
-      <button :key="1" @click="back()" class="btn btn-warning">
+    <div class="d-flex justify-content-between w-100 p-2 border-top">
+      <button :key="1" @click="back()" class="btn btn-sm btn-warning">
         Back
       </button>
       <button
         :key="2"
         type="submit"
         @click="submit"
-        class="shadow-sm btn btn-info submit-button  mr-3"
+        class="btn btn-sm btn-info submit-button"
       >
         <translate>Submit</translate>
       </button>
diff -r 8fb81b45085f -r 439e1865a2d2 client/src/components/importconfiguration/types/Waterwayarea.vue
--- a/client/src/components/importconfiguration/types/Waterwayarea.vue	Thu May 16 09:35:37 2019 +0200
+++ b/client/src/components/importconfiguration/types/Waterwayarea.vue	Thu May 16 09:52:32 2019 +0200
@@ -1,34 +1,34 @@
 <template>
   <div>
-    <div class="d-flex flex-row">
-      <div class="flex-column mt-3 mr-3 w-100">
+    <div class="d-flex px-2">
+      <div class="flex-column w-100">
         <div class="flex-row text-left">
           <small class="text-muted"> <translate>URL</translate> </small>
         </div>
         <div class="w-100">
           <input
             @input="urlChanged"
-            class="url form-control"
+            class="url form-control form-control-sm"
             type="url"
             :value="url"
           />
         </div>
       </div>
     </div>
-    <div v-if="!url" class="d-flex flex-row">
+    <div v-if="!url" class="d-flex px-2">
       <small
         ><translate class="text-danger">Please enter a URL</translate></small
       >
     </div>
-    <div class="d-flex flex-row">
-      <div class="flex-column mt-3 mr-3 w-50">
+    <div class="d-flex px-2">
+      <div class="flex-column mt-2 mr-3 w-50">
         <div class="flex-row text-left">
           <small class="text-muted"> <translate>Featuretype</translate> </small>
         </div>
         <div class="w-100">
           <input
             @input="featureTypeChanged"
-            class="featuretype form-control"
+            class="featuretype form-control form-control-sm"
             type="text"
             :value="featureType"
           />
@@ -41,14 +41,14 @@
           >
         </div>
       </div>
-      <div class="flex-column mt-3 w-50">
+      <div class="flex-column mt-2 w-50">
         <div class="flex-row text-left">
           <small class="text-muted"> <translate>SortBy</translate> </small>
         </div>
         <div class="w-100">
           <input
             @input="sortByChanged"
-            class="sortby form-control"
+            class="sortby form-control form-control-sm"
             type="text"
             :value="sortBy"
           />
diff -r 8fb81b45085f -r 439e1865a2d2 client/src/components/importconfiguration/types/Waterwayaxis.vue
--- a/client/src/components/importconfiguration/types/Waterwayaxis.vue	Thu May 16 09:35:37 2019 +0200
+++ b/client/src/components/importconfiguration/types/Waterwayaxis.vue	Thu May 16 09:52:32 2019 +0200
@@ -1,34 +1,34 @@
 <template>
   <div>
-    <div class="d-flex flex-row">
-      <div class="flex-column mt-3 mr-3 w-100">
+    <div class="d-flex px-2">
+      <div class="flex-column w-100">
         <div class="flex-row text-left">
           <small class="text-muted"> <translate>URL</translate> </small>
         </div>
         <div class="w-100">
           <input
             @input="urlChanged"
-            class="url form-control"
+            class="url form-control form-control-sm"
             type="url"
             :value="url"
           />
         </div>
       </div>
     </div>
-    <div v-if="!url" class="d-flex flex-row">
+    <div v-if="!url" class="d-flex px-2">
       <small
         ><translate class="text-danger">Please enter a URL</translate></small
       >
     </div>
-    <div class="d-flex flex-row">
-      <div class="flex-column mt-3 mr-3 w-50">
+    <div class="d-flex px-2">
+      <div class="flex-column mt-2 mr-3 w-50">
         <div class="flex-row text-left">
           <small class="text-muted"> <translate>Featuretype</translate> </small>
         </div>
         <div class="w-100">
           <input
             @input="featureTypeChanged"
-            class="featuretype form-control"
+            class="featuretype form-control form-control-sm"
             type="text"
             :value="featureType"
           />
@@ -41,14 +41,14 @@
           >
         </div>
       </div>
-      <div class="flex-column mt-3 w-50">
+      <div class="flex-column mt-2 w-50">
         <div class="flex-row text-left">
           <small class="text-muted"> <translate>SortBy</translate> </small>
         </div>
         <div class="w-100">
           <input
             @input="sortByChanged"
-            class="sortby form-control"
+            class="sortby form-control form-control-sm"
             type="text"
             :value="sortBy"
           />
diff -r 8fb81b45085f -r 439e1865a2d2 client/src/components/importconfiguration/types/Waterwaygauges.vue
--- a/client/src/components/importconfiguration/types/Waterwaygauges.vue	Thu May 16 09:35:37 2019 +0200
+++ b/client/src/components/importconfiguration/types/Waterwaygauges.vue	Thu May 16 09:52:32 2019 +0200
@@ -1,34 +1,34 @@
 <template>
   <div>
-    <div class="d-flex flex-row">
-      <div class="flex-column mt-3 mr-3 w-100">
+    <div class="d-flex px-2">
+      <div class="flex-column w-100">
         <div class="flex-row text-left">
           <small class="text-muted"> <translate>URL</translate> </small>
         </div>
         <div class="w-100">
           <input
             @input="urlChanged"
-            class="url form-control"
+            class="url form-control form-control-sm"
             type="url"
             :value="url"
           />
         </div>
       </div>
     </div>
-    <div v-if="!url" class="d-flex flex-row">
+    <div v-if="!url" class="d-flex px-2">
       <small
         ><translate class="text-danger">Please enter a URL</translate></small
       >
     </div>
-    <div class="d-flex flex-row">
-      <div class="flex-column mt-3 mr-3 w-50">
+    <div class="d-flex px-2">
+      <div class="flex-column mt-2 mr-3 w-50">
         <div class="flex-row text-left">
           <small class="text-muted"> <translate>Username</translate> </small>
         </div>
         <div class="w-100">
           <input
             @input="usernameChanged"
-            class="username form-control"
+            class="username form-control form-control-sm"
             type="text"
             :value="username"
           />
@@ -41,14 +41,14 @@
           >
         </div>
       </div>
-      <div class="flex-column mt-3 w-50">
+      <div class="flex-column mt-2 w-50">
         <div class="flex-row text-left">
           <small class="text-muted"> <translate>Password</translate> </small>
         </div>
         <div class="w-100 d-flex flex-row">
           <input
             @input="passwordChanged"
-            class="password form-control"
+            class="password form-control form-control-sm"
             :type="showPassword"
             :value="password"
           />
diff -r 8fb81b45085f -r 439e1865a2d2 client/src/components/stretches/Stretches.vue
--- a/client/src/components/stretches/Stretches.vue	Thu May 16 09:35:37 2019 +0200
+++ b/client/src/components/stretches/Stretches.vue	Thu May 16 09:52:32 2019 +0200
@@ -1,5 +1,5 @@
 <template>
-  <div class="d-flex flex-column mb-3">
+  <div class="d-flex flex-column">
     <UIBoxHeader
       icon="road"
       :title="defineStretchesLabel"
@@ -7,7 +7,7 @@
     />
     <div class="position-relative">
       <UISpinnerOverlay v-if="loading" />
-      <div v-if="!edit" class="mb-3">
+      <div v-if="!edit">
         <UITableHeader
           :columns="[
             { id: 'properties.name', title: `${nameLabel}`, class: 'col-4' },
@@ -27,18 +27,18 @@
           :data="filteredStretches() | sortTable(sortColumn, sortDirection)"
         >
           <template v-slot:row="{ item: stretch }">
-            <div class="py-1 col-4">
+            <div class="py-1 px-2 col-4">
               <a @click="moveMapToStretch(stretch)" href="#">
                 {{ stretch.properties.name }}
               </a>
             </div>
-            <div class="py-1 col-2">
+            <div class="py-1 px-2 col-2">
               {{ stretch.properties.date_info | surveyDate }}
             </div>
-            <div class="py-1 col-3">
+            <div class="py-1 px-2 col-3">
               {{ stretch.properties.source_organization }}
             </div>
-            <div class="py-1 col text-right">
+            <div class="py-1 px-2 col text-right">
               <button
                 v-if="isInStaging(stretch.properties.name)"
                 @click="gotoStaging(stretch.properties.name)"
@@ -65,16 +65,23 @@
             </div>
           </template>
         </UITableBody>
+        <div class="text-right p-2 border-top">
+          <button :key="1" @click="startEdit()" class="btn btn-sm btn-info">
+            <translate>New stretch</translate>
+          </button>
+        </div>
       </div>
       <div v-if="edit">
-        <div class="ml-3 mr-3">
-          <div class="d-flex flex-row justify-content-between">
-            <div class="mt-2 w-50 mr-2 text-left">
-              <small class="text-muted"> <translate>ID</translate> </small>
+        <div class="mx-2">
+          <div class="d-flex justify-content-between mt-2">
+            <div class="text-left flex-fill mr-1">
+              <small class="text-muted">
+                <translate>ID</translate>
+              </small>
               <input
                 id="id"
                 type="text"
-                class="form-control"
+                class="form-control form-control-sm"
                 placeholder="AT_Section_12"
                 aria-label="id"
                 v-model="id"
@@ -86,43 +93,44 @@
                 </small>
               </span>
             </div>
-            <div class="mt-2 w-50 ml-2 text-left">
-              <div>
-                <small class="text-muted">
-                  <translate>Countrycode</translate>
+            <div class="text-left flex-fill ml-1">
+              <small class="text-muted">
+                <translate>Countrycode</translate>
+              </small>
+              <input
+                id="countryCode"
+                type="text"
+                class="form-control form-control-sm"
+                placeholder="AT"
+                aria-label="id"
+                v-model="countryCode"
+              />
+              <span class="text-left text-danger">
+                <small v-if="countryCodeError && !countryCode">
+                  <translate>Please enter a countrycode </translate>
                 </small>
-                <input
-                  id="countryCode"
-                  type="text"
-                  class="form-control"
-                  placeholder="AT"
-                  aria-label="id"
-                  v-model="countryCode"
-                />
-                <span class="text-left text-danger">
-                  <small v-if="countryCodeError && !countryCode">
-                    <translate>Please enter a countrycode </translate>
-                  </small>
-                </span>
-              </div>
-              <div class="w-50 ml-2"></div>
+              </span>
             </div>
           </div>
-          <div class="d-flex flex-column  justify-content-between">
-            <div class="mt-2 text-left">
+          <div class="d-flex justify-content-between mt-2">
+            <div class="text-left flex-fill mr-1">
               <small class="text-muted">
                 <translate>Start rhm</translate>
               </small>
-              <div class="d-flex flex-row">
+              <div class="d-flex flex-row position-relative">
                 <input
                   id="startrhm"
                   type="text"
-                  class="form-control"
+                  class="form-control form-control-sm"
                   placeholder="e.g. ATXXX000010000019900"
                   aria-label="startrhm"
                   v-model="startrhm"
                 />
-                <span class="input-group-text" @click="togglePipette('start')">
+                <span
+                  class="input-group-text position-absolute input-button"
+                  @click="togglePipette('start')"
+                  v-tooltip="pipetteTooltip"
+                >
                   <font-awesome-icon
                     :class="{ 'text-info': pipetteStart }"
                     icon="crosshairs"
@@ -135,18 +143,24 @@
                 </small>
               </span>
             </div>
-            <div class="mt-2 text-left">
-              <small class="text-muted"> <translate>End rhm</translate> </small>
-              <div class="d-flex flex-row">
+            <div class="text-left flex-fill ml-1">
+              <small class="text-muted">
+                <translate>End rhm</translate>
+              </small>
+              <div class="d-flex flex-row position-relative">
                 <input
                   id="endrhm"
                   type="text"
-                  class="form-control"
+                  class="form-control form-control-sm"
                   placeholder="e.g. ATXXX000010000019900"
                   aria-label="endrhm"
                   v-model="endrhm"
                 />
-                <span class="input-group-text" @click="togglePipette('end')">
+                <span
+                  class="input-group-text position-absolute input-button"
+                  @click="togglePipette('end')"
+                  v-tooltip="pipetteTooltip"
+                >
                   <font-awesome-icon
                     :class="{ 'text-info': pipetteEnd }"
                     icon="crosshairs"
@@ -164,14 +178,14 @@
             v-if="!editExistingStretch"
             class="d-flex flex-row justify-content-between"
           >
-            <div class="mt-2  mr-2 w-50  text-left">
+            <div class="mt-2 mr-2 w-50 text-left">
               <small class="text-muted">
                 <translate
                   >Tolerance for snapping of waterway axis [m]</translate
                 >
               </small>
               <input
-                class="form-control"
+                class="form-control form-control-sm"
                 v-model.number="tolerance"
                 placeholder=""
                 type="number"
@@ -195,7 +209,7 @@
               <input
                 id="objbn"
                 type="text"
-                class="form-control"
+                class="form-control form-control-sm"
                 placeholder=""
                 aria-label="objbn"
                 v-model="objbn"
@@ -213,7 +227,7 @@
               <input
                 id="nobjbn"
                 type="text"
-                class="form-control"
+                class="form-control form-control-sm"
                 placeholder=""
                 aria-label="nobjbn"
                 v-model="nobjbn"
@@ -228,7 +242,7 @@
               <input
                 id="date_info"
                 type="date"
-                class="form-control"
+                class="form-control form-control-sm"
                 placeholder="date_info"
                 aria-label="date_info"
                 v-model="date_info"
@@ -244,7 +258,7 @@
               <input
                 id="source"
                 type="text"
-                class="form-control"
+                class="form-control form-control-sm"
                 placeholder="source"
                 aria-label="source"
                 v-model="source"
@@ -257,28 +271,31 @@
             </div>
           </div>
         </div>
-        <div class="text-right mt-2 mr-3 mb-3">
-          <button @click="edit = false" class="btn btn-warning mr-2">
+        <div class="d-flex justify-content-between mt-2 p-2 border-top">
+          <button :key="2" @click="edit = false" class="btn btn-sm btn-warning">
             Back
           </button>
           <button
             @click="save"
             type="submit"
-            class="shadow-sm btn btn-info submit-button"
+            class="shadow-sm btn btn-sm btn-info submit-button"
           >
             <translate>Submit</translate>
           </button>
         </div>
       </div>
-      <div class="text-right mr-3">
-        <button v-if="!edit" @click="startEdit()" class="btn btn-info">
-          <translate>New stretch</translate>
-        </button>
-      </div>
     </div>
   </div>
 </template>
 
+<style lang="sass" scoped>
+.input-button
+  border-top-left-radius: 0
+  border-bottom-left-radius: 0
+  right: 0
+  height: 31px
+</style>
+
 <script>
 /* This is Free Software under GNU Affero General Public License v >= 3.0
  * without warranty, see README.md and license for details.
@@ -352,6 +369,9 @@
     },
     reviewTooltip() {
       return this.$gettext("Review pending import");
+    },
+    pipetteTooltip() {
+      return this.$gettext("Choose a distance mark by clicking on the map.");
     }
   },
   watch: {