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

visual restyle of metadata components

Browse Source
This commit is contained in:
Chuck Dries 2021-09-21 13:37:44 -07:00
parent 8659835897
commit a1ac7b2e74
2 changed files with 57 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -19,7 +19,7 @@ const logKeyShortcut = (keyCode) => {
// eslint-disable-next-line // eslint-disable-next-line
window.plausible("KeyShortcut", { props: { keyCode } }); window.plausible("KeyShortcut", { props: { keyCode } });
// eslint-disable-next-line // eslint-disable-next-line
_paq.push(['trackEvent', 'GalleryImage', 'KeyShortcut', keyCode]); _paq.push(["trackEvent", "GalleryImage", "KeyShortcut", keyCode]);
} catch (e) { } catch (e) {
/* do nothing */ /* do nothing */
} }
@ -144,7 +144,7 @@ const GalleryImage = ({ data, pageContext }) => {
</div> </div>
<div <div
className={classnames( className={classnames(
"flex-shrink-0 mx-2 flex flex-row portrait:items-end", "mx-2 flex flex-row portrait:items-end",
ar <= 1 ar <= 1
? "pt-5 flex-col flex-auto text-right" ? "pt-5 flex-col flex-auto text-right"
: "portrait:pt-5 portrait:flex-col portrait:text-right" : "portrait:pt-5 portrait:flex-col portrait:text-right"
@ -165,51 +165,54 @@ const GalleryImage = ({ data, pageContext }) => {
style={{ width: 30 }} style={{ width: 30 }}
></div> ></div>
} }
<MetadataItem <div className='flex flex-col'>
aspectRatio={ar} <MetadataItem
data={dateTaken.toLocaleDateString()} data={dateTaken.toLocaleDateString()}
icon="calendar-sharp" icon="calendar-outline"
title="date taken" title="date taken"
/> />
<MetadataItem <MetadataItem
aspectRatio={ar} data={locationString}
data={locationString} icon="location"
icon="location" title="location"
title="location" />
/> {(meta.exif.Make || meta.exif.Model) && (
{(meta.exif.Make || meta.exif.Model) && <MetadataItem <MetadataItem
aspectRatio={ar} data={[meta.exif.Make, meta.exif.Model].join(" ")}
data={[meta.exif.Make, meta.exif.Model].join(' ')} icon="camera-outline"
icon="camera" title="camera"
title="camera" />
/>} )}
{(meta.exif.LensModel || meta.exif.FocalLength) && <MetadataItem {(meta.exif.LensModel || meta.exif.FocalLength) && (
aspectRatio={ar} <MetadataItem
data={[ data={[
meta.exif.LensModel === '----' ? null : meta.exif.LensModel, meta.exif.LensModel === "----" ? null : meta.exif.LensModel,
meta.exif.FocalLength && `${meta.exif.FocalLength}mm` meta.exif.FocalLength && `${meta.exif.FocalLength}mm`,
].filter(Boolean).join(' @')} ]
icon="ellipse" .filter(Boolean)
title="lens" .join(" @")}
/>} icon="ellipse"
<MetadataItem title="lens"
aspectRatio={ar} />
data={shutterSpeed} )}
icon="stopwatch" <MetadataItem
title="shutter speed" data={shutterSpeed}
/> icon="stopwatch-outline"
{meta.exif.FNumber && <MetadataItem title="shutter speed"
aspectRatio={ar} />
data={`f/${meta.exif.FNumber}`} {meta.exif.FNumber && (
icon="aperture-sharp" <MetadataItem
title="aperture" data={`f/${meta.exif.FNumber}`}
/>} icon="aperture-outline"
<MetadataItem title="aperture"
aspectRatio={ar} />
data={meta.exif.ISO} )}
icon="film-outline" <MetadataItem
title="ISO" data={meta.exif.ISO}
/> icon="film-outline"
title="ISO"
/>
</div>
</div> </div>
</div> </div>
<div></div> <div></div>

18
src/components/GalleryImage/MetadataItem.js
View File

@ -1,19 +1,15 @@
import classNames from "classnames";
import React from "react"; import React from "react";
const MetadataItem = ({ aspectRatio, icon, data, title }) => const MetadataItem = ({ icon, data, title }) =>
data ? ( data ? (
<div <div className="flex justify-end items-end mr-2">
className={classNames( <div className="flex flex-col items-end">
"flex items-baseline ml-2 text-lg", <span className="font-mono text-sm m-0 mt-2 ">{title}</span>
aspectRatio <= 1 ? "flex-row-reverse" : "portrait:flex-row-reverse" <span className="text-lg whitespace-nowrap">{data}</span>
)} </div>
title={title} <span className="icon-offset ml-2 mt-1 text-2xl">
>
<span className="icon-offset mr-1">
<ion-icon name={icon} title={title}></ion-icon> <ion-icon name={icon} title={title}></ion-icon>
</span> </span>
<span className="mr-1">{data}</span>
</div> </div>
) : null; ) : null;