From 90c01c57be377546043b23c907fab648e8ad4914 Mon Sep 17 00:00:00 2001
From: Patrik Braun <bra.patrik@gmail.com>
Date: Thu, 20 Jul 2017 21:06:59 +0200
Subject: [PATCH] improving directory design

---
 .../directory/directory.gallery.component.html        |  4 +++-
 .../gallery/directory/directory.gallery.component.ts  | 11 ++++++++++-
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/frontend/app/gallery/directory/directory.gallery.component.html b/frontend/app/gallery/directory/directory.gallery.component.html
index 2b34a20a..4237c95c 100644
--- a/frontend/app/gallery/directory/directory.gallery.component.html
+++ b/frontend/app/gallery/directory/directory.gallery.component.html
@@ -3,7 +3,9 @@
    style="display: inline-block;">
 
 
-  <div class="photo-container">
+  <div class="photo-container"
+       [style.width.px]="size()"
+       [style.height.px]="size()">
     <div class="photo" *ngIf="thumbnail && thumbnail.Available"
          [style.background-image]="getSanitizedThUrl()"></div>
 
diff --git a/frontend/app/gallery/directory/directory.gallery.component.ts b/frontend/app/gallery/directory/directory.gallery.component.ts
index f655b75d..4b2cfb21 100644
--- a/frontend/app/gallery/directory/directory.gallery.component.ts
+++ b/frontend/app/gallery/directory/directory.gallery.component.ts
@@ -26,7 +26,7 @@ export class GalleryDirectoryComponent implements OnInit, OnDestroy {
 
   ngOnInit() {
     if (this.directory.photos.length > 0) {
-      this.thumbnail = this.thumbnailService.getThumbnail(new Photo(this.directory.photos[0], 100, 100));
+      this.thumbnail = this.thumbnailService.getThumbnail(new Photo(this.directory.photos[0], this.size(), this.size()));
     }
   }
 
@@ -50,5 +50,14 @@ export class GalleryDirectoryComponent implements OnInit, OnDestroy {
     }
   }
 
+  size() {
+    let size = 220 + 5;
+    const containerWidth = this.container.nativeElement.parentElement.parentElement.clientWidth;
+    size = containerWidth / Math.round((containerWidth / size));
+
+
+    return Math.floor(size - 5);
+  }
+
 }