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

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

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

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