Mercurial > gemma
changeset 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 | 408e0f4d4008 |
children | b60efa7d4cee c18ae8992070 |
files | client/src/components/fairway/Fairwayprofile.vue |
diffstat | 1 files changed, 16 insertions(+), 5 deletions(-) [+] |
line wrap: on
line diff
--- 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