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

Refine public download button layout

Browse Source
This commit is contained in:
Sam Becker 2024-09-21 16:11:02 -05:00
parent 17b999f8d3
commit 13e5be2296
3 changed files with 33 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/DownloadButton.tsx
View File

@ -20,8 +20,6 @@ export default function DownloadButton({
className={clsx(
className,
'text-medium',
'-mx-0.5 translate-x-0.5',
'sm:mx-0 sm:translate-x-0'
)}
icon={<MdOutlineFileDownload size={18} />}
spinnerColor='dim'

2
src/components/ShareButton.tsx
View File

@ -21,8 +21,6 @@ export default function ShareButton({
className={clsx(
className,
dim ? 'text-dim' : 'text-medium',
'-mx-0.5 translate-x-0.5',
'sm:mx-0 sm:translate-x-0',
)}
icon={<TbPhotoShare size={16} />}
spinnerColor="dim"

61
src/photo/PhotoLarge.tsx
View File

@ -236,8 +236,11 @@ export default function PhotoLarge({
/>}
</>}
<div className={clsx(
'flex gap-x-2 gap-y-baseline',
'md:flex-col md:justify-normal',
'flex gap-x-2.5 gap-y-baseline',
ALLOW_PUBLIC_DOWNLOADS
? 'flex-col'
: 'md:flex-col',
'md:justify-normal',
)}>
<PhotoDate
photo={photo}
@ -247,32 +250,34 @@ export default function PhotoLarge({
!hasNonDateContent && isUserSignedIn && 'md:pr-7',
)}
/>
{ALLOW_PUBLIC_DOWNLOADS &&
<DownloadButton
className={clsx(
'md:translate-x-[-2.5px]',
'translate-y-[1.5px] md:translate-y-0',
)}
photo={photo}
/>}
{shouldShare &&
<ShareButton
className={clsx(
'md:translate-x-[-2.5px]',
'translate-y-[1.5px] md:translate-y-0',
)}
path={pathForPhotoShare({
photo,
tag: shouldShareTag ? primaryTag : undefined,
camera: shouldShareCamera ? camera : undefined,
// eslint-disable-next-line max-len
simulation: shouldShareSimulation ? photo.filmSimulation : undefined,
// eslint-disable-next-line max-len
focal: shouldShareFocalLength ? photo.focalLength : undefined,
})}
prefetch={prefetchRelatedLinks}
shouldScroll={shouldScrollOnShare}
/>}
<div className={clsx(
'flex gap-1 translate-y-[0.5px]',
ALLOW_PUBLIC_DOWNLOADS
? 'translate-x-[-3px]'
: 'md:translate-x-[-3px]',
)}>
{shouldShare &&
<ShareButton
path={pathForPhotoShare({
photo,
tag: shouldShareTag ? primaryTag : undefined,
camera: shouldShareCamera ? camera : undefined,
// eslint-disable-next-line max-len
simulation: shouldShareSimulation ? photo.filmSimulation : undefined,
// eslint-disable-next-line max-len
focal: shouldShareFocalLength ? photo.focalLength : undefined,
})}
prefetch={prefetchRelatedLinks}
shouldScroll={shouldScrollOnShare}
/>}
{ALLOW_PUBLIC_DOWNLOADS &&
<DownloadButton
className={clsx(
'translate-y-[0.5px] md:translate-y-0',
)}
photo={photo}
/>}
</div>
</div>
</div>
</DivDebugBaselineGrid>}