Mercurial > gemma
changeset 1176:fdab87f013e2
improve fairway profile UI
| author | Markus Kottlaender <markus@intevation.de> |
|---|---|
| date | Wed, 14 Nov 2018 14:45:34 +0100 |
| parents | d61be0d972d8 |
| children | 48ae4458710d |
| files | client/src/fairway/Fairwayprofile.vue |
| diffstat | 1 files changed, 41 insertions(+), 39 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/fairway/Fairwayprofile.vue Wed Nov 14 12:54:13 2018 +0100 +++ b/client/src/fairway/Fairwayprofile.vue Wed Nov 14 14:45:34 2018 +0100 @@ -12,44 +12,50 @@ v-if="showSplitscreen"> <i class="fa fa-times text-danger"></i> </button> - <div class="profile d-flex flex-column"> + <div class="profile d-flex flex-column pr-5"> <h5 class="mb-0 mt-2">{{ selectedBottleneck }} ({{ selectedSurvey.date_info }})</h5> <div class="d-flex flex-fill"> - <div class="fairwayprofile flex-fill"></div> + <div class="fairwayprofile flex-grow-1"></div> <div class="additionalsurveys d-flex flex-column"> - <small class="label">Available Additional Surveys</small> - <select v-model="additionalSurvey"> - <option value="">None</option> - <option - v-for="survey in additionalSurveys" - :key="survey.date_info" - :value="survey" - >{{survey.date_info}}</option> - </select> - <small class="mt-2"> - <b>Start:</b> - <br> - Lat: {{ startPoint[1] }} - <br> - Lon: {{ startPoint[0] }} - <br> - <b>End:</b> - <br> - Lat: {{ endPoint[1] }} - <br> - Lon: {{ endPoint[0] }} - <br> - <button v-clipboard:copy="coordinatesForClipboard" - v-clipboard:success="onCopyCoordinates" - class="btn btn-outline-secondary btn-sm mt-2"> - Copy coordinates - </button><br> - <br> - Enter coordinates - <input class="form-control mt-2" placeholder="Lat,Lon,Lat,Lon" v-model="coordinatesInput" /><br> - <button class="btn btn-sm btn-outline-secondary" @click="applyCoordinates"> - Apply - </button> + <small> + Additional Surveys + <select v-model="additionalSurvey" class="form-control form-control-sm"> + <option value="">None</option> + <option + v-for="survey in additionalSurveys" + :key="survey.date_info" + :value="survey" + >{{survey.date_info}}</option> + </select> + <hr> + <div class="d-flex text-left mb-2"> + <div class="text-nowrap mr-1"> + <b>Start:</b> + <br> + Lat: {{ startPoint[1] }} + <br> + Lon: {{ startPoint[0] }} + </div> + <div class="text-nowrap ml-1"> + <b>End:</b> + <br> + Lat: {{ endPoint[1] }} + <br> + Lon: {{ endPoint[0] }} + </div> + <button v-clipboard:copy="coordinatesForClipboard" + v-clipboard:success="onCopyCoordinates" + class="btn btn-outline-secondary btn-sm ml-2 mt-auto"> + <i class="fa fa-copy"></i> + </button> + </div> + Enter manually: + <div class="position-relative"> + <input class="form-control form-control-sm pr-5" placeholder="Lat,Lon,Lat,Lon" v-model="coordinatesInput" /><br> + <button class="btn btn-sm btn-outline-secondary position-absolute" @click="applyCoordinates" style="top: 0; right: 0;"> + <i class="fa fa-check"></i> + </button> + </div> </small> </div> </div> @@ -82,15 +88,11 @@ .profile height: 50vh -.label - margin-bottom: $small-offset - .waterlevelselection margin-top: $large-offset margin-right: $large-offset .additionalsurveys - width: 200px margin-top: $large-offset margin-bottom: auto margin-right: $large-offset