optimizing for phone

README.md

@@ -78,6 +78,7 @@ To configure it. Run `PiGallery2` first to create `config.json` file, then edit
    * showing low-res thumbnail while full image loads
    * Information panel for showing **Exif info**  
    * Automatic playing
+   * gesture support (swipe left, right, up)
  * Client side caching (directories and search results)
  * Rendering **photos** with GPS coordinates **on google map**
    * .gpx file support - `future plan`

frontend/app/app.component.ts

@@ -6,8 +6,7 @@ import {Config} from "../../common/config/public/Config";
 import {Title} from "@angular/platform-browser";
 import {NotificationService} from "./model/notification.service";
 import {ShareService} from "./gallery/share.service";
-
+import "hammerjs";
-
 @Component({
   selector: 'pi-gallery2-app',
   template: `<router-outlet></router-outlet>`,

frontend/app/app.module.ts

@@ -1,5 +1,5 @@
 import {Injectable, NgModule} from "@angular/core";
-import {BrowserModule} from "@angular/platform-browser";
+import {BrowserModule, HAMMER_GESTURE_CONFIG, HammerGestureConfig} from "@angular/platform-browser";
 import {FormsModule} from "@angular/forms";
 import {HttpModule} from "@angular/http";
 import {AgmCoreModule} from "@agm/core";
@@ -53,6 +53,7 @@ import {SettingsService} from "./settings/settings.service";
 import {ShareSettingsComponent} from "./settings/share/share.settings.component";
 import {BasicSettingsComponent} from "./settings/basic/basic.settings.component";
 import {OtherSettingsComponent} from "./settings/other/other.settings.component";
+
 @Injectable()
 export class GoogleMapsConfig {
   apiKey: string;
@@ -62,6 +63,12 @@ export class GoogleMapsConfig {
   }
 }
 
+export class MyHammerConfig extends HammerGestureConfig {
+  overrides = <any>{
+    'swipe': {direction: 31} // enable swipe up
+  }
+}
+
 @NgModule({
   imports: [
     BrowserModule,
@@ -109,6 +116,7 @@ export class GoogleMapsConfig {
     StringifyRole],
   providers: [
     {provide: LAZY_MAPS_API_CONFIG, useClass: GoogleMapsConfig},
+    {provide: HAMMER_GESTURE_CONFIG, useClass: MyHammerConfig},
     NetworkService,
     ShareService,
     UserService,

frontend/app/gallery/lightbox/infopanel/info-panel.lightbox.gallery.component.css

@@ -1,6 +1,7 @@
 .content {
   background-color: #F7F7F7;
   height: 100%;
+  overflow-y: scroll;
 }
 
 .row {
@@ -36,3 +37,9 @@
   width: 400px;
   height: 400px;
 }
+
+.close {
+  margin-top: 5px;
+  margin-right: 12px;
+  font-size: 36px;
+}

frontend/app/gallery/lightbox/infopanel/info-panel.lightbox.gallery.component.html

@@ -1,8 +1,8 @@
 <div class="content">
-  <div class="row">
+  <div class="modal-header">
-    <div class="col-xs-12">
+    <button type="button" class="close" (click)="close()" aria-label="Close"><span
-      <h1>Info</h1>
+      aria-hidden="true">&times;</span></button>
-    </div>
+    <h1 class="modal-title">Info</h1>
   </div>
   <div class="row">
     <div class="col-xs-2">

frontend/app/gallery/lightbox/infopanel/info-panel.lightbox.gallery.component.ts

@@ -1,4 +1,4 @@
-import {Component, ElementRef, Input} from "@angular/core";
+import {Component, ElementRef, EventEmitter, Input, Output} from "@angular/core";
 import {PhotoDTO} from "../../../../../common/entities/PhotoDTO";
 import {Config} from "../../../../../common/config/public/Config";
 
@@ -9,7 +9,7 @@ import {Config} from "../../../../../common/config/public/Config";
 })
 export class InfoPanelLightboxComponent {
   @Input() photo: PhotoDTO;
-
+  @Output('onClose') onClose = new EventEmitter();
   public mapEnabled = true;
 
   constructor(public elementRef: ElementRef) {
@@ -83,5 +83,9 @@ export class InfoPanelLightboxComponent {
 
     return str;
   }
+
+  close() {
+    this.onClose.emit();
+  }
 }
 

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

@@ -12,6 +12,7 @@
     </gallery-lightbox-photo>
   </div>
   <div
+    (swipeleft)="nextImage()" (swiperight)="prevImage()" (swipeup)="hide()"
     *ngIf="controllersVisible"
     id="controllers-container" #controls [style.width.px]="getPhotoFrameWidth()"
     [ngClass]="!controllersDimmed ? 'dim-controls':  ''">
@@ -63,7 +64,8 @@
   <info-panel *ngIf="activePhoto && infoPanelVisible"
               id="info-panel"
               [style.width.px]="infoPanelWidth"
-              [photo]="activePhoto.gridPhoto.photo">
+              [photo]="activePhoto.gridPhoto.photo"
+              (onClose)="hideInfoPanel()">
 
   </info-panel>
 </div>

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

@@ -25,6 +25,8 @@ import {Observable} from "rxjs/Observable";
   templateUrl: './lightbox.gallery.component.html'
 })
 export class GalleryLightboxComponent implements OnDestroy {
+
+
   @Output('onLastElement') onLastElement = new EventEmitter();
   @ViewChild("photo") photoElement: GalleryLightboxPhotoComponent;
   @ViewChild("lightbox") lightboxElement: ElementRef;
@@ -81,7 +83,6 @@ export class GalleryLightboxComponent implements OnDestroy {
       }
       return;
     }
-    console.warn("can't find photo to show next");
   }
 
   public prevImage() {
@@ -90,7 +91,6 @@ export class GalleryLightboxComponent implements OnDestroy {
       this.showPhoto(this.activePhotoId - 1);
       return;
     }
-    console.warn("can't find photo to show prev");
   }
 
 

frontend/app/login/login.component.css

@@ -11,6 +11,16 @@
   height: 80px;
 }
 
+@media screen and ( max-width: 500px ) {
+  .title h1 {
+    font-size: 70px;
+  }
+
+  .title img {
+    height: 70px;
+  }
+}
+
 .title {
   margin-top: 40px;
   width: 100%;

frontend/app/settings/map/map.settings.component.html

@@ -1,8 +1,8 @@
 <form #settingsForm="ngForm" class="form-horizontal">
   <div class="panel panel-default">
     <div class="panel-heading">
-      <h3 class="panel-title col-sm-4">Map settings</h3>
+      <h3 class="panel-title col-xs-4">Map settings</h3>
-      <div class="switch-wrapper col-sm-8">
+      <div class="switch-wrapper col-xs-8">
         <bSwitch
           class="switch"
           name="enabled"

frontend/app/settings/search/search.settings.component.html

@@ -2,8 +2,8 @@
   <div class="panel panel-default"
        [ngClass]="settings.enabled && !_settingsService.isSupported()?'panel-warning':''">
     <div class="panel-heading">
-      <h3 class="panel-title col-sm-4">Search settings</h3>
+      <h3 class="panel-title col-xs-6">Search settings</h3>
-      <div class="switch-wrapper col-sm-8">
+      <div class="switch-wrapper col-xs-6">
         <bSwitch
           class="switch"
           name="enabled"

frontend/app/settings/share/share.settings.component.html

@@ -2,8 +2,8 @@
   <div class="panel panel-default"
        [ngClass]="settings.enabled && !_settingsService.isSupported()?'panel-warning':''">
     <div class="panel-heading">
-      <h3 class="panel-title col-sm-4">Share settings</h3>
+      <h3 class="panel-title col-xs-6">Share settings</h3>
-      <div class="switch-wrapper col-sm-8">
+      <div class="switch-wrapper col-xs-6">
         <bSwitch
           class="switch"
           name="enabled"

frontend/app/settings/usermanager/usermanager.settings.component.html

@@ -1,7 +1,7 @@
 <div class="panel panel-default">
   <div class="panel-heading">
-    <h3 class="panel-title col-sm-4">Password protection </h3>
+    <h3 class="panel-title col-xs-6">Password protection </h3>
-    <div class="switch-wrapper col-sm-8">
+    <div class="switch-wrapper col-xs-6">
       <bSwitch
         class="switch"
         name="enabled"

frontend/index.html

@@ -13,6 +13,7 @@
         href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.4/css/bootstrap3/bootstrap-switch.css">
 
   <script type="text/javascript" src="config_inject.js"></script>
+
 </head>
 
 <body style="overflow-y: scroll">

package.json

@@ -35,7 +35,7 @@
     "jimp": "0.2.28",
     "mysql": "2.13.0",
     "reflect-metadata": "0.1.10",
-    "ts-node-iptc": "^1.0.7",
+    "ts-node-iptc": "^1.0.8",
     "typeconfig": "1.0.4",
     "typeorm": "0.0.11",
     "winston": "2.3.1"
@@ -71,12 +71,13 @@
     "ejs-loader": "^0.3.0",
     "gulp": "^3.9.1",
     "gulp-json-modify": "^1.0.2",
-    "gulp-typescript": "^3.2.0",
+    "gulp-typescript": "^3.2.1",
     "gulp-zip": "^4.0.0",
+    "hammerjs": "^2.0.8",
     "intl": "^1.2.5",
     "jasmine-core": "^2.6.4",
     "jasmine-spec-reporter": "~4.1.1",
-    "jw-bootstrap-switch-ng2": "^1.0.3",
+    "jw-bootstrap-switch-ng2": "^1.0.4",
     "karma": "^1.7.0",
     "karma-cli": "^1.0.1",
     "karma-coverage-istanbul-reporter": "^1.3.0",