improving phone compatibility

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

frontend/app/gallery/grid/grid.gallery.component.ts

@@ -35,6 +35,7 @@ export class GalleryGridComponent implements OnChanges, AfterViewInit, OnDestroy
 
   photosToRender: Array<GridPhoto> = [];
   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;
+    let maxRowHeight = this.screenHeight / this.MIN_ROW_COUNT;
-    const minRowHeight = window.innerHeight / this.MAX_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;
   }
 
 

frontend/app/gallery/lightbox/lightbox.gallery.component.css

@@ -74,8 +74,11 @@ app-gallery-lightbox-photo {
 }
 
 .controls .control-button {
-  margin-left: 6px;
+  margin-left: 0.2em;
-  margin-right: 6px;
+  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;

frontend/app/gallery/lightbox/lightbox.gallery.component.html

@@ -7,7 +7,7 @@
   <div class="lightbox" #lightbox>
     <app-gallery-lightbox-photo [gridPhoto]="activePhoto ? activePhoto.gridPhoto : null"
                                 [loadImage]="!animating"
-                                [windowAspect]="getPhotoFrameWidth()/getPhotoFrameHeight()"
+                                [windowAspect]="getWindowAspectRatio()"
                                 #photo>
     </app-gallery-lightbox-photo>
   </div>
@@ -17,30 +17,43 @@
     id="controllers-container" #controls [style.width.px]="getPhotoFrameWidth()"
     [ngClass]="!controllersDimmed ? 'dim-controls':  ''">
     <div class="controls controls-top">
-      <a *ngIf="activePhoto" [href]="activePhoto.gridPhoto.getPhotoPath()"
+      <a *ngIf="activePhoto"
+         class="highlight control-button"
+         [href]="activePhoto.gridPhoto.getPhotoPath()"
          [download]="activePhoto.gridPhoto.photo.name">
-        <span class="oi oi-data-transfer-download highlight control-button"
+        <span class="oi oi-data-transfer-download"
               title="download" i18n-title></span>
       </a>
-      <span class="oi oi-info highlight control-button"
-            (click)="toggleInfoPanel()"
-            title="info" i18n-title></span>
 
-      <span class="oi oi-fullscreen-exit highlight control-button"
+      <div class=" highlight control-button" (click)="toggleInfoPanel()"
-            *ngIf="fullScreenService.isFullScreenEnabled()"
+           title="info" i18n-title>
-            (click)="fullScreenService.exitFullScreen()"
+        <span class="oi oi-info"></span>
-            title="toggle fullscreen" i18n-title>
+      </div>
 
-      </span>
+      <div *ngIf="fullScreenService.isFullScreenEnabled()"
+           class=" highlight control-button"
+           (click)="fullScreenService.exitFullScreen()"
+           title="toggle fullscreen" i18n-title>
+        <span class="oi oi-fullscreen-exit">
 
-      <span class="oi oi-fullscreen-enter highlight control-button"
+        </span>
-            *ngIf="!fullScreenService.isFullScreenEnabled()"
+      </div>
-            (click)="fullScreenService.showFullScreen(root)"
-            title="toggle fullscreen" i18n-title>
-      </span>
 
-      <span class="oi oi-x highlight control-button" (click)="hide()" title="close"
+      <div *ngIf="!fullScreenService.isFullScreenEnabled()"
-            i18n-title></span>
+           class="highlight control-button"
+           (click)="fullScreenService.showFullScreen(root)"
+           title="toggle fullscreen" i18n-title>
+        <span class="oi oi-fullscreen-enter">
+        </span>
+      </div>
+
+      <div class="highlight control-button"
+           (click)="hide()"
+           title="close" i18n-title>
+        <span class="oi oi-x">
+
+        </span>
+      </div>
     </div>
 
     <div class="navigation-arrow highlight"

frontend/app/gallery/lightbox/lightbox.gallery.component.ts

@@ -268,7 +268,7 @@ export class GalleryLightboxComponent implements OnDestroy, OnInit {
       this.animateLightbox(<Dimension>{
           top: 0,
           left: 0,
-          width: this.getPhotoFrameWidth() - 400,
+          width: Math.max(this.getPhotoFrameWidth() - 400, 0),
           height: this.getPhotoFrameHeight()
         },
         <Dimension>{
@@ -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();
 

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