diff --git a/src/components/GalleryImage/GalleryImage.js b/src/components/GalleryImage/GalleryImage.js index ba37626..853f34d 100644 --- a/src/components/GalleryImage/GalleryImage.js +++ b/src/components/GalleryImage/GalleryImage.js @@ -51,7 +51,7 @@ const GalleryImage = ({ data, pageContext }) => { case "Escape": case "KeyG": { logKeyShortcut(e.code); - navigate("/photogallery/"); + navigate(`/photogallery/#${image.base}`); } } }; @@ -59,7 +59,7 @@ const GalleryImage = ({ data, pageContext }) => { return () => { document.removeEventListener("keydown", keyListener); }; - }, [pageContext]); + }, [pageContext, image.base]); const name = getName(image); const { meta, dateTaken: dt } = getMeta(image); diff --git a/src/components/MasonryGallery.js b/src/components/MasonryGallery.js index dcec964..b6767c7 100644 --- a/src/components/MasonryGallery.js +++ b/src/components/MasonryGallery.js @@ -16,10 +16,9 @@ const MasonryGallery = ({ [aspectTargetsByBreakpoint] ); - const { breakpoint } = useBreakpoint(breakpoints, "xs"); + const { breakpoint } = useBreakpoint(breakpoints, "sm"); console.log("🚀 ~ file: MasonryGallery.js ~ line 20 ~ breakpoint", breakpoint) - // const [scrolled, setScrolled] = React.useState(false); const scrollIntoView = React.useCallback(() => { if (!window.location.hash) { return; @@ -28,20 +27,15 @@ const MasonryGallery = ({ if (!el) { return; } - console.log("el", el); el.scrollIntoView(); - console.log( - "🚀 ~ file: MasonryGallery.js ~ line 21 ~ scrollIntoView ~ el.offsetTop", - el.offsetTop - ); - if (el.offsetTop > window.innerHeight && window.scrollY === 0) { - // queue another - } }, []); React.useEffect(() => { - scrollIntoView(); - }, [scrollIntoView, breakpoint]); + // hacky but it works for now + setTimeout(() => { + scrollIntoView(); + }, 100) + }, [scrollIntoView]); const aspectRatios = React.useMemo( () => R.map(getAspectRatio, images),