sorting photo to creation data and scrolling to image with lightbox close

frontend/app/gallery/directory/directory.gallery.component.html

@@ -1,6 +1,3 @@
-<!--<a md-raised-button class="md-raised " [routerLink]="['Gallery',{directory: getDirectoryPath()}]" aria-label="More">
-    <i md-icon>folder</i> {{directory.name}}
-</a>-->
 <a  class="button " [routerLink]="['Gallery',{directory: getDirectoryPath()}]" >
   {{directory.name}}
 </a>

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

@@ -91,6 +91,17 @@ export class GalleryGridComponent implements OnChanges,AfterViewInit {
         let containerWidth = this.getContainerWidth();
         this.renderedContainerWidth = containerWidth;
 
+        this.photos.sort((a:Photo, b:Photo) => {
+            if (a.metadata.creationDate > b.metadata.creationDate) {
+                return 1;
+            }
+            if (a.metadata.creationDate < b.metadata.creationDate) {
+                return -1;
+            }
+            // a must be equal to b
+            return 0;
+        });
+        
         this.photosToRender = [];
         let i = 0;
 

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

@@ -31,6 +31,7 @@
     display: inline-block;
     padding: 15px;
     cursor: pointer;
+    font-size: x-large;
 }
 
 .navigation-arrow span {
@@ -44,7 +45,6 @@
     left: 0;
     position: fixed;;
     color: white;
-    font-size: x-large;
 }
 
 #rightArrow {
@@ -58,11 +58,12 @@
     text-align: right;
     width: 100%;
     padding: 5px;
+    font-size: large;
 }
 
 #controls span {
-    margin-left: 2px;
+    margin-left: 6px;
-    margin-right: 2px;
+    margin-right: 6px;
     color: white;
     cursor: pointer;
 }

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

@@ -136,6 +136,10 @@ export class GalleryLightboxComponent {
     public hide() {
         console.log("hiding");
         let to = this.activePhoto.getDimension();
+        //iff target image out of screen -> scroll to there
+        if (this.getBodyScrollTop() > to.top || this.getBodyScrollTop() + this.getScreenHeight() < to.top) {
+            this.setBodyScrollTop(to.top);
+        }
         to.top -= this.getBodyScrollTop();
 
 
@@ -163,6 +167,7 @@ export class GalleryLightboxComponent {
         let fromImage = this.calcLightBoxPhotoDimension(this.activePhoto.gridPhoto.photo).toStyle();
         let toImage = {width: to.width + "px", height: to.height + "px", top: "0px", left: "0px"};
 
+
         this.forceAnimateTo(fromImage,
             toImage,
             this.imgContainer.nativeElement.nativeElement);
@@ -220,6 +225,10 @@ export class GalleryLightboxComponent {
         return this.dom.getProperty(this.dom.query('body'), 'scrollTop');
     }
 
+    private setBodyScrollTop(value) {
+        return this.dom.setProperty(this.dom.query('body'), 'scrollTop', value);
+    }
+
     private getScreenWidth() {
         return window.innerWidth;
     }