chuckdries/Personal-Website
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

sticky header in photo gallery

Browse Source
This commit is contained in:
Chuck Dries 2022-06-28 21:24:49 -07:00
parent ad21989140
commit f6e9b4393a
No known key found for this signature in database
GPG Key ID: A00B7AEAE1DC5BE6
2 changed files with 43 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/MasonryGallery.js
View File

@ -28,7 +28,9 @@ const MasonryGallery = ({
if (!el) { if (!el) {
return; return;
} }
el.scrollIntoView(); el.scrollIntoView({
block: "center",
});
}, []); }, []);
React.useEffect(() => { React.useEffect(() => {

84
src/pages/photogallery.js
View File

@ -19,8 +19,8 @@ const GalleryPage = ({ data }) => {
(key) => { (key) => {
try { try {
window.plausible("Sort Gallery", { window.plausible("Sort Gallery", {
props: { key } props: { key },
}) });
} catch (e) { } catch (e) {
// do nothing // do nothing
} }
@ -33,9 +33,9 @@ const GalleryPage = ({ data }) => {
React.useEffect(() => { React.useEffect(() => {
const _sortKey = localStorage.getItem("photogallery.sortkey"); const _sortKey = localStorage.getItem("photogallery.sortkey");
if (_sortKey) { if (_sortKey) {
setSortKey(_sortKey) setSortKey(_sortKey);
} }
}, [setSortKey]) }, [setSortKey]);
const images = React.useMemo( const images = React.useMemo(
() => () =>
@ -66,30 +66,30 @@ const GalleryPage = ({ data }) => {
<title>Photo Gallery | Chuck Dries</title> <title>Photo Gallery | Chuck Dries</title>
<body className="bg-black text-white" /> <body className="bg-black text-white" />
</Helmet> </Helmet>
<nav className="mt-1 ml-1 text-lg mb-4"> <div className="sticky top-0 z-10 bg-black">
<button <nav className="mt-1 ml-1 text-lg mb-4">
className="hover:underline text-vibrant-light hover:text-muted-light arrow-left-before mr-1" <button
onClick={() => navigate(-1)} className="hover:underline text-vibrant-light hover:text-muted-light arrow-left-before mr-1"
type="button" onClick={() => navigate(-1)}
> type="button"
back >
</button> back
<Link </button>
className="hover:underline text-vibrant-light hover:text-muted-light mx-1" <Link
to="/" className="hover:underline text-vibrant-light hover:text-muted-light mx-1"
> to="/"
home >
</Link> home
<Link </Link>
className="hover:underline text-vibrant-light hover:text-muted-light mx-1" <Link
to="/photogallery/" className="hover:underline text-vibrant-light hover:text-muted-light mx-1"
> to="/photogallery/"
gallery >
</Link> gallery
</nav> </Link>
<div className="bg-black min-h-screen mx-auto"> </nav>
<div className="flex flex-col sm:flex-row items-stretch sm:items-end"> <div className="flex flex-row items-end">
<h1 className="text-5xl mt-0 ml-5 font-serif font-black z-10 flex-auto"> <h1 className="text-3xl sm:text-5xl mt-0 ml-5 font-serif font-black z-10 flex-auto">
Photo Gallery Photo Gallery
</h1> </h1>
<div className="m-2 ml-5 self-end"> <div className="m-2 ml-5 self-end">
@ -104,29 +104,25 @@ const GalleryPage = ({ data }) => {
</Picker> </Picker>
</div> </div>
</div> </div>
<div className="mx-auto">
<MasonryGallery
aspectsByBreakpoint={{
sm: 3,
md: 4,
lg: 4,
xl: 5,
// '2xl': 6.1,
}}
debug={sortKey === "hue_debug"}
images={images}
/>
</div>
</div> </div>
<MasonryGallery
aspectsByBreakpoint={{
sm: 3,
md: 4,
lg: 4,
xl: 5,
// '2xl': 6.1,
}}
debug={sortKey === "hue_debug"}
images={images}
/>
</> </>
); );
}; };
export const query = graphql` export const query = graphql`
query GalleryPageQuery { query GalleryPageQuery {
allFile( allFile(filter: { sourceInstanceName: { eq: "gallery" } }) {
filter: { sourceInstanceName: { eq: "gallery" } }
) {
edges { edges {
node { node {
relativePath relativePath