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 { app-gallery-grid-photo {
display: inline-block; display: inline-block;
cursor: pointer; cursor: pointer;
margin: 2px;
} }

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

@ -28,8 +28,7 @@
[gridMedia]="gridPhoto" [gridMedia]="gridPhoto"
[style.width.px]="gridPhoto.renderWidth" [style.width.px]="gridPhoto.renderWidth"
[style.height.px]="gridPhoto.renderHeight" [style.height.px]="gridPhoto.renderHeight"
[style.margin-left.px]="IMAGE_MARGIN" [style.margin.px]="IMAGE_MARGIN">
[style.margin-right.px]="IMAGE_MARGIN">
</app-gallery-grid-photo> </app-gallery-grid-photo>
</div> </div>
</ng-container> </ng-container>

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

@ -44,7 +44,6 @@ export class GalleryGridComponent
mediaToRender: GridMediaGroup[] = []; mediaToRender: GridMediaGroup[] = [];
containerWidth = 0; containerWidth = 0;
screenHeight = 0; screenHeight = 0;
public IMAGE_MARGIN = 2;
isAfterViewInit = false; isAfterViewInit = false;
subscriptions: { subscriptions: {
girdSize: Subscription; girdSize: Subscription;
@ -58,6 +57,7 @@ export class GalleryGridComponent
private TARGET_COL_COUNT = 5; private TARGET_COL_COUNT = 5;
private MIN_ROW_COUNT = 2; private MIN_ROW_COUNT = 2;
private MAX_ROW_COUNT = 5; private MAX_ROW_COUNT = 5;
public IMAGE_MARGIN = 2;
private onScrollFired = false; private onScrollFired = false;
private helperTime: number = null; private helperTime: number = null;
public renderDelayTimer: number = null; // delays render on resize public renderDelayTimer: number = null; // delays render on resize
@ -107,26 +107,31 @@ export class GalleryGridComponent
this.TARGET_COL_COUNT = 12; this.TARGET_COL_COUNT = 12;
this.MIN_ROW_COUNT = 5; this.MIN_ROW_COUNT = 5;
this.MAX_ROW_COUNT = 10; this.MAX_ROW_COUNT = 10;
this.IMAGE_MARGIN = 1;
break; break;
case GridSizes.small: case GridSizes.small:
this.TARGET_COL_COUNT = 8; this.TARGET_COL_COUNT = 8;
this.MIN_ROW_COUNT = 3; this.MIN_ROW_COUNT = 3;
this.MAX_ROW_COUNT = 8; this.MAX_ROW_COUNT = 8;
this.IMAGE_MARGIN = 1.5;
break; break;
case GridSizes.medium: case GridSizes.medium:
this.TARGET_COL_COUNT = 5; this.TARGET_COL_COUNT = 5;
this.MIN_ROW_COUNT = 2; this.MIN_ROW_COUNT = 2;
this.MAX_ROW_COUNT = 5; this.MAX_ROW_COUNT = 5;
this.IMAGE_MARGIN = 2;
break; break;
case GridSizes.large: case GridSizes.large:
this.TARGET_COL_COUNT = 2; this.TARGET_COL_COUNT = 2;
this.MIN_ROW_COUNT = 1; this.MIN_ROW_COUNT = 1;
this.MAX_ROW_COUNT = 3; this.MAX_ROW_COUNT = 3;
this.IMAGE_MARGIN = 2;
break; break;
case GridSizes.extraLarge: case GridSizes.extraLarge:
this.TARGET_COL_COUNT = 1; this.TARGET_COL_COUNT = 1;
this.MIN_ROW_COUNT = 1; this.MIN_ROW_COUNT = 1;
this.MAX_ROW_COUNT = 2; this.MAX_ROW_COUNT = 2;
this.IMAGE_MARGIN = 2;
break; break;
} }
this.clearRenderedPhotos(); this.clearRenderedPhotos();