Select better threshold for mobile detection

projects/common-map/src/fm-map/components/aol/rotation-reset/rotation-reset.component.scss

@@ -7,6 +7,7 @@
   opacity: 1;
   border-radius:1.75em;
   padding:0;
+  margin-top:0.5em;
 }
 
 #north {
@@ -50,8 +51,6 @@ div.compass:hover #north {
   fill:$white;
 }
 
-
-
 .compass-n {    
   transition: opacity 1s ease-out 2s,height 1s ease-out 3s,margin-top 1s ease-out 3s;
   opacity:0;

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 { Component, Host, Input, OnInit, OnChanges, SimpleChanges, forwardRef } from '@angular/core';
-import { ViewComponent, MapComponent } from 'ngx-openlayers';
+import { ViewComponent, MapComponent } from 'ngx-openlayers';
-
+
- 
+ 
-@Component({
+@Component({
-  selector: 'fm-map-zoom-to-extent',
+  selector: 'fm-map-zoom-to-extent',
-  template: `<ng-content></ng-content>`
+  template: `<ng-content></ng-content>`
-})
+})
-export class ZoomToExtentComponent implements OnChanges {
+export class ZoomToExtentComponent implements OnChanges {
-  view: ViewComponent;
+  view: ViewComponent;
-  map: MapComponent;
+  map: MapComponent;
-  @Input() extent: number[];
+  @Input() extent: number[];
-  @Input() animate: boolean = false;
+  @Input() animate: boolean = false;
-
+
-  constructor(@Host() view: ViewComponent, @Host() map: MapComponent) {
+  constructor(@Host() view: ViewComponent, @Host() map: MapComponent) {
-    this.view = view;
+    this.view = view;
-    this.map = map;
+    this.map = map;
-  }
+  }
-
+
-  ngOnChanges(changes: SimpleChanges) {
+  ngOnChanges(changes: SimpleChanges) {
-    if (this.extent) {
+    if (this.extent) {
-      var options = { padding: [0, 0, 0, 0],minResolution:1 };
+      var options = { padding: [0, 0, 0, 0],minResolution:1 };
-      let size = this.map.instance.getSize();
+      let size = this.map.instance.getSize();
-      let rem = parseFloat(getComputedStyle(document.documentElement).fontSize);
+      let rem = parseFloat(getComputedStyle(document.documentElement).fontSize);
-      let threshold = 44 * rem;
+      let threshold = 40 * rem;
-      var left = 1 * rem;
+      var left = 1 * rem;
-      var right = 1 * rem;
+      var right = 1 * rem;
-      var bottom = Math.round(size[1] / 2);
+      var bottom = Math.round(size[1] / 2);
-      var top = 1 * rem;
+      var top = 1 * rem;
-      if (size[0] > threshold) {
+      if (size[0] > threshold) {
-        bottom = 1 * rem;
+        bottom = 1 * rem;
-        left = 23 * rem;
+        left = 23 * rem;
-      }
+      }
-      options.padding = [top, right, bottom, left];
+      options.padding = [top, right, bottom, left];
-      if (this.animate) options["duration"] = 2000;
+      if (this.animate) options["duration"] = 2000;
-      this.view.instance.fit(this.extent, options);
+      this.view.instance.fit(this.extent, options);
-    }
+    }
-  }
+  }
-}
+}

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;
   }

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);
   }