Mercurial > gemma

diff client/src/fairway/Fairwayprofile.vue @ 1146:74e180ad3d6b

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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();
     },