stefan
/
simple-picture-gallery
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Change FolderGallery to rows layout
Build and publish docker image snapshot / build-and-publish (push) Successful in 1m27s Details 

In column layout the folders are ordered by column.
Row layout is the correct one to choose, but it has weird behaviour
 regarding row height. Changed `targetRowHeight` so that it hopefully
 behaves a little nicer.
This commit is contained in:
Stefan Forstenlechner 2024-09-23 23:15:57 +02:00
parent c6f374de8a
commit 31e3162c48
1 changed files with 18 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
picture-gallery-client/src/ImageGallery/FolderGallery.tsx
View File

@ -3,8 +3,8 @@ import { FolderPreview, ImageWithThumbnail } from "./models";
import { Link } from "react-router-dom";
import Typography from "@mui/material/Typography";
import { ColumnsPhotoAlbum } from "react-photo-album";
import "react-photo-album/columns.css";
import { RowsPhotoAlbum } from "react-photo-album";
import "react-photo-album/rows.css";
export interface PhotoWithFolder extends ImageWithThumbnail {
folderPreview: FolderPreview;
@ -40,8 +40,23 @@ export const FolderGallery = ({ folders }: { folders: FolderPreview[] }) => {
return (
<>
<ColumnsPhotoAlbum
<RowsPhotoAlbum
photos={foldersAsImages}
targetRowHeight={(containerWidth: number) => {
if (containerWidth >= 1000) {
return Math.min(230, containerWidth / 6);
} else if (containerWidth >= 600 && containerWidth < 1000) {
return containerWidth / 5;
} else if (containerWidth >= 300 && containerWidth < 600) {
return containerWidth / 4;
} else {
// containerWidth < 300
return containerWidth / 3;
}
}}
rowConstraints={{
singleRowMaxHeight: 230,
}}
render={{
image: (props, context) => (
<PreviewFolder folder={context.photo.folderPreview} />