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 classNames from "classnames";
const KeywordsPicker = ({ keywords, value, onChange }) => {
return (
<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">
{keywords.map((keyword) => {
const selected = value === keyword;

4
src/components/MasonryGallery.js
View File

@ -17,9 +17,9 @@ const MasonryGallery = ({
const breakpoints = React.useMemo(
() => R.pick(R.keys(aspectTargetsByBreakpoint), themeBreakpoints),
[aspectTargetsByBreakpoint]
);
);
const { breakpoint } = useBreakpoint(breakpoints, "sm");
const { breakpoint } = useBreakpoint(breakpoints, "md");
const scrollIntoView = React.useCallback(() => {
if (!window.location.hash) {

9
src/pages/photogallery.js
View File

@ -89,7 +89,7 @@ const GalleryPage = ({ data }) => {
<title>Photo Gallery | Chuck Dries</title>
<body className="bg-black text-white" />
</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">
<button
className="hover:underline text-vibrant-light hover:text-muted-light arrow-left-before mr-1"
@ -111,8 +111,8 @@ const GalleryPage = ({ data }) => {
gallery
</Link>
</nav>
<div className="flex flex-row items-end">
<h1 className="text-3xl sm:text-5xl mt-0 ml-5 font-serif font-black z-10 flex-auto">
<div className="flex flex-col md:flex-row md:items-end">
<h1 className="text-5xl mt-0 ml-5 mr-5 font-serif font-black z-10 flex-auto">
Photo Gallery
</h1>
<KeywordsPicker
@ -126,12 +126,13 @@ const GalleryPage = ({ data }) => {
"waterfall",
"fireworks",
"panoramic",
"Portland Japanese Garden",
// "sunset",
]}
onChange={setKeyword}
value={keyword}
/>
<div className="m-2 ml-5 self-end">
<div className="m-2">
<Picker
label="Sort by..."
onSelectionChange={setSortKey}