Mercurial > gemma
diff client/src/fairway/Fairwayprofile.vue @ 1146:74e180ad3d6b
fairway profile UI improvements
splitscreen button position at top of profile container
bottleneck name and survey date as headline in profile container
moved logout button to sidebar menu to avoid unnecessary overlapping
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Tue, 13 Nov 2018 11:12:12 +0100 |
parents | dc3f0277628a |
children | fb5c83d4ea1d |
line wrap: on
line diff
--- a/client/src/fairway/Fairwayprofile.vue Mon Nov 12 15:12:04 2018 +0100 +++ b/client/src/fairway/Fairwayprofile.vue Tue Nov 13 11:12:12 2018 +0100 @@ -1,66 +1,98 @@ <template> - <div class="profiledisplay d-flex flex-row"> - <div class="fairwayprofile"></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> - </small> + <div :class="['position-relative', {show: showSplitscreen}]" v-if="Object.keys(currentProfile).length"> + <button + class="rounded bg-white border-0 position-absolute splitscreen-toggle shadow" + @click="$store.commit('application/showSplitscreen', false)" + v-if="showSplitscreen"> + <i class="fa fa-angle-down"></i> + </button> + <button + class="rounded bg-white border-0 position-absolute clear-selection shadow" + @click="$store.dispatch('fairwayprofile/clearSelection');" + v-if="showSplitscreen"> + <i class="fa fa-times text-danger"></i> + </button> + <div class="profile d-flex flex-column"> + <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="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> + </small> + </div> + </div> </div> </div> </template> -<style scoped lang="scss"> -.label { - margin-bottom: $small-offset; -} -.waterlevelselection { - margin-top: $large-offset; - margin-right: $large-offset; -} +<style lang="sass" scoped> +.profile + background-color: white + width: 100vw + height: 0 + overflow: hidden + position: relative + z-index: 2 + +.splitscreen-toggle, +.clear-selection + top: -$icon-height + right: $icon-width + $offset + $offset + width: $icon-width + height: $icon-height + margin-top: 2px + z-index: 1 + outline: none + +.clear-selection + right: $offset -.additionalsurveys { - width: 300px; - margin-top: $large-offset; - margin-bottom: auto; - margin-right: $large-offset; - margin-left: auto; -} +.show + .profile + height: 50vh -.additionalsurveys input { - margin-right: $small-offset; -} +.label + margin-bottom: $small-offset + +.waterlevelselection + margin-top: $large-offset + margin-right: $large-offset -.profiledisplay { - width: 100vw; -} +.additionalsurveys + width: 200px + margin-top: $large-offset + margin-bottom: auto + margin-right: $large-offset + margin-left: auto -.fairwayprofile { - background-color: white; - margin-left: auto; - margin-right: $offset; - margin-top: auto; - margin-bottom: auto; -} +.additionalsurveys input + margin-right: $small-offset + +.fairwayprofile + background-color: white + margin: $offset + margin-top: 0 </style> <script> @@ -96,6 +128,7 @@ "additionalSurveys" ], computed: { + ...mapState("application", ["showSplitscreen"]), ...mapState("fairwayprofile", [ "startPoint", "endPoint", @@ -107,7 +140,7 @@ "waterLevels", "selectedWaterLevel" ]), - ...mapState("bottlenecks", ["selectedSurvey"]), + ...mapState("bottlenecks", ["selectedBottleneck", "selectedSurvey"]), additionalSurvey: { get() { return this.$store.getters["fairwayprofile/additionalSurvey"]; @@ -146,6 +179,9 @@ }; }, watch: { + showSplitscreen() { + this.drawDiagram(); + }, currentData() { this.drawDiagram(); },