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(() => {

22
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,6 +66,7 @@ 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>
<div className="sticky top-0 z-10 bg-black">
<nav className="mt-1 ml-1 text-lg mb-4"> <nav className="mt-1 ml-1 text-lg mb-4">
<button <button
className="hover:underline text-vibrant-light hover:text-muted-light arrow-left-before mr-1" className="hover:underline text-vibrant-light hover:text-muted-light arrow-left-before mr-1"
@ -87,9 +88,8 @@ const GalleryPage = ({ data }) => {
gallery gallery
</Link> </Link>
</nav> </nav>
<div className="bg-black min-h-screen mx-auto"> <div className="flex flex-row items-end">
<div className="flex flex-col sm:flex-row items-stretch sm:items-end"> <h1 className="text-3xl sm:text-5xl mt-0 ml-5 font-serif font-black z-10 flex-auto">
<h1 className="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,7 +104,7 @@ const GalleryPage = ({ data }) => {
</Picker> </Picker>
</div> </div>
</div> </div>
<div className="mx-auto"> </div>
<MasonryGallery <MasonryGallery
aspectsByBreakpoint={{ aspectsByBreakpoint={{
sm: 3, sm: 3,
@ -116,17 +116,13 @@ const GalleryPage = ({ data }) => {
debug={sortKey === "hue_debug"} debug={sortKey === "hue_debug"}
images={images} images={images}
/> />
</div>
</div>
</> </>
); );
}; };
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