comparison client/src/components/fairway/Fairwayprofile.vue @ 2460:e2f05ac81471

client: available waterlevels in fairway profile: improved styling
author Markus Kottlaender <markus@intevation.de>
date Mon, 04 Mar 2019 13:18:35 +0100
parents 0b8793a1947c
children 3c17d401fbd4
comparison
equal deleted inserted replaced
2459:408e0f4d4008 2460:e2f05ac81471
1 <template> 1 <template>
2 <div :class="['position-relative', { show: showSplitscreen }]"> 2 <div :class="['position-relative', { show: showSplitscreen }]">
3 <div class="profile bg-white position-relative d-flex flex-column"> 3 <div class="profile bg-white position-relative d-flex flex-column">
4 <div class="d-flex flex-row justify-content-between border-bottom"> 4 <div
5 <div class="mt-1 mb-1 d-flex flex-row"> 5 class="d-flex flex-row justify-content-between align-items-center border-bottom position-relative"
6 <small class="text-muted ml-1 mr-1 my-auto text-right" 6 >
7 ><translate>Available Waterlevels</translate></small 7 <div class="d-flex flex-row align-items-center position-absolute">
8 <small class="text-muted px-2 text-right" style="line-height: 1rem;">
9 <translate v-if="availableWaterlevels.length > 1"
10 >Available Waterlevels:</translate
11 >
12 <translate v-else>Waterlevel:</translate>
13 </small>
14 <select
15 class="form-control pl-1"
16 v-model="currentLevel"
17 v-if="availableWaterlevels.length > 1"
18 style="width: 100px; height: 30px; font-size: 80%;"
8 > 19 >
9 <select class="form-control" v-model="currentLevel">
10 <option 20 <option
11 v-for="level in availableWaterlevels" 21 v-for="level in availableWaterlevels"
12 :value="level" 22 :value="level"
13 :key="level" 23 :key="level"
14 > 24 >
15 {{ formatSurveyDate(level) }} 25 {{ formatSurveyDate(level) }}
16 </option> 26 </option>
17 </select> 27 </select>
28 <small v-else>{{ formatSurveyDate(currentLevel) }}</small>
18 </div> 29 </div>
19 <div class="flex-row mr-auto ml-auto"> 30 <div class="flex-row mr-auto ml-auto">
20 <h5 31 <h5
21 class="headline mb-0 py-2" 32 class="headline mb-0 py-2"
22 v-if="selectedBottleneck && selectedSurvey" 33 v-if="selectedBottleneck && selectedSurvey"