update gallery aesthetics; add gallery image zoom mode
This commit is contained in:
parent
452a4b9bd5
commit
41769a61d7
@ -1,4 +1,4 @@
|
||||
import React from "react";
|
||||
import React, { useState } from "react";
|
||||
import { graphql, navigate, Link } from "gatsby";
|
||||
import {
|
||||
getAspectRatio,
|
||||
@ -29,6 +29,8 @@ const GalleryImage = ({ data, pageContext }) => {
|
||||
const image = data.allFile.edges[0].node;
|
||||
const ar = getAspectRatio(image);
|
||||
|
||||
const [zoom, setZoom] = useState(false);
|
||||
|
||||
React.useEffect(() => {
|
||||
const keyListener = (e) => {
|
||||
switch (e.code) {
|
||||
@ -73,6 +75,8 @@ const GalleryImage = ({ data, pageContext }) => {
|
||||
ar > 1
|
||||
? "flex-col mx-auto"
|
||||
: "portrait:mx-auto landscape:mx-5 landscape:flex-row-reverse portrait:flex-col";
|
||||
const verticalPad = ar > 1 ? "170px" : "70px";
|
||||
|
||||
const shutterSpeed = React.useMemo(
|
||||
() => getShutterFractionFromExposureTime(meta.ExposureTime || 0),
|
||||
[meta]
|
||||
@ -126,19 +130,27 @@ const GalleryImage = ({ data, pageContext }) => {
|
||||
)}
|
||||
</nav>
|
||||
<div className={classnames("flex", orientationClasses)}>
|
||||
<div className="flex-grow-0">
|
||||
<div
|
||||
className="flex-grow-0 mb-2 overflow-hidden"
|
||||
style={{
|
||||
maxWidth: zoom
|
||||
? "unset"
|
||||
: `calc(max(calc(100vh - ${verticalPad}), 500px) * ${ar})`,
|
||||
width: zoom ? `max(calc(100vw - 16px), calc(100vh * ${ar}))` : 'unset'
|
||||
// minHeight: zoom ? "100vh" : "unset",
|
||||
}}
|
||||
>
|
||||
<GatsbyImage
|
||||
alt={name}
|
||||
className=""
|
||||
className={classnames(
|
||||
"border-4 border-muted-light",
|
||||
zoom ? "cursor-zoom-out" : "cursor-zoom-in"
|
||||
)}
|
||||
image={getImage(image)}
|
||||
key={image.base}
|
||||
loading="eager"
|
||||
objectFit="contain"
|
||||
style={{
|
||||
maxWidth: `calc(max(90vh, 500px) * ${ar})`,
|
||||
maxHeight: "90vh",
|
||||
// minHeight: '500px',
|
||||
}}
|
||||
onClick={() => setZoom((_zoom) => !_zoom)}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
@ -163,7 +175,9 @@ const GalleryImage = ({ data, pageContext }) => {
|
||||
href={image.publicURL}
|
||||
onClick={() => {
|
||||
try {
|
||||
window.plausible("Download Wallpaper", { props: { image: image.base } });
|
||||
window.plausible("Download Wallpaper", {
|
||||
props: { image: image.base },
|
||||
});
|
||||
} catch {
|
||||
// do nothing
|
||||
}
|
||||
@ -178,12 +192,27 @@ const GalleryImage = ({ data, pageContext }) => {
|
||||
style={{ width: 30 }}
|
||||
></div>
|
||||
}
|
||||
<div className="flex flex-col">
|
||||
<div className="flex flex-col items-end">
|
||||
<MetadataItem
|
||||
data={dateTaken.toLocaleDateString()}
|
||||
icon="calendar-outline"
|
||||
title="date taken"
|
||||
/>
|
||||
<div className="flex justify-between w-[350px]">
|
||||
<MetadataItem
|
||||
data={shutterSpeed}
|
||||
icon="stopwatch-outline"
|
||||
title="shutter speed"
|
||||
/>
|
||||
{meta.FNumber && (
|
||||
<MetadataItem
|
||||
data={`f/${meta.FNumber}`}
|
||||
icon="aperture-outline"
|
||||
title="aperture"
|
||||
/>
|
||||
)}
|
||||
<MetadataItem data={meta.ISO} icon="film-outline" title="ISO" />
|
||||
</div>
|
||||
<MetadataItem
|
||||
data={locationString}
|
||||
icon="map-outline"
|
||||
@ -208,19 +237,6 @@ const GalleryImage = ({ data, pageContext }) => {
|
||||
title="lens"
|
||||
/>
|
||||
)}
|
||||
<MetadataItem
|
||||
data={shutterSpeed}
|
||||
icon="stopwatch-outline"
|
||||
title="shutter speed"
|
||||
/>
|
||||
{meta.FNumber && (
|
||||
<MetadataItem
|
||||
data={`f/${meta.FNumber}`}
|
||||
icon="aperture-outline"
|
||||
title="aperture"
|
||||
/>
|
||||
)}
|
||||
<MetadataItem data={meta.ISO} icon="film-outline" title="ISO" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -2,9 +2,9 @@ import React from "react";
|
||||
|
||||
const MetadataItem = ({ icon, data, title }) =>
|
||||
data ? (
|
||||
<div className="flex justify-end items-end mr-2">
|
||||
<div className="flex justify-end items-end mr-2 font-mono">
|
||||
<div className="flex flex-col items-end my-2">
|
||||
<span className="font-mono text-sm opacity-60 m-0 ">{title}</span>
|
||||
<span className="text-sm opacity-60 m-0 ">{title}</span>
|
||||
<span className="text-lg leading-4">{data}</span>
|
||||
</div>
|
||||
<span className="icon-offset ml-2 mt-1 text-2xl">
|
||||
|
||||
@ -32,6 +32,14 @@
|
||||
.scroll-padding-6 {
|
||||
scroll-padding: theme("spacing.6");
|
||||
}
|
||||
.cursor-zoom-in {
|
||||
cursor: -webkit-zoom-in;
|
||||
cursor: zoom-in;
|
||||
}
|
||||
.cursor-zoom-out {
|
||||
cursor: -webkit-zoom-out;
|
||||
cursor: zoom-out;
|
||||
}
|
||||
@supports (backdrop-filter: none) {
|
||||
.blurred-or-opaque-bg-1 {
|
||||
@apply bg-opacity-50 backdrop-filter backdrop-blur-lg;
|
||||
|
||||
@ -25,7 +25,7 @@ export const getHelmetSafeBodyStyle = (vibrant, screenHeight) => {
|
||||
"--vibrant": vibrant.Vibrant,
|
||||
"--dark-vibrant": vibrant.DarkVibrant,
|
||||
"--light-vibrant": vibrant.LightVibrant,
|
||||
"--height-screen": screenHeight ? `${screenHeight}px` : '100vh'
|
||||
"--height-screen": screenHeight ? `${screenHeight}px` : "100vh",
|
||||
};
|
||||
if (typeof window === "undefined") {
|
||||
return style;
|
||||
@ -45,7 +45,10 @@ const gcd = (a, b) => {
|
||||
|
||||
export const getShutterFractionFromExposureTime = (exposureTime) => {
|
||||
if (exposureTime === 0.016666666666666666) {
|
||||
return '1/60'
|
||||
return "1/60";
|
||||
}
|
||||
if (exposureTime === 0.0011111111111111111) {
|
||||
return "1/900";
|
||||
}
|
||||
let fraction = exposureTime;
|
||||
const len = fraction.toString().length - 2;
|
||||
@ -58,7 +61,7 @@ export const getShutterFractionFromExposureTime = (exposureTime) => {
|
||||
numerator /= divisor;
|
||||
denominator /= divisor;
|
||||
if (numerator > 1) {
|
||||
return `${exposureTime}`
|
||||
return `${exposureTime}`;
|
||||
}
|
||||
return `${numerator}/${denominator}`;
|
||||
};
|
||||
|
||||
@ -2,7 +2,7 @@ const defaultTheme = require("tailwindcss/defaultTheme");
|
||||
|
||||
module.exports = {
|
||||
purge: ["./src/**/*.{js,jsx,ts,tsx}"],
|
||||
mode: 'jit',
|
||||
mode: "jit",
|
||||
// darkMode: 'media', // or 'media' or 'class'
|
||||
theme: {
|
||||
screens: {
|
||||
@ -33,17 +33,17 @@ module.exports = {
|
||||
},
|
||||
extend: {
|
||||
height: {
|
||||
"actual-screen": "var(--height-screen)"
|
||||
"actual-screen": "var(--height-screen)",
|
||||
},
|
||||
dropShadow: {
|
||||
'dark': '0 1px 2px rgba(0, 0, 0, 0.8)',
|
||||
dark: "0 1px 2px rgba(0, 0, 0, 0.8)",
|
||||
},
|
||||
fontSize: {
|
||||
'huge-1': '95px',
|
||||
'huge-2': 'max(7.8vw, 120px)'
|
||||
"huge-1": "95px",
|
||||
"huge-2": "max(7.8vw, 120px)",
|
||||
},
|
||||
colors: {
|
||||
buzzwordsPrimary: '#F6C54B',
|
||||
buzzwordsPrimary: "#F6C54B",
|
||||
vibrant: {
|
||||
DEFAULT: ({ opacityVariable, opacityValue }) => {
|
||||
if (opacityValue !== undefined) {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user