strtus/Vercel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refine large photo layout

Browse Source
This commit is contained in:
Sam Becker 2024-03-17 22:44:26 -05:00
parent a6ba4f8257
commit 031a149893
2 changed files with 80 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/camera/PhotoCamera.tsx
View File

@ -3,7 +3,6 @@ import { pathForCamera } from '@/site/paths';
import { IoMdCamera } from 'react-icons/io';
import { Camera, formatCameraText } from '.';
import EntityLink, { EntityLinkExternalProps } from '@/components/EntityLink';
import { clsx } from 'clsx/lite';
export default function PhotoCamera({
camera,
@ -27,18 +26,12 @@ export default function PhotoCamera({
icon={showAppleIcon
? <AiFillApple
title="Apple"
className={clsx(
'text-icon',
'translate-x-[-2.5px] translate-y-[2px]',
)}
className="translate-x-[-2.5px] translate-y-[2px]"
size={15}
/>
: <IoMdCamera
size={13}
className={clsx(
'text-icon',
'translate-x-[-1px] translate-y-[3.5px]',
)}
size={12}
className="translate-x-[-1px] translate-y-[3.5px]"
/>}
type={showAppleIcon && isCameraApple ? 'icon-first' : type}
badged={badged}

73
src/photo/PhotoLarge.tsx
View File

@ -16,7 +16,7 @@ import { cameraFromPhoto } from '@/camera';
import PhotoFilmSimulation from '@/simulation/PhotoFilmSimulation';
import { sortTags } from '@/tag';
import AdminPhotoMenu from '@/admin/AdminPhotoMenu';
import { Suspense, useMemo } from 'react';
import { Suspense } from 'react';
export default function PhotoLarge({
photo,
@ -49,13 +49,6 @@ export default function PhotoLarge({
const showExifRow = shouldShowExifDataForPhoto(photo);
const rowCount = useMemo(() => {
let count = 1;
if (showCameraRow) { count++; }
if (showExifRow) { count++; }
return count;
}, [showCameraRow, showExifRow]);
return (
<SiteGrid
contentMain={
@ -72,17 +65,14 @@ export default function PhotoLarge({
<div className={clsx(
'leading-snug',
'sticky top-4 self-start -translate-y-1',
'grid grid-cols-2 sm:grid-cols-4 md:grid-cols-1',
'gap-y-4 pb-6',
'grid grid-cols-2 md:grid-cols-1',
'gap-x-0.5 sm:gap-x-1 gap-y-4',
'pb-6',
'[&>*:not(:last-child)]:pr-3',
)}>
{/* Meta */}
<div className={clsx(
rowCount === 1 && 'row-span-1',
rowCount === 2 && 'row-span-2',
rowCount === 3 && 'row-span-3',
'sm:row-span-1',
)}>
<div className="space-y-4">
<div>
<div className="relative flex gap-2 items-start">
<div className="md:flex-grow">
<Link
@ -93,37 +83,31 @@ export default function PhotoLarge({
</Link>
</div>
<Suspense>
<div className="h-4 translate-y-[-3.5px] z-10">
<div className="h-4 translate-y-[-4px] z-10">
<AdminPhotoMenu photo={photo} />
</div>
</Suspense>
</div>
{photo.caption && <>
<div className="text-medium uppercase pt-0.5">
{photo.caption &&
<div className="uppercase">
{photo.caption}
</div>}
</div>
{tags.length > 0 &&
<div className="text-medium">—</div>}
</>}
{tags.length > 0 &&
<PhotoTags tags={tags} contrast="medium" />}
</div>
{/* EXIF: Camera + Film Simulation */}
{(showCameraRow || tags.length > 0) &&
<div>
{showCameraRow &&
<div className="space-y-0.5">
<PhotoCamera
camera={camera}
type="text-only"
/>
{showSimulation && photo.filmSimulation &&
<div className="translate-x-[-0.3rem] translate-y-[-3px]">
<PhotoFilmSimulation
simulation={photo.filmSimulation}
/>
contrast="medium"
/>}
{tags.length > 0 &&
<PhotoTags tags={tags} contrast="medium" />}
</div>}
</div>}
{/* EXIF: Details */}
</div>
{/* EXIF Data */}
<div className="space-y-4">
{showExifRow &&
<>
<ul className="text-medium">
<li>
{photo.focalLengthFormatted}
@ -141,14 +125,16 @@ export default function PhotoLarge({
<li>{photo.fNumberFormatted}</li>
<li>{photo.exposureTimeFormatted}</li>
<li>{photo.isoFormatted}</li>
<li>{photo.exposureCompensationFormatted ?? '—'}</li>
</ul>}
{/* Date + Share */}
<li>{photo.exposureCompensationFormatted ?? '0ev'}</li>
</ul>
{showSimulation && photo.filmSimulation &&
<PhotoFilmSimulation
simulation={photo.filmSimulation}
/>}
</>}
<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',
'flex gap-2',
'md:flex-col md:gap-4 md:justify-normal',
)}>
<div className={clsx(
'text-medium uppercase pr-1',
@ -166,6 +152,7 @@ export default function PhotoLarge({
shouldScroll={shouldScrollOnShare}
/>
</div>
</div>
</div>}
/>
);