From f8c3a0db9811638a2f59bf46a6df76b22ed241fd Mon Sep 17 00:00:00 2001
From: Willem Dantuma <willem.dantuma@dobs.nl>
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: `<ng-content></ng-content>`
-})
-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: `<ng-content></ng-content>`
+})
+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);
   }