Refining photo form floating thumbnail
This commit is contained in:
parent
16e6711f0d
commit
4dc3a976b7
@ -330,14 +330,18 @@ export default function PhotoForm({
|
|||||||
<div className="relative">
|
<div className="relative">
|
||||||
{thumbnail(true)}
|
{thumbnail(true)}
|
||||||
<div className={clsx(
|
<div className={clsx(
|
||||||
'max-lg:hidden fixed top-8 left-[42rem]',
|
'max-md:hidden',
|
||||||
// Prevent image blocking form buttons
|
'fixed top-8',
|
||||||
|
// Orient around responsive form fields
|
||||||
|
'left-[77%] min-[850px]:left-[41rem] lg:left-[42rem]',
|
||||||
|
'mr-4',
|
||||||
|
// Prevent image blocking form button interaction
|
||||||
'pointer-events-none',
|
'pointer-events-none',
|
||||||
)}>
|
)}>
|
||||||
{thumbnail(false, clsx(
|
{thumbnail(false, clsx(
|
||||||
'opacity-0 -translate-y-4',
|
'opacity-0 -translate-y-4',
|
||||||
!isThumbnailVisible &&
|
!isThumbnailVisible &&
|
||||||
'opacity-100 translate-y-0 transition-all duration-200',
|
'opacity-100 translate-y-0 transition-all duration-300',
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
<div className={clsx(
|
<div className={clsx(
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user