Mercurial > gemma
changeset 3235:0c5a28ffe9ee
available_fairway_depth: flexible layouting options
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Fri, 10 May 2019 10:49:37 +0200 |
parents | 22dfaa22e96e |
children | 5914d615f703 |
files | client/src/components/fairway/AvailableFairwayDepth.vue client/src/lib/mixins.js |
diffstat | 2 files changed, 6 insertions(+), 4 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/fairway/AvailableFairwayDepth.vue Fri May 10 10:35:39 2019 +0200 +++ b/client/src/components/fairway/AvailableFairwayDepth.vue Fri May 10 10:49:37 2019 +0200 @@ -100,7 +100,9 @@ this.$store.commit("application/paneSetup", "DEFAULT"); }, drawDiagram() { - this.dimensions = this.getDimensions(); + this.dimensions = this.getDimensions({ + main: { top: 20, right: 20, bottom: 110, left: 200 } + }); this.yScale = d3 .scaleLinear() .domain([-33, 33])
--- a/client/src/lib/mixins.js Fri May 10 10:35:39 2019 +0200 +++ b/client/src/lib/mixins.js Fri May 10 10:49:37 2019 +0200 @@ -31,14 +31,14 @@ export const diagram = { methods: { - getDimensions() { + getDimensions({ main, nav }) { //dimensions and margins const svgWidth = document.querySelector("#" + this.containerId) .clientWidth; const svgHeight = document.querySelector("#" + this.containerId) .clientHeight; - const mainMargin = { top: 20, right: 20, bottom: 110, left: 80 }; - const navMargin = { + const mainMargin = main || { top: 20, right: 20, bottom: 110, left: 80 }; + const navMargin = nav || { top: svgHeight - mainMargin.top - 65, right: 20, bottom: 30,