From f6e9b4393aed50f85a1f5d3027ae364d4abc59af Mon Sep 17 00:00:00 2001 From: Chuck Dries Date: Tue, 28 Jun 2022 21:24:49 -0700 Subject: [PATCH] sticky header in photo gallery --- src/components/MasonryGallery.js | 4 +- src/pages/photogallery.js | 84 +++++++++++++++----------------- 2 files changed, 43 insertions(+), 45 deletions(-) diff --git a/src/components/MasonryGallery.js b/src/components/MasonryGallery.js index 6a7da4d..e131355 100644 --- a/src/components/MasonryGallery.js +++ b/src/components/MasonryGallery.js @@ -28,7 +28,9 @@ const MasonryGallery = ({ if (!el) { return; } - el.scrollIntoView(); + el.scrollIntoView({ + block: "center", + }); }, []); React.useEffect(() => { diff --git a/src/pages/photogallery.js b/src/pages/photogallery.js index 3595fcd..3726efa 100644 --- a/src/pages/photogallery.js +++ b/src/pages/photogallery.js @@ -19,8 +19,8 @@ const GalleryPage = ({ data }) => { (key) => { try { window.plausible("Sort Gallery", { - props: { key } - }) + props: { key }, + }); } catch (e) { // do nothing } @@ -33,9 +33,9 @@ const GalleryPage = ({ data }) => { React.useEffect(() => { const _sortKey = localStorage.getItem("photogallery.sortkey"); if (_sortKey) { - setSortKey(_sortKey) + setSortKey(_sortKey); } - }, [setSortKey]) + }, [setSortKey]); const images = React.useMemo( () => @@ -66,30 +66,30 @@ const GalleryPage = ({ data }) => { Photo Gallery | Chuck Dries - -
-
-

+
+ +
+

Photo Gallery

@@ -104,29 +104,25 @@ const GalleryPage = ({ data }) => {
-
- -
+ ); }; export const query = graphql` query GalleryPageQuery { - allFile( - filter: { sourceInstanceName: { eq: "gallery" } } - ) { + allFile(filter: { sourceInstanceName: { eq: "gallery" } }) { edges { node { relativePath