Mercurial > gemma
changeset 5094:f59ba73ff692
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;