1
0
mirror of https://github.com/bpatrik/pigallery2.git synced 2024-12-14 11:23:17 +02:00

improving grid

This commit is contained in:
Braun Patrik 2017-07-16 21:03:37 +02:00
parent 805e12c792
commit d7819a5ad4
2 changed files with 15 additions and 4 deletions

View File

@ -7,7 +7,10 @@ export class GridRowBuilder {
private photoIndex: number = 0; //index of the last pushed photo to the photoRow private photoIndex: number = 0; //index of the last pushed photo to the photoRow
constructor(private photos: Array<PhotoDTO>, private startIndex: number, private photoMargin: number, private containerWidth: number) { constructor(private photos: Array<PhotoDTO>,
private startIndex: number,
private photoMargin: number,
private containerWidth: number) {
this.photoIndex = startIndex; this.photoIndex = startIndex;
} }
@ -17,7 +20,7 @@ export class GridRowBuilder {
} }
} }
public addPhoto(): boolean { private addPhoto(): boolean {
if (this.photoIndex + 1 > this.photos.length) { if (this.photoIndex + 1 > this.photos.length) {
return false; return false;
} }

View File

@ -192,11 +192,19 @@ export class GalleryGridComponent implements OnChanges, AfterViewInit {
let maxRowHeight = window.innerHeight / this.MIN_ROW_COUNT; let maxRowHeight = window.innerHeight / this.MIN_ROW_COUNT;
let minRowHeight = window.innerHeight / this.MAX_ROW_COUNT; let minRowHeight = window.innerHeight / this.MAX_ROW_COUNT;
let photoRowBuilder = new GridRowBuilder(this.photos, this.renderedPhotoIndex, this.IMAGE_MARGIN, this.containerWidth - this.overlayService.getPhantomScrollbarWidth()); let photoRowBuilder = new GridRowBuilder(this.photos,
this.renderedPhotoIndex,
this.IMAGE_MARGIN,
this.containerWidth - this.overlayService.getPhantomScrollbarWidth()
);
photoRowBuilder.addPhotos(this.TARGET_COL_COUNT); photoRowBuilder.addPhotos(this.TARGET_COL_COUNT);
photoRowBuilder.adjustRowHeightBetween(minRowHeight, maxRowHeight); photoRowBuilder.adjustRowHeightBetween(minRowHeight, maxRowHeight);
let rowHeight = photoRowBuilder.calcRowHeight(); if (photoRowBuilder.getPhotoRow().length > 1) { //little trick: We don't want too big single images. But if a little extra height helps fit the row, its ok
maxRowHeight *= 1.2;
}
let rowHeight = Math.min(photoRowBuilder.calcRowHeight(), maxRowHeight);
let imageHeight = rowHeight - (this.IMAGE_MARGIN * 2); let imageHeight = rowHeight - (this.IMAGE_MARGIN * 2);
photoRowBuilder.getPhotoRow().forEach((photo) => { photoRowBuilder.getPhotoRow().forEach((photo) => {