From 872276572875515c4527e3834314b31ef3b3e2af Mon Sep 17 00:00:00 2001 From: "Patrik J. Braun" Date: Sun, 13 May 2018 22:10:56 -0400 Subject: [PATCH] improving phone compatibility --- frontend/app/app.module.ts | 15 ++++-- .../gallery/grid/grid.gallery.component.ts | 39 ++++++++++----- .../lightbox/lightbox.gallery.component.css | 8 ++- .../lightbox/lightbox.gallery.component.html | 49 ++++++++++++------- .../lightbox/lightbox.gallery.component.ts | 10 ++-- frontend/app/login/login.component.css | 31 +++++++----- 6 files changed, 99 insertions(+), 53 deletions(-) diff --git a/frontend/app/app.module.ts b/frontend/app/app.module.ts index 52545515..8d177160 100644 --- a/frontend/app/app.module.ts +++ b/frontend/app/app.module.ts @@ -1,4 +1,11 @@ -import {Injectable, LOCALE_ID, NgModule, TRANSLATIONS} from '@angular/core'; +import { + Injectable, + LOCALE_ID, + NgModule, + TRANSLATIONS, + TRANSLATIONS_FORMAT, + MissingTranslationStrategy +} from '@angular/core'; import {BrowserModule, HAMMER_GESTURE_CONFIG, HammerGestureConfig} from '@angular/platform-browser'; import {FormsModule} from '@angular/forms'; import {AgmCoreModule} from '@agm/core'; @@ -58,7 +65,7 @@ import {HttpClientModule} from '@angular/common/http'; import {DefaultUrlSerializer, UrlSerializer, UrlTree} from '@angular/router'; import {IndexingSettingsComponent} from './settings/indexing/indexing.settings.component'; import {LanguageComponent} from './language/language.component'; -import {I18n} from '@ngx-translate/i18n-polyfill'; +import {I18n, MISSING_TRANSLATION_STRATEGY} from '@ngx-translate/i18n-polyfill'; @Injectable() export class GoogleMapsConfig { @@ -172,12 +179,12 @@ export function translationsFactory(locale: string) { deps: [LOCALE_ID] }, I18n, - /* +/* {provide: TRANSLATIONS, useValue: translationsFactory('en')}, {provide: TRANSLATIONS_FORMAT, useValue: 'xlf'}, {provide: LOCALE_ID, useValue: 'en'}, {provide: MISSING_TRANSLATION_STRATEGY, useValue: MissingTranslationStrategy.Ignore}, - */ +*/ ], bootstrap: [AppComponent] }) diff --git a/frontend/app/gallery/grid/grid.gallery.component.ts b/frontend/app/gallery/grid/grid.gallery.component.ts index b9ca9b25..041e0b8e 100644 --- a/frontend/app/gallery/grid/grid.gallery.component.ts +++ b/frontend/app/gallery/grid/grid.gallery.component.ts @@ -35,6 +35,7 @@ export class GalleryGridComponent implements OnChanges, AfterViewInit, OnDestroy photosToRender: Array = []; containerWidth = 0; + screenHeight = 0; public IMAGE_MARGIN = 2; private TARGET_COL_COUNT = 5; @@ -42,7 +43,6 @@ export class GalleryGridComponent implements OnChanges, AfterViewInit, OnDestroy private MAX_ROW_COUNT = 5; private onScrollFired = false; - private scrollbarWidth = 0; private helperTime = null; isAfterViewInit = false; private renderedPhotoIndex = 0; @@ -55,7 +55,7 @@ export class GalleryGridComponent implements OnChanges, AfterViewInit, OnDestroy if (this.isAfterViewInit === false) { return; } - this.updateContainerWidth(); + this.updateContainerDimensions(); this.sortPhotos(); this.mergeNewPhotos(); this.helperTime = setTimeout(() => { @@ -75,11 +75,13 @@ export class GalleryGridComponent implements OnChanges, AfterViewInit, OnDestroy if (this.isAfterViewInit === false) { return; } - this.updateContainerWidth(); - this.sortPhotos(); // render the same amount of images on resize const renderedIndex = this.renderedPhotoIndex; - this.clearRenderedPhotos(); + // do not rerender if container is not changes + if (this.updateContainerDimensions() === false) { + return; + } + this.sortPhotos(); this.renderPhotos(renderedIndex); } @@ -88,7 +90,7 @@ export class GalleryGridComponent implements OnChanges, AfterViewInit, OnDestroy this.lightbox.setGridPhotoQL(this.gridPhotoQL); - this.updateContainerWidth(); + this.updateContainerDimensions(); this.sortPhotos(); this.clearRenderedPhotos(); this.helperTime = setTimeout(() => { @@ -103,8 +105,8 @@ export class GalleryGridComponent implements OnChanges, AfterViewInit, OnDestroy } - let maxRowHeight = window.innerHeight / this.MIN_ROW_COUNT; - const minRowHeight = window.innerHeight / this.MAX_ROW_COUNT; + let maxRowHeight = this.screenHeight / this.MIN_ROW_COUNT; + const minRowHeight = this.screenHeight / this.MAX_ROW_COUNT; const photoRowBuilder = new GridRowBuilder(this.photos, this.renderedPhotoIndex, @@ -149,9 +151,9 @@ export class GalleryGridComponent implements OnChanges, AfterViewInit, OnDestroy // merge new data with old one let lastSameIndex = 0; let lastRowId = null; - for (let i = 0; i < this.photos.length && i < this.photosToRender.length; i++) { + for (let i = 0; i < this.photos.length && i < this.photosToRender.length; ++i) { - // thIf a photo changed the whole row has to be removed + // If a photo changed the whole row has to be removed if (this.photosToRender[i].rowId !== lastRowId) { lastSameIndex = i; lastRowId = this.photosToRender[i].rowId; @@ -222,11 +224,22 @@ export class GalleryGridComponent implements OnChanges, AfterViewInit, OnDestroy } } - private updateContainerWidth(): number { + private updateContainerDimensions(): boolean { if (!this.gridContainer) { - return; + return false; } - this.containerWidth = this.gridContainer.nativeElement.clientWidth; + + // if the width changed a bit or the height changed a lot + if (this.containerWidth !== this.gridContainer.nativeElement.clientWidth + || this.screenHeight < window.innerHeight * 0.75 + || this.screenHeight > window.innerHeight * 1.25) { + this.screenHeight = window.innerHeight; + this.containerWidth = this.gridContainer.nativeElement.clientWidth; + this.clearRenderedPhotos(); + return true; + } + + return false; } diff --git a/frontend/app/gallery/lightbox/lightbox.gallery.component.css b/frontend/app/gallery/lightbox/lightbox.gallery.component.css index ee841a48..158e8377 100644 --- a/frontend/app/gallery/lightbox/lightbox.gallery.component.css +++ b/frontend/app/gallery/lightbox/lightbox.gallery.component.css @@ -74,8 +74,11 @@ app-gallery-lightbox-photo { } .controls .control-button { - margin-left: 6px; - margin-right: 6px; + margin-left: 0.2em; + margin-right: 0.2em; + display: inline-block; + padding: 0 0.5rem; + font-size: 1.5rem; color: white; cursor: pointer; } @@ -130,6 +133,7 @@ app-info-panel { z-index: 1100; /* Sit on top */ position: fixed; height: 100vh; + max-width: 100vw; right: 0; top: 0; transition: all 0.3s ease-in-out; diff --git a/frontend/app/gallery/lightbox/lightbox.gallery.component.html b/frontend/app/gallery/lightbox/lightbox.gallery.component.html index 71b06e79..e16292d6 100644 --- a/frontend/app/gallery/lightbox/lightbox.gallery.component.html +++ b/frontend/app/gallery/lightbox/lightbox.gallery.component.html @@ -7,7 +7,7 @@
@@ -17,30 +17,43 @@ id="controllers-container" #controls [style.width.px]="getPhotoFrameWidth()" [ngClass]="!controllersDimmed ? 'dim-controls': ''">
- - - - +
+ +
- +
+ - - + +
- +
+ + +
+ +
+ + + +
{ top: 0, left: 0, - width: this.getPhotoFrameWidth() - 400, + width: Math.max(this.getPhotoFrameWidth() - 400, 0), height: this.getPhotoFrameHeight() }, { @@ -343,14 +343,18 @@ export class GalleryLightboxComponent implements OnDestroy, OnInit { window.scrollTo(window.scrollX, value); } - public getPhotoFrameWidth() { + public getPhotoFrameWidth(): number { return Math.max(window.innerWidth - this.infoPanelWidth, 0); } - public getPhotoFrameHeight() { + public getPhotoFrameHeight(): number { return window.innerHeight; } + public getWindowAspectRatio(): number { + return Math.round(this.getPhotoFrameWidth() / this.getPhotoFrameHeight() * 100) / 100; + } + private updateActivePhoto(photoIndex: number, resize: boolean = true) { const pcList = this.gridPhotoQL.toArray(); diff --git a/frontend/app/login/login.component.css b/frontend/app/login/login.component.css index 73fc8226..de29a66c 100644 --- a/frontend/app/login/login.component.css +++ b/frontend/app/login/login.component.css @@ -8,13 +8,29 @@ height: 80px; } + +.card { + min-width: 400px; + background-color: #F7F7F7; + box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); +} + +.error-message { + color: #d9534f; +} + + @media screen and ( max-width: 500px ) { .title h1 { - font-size: 70px; + font-size: 50px; } .title img { - height: 70px; + height: 50px; + } + + .card { + min-width: auto; } } @@ -24,14 +40,3 @@ margin-top: calc((100vh - 120px - 295px) / 2 - 60px) } } - -.card { - min-width: 400px; - background-color: #F7F7F7; - box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); - -} - -.error-message { - color: #d9534f; -}