* row height based image placement

src/app/gallery/album/album.component.css

@@ -9,3 +9,15 @@
     float: left;
     width: 510px;
 }
+
+.align.right {
+    float: right;
+}
+
+.align.left {
+    float: left;
+}
+
+h1 {
+    padding-right: 15px;
+}

src/app/gallery/album/album.component.html

@@ -1,5 +1,5 @@
 <div class="main container">
-  <h1>{{album.name}}</h1>
+  <h1>{{album.name}}<span class="align right"><a [routerLink]="['']">back to album list</a></span></h1>
   <div class="row images">
     <app-thumbnail *ngFor="let thumbnail of thumbnailsLeft"
                    [image]="thumbnail.image"

src/app/gallery/album/album.component.ts

@@ -8,6 +8,10 @@ import {environment} from "../../../environments/environment";
 import {Image} from "../shared/image.model";
 import {Thumbnail} from "../shared/thumbnail.model";
 
+const IDX_LEFT = 0;
+const IDX_MIDDLE = 1;
+const IDX_RIGHT = 2;
+
 @Component({
   selector: 'app-album',
   templateUrl: './album.component.html',
@@ -16,7 +20,14 @@ import {Thumbnail} from "../shared/thumbnail.model";
 export class AlbumComponent implements OnInit {
 
   public album: Album = new Album();
-  private thumbnails: Array<Thumbnail>;
+
+  private leftHeight: number = 0;
+  private middleHeight: number = 0;
+  private rightHeight: number = 0;
+
+  public thumbnailsLeft: Array<Thumbnail> = [];
+  public thumbnailsMiddle: Array<Thumbnail> = [];
+  public thumbnailsRight: Array<Thumbnail> = [];
 
   constructor(private titleService: Title,
               private route: ActivatedRoute,
@@ -26,7 +37,7 @@ export class AlbumComponent implements OnInit {
     this.route.data.subscribe((data: { albums: Array<Album>}) => {
       this.album = data.albums.find(album => album.slug == this.route.snapshot.params.slug);
       this.titleService.setTitle(`${this.album.name} - photos.yvan.hu`);
-      this.thumbnails = this.initThumbnails();
+      this.initThumbnails();
       if(this.route.snapshot.params.image) {
         this.imageClick(
           this.route.snapshot.params.slug,
@@ -36,8 +47,8 @@ export class AlbumComponent implements OnInit {
     });
   }
 
-  private initThumbnails(): Array<Thumbnail> {
+  private initThumbnails() {
-    return this.album.images.map(image => <Thumbnail>{
+    this.album.images.map(image => <Thumbnail>{
       slug: '',
       image: this.imageUrl(image),
       path: image.path,
@@ -46,36 +57,27 @@ export class AlbumComponent implements OnInit {
         extraRight: '',
         extraLeft: '',
       },
+      height: image.height,
+    }).map(thumbnail => {
+      let heights = [this.leftHeight, this.middleHeight, this.rightHeight];
+      let idx = heights.reduce((low, nxt, idx) => nxt < heights[low] ? idx : low, 0);
+      switch(idx) {
+        case IDX_LEFT:
+          this.thumbnailsLeft.push(thumbnail);
+          this.leftHeight += (thumbnail.height + 10);
+          break;
+        case IDX_MIDDLE:
+          this.thumbnailsMiddle.push(thumbnail);
+          this.middleHeight += (thumbnail.height + 10);
+          break;
+        case IDX_RIGHT:
+          this.thumbnailsRight.push(thumbnail);
+          this.rightHeight += (thumbnail.height + 10);
+          break;
+      }
     });
   }
 
-  get thumbnailsLeft(): Array<Thumbnail> {
-    let thumbs = [];
-    for (let i=0;i<this.thumbnails.length; i=i+3) {
-      thumbs.push(this.thumbnails[i]);
-
-    }
-    return thumbs;
-  }
-
-  get thumbnailsMiddle(): Array<Thumbnail> {
-    let thumbs = [];
-    for (let i=1;i<this.thumbnails.length; i=i+3) {
-      thumbs.push(this.thumbnails[i]);
-
-    }
-    return thumbs;
-  }
-
-  get thumbnailsRight(): Array<Thumbnail> {
-    let thumbs = [];
-    for (let i=2;i<this.thumbnails.length; i=i+3) {
-      thumbs.push(this.thumbnails[i]);
-
-    }
-    return thumbs;
-  }
-
   private imageUrl(image: Image): string {
     return environment.apiUrl + `/image/${this.route.snapshot.params.slug}/${image.path}/thumb`;
   }

src/app/gallery/gallery/gallery.component.html

@@ -1,21 +1,21 @@
 <div class="main container">
   <h1>Albums</h1>
   <div class="row images">
-    <app-thumbnail *ngFor="let thumbnail of thumbnailsLeft"
+    <a app-thumbnail *ngFor="let thumbnail of thumbnailsLeft"
                    [image]="thumbnail.image"
                    [label]="thumbnail.label"
-                   [routerLink]="['/album', thumbnail.slug]"></app-thumbnail>
+                   [routerLink]="['/album', thumbnail.slug]"></a>
   </div>
   <div class="row images">
-    <app-thumbnail *ngFor="let thumbnail of thumbnailsMiddle"
+    <a app-thumbnail *ngFor="let thumbnail of thumbnailsMiddle"
                    [image]="thumbnail.image"
                    [label]="thumbnail.label"
-                   [routerLink]="['/album', thumbnail.slug]"></app-thumbnail>
+                   [routerLink]="['/album', thumbnail.slug]"></a>
   </div>
   <div class="row images">
-    <app-thumbnail *ngFor="let thumbnail of thumbnailsRight"
+    <a app-thumbnail *ngFor="let thumbnail of thumbnailsRight"
                    [image]="thumbnail.image"
                    [label]="thumbnail.label"
-                   [routerLink]="['/album', thumbnail.slug]"></app-thumbnail>
+                   [routerLink]="['/album', thumbnail.slug]"></a>
   </div>
 </div>

src/app/gallery/gallery/gallery.component.ts

@@ -23,7 +23,7 @@ export class GalleryComponent implements OnInit {
   ngOnInit() {
     this.titleService.setTitle('Albums - photos.yvan.hu');
     this.route.data.subscribe((data: { albums: Array<Album> }) => {
-      this.albums = data.albums;
+      this.albums = data.albums.filter(album => album.isPublic).reverse();
       this.thumbnails = this.initThumbnails();
     });
   }

src/app/gallery/shared/image.model.ts

@@ -1,4 +1,7 @@
 export class Image {
+  public dir: string = "";
   public label: string = "";
   public path: string = "";
+  public width: number = 0;
+  public height: number = 0;
 }

src/app/gallery/shared/thumbnail.model.ts

@@ -5,4 +5,5 @@ export class Thumbnail {
   public image: string = '';
   public path: string = '';
   public label: ThumbLabel = new ThumbLabel();
+  public height: number = 0;
 }

src/app/gallery/thumbnail/thumbnail.component.ts

@@ -3,7 +3,7 @@ import {Component, Input, OnInit} from '@angular/core';
 import {ThumbLabel} from "../shared/thumb-label.model";
 
 @Component({
-  selector: 'app-thumbnail',
+  selector: 'app-thumbnail, [app-thumbnail]',
   templateUrl: './thumbnail.component.html',
   styleUrls: ['./thumbnail.component.css']
 })

src/styles.css

@@ -48,18 +48,18 @@ a:hover {
 /* app style */
 @media screen and (min-width: 600px) {
     .main.container {
-        width: 540px;
+        width: 515px;
     }
 }
 
 @media screen and (min-width: 1200px) {
     .main.container {
-        width: 1060px;
+        width: 1030px;
     }
 }
 
 @media screen and (min-width: 1600px) {
     .main.container {
-        width: 1580px;
+        width: 1545px;
     }
 }