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

Refine batch selection styles/behavior

Browse Source
This commit is contained in:
Sam Becker 2024-07-08 19:55:28 -05:00
parent 291e36f76a
commit f1c0d8ff93
2 changed files with 9 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/admin/AdminBatchEditPanel.tsx
View File

@ -20,7 +20,8 @@ export default function AdminBatchEditPanel() {
color="gray" color="gray"
className={clsx( className={clsx(
'backdrop-blur-lg !border-transparent', 'backdrop-blur-lg !border-transparent',
'!bg-gray-200/70 dark:!bg-gray-800/70' '!text-gray-900 dark:!text-gray-100',
'!bg-gray-100/90 dark:!bg-gray-900/80'
)} )}
cta={<LoaderButton cta={<LoaderButton
onClick={() => setSelectedPhotoIds?.([])} onClick={() => setSelectedPhotoIds?.([])}

10
src/photo/PhotoGrid.tsx
View File

@ -113,10 +113,11 @@ export default function PhotoGrid({
)}> )}>
<div <div
className={clsx( className={clsx(
'w-full h-full transition-opacity', 'w-full h-full',
'border-black dark:border-white', 'border-black dark:border-white',
'group-hover:opacity-100', 'transition-opacity',
!isSelected && 'opacity-0', !isSelected && 'opacity-0',
'group-hover:opacity-100',
// eslint-disable-next-line max-len // eslint-disable-next-line max-len
'bg-[radial-gradient(169.40%_89.55%_at_94.76%_6.29%,rgba(1,0,0,0.40)_0%,rgba(255,255,255,0.00)_75%)]', 'bg-[radial-gradient(169.40%_89.55%_at_94.76%_6.29%,rgba(1,0,0,0.40)_0%,rgba(255,255,255,0.00)_75%)]',
isSelected && 'border-4', isSelected && 'border-4',
@ -127,7 +128,10 @@ export default function PhotoGrid({
<div className="absolute top-0 right-0 p-2"> <div className="absolute top-0 right-0 p-2">
<Checkbox <Checkbox
className={clsx( className={clsx(
!isSelected && 'hidden group-hover:block', // Required to prevent Safari jitter
'translate-x-[0.1px]',
'text-white',
!isSelected && 'opacity-0 group-hover:opacity-100',
)} )}
checked={isSelected} checked={isSelected}
onChange={() => setSelectedPhotoIds?.(isSelected onChange={() => setSelectedPhotoIds?.(isSelected