From f8c3a0db9811638a2f59bf46a6df76b22ed241fd Mon Sep 17 00:00:00 2001 From: Willem Dantuma Date: Tue, 25 Feb 2020 11:52:27 +0100 Subject: [PATCH] Select better threshold for mobile detection --- .../zoom-to-extent.component.ts | 78 +++++++++---------- .../side-panel/side-panel.component.scss | 6 +- .../side-panel/side-panel.component.ts | 2 +- 3 files changed, 43 insertions(+), 43 deletions(-) diff --git a/projects/common-map/src/fm-map/components/aol/zoom-to-extent/zoom-to-extent.component.ts b/projects/common-map/src/fm-map/components/aol/zoom-to-extent/zoom-to-extent.component.ts index 7c984ca..f25cd1c 100644 --- a/projects/common-map/src/fm-map/components/aol/zoom-to-extent/zoom-to-extent.component.ts +++ b/projects/common-map/src/fm-map/components/aol/zoom-to-extent/zoom-to-extent.component.ts @@ -1,39 +1,39 @@ -import { Component, Host, Input, OnInit, OnChanges, SimpleChanges, forwardRef } from '@angular/core'; -import { ViewComponent, MapComponent } from 'ngx-openlayers'; - - -@Component({ - selector: 'fm-map-zoom-to-extent', - template: `` -}) -export class ZoomToExtentComponent implements OnChanges { - view: ViewComponent; - map: MapComponent; - @Input() extent: number[]; - @Input() animate: boolean = false; - - constructor(@Host() view: ViewComponent, @Host() map: MapComponent) { - this.view = view; - this.map = map; - } - - ngOnChanges(changes: SimpleChanges) { - if (this.extent) { - var options = { padding: [0, 0, 0, 0],minResolution:1 }; - let size = this.map.instance.getSize(); - let rem = parseFloat(getComputedStyle(document.documentElement).fontSize); - let threshold = 44 * rem; - var left = 1 * rem; - var right = 1 * rem; - var bottom = Math.round(size[1] / 2); - var top = 1 * rem; - if (size[0] > threshold) { - bottom = 1 * rem; - left = 23 * rem; - } - options.padding = [top, right, bottom, left]; - if (this.animate) options["duration"] = 2000; - this.view.instance.fit(this.extent, options); - } - } -} +import { Component, Host, Input, OnInit, OnChanges, SimpleChanges, forwardRef } from '@angular/core'; +import { ViewComponent, MapComponent } from 'ngx-openlayers'; + + +@Component({ + selector: 'fm-map-zoom-to-extent', + template: `` +}) +export class ZoomToExtentComponent implements OnChanges { + view: ViewComponent; + map: MapComponent; + @Input() extent: number[]; + @Input() animate: boolean = false; + + constructor(@Host() view: ViewComponent, @Host() map: MapComponent) { + this.view = view; + this.map = map; + } + + ngOnChanges(changes: SimpleChanges) { + if (this.extent) { + var options = { padding: [0, 0, 0, 0],minResolution:1 }; + let size = this.map.instance.getSize(); + let rem = parseFloat(getComputedStyle(document.documentElement).fontSize); + let threshold = 40 * rem; + var left = 1 * rem; + var right = 1 * rem; + var bottom = Math.round(size[1] / 2); + var top = 1 * rem; + if (size[0] > threshold) { + bottom = 1 * rem; + left = 23 * rem; + } + options.padding = [top, right, bottom, left]; + if (this.animate) options["duration"] = 2000; + this.view.instance.fit(this.extent, options); + } + } +} diff --git a/projects/common/src/fm/components/side-panel/side-panel.component.scss b/projects/common/src/fm/components/side-panel/side-panel.component.scss index f346d25..68747ac 100644 --- a/projects/common/src/fm/components/side-panel/side-panel.component.scss +++ b/projects/common/src/fm/components/side-panel/side-panel.component.scss @@ -83,7 +83,7 @@ div.resizegrip > span { top:-1rem; } -@media screen and (min-width:44rem) { +@media screen and (min-width:40rem) { .side-panel { top:0px; width: 22rem; @@ -108,11 +108,11 @@ div.resizegrip > span { .side-panel.left.hidden { width: 80%; - left:-24rem; + left:-80%; height:100%; } -@media screen and (min-width:44rem) { +@media screen and (min-width:40rem) { .side-panel.left { width:22rem; } diff --git a/projects/common/src/fm/components/side-panel/side-panel.component.ts b/projects/common/src/fm/components/side-panel/side-panel.component.ts index 0c2118d..31dca19 100644 --- a/projects/common/src/fm/components/side-panel/side-panel.component.ts +++ b/projects/common/src/fm/components/side-panel/side-panel.component.ts @@ -28,7 +28,7 @@ export class SidePanelComponent implements OnChanges { checkMobile():boolean { let size = parseFloat(getComputedStyle(document.documentElement).width); let rem = parseFloat(getComputedStyle(document.documentElement).fontSize); - let threshold = 44 * rem; + let threshold = 40 * rem; return !(size>threshold); }