katja's git: oeffisearch

journeysCanvas: fix canvas-size and position

diff --git a/src/journeysCanvas.js b/src/journeysCanvas.js
@@ -10,15 +10,6 @@ export class JourneysCanvas extends LitOverlay {
 		canvasState: { state: true },
 	};
 
-	static styles = [
-		super.styles,
-		css`
-		canvas {
-			display: block;
-		}
-		`
-	];
-
 	static colors = {
 		fill: {
 			'tram': '#cc5555',

@@ -84,6 +75,10 @@ export class JourneysCanvas extends LitOverlay {
 		if (isDevServer) console.info('canvasState: ', this.canvasState);
 	}
 
+	resetCanvasPosition = () => {
+		this.canvasState.offsetX = (window.innerWidth / this.canvasState.dpr) > 600 ? 140 : 80;
+	};
+
 	getCanvas = () => html`<canvas @mousedown=${this.mouseDownHandler} @touchstart=${this.mouseDownHandler}></canvas>`;
 
 	connectCanvas = () => {

@@ -130,8 +125,10 @@ export class JourneysCanvas extends LitOverlay {
 		this.canvasState.rectWidthWithPadding = this.canvasState.rectWidth + 2 * this.canvasState.padding;
 
 		const rect = this.renderRoot.querySelector('header').getBoundingClientRect();
-		this.canvasElement.width  = window.innerWidth * this.canvasState.dpr;
-		this.canvasElement.height = (window.innerHeight - rect.height) * this.canvasState.dpr;
+		this.canvasElement.width        = window.innerWidth * this.canvasState.dpr;
+		this.canvasElement.height       = (window.innerHeight - rect.height) * this.canvasState.dpr;
+		this.canvasElement.style.width  = `${window.innerWidth}px`;
+		this.canvasElement.style.height = `${window.innerHeight - rect.height - 4}px`;
 
 		this.canvasContext.restore();
 		this.canvasContext.save();

diff --git a/src/journeysView.js b/src/journeysView.js
@@ -72,7 +72,10 @@ export class JourneysView extends JourneysCanvas {
 
 		if (previous.has('mode') && this.settingsState.journeysViewMode !== this.mode) this.settingsState.setJourneysViewMode(this.mode);
 
-		if (previous.has('slug')) await this.updateViewState();
+		if (previous.has('slug')) {
+			this.resetCanvasPosition();
+			await this.updateViewState();
+		}
 
 		if (previous.has('mode')) {
 			if (this.mode === 'canvas') this.connectCanvas();