paul/picpeak
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Fix hero layout tile sizing and scroll hook

Browse Source
This commit is contained in:
paul
2025-10-06 15:15:34 +02:00
parent 775e417e55
commit 8c41dd626d
1 changed files with 10 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/gallery/layouts/HeroGalleryLayout.tsx
+9 -9
View File
@@ -50,6 +50,12 @@ export const HeroGalleryLayout: React.FC<HeroGalleryLayoutProps> = ({
const overlayOpacity = gallerySettings.heroOverlayOpacity || 0.3; const overlayOpacity = gallerySettings.heroOverlayOpacity || 0.3;
const [likedIds, setLikedIds] = useState<Set<number>>(new Set()); const [likedIds, setLikedIds] = useState<Set<number>>(new Set());
const canQuickComment = Boolean(feedbackEnabled && feedbackOptions?.allowComments && onOpenPhotoWithFeedback); const canQuickComment = Boolean(feedbackEnabled && feedbackOptions?.allowComments && onOpenPhotoWithFeedback);
const gridRef = useRef<HTMLDivElement | null>(null);
const handleScrollToGrid = useCallback(() => {
if (gridRef.current) {
gridRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
}, []);
// If an override is provided, always use it and skip initialization logic // If an override is provided, always use it and skip initialization logic
useEffect(() => { useEffect(() => {
@@ -184,19 +190,19 @@ export const HeroGalleryLayout: React.FC<HeroGalleryLayoutProps> = ({
return ( return (
<div <div
key={photo.id} key={photo.id}
className="relative group cursor-pointer aspect-square" className="relative group cursor-pointer overflow-hidden rounded-lg"
onClick={() => onPhotoClick(actualIndex)} onClick={() => onPhotoClick(actualIndex)}
> >
<AuthenticatedImage <AuthenticatedImage
src={photo.thumbnail_url || photo.url} src={photo.thumbnail_url || photo.url}
alt={photo.filename} alt={photo.filename}
className="w-full h-full object-cover rounded-lg transition-transform duration-300 group-hover:scale-105" className="w-full h-auto object-cover transition-transform duration-300 group-hover:scale-105"
loading="lazy" loading="lazy"
isGallery={true} isGallery={true}
protectFromDownload={!allowDownloads} protectFromDownload={!allowDownloads}
/> />
<div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-200 rounded-lg flex items-center justify-center gap-2"> <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex items-center justify-center gap-2">
{!isSelectionMode && ( {!isSelectionMode && (
<> <>
<button <button
@@ -323,9 +329,3 @@ export const HeroGalleryLayout: React.FC<HeroGalleryLayoutProps> = ({
</> </>
); );
}; };
const gridRef = useRef<HTMLDivElement | null>(null);
const handleScrollToGrid = useCallback(() => {
if (gridRef.current) {
gridRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
}, []);