Mercurial > gemma

changeset 5094:f59ba73ff692

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: better positioning for time-slider during window resizing and opened diagram
author Fadi Abbud <fadi.abbud@intevation.de>
date Wed, 25 Mar 2020 09:37:04 +0100
parents 66270586031a
children e21cbb9768a2 b0d29f0aae3b
files client/src/components/TimeSlider.vue
diffstat 1 files changed, 8 insertions(+), 11 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/TimeSlider.vue	Tue Mar 24 21:32:10 2020 +0100
+++ b/client/src/components/TimeSlider.vue	Wed Mar 25 09:37:04 2020 +0100
@@ -3,9 +3,11 @@
     id="slider"
     :class="[
       'd-flex box ui-element rounded bg-white flex-row',
-      { expanded: showTimeSlider }
+      { expanded: showTimeSlider },
+      {
+        reposition: ['DEFAULT', 'COMPARESURVEYS'].indexOf(this.paneSetup) === -1
+      }
     ]"
-    :style="reposition"
   >
     <div id="timeselection" class="d-flex mt-1 mr-1">
       <input
@@ -46,6 +48,10 @@
   bottom: 0;
   min-width: 100vw;
 }
+// reposition time slider in case of opened diagram
+#slider.reposition {
+  bottom: 50%;
+}
 #slider.expanded {
   max-height: 100%;
   max-width: 100%;
@@ -129,15 +135,6 @@
       "ongoingTimeSlide",
       "openLayersMaps"
     ]),
-    reposition() {
-      // reposition time slider in case of opened diagram
-      if (["DEFAULT", "COMPARESURVEYS"].indexOf(this.paneSetup) === -1) {
-        const height = document.getElementById("main").clientHeight + 1;
-        return `bottom: ${height}px`;
-      } else {
-        return "";
-      }
-    },
     dateSelection: {
       get() {
         const date = this.$store.state.application.selectedTime;