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

fix layout portrait image on landscape browser without nav arrows

Browse Source
This commit is contained in:
Chuck Dries 2022-07-11 22:29:30 -07:00
parent b499066da8
commit 4a9a13fc16
No known key found for this signature in database
GPG Key ID: A00B7AEAE1DC5BE6
1 changed files with 42 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
src/components/GalleryImage/GalleryImage.js
View File

@ -4,8 +4,8 @@ import { GatsbyImage, getImage } from "gatsby-plugin-image";
import { Helmet } from "react-helmet"; import { Helmet } from "react-helmet";
import classnames from "classnames"; import classnames from "classnames";
import ChevronLeft from '@spectrum-icons/workflow/ChevronLeft'; import ChevronLeft from "@spectrum-icons/workflow/ChevronLeft";
import ChevronRight from '@spectrum-icons/workflow/ChevronRight'; import ChevronRight from "@spectrum-icons/workflow/ChevronRight";
import Calendar from "@spectrum-icons/workflow/Calendar"; import Calendar from "@spectrum-icons/workflow/Calendar";
import Stopwatch from "@spectrum-icons/workflow/Stopwatch"; import Stopwatch from "@spectrum-icons/workflow/Stopwatch";
import Exposure from "@spectrum-icons/workflow/Exposure"; import Exposure from "@spectrum-icons/workflow/Exposure";
@ -43,12 +43,7 @@ const ArrowLinkClasses = `hover:underline text-vibrant-light hover:text-muted-li
lg:px-4 self-stretch flex items-center hover:bg-black/50 max-h-screen sticky top-0 lg:px-4 self-stretch flex items-center hover:bg-black/50 max-h-screen sticky top-0
`; `;
const GalleryImage = ({ const GalleryImage = ({ data, location: { state } }) => {
data,
location: {
state
},
}) => {
const { sortedImageList, currentIndex, filterKeyword, sortKey } = state ?? {}; const { sortedImageList, currentIndex, filterKeyword, sortKey } = state ?? {};
const image = data.file; const image = data.file;
const ar = getAspectRatio(image); const ar = getAspectRatio(image);
@ -56,7 +51,9 @@ const GalleryImage = ({
const [zoom, setZoom] = useState(false); const [zoom, setZoom] = useState(false);
const [isClient, setIsClient] = useState(true); const [isClient, setIsClient] = useState(true);
useEffect(() => {setIsClient(true)}, []) useEffect(() => {
setIsClient(true);
}, []);
const nextIndex = const nextIndex =
sortedImageList && currentIndex < sortedImageList.length sortedImageList && currentIndex < sortedImageList.length
@ -153,15 +150,26 @@ const GalleryImage = ({
/> />
</Helmet> </Helmet>
<div className="min-h-screen flex flex-col justify-between"> <div className="min-h-screen flex flex-col justify-between">
<Nav className="mb-4" internalLinks={[ <Nav
{ href: '/', label: "Home"}, className="mb-4"
{ href: getGalleryPageUrl( internalLinks={[
{ href: "/", label: "Home" },
{
href: getGalleryPageUrl(
{ keyword: filterKeyword, sortKey }, { keyword: filterKeyword, sortKey },
image.base image.base
), label: <>Gallery <kbd>esc</kbd></>} ),
]} isClient={isClient} /> label: (
<div className="flex justify-between flex-auto items-center lg:gap-2"> <>
{prevImage && ( Gallery <kbd>esc</kbd>
</>
),
},
]}
isClient={isClient}
/>
<div className="flex flex-auto items-center lg:gap-2 justify-between">
{prevImage ? (
<Link <Link
className={ArrowLinkClasses} className={ArrowLinkClasses}
state={{ state={{
@ -172,8 +180,12 @@ const GalleryImage = ({
}} }}
to={`/photogallery/${prevImage}/`} to={`/photogallery/${prevImage}/`}
> >
<span className="p-1 lg:p-4 bg-muted-light/25 rounded-full"><ChevronLeft /></span> <span className="p-1 lg:p-4 bg-muted-light/25 rounded-full">
<ChevronLeft />
</span>
</Link> </Link>
) : (
<div></div>
)} )}
<div className={classnames("pb-2 flex", orientationClasses)}> <div className={classnames("pb-2 flex", orientationClasses)}>
<div <div
@ -264,7 +276,11 @@ const GalleryImage = ({
title="aperture" title="aperture"
/> />
)} )}
<MetadataItem data={meta.ISO} icon={<Filmroll />} title="ISO" /> <MetadataItem
data={meta.ISO}
icon={<Filmroll />}
title="ISO"
/>
</div> </div>
<MetadataItem <MetadataItem
data={locationString} data={locationString}
@ -293,7 +309,7 @@ const GalleryImage = ({
</div> </div>
</div> </div>
</div> </div>
{nextImage && ( {nextImage ? (
<Link <Link
className={ArrowLinkClasses} className={ArrowLinkClasses}
state={{ state={{
@ -304,8 +320,12 @@ const GalleryImage = ({
}} }}
to={`/photogallery/${nextImage}/`} to={`/photogallery/${nextImage}/`}
> >
<span className="p-1 lg:p-4 bg-muted-light/25 rounded-full"><ChevronRight /></span> <span className="p-1 lg:p-4 bg-muted-light/25 rounded-full">
<ChevronRight />
</span>
</Link> </Link>
) : (
<div></div>
)} )}
</div> </div>
</div> </div>