# HG changeset patch
# User Markus Kottlaender <markus@intevation.de>
# Date 1551701915 -3600
# Node ID e2f05ac814716c40b59591a307ddf1abc457fa9a
# Parent  408e0f4d40084fd4d9a2f1eff94af2091900049e
client: available waterlevels in fairway profile: improved styling

diff -r 408e0f4d4008 -r e2f05ac81471 client/src/components/fairway/Fairwayprofile.vue
--- a/client/src/components/fairway/Fairwayprofile.vue	Mon Mar 04 10:26:19 2019 +0100
+++ b/client/src/components/fairway/Fairwayprofile.vue	Mon Mar 04 13:18:35 2019 +0100
@@ -1,12 +1,22 @@
 <template>
   <div :class="['position-relative', { show: showSplitscreen }]">
     <div class="profile bg-white position-relative d-flex flex-column">
-      <div class="d-flex flex-row justify-content-between border-bottom">
-        <div class="mt-1 mb-1 d-flex flex-row">
-          <small class="text-muted ml-1 mr-1 my-auto text-right"
-            ><translate>Available Waterlevels</translate></small
+      <div
+        class="d-flex flex-row justify-content-between align-items-center border-bottom position-relative"
+      >
+        <div class="d-flex flex-row align-items-center position-absolute">
+          <small class="text-muted px-2 text-right" style="line-height: 1rem;">
+            <translate v-if="availableWaterlevels.length > 1"
+              >Available Waterlevels:</translate
+            >
+            <translate v-else>Waterlevel:</translate>
+          </small>
+          <select
+            class="form-control pl-1"
+            v-model="currentLevel"
+            v-if="availableWaterlevels.length > 1"
+            style="width: 100px; height: 30px; font-size: 80%;"
           >
-          <select class="form-control" v-model="currentLevel">
             <option
               v-for="level in availableWaterlevels"
               :value="level"
@@ -15,6 +25,7 @@
               {{ formatSurveyDate(level) }}
             </option>
           </select>
+          <small v-else>{{ formatSurveyDate(currentLevel) }}</small>
         </div>
         <div class="flex-row mr-auto ml-auto">
           <h5