From de997fdffe9a2b0140b02742b84237cf5e0a41a5 Mon Sep 17 00:00:00 2001
From: "Patrik J. Braun" <bra.patrik@gmail.com>
Date: Wed, 20 Sep 2023 18:23:37 +0200
Subject: [PATCH] Fix grid margin for small grid sizes #587 #725

---
 .../app/ui/gallery/grid/grid.gallery.component.css         | 2 --
 .../app/ui/gallery/grid/grid.gallery.component.html        | 3 +--
 src/frontend/app/ui/gallery/grid/grid.gallery.component.ts | 7 ++++++-
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/frontend/app/ui/gallery/grid/grid.gallery.component.css b/src/frontend/app/ui/gallery/grid/grid.gallery.component.css
index 99d15e8b..033fadb5 100644
--- a/src/frontend/app/ui/gallery/grid/grid.gallery.component.css
+++ b/src/frontend/app/ui/gallery/grid/grid.gallery.component.css
@@ -10,7 +10,5 @@
 
 app-gallery-grid-photo {
     display: inline-block;
-
     cursor: pointer;
-    margin: 2px;
 }
diff --git a/src/frontend/app/ui/gallery/grid/grid.gallery.component.html b/src/frontend/app/ui/gallery/grid/grid.gallery.component.html
index e2fe23a2..895ac507 100644
--- a/src/frontend/app/ui/gallery/grid/grid.gallery.component.html
+++ b/src/frontend/app/ui/gallery/grid/grid.gallery.component.html
@@ -28,8 +28,7 @@
           [gridMedia]="gridPhoto"
           [style.width.px]="gridPhoto.renderWidth"
           [style.height.px]="gridPhoto.renderHeight"
-          [style.margin-left.px]="IMAGE_MARGIN"
-          [style.margin-right.px]="IMAGE_MARGIN">
+          [style.margin.px]="IMAGE_MARGIN">
         </app-gallery-grid-photo>
       </div>
     </ng-container>
diff --git a/src/frontend/app/ui/gallery/grid/grid.gallery.component.ts b/src/frontend/app/ui/gallery/grid/grid.gallery.component.ts
index c1cccb31..6ba27ff8 100644
--- a/src/frontend/app/ui/gallery/grid/grid.gallery.component.ts
+++ b/src/frontend/app/ui/gallery/grid/grid.gallery.component.ts
@@ -44,7 +44,6 @@ export class GalleryGridComponent
   mediaToRender: GridMediaGroup[] = [];
   containerWidth = 0;
   screenHeight = 0;
-  public IMAGE_MARGIN = 2;
   isAfterViewInit = false;
   subscriptions: {
     girdSize: Subscription;
@@ -58,6 +57,7 @@ export class GalleryGridComponent
   private TARGET_COL_COUNT = 5;
   private MIN_ROW_COUNT = 2;
   private MAX_ROW_COUNT = 5;
+  public IMAGE_MARGIN = 2;
   private onScrollFired = false;
   private helperTime: number = null;
   public renderDelayTimer: number = null; // delays render on resize
@@ -107,26 +107,31 @@ export class GalleryGridComponent
           this.TARGET_COL_COUNT = 12;
           this.MIN_ROW_COUNT = 5;
           this.MAX_ROW_COUNT = 10;
+          this.IMAGE_MARGIN = 1;
           break;
         case GridSizes.small:
           this.TARGET_COL_COUNT = 8;
           this.MIN_ROW_COUNT = 3;
           this.MAX_ROW_COUNT = 8;
+          this.IMAGE_MARGIN = 1.5;
           break;
         case GridSizes.medium:
           this.TARGET_COL_COUNT = 5;
           this.MIN_ROW_COUNT = 2;
           this.MAX_ROW_COUNT = 5;
+          this.IMAGE_MARGIN = 2;
           break;
         case GridSizes.large:
           this.TARGET_COL_COUNT = 2;
           this.MIN_ROW_COUNT = 1;
           this.MAX_ROW_COUNT = 3;
+          this.IMAGE_MARGIN = 2;
           break;
         case GridSizes.extraLarge:
           this.TARGET_COL_COUNT = 1;
           this.MIN_ROW_COUNT = 1;
           this.MAX_ROW_COUNT = 2;
+          this.IMAGE_MARGIN = 2;
           break;
       }
       this.clearRenderedPhotos();