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

products tabs fixed

Browse Source
This commit is contained in:
Lanskikh
2024-09-16 14:07:14 +05:00
parent 9736425309
commit 521ed7a609
4 changed files with 183 additions and 187 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Main/Products/Products.tsx
+7 -5
View File
@@ -13,18 +13,18 @@ export function Products() {
function handleMouseMove(e: WheelEvent) {
setSticked1(
Math.round(ref2.current!.getBoundingClientRect().top) <=
ref2.current!.getBoundingClientRect().top <=
+window.getComputedStyle(ref2.current!).top.slice(0, -2),
);
setSticked2(
Math.round(ref3.current!.getBoundingClientRect().top) <=
ref3.current!.getBoundingClientRect().top <=
+window.getComputedStyle(ref3.current!).top.slice(0, -2),
);
if (e.deltaY > 0) {
if (
ref1.current!.getBoundingClientRect().top ===
+window.getComputedStyle(ref1.current!).top.slice(0, -2) &&
Math.round(ref2.current!.getBoundingClientRect().top) !==
ref2.current!.getBoundingClientRect().top !==
+window.getComputedStyle(ref2.current!).top.slice(0, -2)
) {
window.scrollBy({
@@ -36,8 +36,10 @@ export function Products() {
setSticked1(true);
}
if (
Math.round(ref2.current!.getBoundingClientRect().top) ===
+window.getComputedStyle(ref2.current!).top.slice(0, -2)
Math.round(
ref2.current!.getBoundingClientRect().top -
+window.getComputedStyle(ref2.current!).top.slice(0, -2),
) === 0
) {
window.scrollBy({
top:
src/components/Main/Products/Tabs/ForTeachingTab.tsx
+5 -7
View File
@@ -3,14 +3,13 @@ import { useHover } from 'usehooks-ts';
import { getIcon } from '../../../../utils/getIcon';
import { useInView } from 'framer-motion';
export const ForTeachingTab = forwardRef<HTMLDivElement>((_, ref) => {
return (
export const ForTeachingTab = forwardRef<HTMLDivElement>((_, ref) => (
<div
itemProp="forEducation"
itemScope
itemType="https://schema.org/TrainingsForEducation"
ref={ref}
className="lg:ml-[129px] lg:min-h-[calc(100vh-276px)] lg:min-w-[calc(100vw-129px)] sm:min-h-[calc(100vh-176px)] min-h-[calc(100vh)] min-w-[100vw] sm:sticky -z-10 lg:top-[276px] sm:top-[176px] top-0 lg:px-10 lg:pt-10 sm:px-6 sm:pt-6 px-4 pt-4 lg:border-l bg-[#14161F] border-t border-[#3D425C]"
className="overflow-hidden lg:ml-[129px] lg:h-[70dvh] sm:h-[80dvh] lg:min-w-[calc(100vw-129px)] h-[100dvh] min-w-[100vw] sm:sticky -z-10 lg:top-[30dvh] sm:top-[20dvh] top-0 lg:px-10 lg:pt-10 sm:px-6 sm:pt-6 px-4 pt-4 lg:border-l bg-[#14161F] border-t border-[#3D425C]"
>
<div className="flex justify-between ">
<h2 className="font-medium h2">
@@ -35,7 +34,7 @@ export const ForTeachingTab = forwardRef<HTMLDivElement>((_, ref) => {
поломки оборудования, а также экономить на расходных средствах"
type="labs"
/>
<p className="w-[85%] font-medium lg:text-2xl sm:text-xl">
<p className="font-medium lg:text-2xl sm:text-xl">
Оснащение учебных классов и центров всем необходимым для
современного обучения под «ключ»
</p>
@@ -43,7 +42,7 @@ export const ForTeachingTab = forwardRef<HTMLDivElement>((_, ref) => {
</div>
<img
src="src/assets/products/teaching/teaching.png"
className="max-sm:hidden w-[calc(685/1600*100vw)] sm:self-start self-stretch"
className="max-sm:hidden w-[calc(685/1600*100vw)] sm:self-start"
alt="обучение"
/>
<img
@@ -53,8 +52,7 @@ export const ForTeachingTab = forwardRef<HTMLDivElement>((_, ref) => {
/>
</div>
</div>
);
});
));
function ForTeachingOption({
title,
src/components/Main/Products/Tabs/IndustrialTab.tsx
+3 -5
View File
@@ -37,14 +37,13 @@ function TeachingItem({
}
export const IndustrialTab = forwardRef<HTMLDivElement, { sticked: boolean }>(
({ sticked }, ref) => {
return (
({ sticked }, ref) => (
<div
itemProp="industrial"
itemScope
itemType="https://schema.org/IndustrialTrainings"
ref={ref}
className="sm:sticky top-0 min-h-[100svh] min-w-[100vw] overflow-hiddens lg:px-10 lg:pt-10 sm:px-6 sm:pt-6 px-4 pt-4 border-t border-[#3D425C] bg-[#14161F] -z-30 max-sm:flex flex-col items-center gap-y-4"
className="sm:sticky top-0 min-h-[100dvh] min-w-[100vw] overflow-hiddens lg:px-10 lg:pt-10 sm:px-6 sm:pt-6 px-4 pt-4 border-t border-[#3D425C] bg-[#14161F] -z-30 max-sm:flex flex-col items-center gap-y-4"
>
<div className="space-y-6 lg:space-y-14 sm:space-y-10">
<div
@@ -104,6 +103,5 @@ export const IndustrialTab = forwardRef<HTMLDivElement, { sticked: boolean }>(
alt="тренажеры"
/>
</div>
);
},
),
);
src/components/Main/Products/Tabs/SimulatorsTab.tsx
+6 -8
View File
@@ -2,21 +2,20 @@ import { forwardRef } from 'react';
function SimulatorsItem({ text }: { text: string }) {
return (
<div className="lg:text-2xl sm:text-xl bg-[#3D425C4D] rounded-[44px] w-fit sm:px-5 sm:py-2 px-4 py-[6px]">
<div className="lg:text-2xl sm:text-xl bg-[#3D425C4D] rounded-[44px] w-fit sm:px-5 sm:py-2 px-4 py-1.5">
{text}
</div>
);
}
export const SimulatorsTab = forwardRef<HTMLDivElement, { sticked: boolean }>(
({ sticked }, ref) => {
return (
({ sticked }, ref) => (
<div
itemScope
itemProp="simulators"
itemType="http://schema.org/Simulators"
ref={ref}
className="lg:ml-[65px] lg:min-h-[calc(100svh-138px)] lg:min-w-[calc(100vw-65px)] sm:min-h-[calc(100svh-88px)] min-w-[100vw] min-h-[calc(100svh)] sm:sticky -z-20 lg:top-[138px] sm:top-[88px] top-0 bg-[#14161F] lg:px-10 lg:pt-10 sm:px-6 sm:pt-6 px-4 pt-4 lg:space-y-12 sm:space-y-10 space-y-6 lg:border-l border-t border-[#3D425C]"
className="lg:ml-[65px] lg:h-[85dvh] lg:min-w-[calc(100vw-65px)] sm:h-[90dvh] min-w-[100vw] h-[100dvh] sm:sticky -z-20 lg:top-[15dvh] sm:top-[10dvh] top-0 bg-[#14161F] lg:px-10 lg:pt-10 sm:px-6 sm:pt-6 px-4 pt-4 lg:space-y-12 sm:space-y-10 space-y-6 lg:border-l border-t border-[#3D425C]"
>
<div
className={
@@ -71,12 +70,11 @@ export const SimulatorsTab = forwardRef<HTMLDivElement, { sticked: boolean }>(
/>
<p className="l-text opacity-60">
Модель позволяет производить расчеты характеристик работы,
отслеживать безопасность работы устройств и симулировать
внештатные ситуации.
отслеживать безопасность работы устройств и симулировать внештатные
ситуации.
</p>
</div>
</div>
</div>
);
},
),
);