xuthus/pigallery2
1
0
Fork 0
mirror of https://github.com/xuthus83/pigallery2.git synced 2025-01-14 14:43:17 +08:00
Code Actions Projects Activity

Fix grid margin for small grid sizes #587 #725

Browse Source
This commit is contained in:
Patrik J. Braun 2023-09-20 18:23:37 +02:00
parent 55822c5cd8
commit de997fdffe
3 changed files with 7 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/frontend/app/ui/gallery/grid/grid.gallery.component.css
View File

@ -10,7 +10,5 @@
app-gallery-grid-photo {
display: inline-block;
cursor: pointer;
margin: 2px;
}

3
src/frontend/app/ui/gallery/grid/grid.gallery.component.html
View File

@ -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>

7
src/frontend/app/ui/gallery/grid/grid.gallery.component.ts
View File

@ -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();