mikhail_lanskikh/graff.training
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

slider without auto, fixes

Browse Source
This commit is contained in:
Lanskikh
2024-09-12 14:46:41 +05:00
parent 6693ea7b07
commit 1c82028e54
7 changed files with 35 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Layouts/Footer.tsx
+1 -1
View File
@@ -3,7 +3,7 @@ import { LogoWithTextIcon } from '../icons/LogoWithTextIcon';
export function Footer() {
return (
<footer className="sm:grid xl:grid-cols-[2fr_1fr_1fr] sm:grid-cols-2 sm:max-xl:grid-rows-2">
<footer className="sm:grid xl:grid-cols-[2fr_1fr_1fr] sm:grid-cols-2 sm:max-xl:grid-rows-2 bg-[#14161F]">
<div className="flex sm:items-center max-sm:flex-col lg:px-10 sm:px-6 px-4 sm:py-9 py-4 border-t border-[#3D425C] gap-6 sm:max-xl:row-start-1 sm:max-xl:col-span-2">
<Link to={'/'} className="outline-none">
<LogoWithTextIcon className="h-[50px]" />
src/components/Layouts/Header.tsx
+3 -3
View File
@@ -17,7 +17,7 @@ import { ChevronDownIcon } from '../icons/ChevronDownIcon';
export function Header() {
const [menuOpen, setMenuOpen] = useState(false);
const { lang } = useLanguageStore();
// const { lang } = useLanguageStore();
const setModal = useModalStore(state => state.setModal);
const menuRef = useRef<HTMLDivElement>(null);
@@ -30,7 +30,7 @@ export function Header() {
const width = useWindowWidth();
return (
<header className="w-full">
<header className="relative z-10s w-full bg-[#14161F]">
<nav className="flex justify-between border-b border-[#3D425C] lg:pl-10 pl-4 lg:max-h-[72px] min-h-16">
<Link to={'/'} className="flex items-center outline-none">
<LogoIcon className="lg:hidden" />
@@ -47,7 +47,7 @@ export function Header() {
>
Оставить заявку
</Button>
<LangToggler lang={lang} />
{/* <LangToggler lang={lang} /> */}
<button
ref={menuBtnRef}
onClick={() => setMenuOpen(prev => !prev)}
src/components/Main/Contacts.tsx
+6
View File
@@ -43,6 +43,9 @@ export function Contacts() {
className="py-4"
width="full"
icon={<MailIcon />}
onClick={() => {
window.location.href = 'mailto:info@graff.tech';
}}
>
<span className="btn-text opacity-80">Написать</span>
</Button>
@@ -51,6 +54,9 @@ export function Contacts() {
className="py-4"
width="full"
icon={<PhoneIcon />}
onClick={() => {
window.location.href = 'tel:88007700067';
}}
>
<span className="btn-text opacity-80">Позвонить</span>
</Button>
src/components/Main/Efficiency.tsx
+3 -1
View File
@@ -93,7 +93,9 @@ function Figure({
className="flex lg:px-10 px-6 w-full pt-6 bg-no-repeat min-h-[240px] max-sm:border-t max-sm:last:border-b lg:aspect-[532.67/360] relative lg:border-y sm:max-lg:border-t sm:max-lg:last:border-b lg:border-r sm:first:border-r last:border-r-0 border-[#3D425C] sm:max-lg:last:col-span-2 sm:max-lg:row-start-1 sm:max-lg:last:row-start-2"
>
<div className="flex flex-col justify-between pb-6 max-sm:max-w-[50vw]">
<h3 className="lg:font-medium l-text 2xl:max-w-[70%]">{title}</h3>
<h3 className="lg:font-medium text-xl leading-[22px] 2xl:max-w-[70%]">
{title}
</h3>
<h1 className="font-medium flex lg:items-center items-end md:text-[clamp(64px,64px+(100vw-768px)/832*32,96px)] md:leading-[clamp(57.6px,57.6px+(100vw-768px)/832*28.8,86.4px)] text-[64px] leading-[57.6px]">
<span ref={figureRef}>{percents}</span>
<span className="md:text-[clamp(32px,32px+(100vw-768px)/832*32,64px)] md:leading-[clamp(32px,32px+(100vw-768px)/832*25.6,57.6px)] text-[32px] leading-8">
src/components/Main/Ellipse.tsx
+8 -10
View File
@@ -7,18 +7,16 @@ export function Ellipse() {
const y = useRef(0);
const [mousePos, setMousePos] = useState([0, 0]);
function handleMouseMove(e: MouseEvent) {
x.current =
e.clientX - (e.currentTarget as HTMLElement).getBoundingClientRect().left;
y.current =
e.clientY - (e.currentTarget as HTMLElement).getBoundingClientRect().top;
}
const handleMouseMove = useCallback((e: MouseEvent) => {
x.current = e.clientX;
y.current = e.clientY;
}, []);
const animate = useCallback(() => {
if (ref.current) {
setMousePos(([prevX, prevY]) => [
prevX + (x.current - prevX) / 15,
prevY + (y.current - prevY) / 15,
prevX + (x.current - prevX) / 10,
prevY + (y.current - prevY) / 10,
]);
}
requestRef.current = requestAnimationFrame(animate);
@@ -32,13 +30,13 @@ export function Ellipse() {
cancelAnimationFrame(requestRef.current!);
document.body?.removeEventListener('mousemove', handleMouseMove);
};
}, [animate]);
}, [animate, handleMouseMove]);
return (
<div
ref={ref}
style={{ top: mousePos[1], left: mousePos[0] }}
className="absolute -z-[9] bg-[url('src/assets/Ellipse.png')] bg-cover bg-no-repeat bg-center -translate-y-[75%] -translate-x-[50%] aspect-[348.75/262.77] w-[21.75vw]"
className="fixed -z-[9] bg-[url('src/assets/Ellipse.png')] bg-cover bg-no-repeat bg-center -translate-y-[50%] -translate-x-[50%] aspect-[348.75/262.77] w-[21.75vw]"
/>
);
}
src/components/Main/ModalWithForm.tsx
+7 -2
View File
@@ -10,7 +10,6 @@ import ReactInputMask from 'react-input-mask';
import { ArrowRightIcon } from '../icons/ArrowRightIcon';
import { CloseIcon } from '../icons/CloseIcon';
import { LoaderIcon } from '../icons/LoaderIcon';
import { MailIcon } from '../icons/MailIcon';
import { api } from '../../api/contactsFormInstance';
import { Button } from '../../ui/Button';
import { useModalStore } from '../../store/modalStore';
@@ -18,6 +17,7 @@ import { SelectPhoneCode } from './SelectPhoneCode';
import { Country } from 'react-phone-number-input';
import { getExampleNumber } from 'libphonenumber-js';
import examples from 'libphonenumber-js/mobile/examples';
import { ClassNameWrapper } from '../../hocs/ClassNameWrapper';
export function ModalWithForm() {
const { setModal } = useModalStore();
@@ -204,7 +204,12 @@ export function ModalWithForm() {
isLoading ? (
<LoaderIcon className="relative w-6 h-6 animate-spin" />
) : (
<MailIcon className="relative w-6 h-6" />
<div className="p-2 bg-white rounded-full">
<ClassNameWrapper
element={<ArrowRightIcon />}
className="text-black"
/>
</div>
)
}
>
src/ui/SliderWithScaling.tsx
+7 -18
View File
@@ -1,5 +1,5 @@
import { useWindowWidth } from '../hooks/useWindowWidth';
import { delay, motion, cancelFrame } from 'framer-motion';
import { motion } from 'framer-motion';
import { ReactNode, useEffect, useReducer, useRef, useState } from 'react';
import { useSwipeable } from 'react-swipeable';
import { SliderControls } from '../components/Main/SliderControls';
@@ -24,7 +24,7 @@ export function SliderWithScaling<T extends { title: string }>({
const width = useWindowWidth();
const baseoffset =
width >= 1024
? (-width / 1600) * 507 + 8
? (-width / 1600) * 507 + 32
: (-width * +minWidth.slice(0, -2)) / 100 + 8;
const [slide, setSlide] = useState(0);
@@ -77,16 +77,6 @@ export function SliderWithScaling<T extends { title: string }>({
setSliderOffset(baseoffset);
}, [baseoffset, order, slide]);
useEffect(() => {
const timeout = delay(overshoot => {
controlsRef.current.right();
}, 10000);
return () => {
cancelFrame(timeout);
};
}, [slide]);
const handlers = useSwipeable({
onSwipedLeft: controlsRef.current.right,
onSwipedRight: controlsRef.current.left,
@@ -120,10 +110,9 @@ export function SliderWithScaling<T extends { title: string }>({
initial={
currentSliding === 'next' && index === 0
? { minWidth: minWidthScaled, minHeight: minHeightScaled }
: { minWidth, minHeight }
// index === 3
// ?
// : {}
: index === 3
? { minWidth, minHeight }
: {}
}
transition={{ duration: 1, type: 'just' }}
animate={
@@ -135,7 +124,7 @@ export function SliderWithScaling<T extends { title: string }>({
: {
minWidth,
minHeight,
// transition: { duration: index === 3 ? 0.0001 : 1 },
transition: { duration: index === 3 ? 0.0001 : 1 },
}
}
className={'pointer-events-none ' + childClassName}
@@ -158,7 +147,7 @@ export function SliderWithScaling<T extends { title: string }>({
'absolute ' +
(controlsPosition === 'top'
? 'top-[75px]'
: 'lg:bottom-20 -bottom-10 sm:self-end self-center')
: 'lg:bottom-16 -bottom-10 sm:self-end self-center')
}
/>
</div>