Refine large photo layout
This commit is contained in:
Sam Becker
parent
a6ba4f8257
commit
031a149893
@ -3,7 +3,6 @@ import { pathForCamera } from '@/site/paths';
|
|||||||
import { IoMdCamera } from 'react-icons/io';
|
import { IoMdCamera } from 'react-icons/io';
|
||||||
import { Camera, formatCameraText } from '.';
|
import { Camera, formatCameraText } from '.';
|
||||||
import EntityLink, { EntityLinkExternalProps } from '@/components/EntityLink';
|
import EntityLink, { EntityLinkExternalProps } from '@/components/EntityLink';
|
||||||
import { clsx } from 'clsx/lite';
|
|
||||||
|
|
||||||
export default function PhotoCamera({
|
export default function PhotoCamera({
|
||||||
camera,
|
camera,
|
||||||
@ -27,18 +26,12 @@ export default function PhotoCamera({
|
|||||||
icon={showAppleIcon
|
icon={showAppleIcon
|
||||||
? <AiFillApple
|
? <AiFillApple
|
||||||
title="Apple"
|
title="Apple"
|
||||||
className={clsx(
|
className="translate-x-[-2.5px] translate-y-[2px]"
|
||||||
'text-icon',
|
|
||||||
'translate-x-[-2.5px] translate-y-[2px]',
|
|
||||||
)}
|
|
||||||
size={15}
|
size={15}
|
||||||
/>
|
/>
|
||||||
: <IoMdCamera
|
: <IoMdCamera
|
||||||
size={13}
|
size={12}
|
||||||
className={clsx(
|
className="translate-x-[-1px] translate-y-[3.5px]"
|
||||||
'text-icon',
|
|
||||||
'translate-x-[-1px] translate-y-[3.5px]',
|
|
||||||
)}
|
|
||||||
/>}
|
/>}
|
||||||
type={showAppleIcon && isCameraApple ? 'icon-first' : type}
|
type={showAppleIcon && isCameraApple ? 'icon-first' : type}
|
||||||
badged={badged}
|
badged={badged}
|
||||||
|
|||||||
@ -16,7 +16,7 @@ import { cameraFromPhoto } from '@/camera';
|
|||||||
import PhotoFilmSimulation from '@/simulation/PhotoFilmSimulation';
|
import PhotoFilmSimulation from '@/simulation/PhotoFilmSimulation';
|
||||||
import { sortTags } from '@/tag';
|
import { sortTags } from '@/tag';
|
||||||
import AdminPhotoMenu from '@/admin/AdminPhotoMenu';
|
import AdminPhotoMenu from '@/admin/AdminPhotoMenu';
|
||||||
import { Suspense, useMemo } from 'react';
|
import { Suspense } from 'react';
|
||||||
|
|
||||||
export default function PhotoLarge({
|
export default function PhotoLarge({
|
||||||
photo,
|
photo,
|
||||||
@ -49,13 +49,6 @@ export default function PhotoLarge({
|
|||||||
|
|
||||||
const showExifRow = shouldShowExifDataForPhoto(photo);
|
const showExifRow = shouldShowExifDataForPhoto(photo);
|
||||||
|
|
||||||
const rowCount = useMemo(() => {
|
|
||||||
let count = 1;
|
|
||||||
if (showCameraRow) { count++; }
|
|
||||||
if (showExifRow) { count++; }
|
|
||||||
return count;
|
|
||||||
}, [showCameraRow, showExifRow]);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<SiteGrid
|
<SiteGrid
|
||||||
contentMain={
|
contentMain={
|
||||||
@ -72,99 +65,93 @@ export default function PhotoLarge({
|
|||||||
<div className={clsx(
|
<div className={clsx(
|
||||||
'leading-snug',
|
'leading-snug',
|
||||||
'sticky top-4 self-start -translate-y-1',
|
'sticky top-4 self-start -translate-y-1',
|
||||||
'grid grid-cols-2 sm:grid-cols-4 md:grid-cols-1',
|
'grid grid-cols-2 md:grid-cols-1',
|
||||||
'gap-y-4 pb-6',
|
'gap-x-0.5 sm:gap-x-1 gap-y-4',
|
||||||
|
'pb-6',
|
||||||
'[&>*:not(:last-child)]:pr-3',
|
'[&>*:not(:last-child)]:pr-3',
|
||||||
)}>
|
)}>
|
||||||
{/* Meta */}
|
{/* Meta */}
|
||||||
<div className={clsx(
|
<div className="space-y-4">
|
||||||
rowCount === 1 && 'row-span-1',
|
<div>
|
||||||
rowCount === 2 && 'row-span-2',
|
<div className="relative flex gap-2 items-start">
|
||||||
rowCount === 3 && 'row-span-3',
|
<div className="md:flex-grow">
|
||||||
'sm:row-span-1',
|
<Link
|
||||||
)}>
|
href={pathForPhoto(photo)}
|
||||||
<div className="relative flex gap-2 items-start">
|
className="font-bold uppercase"
|
||||||
<div className="md:flex-grow">
|
>
|
||||||
<Link
|
{titleForPhoto(photo)}
|
||||||
href={pathForPhoto(photo)}
|
</Link>
|
||||||
className="font-bold uppercase"
|
|
||||||
>
|
|
||||||
{titleForPhoto(photo)}
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
<Suspense>
|
|
||||||
<div className="h-4 translate-y-[-3.5px] z-10">
|
|
||||||
<AdminPhotoMenu photo={photo} />
|
|
||||||
</div>
|
</div>
|
||||||
</Suspense>
|
<Suspense>
|
||||||
</div>
|
<div className="h-4 translate-y-[-4px] z-10">
|
||||||
{photo.caption && <>
|
<AdminPhotoMenu photo={photo} />
|
||||||
<div className="text-medium uppercase pt-0.5">
|
</div>
|
||||||
{photo.caption}
|
</Suspense>
|
||||||
</div>
|
</div>
|
||||||
{tags.length > 0 &&
|
{photo.caption &&
|
||||||
<div className="text-medium">—</div>}
|
<div className="uppercase">
|
||||||
</>}
|
{photo.caption}
|
||||||
{tags.length > 0 &&
|
</div>}
|
||||||
<PhotoTags tags={tags} contrast="medium" />}
|
</div>
|
||||||
|
{(showCameraRow || tags.length > 0) &&
|
||||||
|
<div>
|
||||||
|
{showCameraRow &&
|
||||||
|
<PhotoCamera
|
||||||
|
camera={camera}
|
||||||
|
contrast="medium"
|
||||||
|
/>}
|
||||||
|
{tags.length > 0 &&
|
||||||
|
<PhotoTags tags={tags} contrast="medium" />}
|
||||||
|
</div>}
|
||||||
</div>
|
</div>
|
||||||
{/* EXIF: Camera + Film Simulation */}
|
{/* EXIF Data */}
|
||||||
{showCameraRow &&
|
<div className="space-y-4">
|
||||||
<div className="space-y-0.5">
|
{showExifRow &&
|
||||||
<PhotoCamera
|
<>
|
||||||
camera={camera}
|
<ul className="text-medium">
|
||||||
type="text-only"
|
<li>
|
||||||
/>
|
{photo.focalLengthFormatted}
|
||||||
{showSimulation && photo.filmSimulation &&
|
{photo.focalLengthIn35MmFormatFormatted &&
|
||||||
<div className="translate-x-[-0.3rem] translate-y-[-3px]">
|
<>
|
||||||
|
{' '}
|
||||||
|
<span
|
||||||
|
title="35mm equivalent"
|
||||||
|
className="text-extra-dim"
|
||||||
|
>
|
||||||
|
{photo.focalLengthIn35MmFormatFormatted}
|
||||||
|
</span>
|
||||||
|
</>}
|
||||||
|
</li>
|
||||||
|
<li>{photo.fNumberFormatted}</li>
|
||||||
|
<li>{photo.exposureTimeFormatted}</li>
|
||||||
|
<li>{photo.isoFormatted}</li>
|
||||||
|
<li>{photo.exposureCompensationFormatted ?? '0ev'}</li>
|
||||||
|
</ul>
|
||||||
|
{showSimulation && photo.filmSimulation &&
|
||||||
<PhotoFilmSimulation
|
<PhotoFilmSimulation
|
||||||
simulation={photo.filmSimulation}
|
simulation={photo.filmSimulation}
|
||||||
/>
|
/>}
|
||||||
</div>}
|
</>}
|
||||||
</div>}
|
|
||||||
{/* EXIF: Details */}
|
|
||||||
{showExifRow &&
|
|
||||||
<ul className="text-medium">
|
|
||||||
<li>
|
|
||||||
{photo.focalLengthFormatted}
|
|
||||||
{photo.focalLengthIn35MmFormatFormatted &&
|
|
||||||
<>
|
|
||||||
{' '}
|
|
||||||
<span
|
|
||||||
title="35mm equivalent"
|
|
||||||
className="text-extra-dim"
|
|
||||||
>
|
|
||||||
{photo.focalLengthIn35MmFormatFormatted}
|
|
||||||
</span>
|
|
||||||
</>}
|
|
||||||
</li>
|
|
||||||
<li>{photo.fNumberFormatted}</li>
|
|
||||||
<li>{photo.exposureTimeFormatted}</li>
|
|
||||||
<li>{photo.isoFormatted}</li>
|
|
||||||
<li>{photo.exposureCompensationFormatted ?? '—'}</li>
|
|
||||||
</ul>}
|
|
||||||
{/* Date + Share */}
|
|
||||||
<div className={clsx(
|
|
||||||
'flex gap-2 sm:justify-end',
|
|
||||||
'md:flex-col md:gap-5 md:justify-normal',
|
|
||||||
rowCount === 1 && 'col-span-3',
|
|
||||||
rowCount === 2 && 'col-span-2',
|
|
||||||
)}>
|
|
||||||
<div className={clsx(
|
<div className={clsx(
|
||||||
'text-medium uppercase pr-1',
|
'flex gap-2',
|
||||||
|
'md:flex-col md:gap-4 md:justify-normal',
|
||||||
)}>
|
)}>
|
||||||
{photo.takenAtNaiveFormatted}
|
<div className={clsx(
|
||||||
|
'text-medium uppercase pr-1',
|
||||||
|
)}>
|
||||||
|
{photo.takenAtNaiveFormatted}
|
||||||
|
</div>
|
||||||
|
<ShareButton
|
||||||
|
path={pathForPhotoShare(
|
||||||
|
photo,
|
||||||
|
shouldShareTag ? primaryTag : undefined,
|
||||||
|
shouldShareCamera ? camera : undefined,
|
||||||
|
shouldShareSimulation ? photo.filmSimulation : undefined,
|
||||||
|
)}
|
||||||
|
prefetch={prefetchShare}
|
||||||
|
shouldScroll={shouldScrollOnShare}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<ShareButton
|
|
||||||
path={pathForPhotoShare(
|
|
||||||
photo,
|
|
||||||
shouldShareTag ? primaryTag : undefined,
|
|
||||||
shouldShareCamera ? camera : undefined,
|
|
||||||
shouldShareSimulation ? photo.filmSimulation : undefined,
|
|
||||||
)}
|
|
||||||
prefetch={prefetchShare}
|
|
||||||
shouldScroll={shouldScrollOnShare}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</div>}
|
</div>}
|
||||||
/>
|
/>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user