Mercurial > gemma
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" |