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
Download Patch File Download Diff File Expand all files Collapse all files

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