From 05a48a5f55b2cdecdd8cce4442d3640891e5b08b Mon Sep 17 00:00:00 2001 From: Lanskikh Date: Wed, 25 Sep 2024 18:45:32 +0500 Subject: [PATCH] fixes --- index.html | 2 +- src/components/Contacts.tsx | 2 +- src/components/Devices.tsx | 4 ++-- src/components/Form.tsx | 10 +++++----- src/components/Promotion.tsx | 34 +++++++++++++++++++++++++--------- 5 files changed, 34 insertions(+), 18 deletions(-) diff --git a/index.html b/index.html index e31be8d..67878c3 100644 --- a/index.html +++ b/index.html @@ -22,7 +22,7 @@ diff --git a/src/components/Contacts.tsx b/src/components/Contacts.tsx index 5932565..27f5b3a 100644 --- a/src/components/Contacts.tsx +++ b/src/components/Contacts.tsx @@ -15,7 +15,7 @@ export function Contacts() { return (

Хотите интерактивное решение для выставки? diff --git a/src/components/Devices.tsx b/src/components/Devices.tsx index 1c440b7..1e6ed61 100644 --- a/src/components/Devices.tsx +++ b/src/components/Devices.tsx @@ -11,7 +11,7 @@ export function Devices() { return (
Работаем с @@ -90,7 +90,7 @@ function DesktopDevice({ <motion.img src={img} alt={title} - className="bottom-0 right-[calc(144/1552*100%)] w-[calc(560/1552*100%)] max-w-[560px] absolute" + className="bottom-0 right-[calc(70/1552*100%)] w-[calc(560/1552*100%)] max-w-[768px] absolute" initial={{ opacity: 0, y: 500 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: 100 }} diff --git a/src/components/Form.tsx b/src/components/Form.tsx index 44e27df..c56fd69 100644 --- a/src/components/Form.tsx +++ b/src/components/Form.tsx @@ -12,8 +12,8 @@ export function Form() { <div className="relative max-lg:flex items-center gap-x-[35px]"> <FeedbackForm /> <div className="max-sm:hidden absolute lg:bottom-0 lg:-right-[min(136px,calc(136/1600*100vw))] sm:-right-[min(196px,calc(196/768*100vw))] animate-[spin_15s_linear_infinite]"> - <div className="relative lg:w-[calc(512/1600*100vw)] sm:w-[calc(512/768*100vw)] aspect-square flex justify-center transition-all duration-500 origin-center"> - <div className="lg:w-[calc(116/1600*100vw)] sm:w-[calc(116/768*100vw)] flex flex-col justify-between h-full absolute"> + <div className="relative lg:w-[min(calc(512/1600*100vw),768px)] sm:w-[calc(512/768*100vw)] aspect-square flex justify-center transition-all duration-500 origin-center"> + <div className="lg:w-[min(360px,calc(116/1600*100vw))] sm:w-[calc(116/768*100vw)] flex flex-col justify-between h-full absolute"> <img src="/images/form/1_1.jpg" alt="Виртуальные выставки и метавселенные" @@ -25,7 +25,7 @@ export function Form() { className="animate-[spin_15s_linear_infinite] [animation-direction:reverse] rounded-full" /> </div> - <div className="lg:w-[calc(116/1600*100vw)] sm:w-[calc(116/768*100vw)] flex flex-col justify-between h-full absolute rotate-45"> + <div className="lg:w-[min(360px,calc(116/1600*100vw))] sm:w-[calc(116/768*100vw)] flex flex-col justify-between h-full absolute rotate-45"> <img src="/images/form/2_1.jpg" className="animate-[spin_15s_linear_infinite] [animation-direction:reverse] rounded-full" @@ -37,7 +37,7 @@ export function Form() { alt="ЖК «Upside Towers»" /> </div> - <div className="lg:w-[calc(116/1600*100vw)] sm:w-[calc(116/768*100vw)] flex flex-col justify-between h-full absolute rotate-90"> + <div className="lg:w-[min(360px,calc(116/1600*100vw))] sm:w-[calc(116/768*100vw)] flex flex-col justify-between h-full absolute rotate-90"> <div className="-rotate-90"> <img src="/images/form/3_1.jpg" @@ -53,7 +53,7 @@ export function Form() { /> </div> </div> - <div className="lg:w-[calc(116/1600*100vw)] sm:w-[calc(116/768*100vw)] flex flex-col justify-between h-full absolute rotate-[135deg]"> + <div className="lg:w-[min(360px,calc(116/1600*100vw))] sm:w-[calc(116/768*100vw)] flex flex-col justify-between h-full absolute rotate-[135deg]"> <div className="-rotate-90"> <img src="/images/form/4_1.jpg" diff --git a/src/components/Promotion.tsx b/src/components/Promotion.tsx index 87f64c0..e8fa83e 100644 --- a/src/components/Promotion.tsx +++ b/src/components/Promotion.tsx @@ -7,6 +7,7 @@ import { hashes } from '../consts/motivationHashes'; import { ChevronUpIcon } from './icons/ChevronUpIcon'; import { ChevronDownIcon } from './icons/ChevronDownIcon'; import { useWindowWidth } from '../hooks/useWindowWidth'; +import { useOnClickOutside } from 'usehooks-ts'; export function Promotion() { const width = useWindowWidth(); @@ -63,9 +64,12 @@ function DesktopPromotionFeature({ const width = useWindowWidth(); const [expanded, setExpanded] = useState(false); + const [animationing, setAnimationing] = useState(false); const inView = useInView(ref); + useOnClickOutside(ref, () => setExpanded(false)); + useEffect( () => setExpanded(hash.slice(1) === hashes.get(number)), [hash, number], @@ -78,16 +82,19 @@ function DesktopPromotionFeature({ return ( <div id={hashes.get(number)} - onClick={() => setExpanded(prev => !prev)} + onClick={() => { + if (!animationing) { + setAnimationing(true); + setExpanded(prev => !prev); + } + }} className="scroll-m-20 select-none py-7 border-t border-[#3D425C] cursor-pointer relative last:border-b bg-[url(/images/promotion/Ellipse.png)] bg-[length:0%_0%] hover:bg-[length:100%_100%] transition-all bg-no-repeat bg-top" ref={ref} > <motion.div className="flex justify-between gap-x-4 [clip-path:polygon(0%_0%,calc(100%-64px)_0%,calc(100%-64px)_calc(100%+28px),0%_calc(100%+28px))]" transition={{ duration: 0.7 }} - animate={ - expanded ? { height: 0.265 * width } : { height: 0.0875 * width } - } + animate={{ height: (expanded ? 0.265 : 0.0875) * width }} > <div className="max-w-[40vw] flex flex-col xl:gap-y-12 gap-y-6 justify-between h-full"> <p className="l-text text-[#52587A] font-medium">[0{number}]</p> @@ -120,12 +127,12 @@ function DesktopPromotionFeature({ key={image} src={image} alt={title} - transition={{ duration: 0.5 }} + transition={{ duration: 1 }} className="object-cover h-full pointer-events-none" animate={{ - maxHeight: - expanded && index === 0 ? 0.265 * width : 0.0875 * width, + maxHeight: (expanded && index === 0 ? 0.265 : 0.0875) * width, }} + onAnimationComplete={() => setAnimationing(false)} /> </AnimatePresence> ))} @@ -150,6 +157,7 @@ function PromotionFeature({ number: number; }) { const [expanded, setExpanded] = useState(false); + const [animationing, setAnimationing] = useState(false); const { hash } = useLocation(); @@ -157,6 +165,8 @@ function PromotionFeature({ const inView = useInView(ref); + useOnClickOutside(ref, () => setExpanded(false)); + useEffect(() => { setExpanded(hash.slice(1) === hashes.get(number)); }, [hash, number]); @@ -170,7 +180,12 @@ function PromotionFeature({ ref={ref} id={hashes.get(number)} className="scroll-m-14 relative select-none sm:py-4 py-2 sm:space-y-8 space-y-4 border-t border-[#3D425C] last:border-b flex flex-col justify-between" - onClick={() => setExpanded(prev => !prev)} + onClick={() => { + if (!animationing) { + setAnimationing(true); + setExpanded(prev => !prev); + } + }} > <div className="flex items-center justify-between gap-x-5"> <p className="font-medium h3">{title}</p> @@ -182,7 +197,7 @@ function PromotionFeature({ {expanded && ( <motion.p className="font-medium l-text" - transition={{ delay: 0.25 }} + transition={{ delay: 0.2 }} initial={{ opacity: 0, y: 10 }} animate={expanded ? { opacity: 0.6, y: 0 } : { opacity: 0, y: 10 }} exit={{ opacity: 0, y: 10 }} @@ -205,6 +220,7 @@ function PromotionFeature({ } className={index > 0 ? 'max-sm:hidden' : ''} key={image} + onAnimationComplete={() => setAnimationing(false)} > <img src={image} alt={title} className="w-full" /> </motion.div>