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

Refactor photo header breakpoints

Browse Source
This commit is contained in:
Sam Becker 2024-09-04 14:49:19 -05:00
parent 2d9048efd0
commit 65120de9cb
1 changed files with 38 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
src/photo/PhotoHeader.tsx
View File

@ -54,7 +54,11 @@ export default function PhotoHeader({
(indexNumber || (selectedPhotoIndex ?? 0 + 1)) + ' of ' + (indexNumber || (selectedPhotoIndex ?? 0 + 1)) + ' of ' +
(count ?? photos.length); (count ?? photos.length);
const isPhotoSet = selectedPhotoIndex === undefined; const headerType = selectedPhotoIndex === undefined
? 'photo-set'
: entity
? 'photo-detail-with-entity'
: 'photo-detail';
const renderPrevNext = () => const renderPrevNext = () =>
<PhotoPrevNext {...{ <PhotoPrevNext {...{
@ -81,42 +85,55 @@ export default function PhotoHeader({
items={[<DivDebugBaselineGrid items={[<DivDebugBaselineGrid
key="PhotosHeader" key="PhotosHeader"
className={clsx( className={clsx(
'grid gap-0.5 sm:gap-1 items-start grid-cols-4', 'grid gap-0.5 sm:gap-1 items-start',
'grid-cols-4',
isGridHighDensity isGridHighDensity
? 'lg:grid-cols-6' ? 'lg:grid-cols-6'
: 'md:grid-cols-3 lg:grid-cols-4', : 'md:grid-cols-3 lg:grid-cols-4',
)}> )}>
<span className={clsx( {/* Content A: Filter Set or Photo Title */}
<div className={clsx(
'inline-flex uppercase', 'inline-flex uppercase',
isGridHighDensity headerType === 'photo-set'
? 'col-span-2 sm:col-span-1 lg:col-span-2' ? isGridHighDensity
: 'col-span-2 md:col-span-1', ? 'col-span-2 sm:col-span-1 lg:col-span-2'
: 'col-span-2 sm:col-span-1'
: headerType === 'photo-detail-with-entity'
? isGridHighDensity
? 'col-span-2 sm:col-span-1 lg:col-span-2'
: 'col-span-2 sm:col-span-1'
: isGridHighDensity
? 'col-span-3 sm:col-span-3 lg:col-span-5'
: 'col-span-3 md:col-span-2 lg:col-span-3',
)}> )}>
{entity ?? (selectedPhoto !== undefined && {entity ?? (selectedPhoto !== undefined &&
<PhotoLink <PhotoLink
photo={selectedPhoto} photo={selectedPhoto}
className="uppercase font-bold" className="uppercase font-bold text-ellipsis truncate"
> >
{ {
selectedPhoto.title || selectedPhoto.title ||
formatDate(selectedPhoto.takenAt, 'tiny') formatDate(selectedPhoto.takenAt, 'tiny')
} }
</PhotoLink>)} </PhotoLink>)}
</span> </div>
<span className={clsx( {/* Content B: Filter Set Meta or Photo Pagination */}
<div className={clsx(
'inline-flex', 'inline-flex',
'gap-2 self-start', 'gap-2 self-start',
'uppercase text-dim', 'uppercase text-dim',
isPhotoSet headerType === 'photo-set'
? isGridHighDensity ? isGridHighDensity
? 'col-span-2 sm:col-span-1 md:col-span-2 lg:col-span-3' ? 'col-span-2 lg:col-span-3'
: 'col-span-2 sm:col-span-1 lg:col-span-2' : 'col-span-2 md:col-span-1 lg:col-span-2'
: isGridHighDensity : headerType === 'photo-detail-with-entity'
? 'sm:col-span-2 lg:col-span-3' ? isGridHighDensity
: 'lg:col-span-2', ? 'sm:col-span-2 lg:col-span-3'
: 'sm:col-span-2 md:col-span-1 lg:col-span-2'
: 'hidden',
)}> )}>
{entity && <> {entity && <>
{isPhotoSet {headerType === 'photo-set'
? <> ? <>
{entityDescription} {entityDescription}
{sharePath && {sharePath &&
@ -130,9 +147,12 @@ export default function PhotoHeader({
{entityVerb} {paginationLabel} {entityVerb} {paginationLabel}
</ResponsiveText>} </ResponsiveText>}
</>} </>}
</span> </div>
{/* Content C: Nav */}
<div className={clsx( <div className={clsx(
selectedPhoto ? 'flex' : 'hidden sm:flex', headerType === 'photo-set'
? 'hidden sm:flex'
: 'flex',
'justify-end', 'justify-end',
)}> )}>
{selectedPhoto {selectedPhoto