diff --git a/client/.env b/client/.env index 2d167ff..2f2d504 100644 --- a/client/.env +++ b/client/.env @@ -1,3 +1,3 @@ # VITE_SERVER_API=https://irth.graff.tech/api -# VITE_SERVER_API=http://192.168.1.158:4002 -VITE_SERVER_API=http://194.26.138.94:4002 +VITE_SERVER_API=http://192.168.1.158:4002 +# VITE_SERVER_API=http://194.26.138.94:4002 diff --git a/client/src/components/Button.tsx b/client/src/components/Button.tsx index fd2a1d7..0820abf 100644 --- a/client/src/components/Button.tsx +++ b/client/src/components/Button.tsx @@ -17,6 +17,7 @@ interface ButtonProps { disabled?: boolean; isCircleRounded?: boolean; type?: "button" | "submit" | "reset"; + iconPos?: "right" | "left"; } const Button = ({ @@ -27,7 +28,7 @@ const Button = ({ disabled = false, onClick, type = "button", - + iconPos = "left", isCircleRounded = false, }: ButtonProps) => { const backgroundColor = backgroundColors[buttonType]; @@ -48,8 +49,10 @@ const Button = ({ className ? className : "" }`} > - {icon &&
{icon}
} + {/* {icon &&
{icon}
} */} + {icon && iconPos === "left" &&
{icon}
} {text &&
{text}
} + {icon && iconPos === "right" &&
{icon}
} ); }; diff --git a/client/src/components/complexWingPage/FloorSidebar/FloorSidebar.tsx b/client/src/components/complexWingPage/FloorSidebar/FloorSidebar.tsx index 3340de5..4fcb70e 100644 --- a/client/src/components/complexWingPage/FloorSidebar/FloorSidebar.tsx +++ b/client/src/components/complexWingPage/FloorSidebar/FloorSidebar.tsx @@ -39,7 +39,6 @@ const FloorSidebar = ({ function handleMouseMove(e: MouseEvent) { const y = e.clientY - 175; const x = e.clientX - window.innerWidth / 2 - 50; - setMousePos([x, y]); } diff --git a/client/src/components/complexWingPage/SequenceWing.tsx b/client/src/components/complexWingPage/SequenceWing.tsx deleted file mode 100644 index c681f9a..0000000 --- a/client/src/components/complexWingPage/SequenceWing.tsx +++ /dev/null @@ -1,1019 +0,0 @@ -import { useEffect, useRef, useState } from "react"; -import FloorDescription from "./FloorDescription"; -import { IDesctiptionFloor } from "../../types/descriptionFloor"; -import SkygardenDescription from "./SkygardenDescription"; -import FloorSidebar from "./FloorSidebar/FloorSidebar"; -import SkygardenSidebar from "./SkygardenSidebar/SkygardenSidebar"; -import useWingSidebar from "../../store/useWingSidebar"; -import useModal from "../../store/useModal"; -import WingFloorModal from "../modals/mobile/WingFloorModal"; -import { - laptopWidth, - mobileWidht, - descriptions, -} from "../../consts/masterplan"; -import { updateAccessToken } from "../../api/updateAccessToken"; -import { IAparmentRes } from "../../types/apartmentsRes"; -import useMasterplanFilters from "../../store/useMasterplanFilters"; -import { initialRoveHomeCheckboxes } from "../../consts/initialMasterplanFilters"; -import { pageInitial } from "../../consts/initialMasterplanFilters"; -import { useDebounce } from "@uidotdev/usehooks"; -import { getFilteredApartments } from "../../calc/getFilteredApartments"; -import LoaderModal from "../modals/LoaderModal"; - -const skyGardenFloor = 22; - -const SequenceWing = () => { - const [width, setWidth] = useState(0); - const [top, setTop] = useState(0); - const [left, setLeft] = useState(0); - const leftWingRef = useRef(null); - const { isSidebar, setIsSidebar } = useWingSidebar(); - const [mousePos, setMousePos] = useState<[number, number]>([0, 0]); - const [currentHoveredFloor, setHoverCurrentFloor] = - useState(null); - const [isLoading, setIsLoading] = useState(true); - const [currentFloor, setCurrentFloor] = useState( - null - ); - const [isWrapperHovered, setIsWrapperHovered] = useState(false); - const [isSkygardenSidebar, setIsSkygardenSidebar] = useState(false); - const [isFloorSidebar, setIsFloorSidebar] = useState(false); - const { setModal } = useModal(); - const [apartments, setApartments] = useState([]); - const [currentHoveredApartments, setCurrentHoveredApartments] = useState< - IAparmentRes[] - >([]); - const [selectedApartments, setSelectedApartments] = useState( - [] - ); - const { - apartmentTypeCheckboxes, - switchers, - multirangeSliders, - viewCheckboxes, - sortList, - } = useMasterplanFilters(); - const debouncedSliders = useDebounce(multirangeSliders, 300); - - function handleResize() { - const screenWidth = window.innerWidth; - const screenHeight = window.innerHeight; - if (screenWidth > laptopWidth) { - setWidth(screenWidth); - setTop(screenWidth / 2 - screenHeight / 2); - setLeft(0); - } else { - if (screenWidth > mobileWidht) { - const _top = screenHeight / 4; - setTop(_top); - } else { - const _top = screenHeight / 2.5; - setTop(_top); - } - const _left = laptopWidth - screenWidth; - const _width = screenWidth + _left * 2; - - setWidth(_width); - setLeft(_left); - } - } - const handleOnFloorMouseEnter = ( - e: React.MouseEvent - ) => { - e.stopPropagation(); - const id = e.currentTarget.dataset.id; - if (!id) return; - const _currentFloor = descriptions.find((desc) => desc.id === id); - if (!_currentFloor) return; - setHoverCurrentFloor(_currentFloor); - const _currentHoveredApartments = apartments.filter((apartment) => { - const wing = - apartment.Unit_No.split("-")[0] === "E" ? "East Wing" : "West Wing"; - return ( - apartment.Floor === _currentFloor.floor && wing === _currentFloor.wing - ); - }); - setIsWrapperHovered(true); - setCurrentHoveredApartments(_currentHoveredApartments); - }; - - const handleOnWingWrapperMouseEnter = ( - e: React.MouseEvent - ) => { - (e as unknown as Event).stopPropagation(); - setIsWrapperHovered(true); - }; - const handleOnWingWrapperMouseLeave = () => { - setIsWrapperHovered(false); - }; - - const handleOnFloorClick = () => { - if (!currentHoveredFloor && !currentHoveredApartments) return; - const screenWidth = window.innerWidth; - setSelectedApartments(currentHoveredApartments); - setCurrentFloor(currentHoveredFloor); - if (screenWidth < laptopWidth) { - setModal(); - } else { - setIsFloorSidebar(true); - setIsSkygardenSidebar(false); - setIsSidebar(true); - } - }; - - const handleOnSkygardenClick = () => { - const screenWidth = window.innerWidth; - if (screenWidth < laptopWidth) { - setModal(); - } else { - setIsSkygardenSidebar(true); - setIsFloorSidebar(false); - setIsSidebar(true); - } - }; - - function handleMouseMove(e: MouseEvent) { - const top = window.innerWidth / 2 - window.innerHeight / 2; - setMousePos([e.clientX - 384, e.clientY + Math.abs(top) - 20]); - } - - useEffect(() => { - handleResize(); - window.addEventListener("resize", handleResize); - return () => window.removeEventListener("resize", handleResize); - }, []); - - useEffect(() => { - handleResize(); - window.addEventListener("resize", handleResize); - window.addEventListener("mousemove", handleMouseMove); - return () => { - window.removeEventListener("resize", handleResize); - window.removeEventListener("mousemove", handleMouseMove); - }; - }, []); - - useEffect(() => { - if (!isSidebar) { - setIsFloorSidebar(false); - setIsSkygardenSidebar(false); - } - }, [isSidebar]); - - useEffect(() => { - const localStorageToken = `${localStorage.getItem("ACCESS_TOKEN")}`; - const perPage = 1000; - const getApartments = (token: string) => - getFilteredApartments( - token, - setApartments, - initialRoveHomeCheckboxes, - apartmentTypeCheckboxes, - debouncedSliders, - switchers, - viewCheckboxes, - sortList, - pageInitial, - perPage - ); - - setIsLoading(true); - - getApartments(localStorageToken) - .then(() => { - setIsLoading(false); - }) - .catch((error) => { - const errorStatus = error.response.status; - - if (errorStatus === 401) { - updateAccessToken() - .then((token) => { - if (token) { - getApartments(token).then(() => { - setIsLoading(false); - }); - } - }) - .catch((error) => { - setIsLoading(false); - console.error("error", error); - }); - } else { - setIsLoading(false); - console.error("error", error); - } - }); - }, [ - setApartments, - apartmentTypeCheckboxes, - debouncedSliders, - switchers, - viewCheckboxes, - sortList, - ]); - - useEffect(() => { - if (isLoading) { - setModal(); - } else { - setModal(null); - } - }, [isLoading, setModal]); - - return ( -
-
- -
-
- -
- -
- - - - - - - {/* Подписи Крылья */} - - - - - - - - - - - - - - - {/* Этажи */} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- ); -}; - -export default SequenceWing; diff --git a/client/src/components/complexWingPage/SequenceWing/FloorNumbers.tsx b/client/src/components/complexWingPage/SequenceWing/FloorNumbers.tsx new file mode 100644 index 0000000..ad16a00 --- /dev/null +++ b/client/src/components/complexWingPage/SequenceWing/FloorNumbers.tsx @@ -0,0 +1,399 @@ +const FloorNumbers = () => { + return ( + <> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +export default FloorNumbers; diff --git a/client/src/components/complexWingPage/SequenceWing/FloorsHighlighting.tsx b/client/src/components/complexWingPage/SequenceWing/FloorsHighlighting.tsx new file mode 100644 index 0000000..f96096a --- /dev/null +++ b/client/src/components/complexWingPage/SequenceWing/FloorsHighlighting.tsx @@ -0,0 +1,686 @@ +/* eslint-disable @typescript-eslint/no-explicit-any */ +import { MouseEvent } from "react"; +import { IDesctiptionFloor } from "../../../types/descriptionFloor"; + +interface FloorsHighlightingProps { + handleOnFloorClick: () => void; + handleOnSkygardenClick: () => void; + handleOnWingWrapperMouseEnter: (e: React.MouseEvent) => void; + handleOnFloorMouseEnter: + | (( + e: React.MouseEvent> + ) => void) + | any; + handleOnWingWrapperMouseLeave: () => void; + currentFloor: IDesctiptionFloor | null; + isFloorSidebar: boolean; + isSkygardenSidebar: boolean; +} + +const FloorsHighlighting = ({ + handleOnFloorClick, + handleOnFloorMouseEnter, + handleOnSkygardenClick, + handleOnWingWrapperMouseEnter, + handleOnWingWrapperMouseLeave, + currentFloor, + isFloorSidebar, + isSkygardenSidebar, +}: FloorsHighlightingProps) => { + return ( + <> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +export default FloorsHighlighting; diff --git a/client/src/components/complexWingPage/SequenceWing/MobileFloorDescription.tsx b/client/src/components/complexWingPage/SequenceWing/MobileFloorDescription.tsx new file mode 100644 index 0000000..7d48fb0 --- /dev/null +++ b/client/src/components/complexWingPage/SequenceWing/MobileFloorDescription.tsx @@ -0,0 +1,119 @@ +import { IAparmentRes } from "../../../types/apartmentsRes"; +import { IDesctiptionFloor } from "../../../types/descriptionFloor"; +import Button from "../../Button"; +import CrossIcon from "../../icons/CrossIcon"; +import RightArrowSliderIcon from "../../icons/RightArrowSliderIcon"; + +interface MobileFloorDescriptionProps { + descriptionFloor: IDesctiptionFloor | null; + floorApartments: IAparmentRes[]; +} + +const MobileFloorDescription = ({ + descriptionFloor, + floorApartments, +}: MobileFloorDescriptionProps) => { + return ( + <> +
+
+
+
+

+ {descriptionFloor?.floor} Floor +

+
+

+ {descriptionFloor?.wing} +

+
+

+ {floorApartments.length} units +

+
+
+
+
+
+
+
+

+ { + floorApartments.filter( + (apart) => apart.Unit_Type === "Studio Flex" + ).length + } +

+
+

Studio Flex

+
+

Unvailiable

+
+
+
+
+

+ { + floorApartments.filter( + (apart) => apart.Unit_Type === "Studio Squared" + ).length + } +

+
+

Studio

+
+

Unvailiable

+
+
+
+
+

+ { + floorApartments.filter( + (apart) => apart.Unit_Type === "1 BR Squared" + ).length + } +

+
+

1 Bedroom

+
+

Unvailiable

+
+
+
+
+

+ { + floorApartments.filter( + (apart) => apart.Unit_Type === "2 BR Squared" + ).length + } +

+
+

+ 2 Bedroom, Type A +

+
+

Unvailiable

+
+
+
+
+
+ + ); +}; + +export default MobileFloorDescription; diff --git a/client/src/components/complexWingPage/SequenceWing/SequenceWing.tsx b/client/src/components/complexWingPage/SequenceWing/SequenceWing.tsx new file mode 100644 index 0000000..09e2f74 --- /dev/null +++ b/client/src/components/complexWingPage/SequenceWing/SequenceWing.tsx @@ -0,0 +1,383 @@ +/* eslint-disable @typescript-eslint/no-explicit-any */ +import { MouseEvent, useEffect, useState } from "react"; +import FloorDescription from "../FloorDescription"; +import { IDesctiptionFloor } from "../../../types/descriptionFloor"; +import SkygardenDescription from "../SkygardenDescription"; +import FloorSidebar from "../FloorSidebar/FloorSidebar"; +import SkygardenSidebar from "../SkygardenSidebar/SkygardenSidebar"; +import useWingSidebar from "../../../store/useWingSidebar"; +import useModal from "../../../store/useModal"; +import { + laptopWidth, + mobileWidht, + descriptions, +} from "../../../consts/masterplan"; +import { updateAccessToken } from "../../../api/updateAccessToken"; +import { IAparmentRes } from "../../../types/apartmentsRes"; +import useMasterplanFilters from "../../../store/useMasterplanFilters"; +import { initialRoveHomeCheckboxes } from "../../../consts/initialMasterplanFilters"; +import { pageInitial } from "../../../consts/initialMasterplanFilters"; +import { useDebounce } from "@uidotdev/usehooks"; +import { getFilteredApartments } from "../../../calc/getFilteredApartments"; +import LoaderModal from "../../modals/LoaderModal"; +import FloorNumbers from "./FloorNumbers"; +import WingSignatures from "./WingSignatures"; +import { isMobile } from "react-device-detect"; +import FloorsHighlighting from "./FloorsHighlighting"; +import MobileFloorDescription from "./MobileFloorDescription"; + +const skyGardenFloor = 22; + +const SequenceWing = () => { + const [width, setWidth] = useState(0); + const [top, setTop] = useState(0); + const [left, setLeft] = useState(0); + // const leftWingRef = useRef(null); + const { isSidebar, setIsSidebar } = useWingSidebar(); + const [mousePos, setMousePos] = useState<[number, number]>([0, 0]); + const [currentHoveredFloor, setHoverCurrentFloor] = + useState(null); + const [isLoading, setIsLoading] = useState(true); + const [currentFloor, setCurrentFloor] = useState( + null + ); + const [isWrapperHovered, setIsWrapperHovered] = useState(false); + const [isSkygardenSidebar, setIsSkygardenSidebar] = useState(false); + const [isFloorSidebar, setIsFloorSidebar] = useState(false); + const { setModal } = useModal(); + const [apartments, setApartments] = useState([]); + const [currentHoveredApartments, setCurrentHoveredApartments] = useState< + IAparmentRes[] + >([]); + const [selectedApartments, setSelectedApartments] = useState( + [] + ); + + const [isDescriptionFloorMobile, setIsDescriptionFloorMobile] = + useState(false); + + const { + apartmentTypeCheckboxes, + switchers, + multirangeSliders, + viewCheckboxes, + sortList, + } = useMasterplanFilters(); + const debouncedSliders = useDebounce(multirangeSliders, 300); + + const handleOnFloorMouseEnter = ( + e: React.MouseEvent + ) => { + e.stopPropagation(); + const id = e.currentTarget.dataset.id; + if (!id) return; + const _currentFloor = descriptions.find((desc) => desc.id === id); + if (!_currentFloor) return; + setHoverCurrentFloor(_currentFloor); + const _currentHoveredApartments = apartments.filter((apartment) => { + const wing = + apartment.Unit_No.split("-")[0] === "E" ? "East Wing" : "West Wing"; + return ( + apartment.Floor === _currentFloor.floor && wing === _currentFloor.wing + ); + }); + setIsWrapperHovered(true); + setCurrentHoveredApartments(_currentHoveredApartments); + }; + + const handleOnWingWrapperMouseEnter = ( + e: React.MouseEvent + ) => { + (e as unknown as Event).stopPropagation(); + setIsWrapperHovered(true); + }; + const handleOnWingWrapperMouseLeave = () => { + setIsWrapperHovered(false); + }; + + const handleOnFloorClick = () => { + if (!currentHoveredFloor && !currentHoveredApartments) return; + setSelectedApartments(currentHoveredApartments); + setCurrentFloor(currentHoveredFloor); + if (!isMobile) { + setIsFloorSidebar(true); + setIsSkygardenSidebar(false); + setIsSidebar(true); + } else { + setIsDescriptionFloorMobile(true); + // setModal(); + } + }; + + const handleOnSkygardenClick = () => { + if (!isMobile) { + setIsSkygardenSidebar(true); + setIsFloorSidebar(false); + setIsSidebar(true); + } else { + // setModal(); + } + }; + + function handleMouseMove( + e: MouseEvent> | any + ) { + setMousePos([e.clientX - 384, e.clientY + Math.abs(top) - 20]); + } + + function handleOnMouseDown(e: MouseEvent | any) { + const screenWidth = window.innerWidth; + const screenHeight = window.innerHeight; + // >1072 + if (screenWidth > laptopWidth) { + const _top = screenWidth / 2 - screenHeight / 2; + setMousePos([e.clientX - 384, e.clientY + Math.abs(_top) - 20]); + } else { + // 640-1072 + if (screenWidth > mobileWidht) { + const _top = screenHeight / 4; + const _left = laptopWidth - screenWidth; + setMousePos([e.clientX - 440 + _left, e.clientY + Math.abs(_top) + 20]); + // <640 + } else { + const _top = screenHeight / 2.5; + const _left = laptopWidth - screenWidth; + setMousePos([e.clientX - 440 + _left, e.clientY + Math.abs(_top) + 20]); + } + } + } + + function handleResize() { + const screenWidth = window.innerWidth; + const screenHeight = window.innerHeight; + // >1072 + if (screenWidth > laptopWidth) { + setWidth(screenWidth); + setTop(screenWidth / 2 - screenHeight / 2); + setLeft(0); + } else { + // 640-1072 + if (screenWidth > mobileWidht) { + const _top = screenHeight / 4; + setTop(_top); + // <640 + } else { + const _top = screenHeight / 2.5; + setTop(_top); + } + const _left = laptopWidth - screenWidth; + const _width = screenWidth + _left * 2; + + setWidth(_width); + setLeft(_left); + } + } + + useEffect(() => { + handleResize(); + window.addEventListener("resize", handleResize); + window.addEventListener("mousemove", handleMouseMove); + window.addEventListener("mousedown", handleOnMouseDown); + return () => { + window.removeEventListener("resize", handleResize); + window.removeEventListener("mousemove", handleMouseMove); + window.removeEventListener("mousedown", handleOnMouseDown); + }; + }, []); + + useEffect(() => { + if (!isSidebar) { + setIsFloorSidebar(false); + setIsSkygardenSidebar(false); + } + }, [isSidebar]); + + useEffect(() => { + const localStorageToken = `${localStorage.getItem("ACCESS_TOKEN")}`; + const perPage = 1000; + const getApartments = (token: string) => + getFilteredApartments( + token, + setApartments, + initialRoveHomeCheckboxes, + apartmentTypeCheckboxes, + debouncedSliders, + switchers, + viewCheckboxes, + sortList, + pageInitial, + perPage + ); + + setIsLoading(true); + + getApartments(localStorageToken) + .then(() => { + setIsLoading(false); + }) + .catch((error) => { + const errorStatus = error.response.status; + + if (errorStatus === 401) { + updateAccessToken() + .then((token) => { + if (token) { + getApartments(token).then(() => { + setIsLoading(false); + }); + } + }) + .catch((error) => { + setIsLoading(false); + console.error("error", error); + }); + } else { + setIsLoading(false); + console.error("error", error); + } + }); + }, [ + setApartments, + apartmentTypeCheckboxes, + debouncedSliders, + switchers, + viewCheckboxes, + sortList, + ]); + + // useEffect(() => { + // if (isLoading) { + // setModal(); + // } else { + // setModal(null); + // } + // }, [isLoading, setModal]); + + return ( +
+
+ +
+
+ +
+ +
+ + + + {/* */} +
+ +
+ + + + {/* Подписи Крылья */} + + + {/* Цифры этажи */} + + + {/* Этажи */} + + +
+
+ ); +}; + +export default SequenceWing; diff --git a/client/src/components/complexWingPage/SequenceWing/WingSignatures.tsx b/client/src/components/complexWingPage/SequenceWing/WingSignatures.tsx new file mode 100644 index 0000000..92e0f4e --- /dev/null +++ b/client/src/components/complexWingPage/SequenceWing/WingSignatures.tsx @@ -0,0 +1,39 @@ +const WingSignatures = () => { + return ( + <> + + + + + + + + + + + ); +}; + +export default WingSignatures; diff --git a/client/src/components/masterplanPage/map/Map.tsx b/client/src/components/masterplanPage/map/Map.tsx index 3d39191..60c54fb 100644 --- a/client/src/components/masterplanPage/map/Map.tsx +++ b/client/src/components/masterplanPage/map/Map.tsx @@ -22,17 +22,17 @@ const Map = () => { diff --git a/client/src/index.css b/client/src/index.css index 158fc26..c525aa7 100644 --- a/client/src/index.css +++ b/client/src/index.css @@ -54,67 +54,6 @@ html { box-shadow: 0px 4px 20px 1px #00000026; } - .text-caption-s { - font-family: "Usual", sans-serif; - font-size: clamp(10px, 0.3744rem + 0.313vw, 12px); - line-height: 135%; - } - - .text-caption-m { - font-family: "Usual", sans-serif; - line-height: 135%; - font-size: clamp(12px, 0.4994rem + 0.313vw, 14px); - } - - .text-s { - font-family: "Usual", sans-serif; - line-height: 140%; - font-size: clamp(12px, 0.01rem + 0.93vw, 16px); - } - - .text-m { - font-family: "Usual", sans-serif; - line-height: 125%; - font-size: clamp(13px, 0.01rem + 0.99vw, 19px); - } - - .text-subheadline-s { - font-family: "Usual", sans-serif; - line-height: 140%; - font-size: clamp(16px, -0.0023rem + 1.252vw, 24px); - } - - .text-subheadline-m { - font-family: "Usual", sans-serif; - font-size: clamp(20px, 0.2477rem + 1.252vw, 28px); - line-height: 135%; - } - - .text-subheadline-l { - font-family: "Usual", sans-serif; - font-size: clamp(32px, -0.0047rem + 2.5039vw, 48px); - line-height: 135%; - } - - .text-headline-s { - font-family: "Mixcase", sans-serif; - line-height: 100%; - letter-spacing: -0.03em; - font-size: clamp(44px, -0.257rem + 3.7559vw, 68px); - } - - .text-button-m { - } - - .mobile-text-s { - font-family: "Usual", sans-serif; - line-height: 140%; - font-size: clamp(10px, 0.01rem + 0.93vw, 20px); - } - - .mobile-subheadline-m { - } - .rubber-headline-indent { text-indent: clamp(209px, -0.4197rem + 16.8396vw, 842px); } @@ -225,6 +164,153 @@ html { -webkit-appearance: none; margin: 0; } + /* 1280px - 1600px */ + @media (max-width: 1600px) { + .text-caption-s { + font-family: "Usual", sans-serif; + font-size: clamp(10px, 0.3744rem + 0.313vw, 12px); + line-height: 135%; + } + + .text-caption-m { + font-family: "Usual", sans-serif; + line-height: 135%; + font-size: clamp(12px, 0.4994rem + 0.313vw, 14px); + } + + .text-s { + font-family: "Usual", sans-serif; + line-height: 140%; + font-size: clamp(12px, 0.01rem + 0.93vw, 16px); + } + + .text-m { + font-family: "Usual", sans-serif; + line-height: 125%; + font-size: clamp(13px, 0.01rem + 0.99vw, 19px); + } + + .text-subheadline-s { + font-family: "Usual", sans-serif; + line-height: 140%; + font-size: clamp(16px, -0.0023rem + 1.252vw, 24px); + } + + .text-subheadline-m { + font-family: "Usual", sans-serif; + font-size: clamp(20px, 0.2477rem + 1.252vw, 28px); + line-height: 135%; + } + + .text-subheadline-l { + font-family: "Usual", sans-serif; + font-size: clamp(32px, -0.0047rem + 2.5039vw, 48px); + line-height: 135%; + } + + .text-headline-s { + font-family: "Mixcase", sans-serif; + line-height: 100%; + letter-spacing: -0.03em; + font-size: clamp(44px, -0.257rem + 3.7559vw, 68px); + } + } + /* 640px - 1280px */ + @media (max-width: 1280px) { + .text-caption-s { + font-size: clamp(0.625rem, 0.25rem + 0.9375vw, 1rem); + } + + .text-caption-m { + font-size: clamp(0.625rem, 0.125rem + 1.25vw, 1.125rem); + } + + .text-s { + font-size: clamp(0.75rem, 0.25rem + 1.25vw, 1.25rem); + } + + .text-m { + font-size: clamp(0.8125rem, 0.125rem + 1.7188vw, 1.5rem); + } + + .text-subheadline-s { + font-size: clamp(1rem, 0.25rem + 1.875vw, 1.75rem); + } + + .text-subheadline-m { + font-size: clamp(1.25rem, 0.25rem + 2.5vw, 2.25rem); + } + .text-headline-s, + .text-headline-l { + font-size: clamp(2rem, 0rem + 5vw, 4rem); + } + /* not changed */ + .text-subheadline-l { + font-family: "Usual", sans-serif; + font-size: clamp(32px, -0.0047rem + 2.5039vw, 48px); + line-height: 135%; + } + /* */ + } + + /* < 640px */ + @media (max-width: 640px) { + .text-caption-s { + font-family: "Usual", sans-serif; + font-size: clamp(10px, 0.3744rem + 0.313vw, 12px); + line-height: 135%; + } + + .text-caption-m { + font-family: "Usual", sans-serif; + line-height: 135%; + font-size: clamp(12px, 0.4994rem + 0.313vw, 14px); + } + + .text-s { + font-family: "Usual", sans-serif; + line-height: 140%; + font-size: clamp(12px, 0.01rem + 0.93vw, 16px); + } + + .text-m { + font-family: "Usual", sans-serif; + line-height: 125%; + font-size: clamp(13px, 0.01rem + 0.99vw, 19px); + } + + .text-subheadline-s { + font-family: "Usual", sans-serif; + line-height: 140%; + font-size: clamp(16px, -0.0023rem + 1.252vw, 24px); + } + + .text-subheadline-m { + font-family: "Usual", sans-serif; + font-size: clamp(20px, 0.2477rem + 1.252vw, 28px); + line-height: 135%; + } + + .text-subheadline-l { + font-family: "Usual", sans-serif; + font-size: clamp(32px, -0.0047rem + 2.5039vw, 48px); + line-height: 135%; + } + + .text-headline-s, + .text-headline-l { + font-family: "Mixcase", sans-serif; + line-height: 100%; + letter-spacing: -0.03em; + font-size: clamp(44px, -0.257rem + 3.7559vw, 68px); + } + + .mobile-text-s { + font-family: "Usual", sans-serif; + line-height: 140%; + font-size: clamp(10px, 0.01rem + 0.93vw, 20px); + } + } } /* scrollbar */ diff --git a/client/src/pages/ComplexWing.tsx b/client/src/pages/ComplexWing.tsx index 1ca4a9b..d5ae6c2 100644 --- a/client/src/pages/ComplexWing.tsx +++ b/client/src/pages/ComplexWing.tsx @@ -1,6 +1,6 @@ import ComplexTopPanel from "../components/complexPage/ComplexTopPanel"; import ButtomPanelCompass from "../components/ButtomPanelCompass"; -import SequenceWing from "../components/complexWingPage/SequenceWing"; +import SequenceWing from "../components/complexWingPage/SequenceWing/SequenceWing"; const ComplexWing = () => { return (