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

Responsive strategy for photo gallery header

Browse Source
This commit is contained in:
Chuck Dries 2022-07-09 16:44:48 -07:00
parent 5c619af06f
commit 2c66aa9f49
No known key found for this signature in database
GPG Key ID: A00B7AEAE1DC5BE6
3 changed files with 9 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/KeywordsPicker.js
View File

@ -1,10 +1,10 @@
import classNames from "classnames";
import * as React from "react"; import * as React from "react";
import classNames from "classnames";
const KeywordsPicker = ({ keywords, value, onChange }) => { const KeywordsPicker = ({ keywords, value, onChange }) => {
return ( return (
<div className="mx-2"> <div className="mx-2">
<span className="text-xs text-[#A2A2A2]">Filter by...</span> <span className="text-xs text-[#A2A2A2]">Filter...</span>
<ul className="flex gap-1 flex-wrap mt-1 mb-2"> <ul className="flex gap-1 flex-wrap mt-1 mb-2">
{keywords.map((keyword) => { {keywords.map((keyword) => {
const selected = value === keyword; const selected = value === keyword;

2
src/components/MasonryGallery.js
View File

@ -19,7 +19,7 @@ const MasonryGallery = ({
[aspectTargetsByBreakpoint] [aspectTargetsByBreakpoint]
); );
const { breakpoint } = useBreakpoint(breakpoints, "sm"); const { breakpoint } = useBreakpoint(breakpoints, "md");
const scrollIntoView = React.useCallback(() => { const scrollIntoView = React.useCallback(() => {
if (!window.location.hash) { if (!window.location.hash) {

9
src/pages/photogallery.js
View File

@ -89,7 +89,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"> <div className="sm: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"
@ -111,8 +111,8 @@ const GalleryPage = ({ data }) => {
gallery gallery
</Link> </Link>
</nav> </nav>
<div className="flex flex-row items-end"> <div className="flex flex-col md:flex-row md: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 mr-5 font-serif font-black z-10 flex-auto">
Photo Gallery Photo Gallery
</h1> </h1>
<KeywordsPicker <KeywordsPicker
@ -126,12 +126,13 @@ const GalleryPage = ({ data }) => {
"waterfall", "waterfall",
"fireworks", "fireworks",
"panoramic", "panoramic",
"Portland Japanese Garden",
// "sunset", // "sunset",
]} ]}
onChange={setKeyword} onChange={setKeyword}
value={keyword} value={keyword}
/> />
<div className="m-2 ml-5 self-end"> <div className="m-2">
<Picker <Picker
label="Sort by..." label="Sort by..."
onSelectionChange={setSortKey} onSelectionChange={setSortKey}