Mercurial > gemma

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

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: define stretches/imports: code cleanup / style improvements
author Markus Kottlaender <markus@intevation.de>
date Thu, 16 May 2019 09:52:32 +0200
parents adc8e9ccf706
children 604ce439e1fd
line wrap: on
line diff
--- 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>