FarmMaps/FarmMapsLib
8
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Select better threshold for mobile detection
All checks were successful
FarmMaps.Develop/FarmMapsLib/develop This commit looks good
Details

Browse Source
This commit is contained in:
Willem Dantuma 2020-02-25 11:52:27 +01:00
parent 0eaa3065a3
commit f8c3a0db98
3 changed files with 43 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
projects/common-map/src/fm-map/components/aol/zoom-to-extent/zoom-to-extent.component.ts
View File

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

6
projects/common/src/fm/components/side-panel/side-panel.component.scss
View File

@ -83,7 +83,7 @@ div.resizegrip > span {
top:-1rem; top:-1rem;
} }
@media screen and (min-width:44rem) { @media screen and (min-width:40rem) {
.side-panel { .side-panel {
top:0px; top:0px;
width: 22rem; width: 22rem;
@ -108,11 +108,11 @@ div.resizegrip > span {
.side-panel.left.hidden { .side-panel.left.hidden {
width: 80%; width: 80%;
left:-24rem; left:-80%;
height:100%; height:100%;
} }
@media screen and (min-width:44rem) { @media screen and (min-width:40rem) {
.side-panel.left { .side-panel.left {
width:22rem; width:22rem;
} }

2
projects/common/src/fm/components/side-panel/side-panel.component.ts
View File

@ -28,7 +28,7 @@ export class SidePanelComponent implements OnChanges {
checkMobile():boolean { checkMobile():boolean {
let size = parseFloat(getComputedStyle(document.documentElement).width); let size = parseFloat(getComputedStyle(document.documentElement).width);
let rem = parseFloat(getComputedStyle(document.documentElement).fontSize); let rem = parseFloat(getComputedStyle(document.documentElement).fontSize);
let threshold = 44 * rem; let threshold = 40 * rem;
return !(size>threshold); return !(size>threshold);
} }