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

add homepage button to view image details and change back buttons to actually go back

Browse Source
This commit is contained in:
Chuck Dries 2021-06-19 12:47:00 -07:00
parent 40e178d5f3
commit f3195c748a
4 changed files with 59 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/components/GalleryImage.js
View File

@ -1,5 +1,5 @@
import React from 'react';
import { graphql, Link } from 'gatsby';
import { graphql, Link, navigate } from 'gatsby';
import {
getAspectRatio,
getMeta,
@ -39,7 +39,11 @@ const GalleryImage = ({ data }) => {
style={getVibrantToHelmetSafeBodyStyle(vibrant)}
/>
</Helmet>
<Link className="hover:underline text-vibrant-light hover:text-muted-light arrow-left-before absolute" to="/photogallery">gallery</Link>
<button
className="hover:underline text-vibrant-light hover:text-muted-light arrow-left-before absolute"
onClick={() => navigate(-1)}
type="button"
>back</button>
<div className="min-h-screen pt-5 flex flex-col justify-center">
<div className={classnames('flex', orientationClasses)}>
<div className="flex-grow-0">
@ -58,28 +62,33 @@ const GalleryImage = ({ data }) => {
</div>
<div className={classnames('flex-shrink-0 mx-2 flex flex-row', ar <= 1 && 'pt-5 flex-col flex-auto text-right')}>
<div className="flex-auto mr-2">
{hasName(image) && <h1 className="text-2xl mt-3 font-serif">{name}</h1>}
<p className="text-muted-light font-mono text-sm m-0 mt-1">{image.base}</p>
{hasName(image) && <h1 className="text-4xl mt-0 font-serif">{name}</h1>}
<p className="mr-2">{meta.iptc.caption}</p>
</div>
{(locationString) && <div className={classnames('flex items-baseline ml-2 text-lg', ar <= 1 && 'flex-row-reverse')}>
<span className="relative mr-1" style={{top: '2px'}}>
{(locationString) && <div className={classnames('flex items-baseline ml-2 text-lg', ar <= 1 && 'flex-row-reverse')} title="location">
<span className="icon-offset mr-1">
<ion-icon name="location-sharp"></ion-icon>
</span>
<span className="mr-1">{locationString}</span>
</div>}
{shutterSpeed && <div className={classnames('flex items-baseline ml-2 text-lg', ar <= 1 && 'flex-row-reverse')}>
<span className="relative mr-1" style={{top: '2px'}}><ion-icon name="stopwatch-sharp"></ion-icon></span>
{shutterSpeed && <div className={classnames('flex items-baseline ml-2 text-lg', ar <= 1 && 'flex-row-reverse')} title="shutter speed">
<span className="icon-offset mr-1">
<ion-icon name="stopwatch-sharp"></ion-icon>
</span>
<span className="mr-1">{shutterSpeed}</span>
</div>}
{meta.exif.FNumber && <div className={classnames('flex items-baseline ml-2 text-lg', ar <= 1 && 'flex-row-reverse')}>
<span className="relative mr-1" style={{top: '2px'}}>
{meta.exif.FNumber && <div className={classnames('flex items-baseline ml-2 text-lg', ar <= 1 && 'flex-row-reverse')} title="aperture">
<span className="icon-offset mr-1">
<ion-icon name="aperture-sharp"></ion-icon>
</span>
<span className="mr-1">f/{meta.exif.FNumber}</span>
</div>}
{meta.exif.ISO && <div className="align-baseline ml-2 text-lg">
<span className="font-mono" style={{fontSize: '12px'}}>ISO</span>
<span className="mx-1">{meta.exif.ISO}</span>
{meta.exif.ISO && <div className={classnames('flex items-baseline ml-2 text-lg', ar <= 1 && 'flex-row-reverse')} title="ISO">
<span className="icon-offset mr-1">
<ion-icon name="film-outline"></ion-icon>
</span>
<span className="mr-1">{meta.exif.ISO}</span>
</div>}
</div>
</div>

31
src/pages/index.js
View File

@ -115,15 +115,40 @@ const IndexPage = ({ data: { allFile: { edges } } }) => {
</ul>
</div>
</section>
<div>
<div className="align-top">
<Link
className={classnames(
'hover:underline icon-offset inline-block p-2 px-4 my-3 mr-3 text-3xl rounded-md border-2 font-bold font-serif',
isClient && 'text-muted-dark bg-muted-light hover:border-muted border-muted-dark')}
style={{top: '5px'}}
title="view image details"
to={`/photogallery/${image.base}/`}
>
<span className="icon-offset"><ion-icon name="image"></ion-icon></span>
<span
className="absolute text-muted-dark"
style={{
fontSize: 18,
bottom: 6,
right: 9,
height: 18,
width: 18,
background: 'rgb(var(--light-muted))',
borderRadius: '50%',
transform: 'rotate(-15deg)',
}}
><span className="absolute" style={{top: '-8px'}}><ion-icon name="arrow-redo-circle-sharp"></ion-icon></span></span>
</Link>
<button
className={classnames(
'hover:underline inline-block p-3 px-5 my-3 mr-3 text-lg rounded-md border-2 font-bold font-serif',
'hover:underline icon-offset inline-block p-2 px-4 my-3 mr-3 text-3xl rounded-md border-2 font-bold font-serif',
isClient && 'text-muted-dark bg-muted-light hover:border-muted border-muted-dark')}
onClick={shuffleImage}
style={{top: '5px'}}
title="shuffle image"
type="button"
>
Shuffle <span className="relative" style={{top: '2px'}}><ion-icon name="shuffle"></ion-icon></span>
<span className="icon-offset"><ion-icon name="shuffle"></ion-icon></span>
</button>
<Link
className={classnames(

8
src/pages/photogallery.js
View File

@ -1,6 +1,6 @@
import * as React from 'react';
import { graphql } from 'gatsby';
import { Link } from 'gatsby';
import { navigate } from 'gatsby';
import { Helmet } from 'react-helmet';
import MasonryGallery from '../components/MasonryGallery';
@ -20,7 +20,11 @@ const GalleryPage = ({ data }) => {
<body className="bg-black text-white" />
</Helmet>
<div className="bg-black min-h-screen 2xl:container">
<Link className="hover:underline hover:text-blue-200 text-blue-300 arrow-left-before" to="/">home</Link>
<button
className="hover:underline text-vibrant-light hover:text-muted-light arrow-left-before absolute"
onClick={() => navigate(-1)}
type="button"
>back</button>
<h1 className="text-5xl mt-3 ml-5 font-serif font-black z-10 relative">Photo Gallery</h1>
<div className="mx-auto">
<MasonryGallery

4
src/styles/global.css
View File

@ -13,6 +13,10 @@
transition: color .2s, background-color .2s;
} */
@layer utilities {
.icon-offset {
position: relative;
top: 2px;
}
.scroll-snap-none {
scroll-snap-type: none;
}