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

fixes

Browse Source
This commit is contained in:
Lanskikh
2024-09-13 13:38:16 +05:00
parent 2e2f3ac3d4
commit 63ce919736
13 changed files with 51 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+1
View File
@@ -1,6 +1,7 @@
<!doctype html>
<html lang="ru">
<head>
<preference name="allowsInlineMediaPlayback" value="true" />
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/public/favicon.svg" />
<meta
src/components/Layouts/VideoModal.tsx
+1
View File
@@ -27,6 +27,7 @@ export function VideoModal({ link }: VideoModalProps) {
autoPlay
muted
loop
playsInline
/>
</div>
</div>
src/components/Main/Clients.tsx
+1 -1
View File
@@ -56,7 +56,7 @@ function MarqueeHalf({
<div
itemProp={client.title}
key={client.src}
className="border-l border-[#3D425C] w-[clamp(200px,19.5vw,312px)] flex justify-center items-center px-5a"
className="border-l border-[#3D425C] w-[clamp(200px,19.5vw,312px)] flex justify-center items-center"
>
<img
src={client.src}
src/components/Main/Decreasing.tsx
+2 -1
View File
@@ -11,7 +11,7 @@ export function Decreasing() {
return (
<div className="lg:py-[100px] sm:py-[70px] py-14">
<Title className="w-4/5 min-[2500px]:w-[70%]">
<Title className="lg:w-4/5 min-[2500px]:w-[70%]">
<span className="text-gradient">
Помогаем предприятиям снизить издержки,
</span>{' '}
@@ -49,6 +49,7 @@ export function Decreasing() {
<video
src="src/assets/decreasing/decreasing.mp4"
autoPlay
playsInline
muted
loop
className="object-cover w-full"
src/components/Main/Distance.tsx
+1 -1
View File
@@ -7,7 +7,7 @@ export function Distance() {
itemType="http://schema.org/Distance"
className="lg:py-[100px] py-14"
>
<Title className="w-4/5 mb-6 lg:mb-14">
<Title className="mb-6 lg:w-4/5 lg:mb-14">
Платформа GRAFF.training поволяет осуществлять
<span className="text-gradient"> дистанционное обучение</span>{' '}
с&nbsp;любого устройства
src/components/Main/Efficiency.tsx
+1 -1
View File
@@ -63,7 +63,7 @@ function Figure({
const figureRef = useRef<HTMLSpanElement>(null);
const motionValue = useMotionValue<number>(0);
const springValue = useSpring(motionValue, { damping: 5, stiffness: 100 });
const springValue = useSpring(motionValue, { damping: 100, stiffness: 100 });
const isInView = useInView(root, { once: true, margin: '-200px' });
useEffect(() => {
src/components/Main/ModalContainer.tsx
+1 -1
View File
@@ -5,7 +5,7 @@ export function ModalContainer() {
return (
modal && (
<div className="fixed top-0 left-0 z-50 flex items-center justify-center w-full h-full transition-opacity bg-black bg-opacity-40">
<div className="fixed top-0 left-0 z-50 flex items-center justify-center w-full h-full transition-opacity bg-black bg-opacity-90 [backdrop-filter:blur(10px);]">
<div onClick={e => e.stopPropagation()} className="cursor-default">
{modal}
</div>
src/components/Main/MultiUser.tsx
+1 -1
View File
@@ -17,7 +17,7 @@ export function MultiUser() {
<br className="lg:hidden" />
режим обучения
</Title>
<div className="max-lg:hidden lg:col-span-6 col-start-1 lg:row-span-2 sm:col-span-3 lg:row-start-2 sm:row-start-3 sm:row-span-1 bg-[url(src/assets/availables/image.png)] bg-cover bg-no-repeat bg-center" />
<div className="max-lg:hidden lg:col-span-6 col-start-1 lg:row-span-2 sm:col-span-3 lg:row-start-2 sm:row-start-3 sm:row-span-1 bg-[url(src/assets/availables/image.png)] bg-cover bg-no-repeat bg-left-top" />
<div
itemProp="multiUserFeatures"
itemScope
src/components/Main/Project.tsx
+1
View File
@@ -27,6 +27,7 @@ export const Project = forwardRef<HTMLDivElement, IProject<Media>>(
src={src[0]}
muted
loop
playsInline
autoPlay
className="object-cover object-center w-full h-full -mb-px"
onPlaying={() => setBuffering(false)}
src/components/Main/Projects.tsx
+1 -1
View File
@@ -14,7 +14,7 @@ export function Projects() {
itemType="https://schema.org/Projects"
className="lg:space-y-14 space-y-6 lg:pt-[100px] py-14"
>
<Title className="w-4/5">
<Title className="lg:w-4/5">
<span className="text-gradient">Большой опыт в работе</span>{' '}
с&nbsp;промышленными предприятиями и&nbsp;учебными заведениями
</Title>
src/components/Main/Showreel.tsx
+2 -1
View File
@@ -22,7 +22,8 @@ export function Showreel() {
autoPlay
loop
muted
className="w-full aspect-[1552/616] object-cover self-stretch"
playsInline
className="w-full aspect-[21/10] object-cover self-stretch"
/>
<button
className="absolute z-10 lg:p-8 sm:p-6 p-4 rounded-full border group-hover:block hidden bg-[#14161F33]"
src/components/Main/Trainings.tsx
+1 -1
View File
@@ -13,7 +13,7 @@ export function Trainings() {
id="trainings"
className="lg:py-[70px] py-14"
>
<Title className="2xl:mb-[77px] lg:mb-14 mb-6 w-4/5 min-[2500px]:w-[70%]">
<Title className="2xl:mb-[77px] lg:mb-14 mb-6 lg:w-4/5 min-[2500px]:w-[70%]">
Предлагаем различные{' '}
<span className="text-gradient">варианты комплектации тренажеров</span>,
основываясь на специфике вашего тренировочного процесса
src/ui/SliderWithScaling.tsx
+37 -26
View File
@@ -24,15 +24,12 @@ export function SliderWithScaling<T extends { title: string }>({
const width = useWindowWidth();
const baseoffset =
width >= 1024
? (-width / 1600) * 507 + 32
: (-width * +minWidth.slice(0, -2)) / 100 + 8;
? (-width / 1600) * 507 + 0
: (-width * +minWidth.slice(0, -2)) / 100;
const [slide, setSlide] = useState(0);
const [transiting, setTransiting] = useState(false);
const [sliderOffset, setSliderOffset] = useState(baseoffset);
const [currentSliding, setCurrentSliding] = useState<
'prev' | 'next' | null
>();
const sliderRef = useRef<HTMLDivElement>(null);
const controlsRef = useRef<{ left: () => void; right: () => void }>({
@@ -41,40 +38,48 @@ export function SliderWithScaling<T extends { title: string }>({
});
const [order, dispatch] = useReducer(
(state: typeof slides, action: 'prev' | 'next') => {
(state: typeof slides, action: 'prev' | 'next' | 2) => {
setTransiting(true);
switch (action) {
case 'prev':
setSlide(slide => (slide === 0 ? slides.length - 1 : slide - 1));
setSliderOffset(2 * baseoffset);
return [state[state.length - 3], ...state.slice(0, -1)];
setSliderOffset(3 * baseoffset);
return [state[state.length - 5], ...state.slice(0, -1)];
case 'next':
setSlide(slide => (slide === slides.length - 1 ? 0 : slide + 1));
setSlide(slide => (slide + 1) % slides.length);
setSliderOffset(baseoffset);
return [...state.slice(1), state[4]];
case 2:
setSlide(slide => (slide + 2) % slides.length);
setSliderOffset(0);
return [...state.slice(1), state[2]];
return [...state.slice(2), state[4], state[5]];
default:
return state;
}
},
[slides[slides.length - 1], ...slides, slides[0]],
[
slides[slides.length - 2],
slides[slides.length - 1],
...slides,
slides[0],
slides[1],
],
);
function nextSlide() {
if (!transiting) {
setCurrentSliding('next');
dispatch('next');
}
}
function prevSlide() {
if (!transiting) {
setCurrentSliding('prev');
dispatch('prev');
}
}
useEffect(() => {
setSliderOffset(baseoffset);
setSliderOffset(2 * baseoffset);
}, [baseoffset, order, slide]);
const handlers = useSwipeable({
@@ -97,26 +102,33 @@ export function SliderWithScaling<T extends { title: string }>({
style={{
minHeight: minHeightScaled,
transform: `translateX(${sliderOffset}px)`,
transitionDuration: `${sliderOffset !== 0 && sliderOffset !== 2 * baseoffset ? 1 : 0}s`,
transitionDuration: `${sliderOffset !== baseoffset && sliderOffset !== 3 * baseoffset && sliderOffset !== 0 ? 1 : 0}s`,
}}
ref={sliderRef}
>
{order.map((slide, index) => (
{order.map((currentSlide, index) => (
<motion.div
onClick={
width >= 1024
? () => {
if (index === 1) controlsRef.current.left();
if (index === 3) controlsRef.current.right();
if (index === 4) dispatch(2);
}
: undefined
}
key={
slide.title +
(index < 1 ? '123' : index > slides.length ? '456' : '')
currentSlide.title +
(index < 2 ? '123' : index > slides.length ? '456' : '')
}
initial={
currentSliding === 'next' && index === 0
index === 1
? { minWidth: minWidthScaled, minHeight: minHeightScaled }
: index === 3
? { minWidth, minHeight }
: {}
: { minWidth, minHeight }
}
transition={{ duration: 1, type: 'just' }}
animate={
index === 1
index === 2
? {
minWidth: minWidthScaled,
minHeight: minHeightScaled,
@@ -124,12 +136,11 @@ export function SliderWithScaling<T extends { title: string }>({
: {
minWidth,
minHeight,
transition: { duration: index === 3 ? 0.0001 : 1 },
}
}
className={'pointer-events-none ' + childClassName}
className={'cursor-pointer ' + childClassName}
>
<SlideElement {...slide} />
<SlideElement {...currentSlide} />
</motion.div>
))}
</div>