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

Refine large photo buttons on small screens

Browse Source
This commit is contained in:
Sam Becker 2025-01-26 19:08:48 -06:00
parent 3779bc141c
commit 01166d7867
2 changed files with 5 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/ResponsiveDate.tsx
View File

@ -48,7 +48,7 @@ export default function ResponsiveDate({
<span
title={showPlaceholder ? 'LOADING LOCAL TIME' : title}
className={clsx(
'uppercase rounded-md transition-colors',
'uppercase rounded-md transition-colors whitespace-nowrap',
showPlaceholder && 'bg-dim',
className,
)}

14
src/photo/PhotoLarge.tsx
View File

@ -276,10 +276,8 @@ export default function PhotoLarge({
/>}
</>}
<div className={clsx(
'flex gap-x-2.5 gap-y-baseline',
ALLOW_PUBLIC_DOWNLOADS
? 'flex-col'
: 'md:flex-col',
'flex gap-x-3 gap-y-baseline',
'md:flex-col flex-wrap',
'md:justify-normal',
)}>
<PhotoDate
@ -297,9 +295,7 @@ export default function PhotoLarge({
/>
<div className={clsx(
'flex gap-1 translate-y-[0.5px]',
ALLOW_PUBLIC_DOWNLOADS
? 'translate-x-[-2.5px]'
: 'md:translate-x-[-2.5px]',
'translate-x-[-2.5px]',
)}>
{showZoomControls &&
<LoaderButton
@ -324,9 +320,7 @@ export default function PhotoLarge({
/>}
{ALLOW_PUBLIC_DOWNLOADS &&
<DownloadButton
className={clsx(
'translate-y-[0.5px] md:translate-y-0',
)}
className="translate-y-[0.5px] md:translate-y-0"
photo={photo}
/>}
</div>