* turned into column based design

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

@@ -1,23 +1,46 @@
 .main.container {
     margin-left: auto;
     margin-right: auto;
+    margin-bottom: 80px;
     padding-left: 10px;
 }
 
 .row {
-    display: block;
+    line-height: 0;
-    float: left;
+    column-gap: 20px;
-    width: 510px;
 }
 
-.align.right {
+a {
-    float: right;
+    cursor: pointer;
+    color: #2AA198;
+    text-decoration: none;
+    transition-property: color;
+    transition-duration: 0.5s;
+    transition-timing-function: ease-out;
 }
 
-.align.left {
+a:hover {
-    float: left;
+    color: #2a70a1;
+    text-decoration: none;
 }
 
-h1 {
+/* mobile */
-    padding-right: 15px;
+@media only screen and (max-width: 779px) {
+    .row {
+        column-count: 1;
+    }
+}
+
+/* tablet */
+@media only screen and (min-width: 780px) and (max-width: 1219px) {
+    .row {
+        column-count: 2;
+    }
+}
+
+/* desktop */
+@media screen and (min-width: 1220px) {
+    .row {
+        column-count: 3;
+    }
 }

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

@@ -1,25 +1,15 @@
 <div class="main container">
-  <h1>{{album.name}}<span class="align right">
+  <h1>
-    <a [href]="exportUrl" title="Download compressed album"><i class="fa fa-download"></i></a>
     <a [routerLink]="['']" title="Back to albums list"><i class="fa fa-level-up"></i></a>
-  </span></h1>
+    {{album.name}}
+    <a [href]="exportUrl" title="Download compressed album"><i class="fa fa-download"></i></a>
+  </h1>
   <div class="row images">
-    <app-thumbnail *ngFor="let thumbnail of thumbnailsLeft"
+  <app-thumbnail *ngFor="let thumbnail of thumbnails"
                  [image]="thumbnail.image"
                  [label]="thumbnail.label"
                  (click)="imageClick(album.slug, thumbnail.path)"></app-thumbnail>
   </div>
   <div class="row images">
-    <app-thumbnail *ngFor="let thumbnail of thumbnailsMiddle"
-                   [image]="thumbnail.image"
-                   [label]="thumbnail.label"
-                   (click)="imageClick(album.slug, thumbnail.path)"></app-thumbnail>
-  </div>
-  <div class="row images">
-    <app-thumbnail *ngFor="let thumbnail of thumbnailsRight"
-                   [image]="thumbnail.image"
-                   [label]="thumbnail.label"
-                   (click)="imageClick(album.slug, thumbnail.path)"></app-thumbnail>
-  </div>
 </div>
 <app-display-image (imageChange)="switchImage($event)"></app-display-image>

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

@@ -7,11 +7,6 @@ import { Album, Image } from "../shared";
 import { DisplayImageService } from "../display-image/display-image.service";
 import { Thumbnail } from "../shared/thumbnail.model";
 
-const IDX_LEFT = 0;
-const IDX_MIDDLE = 1;
-const IDX_RIGHT = 2;
-const THUMB_MARGIN = 10;
-
 @Component({
     selector: 'app-album',
     templateUrl: './album.component.html',
@@ -20,14 +15,7 @@ const THUMB_MARGIN = 10;
 export class AlbumComponent implements OnInit {
 
     public album: Album = new Album();
-
+    public 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,
@@ -69,24 +57,7 @@ export class AlbumComponent implements OnInit {
                 extraLeft: '',
             },
             height: image.thumbHeight,
-        }).map(thumbnail => {
+        }).map(thumbnail => this.thumbnails.push(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 + THUMB_MARGIN;
-                    break;
-                case IDX_MIDDLE:
-                    this.thumbnailsMiddle.push(thumbnail);
-                    this.middleHeight += thumbnail.height + THUMB_MARGIN;
-                    break;
-                case IDX_RIGHT:
-                    this.thumbnailsRight.push(thumbnail);
-                    this.rightHeight += thumbnail.height + THUMB_MARGIN;
-                    break;
-            }
-        });
     }
 
     public get exportUrl(): string {

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

@@ -1,11 +1,32 @@
 .main.container {
     margin-left: auto;
     margin-right: auto;
+    margin-bottom: 80px;
     padding-left: 10px;
 }
 
 .row {
-    display: block;
+    line-height: 0;
-    float: left;
+    column-gap: 20px;
-    width: 510px;
+}
+
+/* mobile */
+@media only screen and (max-width: 779px) {
+    .row {
+        column-count: 1;
+    }
+}
+
+/* tablet */
+@media only screen and (min-width: 780px) and (max-width: 1219px) {
+    .row {
+        column-count: 2;
+    }
+}
+
+/* desktop */
+@media screen and (min-width: 1220px) {
+    .row {
+        column-count: 4;
+    }
 }

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

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

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

@@ -6,11 +6,6 @@ import { Album } from "../shared";
 import { ActivatedRoute } from "@angular/router";
 import { Thumbnail } from "../shared/thumbnail.model";
 
-const IDX_LEFT = 0;
-const IDX_MIDDLE = 1;
-const IDX_RIGHT = 2;
-const THUMB_MARGIN = 10;
-
 @Component({
     selector: 'app-gallery',
     templateUrl: './gallery.component.html',
@@ -19,14 +14,7 @@ const THUMB_MARGIN = 10;
 export class GalleryComponent implements OnInit {
 
     public albums: Array<Album> = [];
-
+    public 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,
@@ -55,24 +43,7 @@ export class GalleryComponent implements OnInit {
                 extraLeft: album.date,
             },
             height: album.coverImage.thumbHeight,
-        }).map(thumbnail => {
+        }).map(thumbnail => this.thumbnails.push(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 + THUMB_MARGIN;
-                    break;
-                case IDX_MIDDLE:
-                    this.thumbnailsMiddle.push(thumbnail);
-                    this.middleHeight += thumbnail.height + THUMB_MARGIN;
-                    break;
-                case IDX_RIGHT:
-                    this.thumbnailsRight.push(thumbnail);
-                    this.rightHeight += thumbnail.height + THUMB_MARGIN;
-                    break;
-            }
-        });
     }
 
     private imageUrl(album: Album): string {

src/app/gallery/thumbnail/thumbnail.component.css

@@ -1,12 +1,17 @@
 :host {
-    display: flex;
+    display: block;
+    margin: 0 0 20px 0;
+}
+
+img {
+    width: 100%;
+    height: auto;
 }
 
 .thumbnail {
     position: relative;
-    display: inline-block;
+    display: block;
-    margin-right: 10px;
+    overflow: hidden;
-    margin-bottom: 10px;
 }
 
 .thumbnail img.image {
@@ -21,15 +26,32 @@
     bottom: 0;
     left: 0;
     right: 0;
+    line-height: 1rem;
     transform-origin: 50% 100%;
     transition-property: transform;
     transition-duration: 0.15s;
     transition-timing-function: ease-out;
-    transform: scaleY(0);
+    transform: translateY(100%);
+}
+
+a:link,
+a:visited,
+a:hover,
+a:active
+{
+    color: #ffffff;
+}
+
+.thumbnail > div.label > h1 {
+    font-size: 150%;
+}
+
+.thumbnail > div.label > h2 {
+    font-size: 120%;
 }
 
 .thumbnail:hover > div.label {
-    transform: scaleY(1);
+    transform: translateY(0);
 }
 
 .align.right {

src/styles.css

@@ -1,51 +1,44 @@
 /* You can add global styles to this file, and also import other style files */
 @import url('https://fonts.googleapis.com/css?family=Source Sans Pro:400,700,400italic,700italic&subset=latin');
 
-/*html,*/
-/*body {*/
-    /*height: 100%;*/
-/*}*/
-
 body {
     margin: 0;
     padding: 0;
     overflow-x: hidden;
     min-width: 320px;
-    background: #002B36;
+    background: #ffffff;
     font-family: "Source Sans Pro", 'Helvetica Neue', Arial, Helvetica, sans-serif;
     font-size: 14px;
     line-height: 1.4285em;
-    color: #839496;
+    color: rgb(30%, 30%, 30%);
     user-select: none;
 }
 
-a {
+a:link,
-    cursor: pointer;
+a:visited,
-    color: #2AA198;
+a:hover,
-    text-decoration: none;
+a:active
+{
+    color: #ffffff;
 }
 
-a:hover {
+/* mobile */
-    color: #2AA198;
+@media only screen and (max-width: 779px) {
-    text-decoration: none;
-}
-
-
-/* app style */
-@media screen and (min-width: 600px) {
     .main.container {
-        width: 515px;
+        width: calc(100% - 20px);
     }
 }
 
-@media screen and (min-width: 1200px) {
+/* tablet */
+@media only screen and (min-width: 780px) and (max-width: 1219px) {
     .main.container {
-        width: 1030px;
+        width: calc(100% - 80px);
     }
 }
 
-@media screen and (min-width: 1600px) {
+/* desktop */
+@media screen and (min-width: 1220px) {
     .main.container {
-        width: 1545px;
+        width: calc(100% - 80px);
     }
 }