1
0
mirror of https://github.com/xuthus83/pigallery2.git synced 2024-11-03 21:04:03 +08:00

Add device detection for portrait mode in directories listing

This commit is contained in:
mcdamo 2021-05-06 19:26:59 +10:00
parent 77363f208e
commit 5b05608870
3 changed files with 21 additions and 2 deletions

15
package-lock.json generated
View File

@ -14027,6 +14027,21 @@
}
}
},
"ngx-device-detector": {
"version": "2.0.9",
"resolved": "https://registry.npmjs.org/ngx-device-detector/-/ngx-device-detector-2.0.9.tgz",
"integrity": "sha512-bsAO7w7REwHPTF1p4MrZJFqsNJLW8vnIcNhYDQxwFwZe3JOpIEcV0VebJCIG0HzkLg3/YlVsatTnXkErw111BA==",
"requires": {
"tslib": "^2.0.0"
},
"dependencies": {
"tslib": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz",
"integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w=="
}
}
},
"ngx-toastr": {
"version": "13.2.1",
"resolved": "https://registry.npmjs.org/ngx-toastr/-/ngx-toastr-13.2.1.tgz",

View File

@ -47,6 +47,7 @@
"image-size": "0.9.7",
"jimp": "0.16.1",
"locale": "0.1.0",
"ngx-device-detector": "^2.0.9",
"node-geocoder": "3.27.0",
"reflect-metadata": "0.1.13",
"sharp": "0.23.4",

View File

@ -1,4 +1,5 @@
import {Component, ElementRef, Input, OnChanges} from '@angular/core';
import { DeviceDetectorService } from 'ngx-device-detector';
import {DirectoryDTO} from '../../../../../common/entities/DirectoryDTO';
@Component({
@ -10,8 +11,10 @@ export class DirectoriesComponent implements OnChanges {
@Input() directories: DirectoryDTO[];
size: number;
isDesktop: boolean;
constructor(private container: ElementRef) {
constructor(private container: ElementRef, private deviceService: DeviceDetectorService) {
this.isDesktop = this.deviceService.isDesktop();
}
ngOnChanges(): void {
@ -19,7 +22,7 @@ export class DirectoriesComponent implements OnChanges {
}
private updateSize(): void {
if (window.innerWidth < window.innerHeight) {
if (!this.isDesktop && window.innerWidth < window.innerHeight) {
// On portrait mode, show 2 directories side by side with some padding
this.size = Math.round(window.innerWidth / 2) - 25;
} else {