From 02505df229319b0399407149b81f107ce9692e7b Mon Sep 17 00:00:00 2001 From: zojgame Date: Tue, 2 Jul 2024 18:04:49 +0500 Subject: [PATCH] aprt and skygarden desc --- client/src/components/ButtomPanel.tsx | 22 +++--- client/src/components/ButtomPanelCompass.tsx | 7 +- client/src/components/Button.tsx | 6 +- client/src/components/Checkbox.tsx | 2 +- client/src/components/MultiRangeSlider.tsx | 2 +- client/src/components/Switch.tsx | 2 +- .../complexPage/ComplexTopPanel.tsx | 29 +++---- .../SequenceWing/MobileFloorDescription.tsx | 48 +++++++----- .../MobileSkygardenDescription.tsx | 30 +++++--- .../SequenceWing/SequenceWing.tsx | 76 ++----------------- .../header/Header/DesktopHeader.tsx | 3 +- .../header/Navbar/NavbarDesktop.tsx | 2 +- .../header/Navbar/NavbarTabDesktop.tsx | 4 +- .../components/masterplanPage/TopPanel.tsx | 2 +- .../components/masterplanPage/map/Marker.tsx | 2 +- .../masterplanPage/map/ZoomControlls.tsx | 2 +- .../src/components/modals/DisclaimerModal.tsx | 18 ++--- .../src/components/modals/ZoomHintModal.tsx | 6 +- .../modals/mobile/MasterplanFiltersModal.tsx | 33 ++++---- .../modals/mobile/MobileModalWrapper.tsx | 6 +- client/src/consts/buttonStyles.ts | 18 ++--- client/src/index.css | 6 +- client/tailwind.config.js | 27 ++++++- 23 files changed, 162 insertions(+), 191 deletions(-) diff --git a/client/src/components/ButtomPanel.tsx b/client/src/components/ButtomPanel.tsx index e42d2a3..07641cf 100644 --- a/client/src/components/ButtomPanel.tsx +++ b/client/src/components/ButtomPanel.tsx @@ -10,18 +10,16 @@ const ButtomPanel = () => { }; return (
-
-
-
+
+
diff --git a/client/src/components/ButtomPanelCompass.tsx b/client/src/components/ButtomPanelCompass.tsx index 765bef9..23bdab4 100644 --- a/client/src/components/ButtomPanelCompass.tsx +++ b/client/src/components/ButtomPanelCompass.tsx @@ -15,15 +15,16 @@ const ButtomPanelCompass = () => { return (
-
+
@@ -32,7 +33,7 @@ const ButtomPanelCompass = () => { style={{ transform: `rotate(${currentCompassRotate - 180}deg)` }} src="/images/masterplan/compass.png" alt="compass" - className="transition-transform duration-[750ms] ease-in-out" + className="transition-transform duration-[750ms] ease-in-out w-[292.5px] h-[292.5px]" />
diff --git a/client/src/components/Button.tsx b/client/src/components/Button.tsx index 916f2b6..d1e27ea 100644 --- a/client/src/components/Button.tsx +++ b/client/src/components/Button.tsx @@ -35,7 +35,7 @@ const Button = ({ const textColor = textColors[buttonType]; const border = borders[buttonType]; const padding = paddings[buttonType]; - const rounded = isCircleRounded ? "rounded-full" : "rounded-lg"; + const rounded = isCircleRounded ? "rounded-full" : "rounded-[8px]"; const disabledStyle = disabled ? "bg-[#0D192214] text-gray-400" : ""; return ( @@ -44,8 +44,8 @@ const Button = ({ disabled={disabled} onClick={onClick} className={`zoom-280 min-w-10 max-h-10 ${rounded} ${ - icon && !text ? "p-[10px]" : padding - } transition-all duration-300 ease-in-out text-s pointer-events-auto flex gap-1 items-center align-middle h-fit ${backgroundColor} ${textColor} ${border} ${disabledStyle} ${ + icon && !text ? "p-[10px] " : padding + } transition-all duration-300 ease-in-out text-s pointer-events-auto flex gap-1 items-center align-middle h-fit ${backgroundColor} ${textColor} ${border} ${disabledStyle} ${ className ? className : "" }`} > diff --git a/client/src/components/Checkbox.tsx b/client/src/components/Checkbox.tsx index 8d42bb9..4873ed3 100644 --- a/client/src/components/Checkbox.tsx +++ b/client/src/components/Checkbox.tsx @@ -11,7 +11,7 @@ const Checkbox = ({ onClick, checkbox }: CheckboxProps) => { return (
onClick(checkbox.id)} - className={`flex justify-between bg-white p-3 rounded-lg transition-[background] duration-300 ease-in-out select-none ${ + className={` zoom-280 flex justify-between bg-white p-3 rounded-lg transition-[background] duration-300 ease-in-out select-none ${ checkbox.disabled ? "pointer-events-none touch-none" : "hover:bg-[#F3F3F2] cursor-pointer" diff --git a/client/src/components/MultiRangeSlider.tsx b/client/src/components/MultiRangeSlider.tsx index d1db0d4..e02f6e1 100644 --- a/client/src/components/MultiRangeSlider.tsx +++ b/client/src/components/MultiRangeSlider.tsx @@ -70,7 +70,7 @@ const MultiRangeSlider = ({ }, [multirangeSlider.endValue]); return ( -
+
{ return (
{
-
+
-
- -
-
+
{isFullscreen ? (
+
+
+

+ ROVE Home Marasi Drive +

+
+
); diff --git a/client/src/components/complexWingPage/SequenceWing/MobileFloorDescription.tsx b/client/src/components/complexWingPage/SequenceWing/MobileFloorDescription.tsx index 7274675..785f190 100644 --- a/client/src/components/complexWingPage/SequenceWing/MobileFloorDescription.tsx +++ b/client/src/components/complexWingPage/SequenceWing/MobileFloorDescription.tsx @@ -18,22 +18,22 @@ const MobileFloorDescription = ({ return ( <>

{descriptionFloor?.floor} Floor

-

+

{descriptionFloor?.wing}

-

+

{floorApartments.length} units

@@ -43,8 +43,8 @@ const MobileFloorDescription = ({
-
-

+

+

{ floorApartments.filter( (apart) => apart.Unit_Type === "Studio Flex" @@ -52,13 +52,17 @@ const MobileFloorDescription = ({ }

-

Studio Flex

+

+ Studio Flex +

-

Unvailiable

+

+ Unvailiable +

-
+

{ floorApartments.filter( @@ -67,13 +71,15 @@ const MobileFloorDescription = ({ }

-

Studio

+

Studio

-

Unvailiable

+

+ Unvailiable +

-
+

{ floorApartments.filter( @@ -82,13 +88,15 @@ const MobileFloorDescription = ({ }

-

1 Bedroom

+

1 Bedroom

-

Unvailiable

+

+ Unvailiable +

-
+

{ floorApartments.filter( @@ -97,22 +105,24 @@ const MobileFloorDescription = ({ }

-

+

2 Bedroom, Type A

-

Unvailiable

+

+ Unvailiable +

-
+
diff --git a/client/src/components/complexWingPage/SequenceWing/MobileSkygardenDescription.tsx b/client/src/components/complexWingPage/SequenceWing/MobileSkygardenDescription.tsx index 7fbd3dc..50779a2 100644 --- a/client/src/components/complexWingPage/SequenceWing/MobileSkygardenDescription.tsx +++ b/client/src/components/complexWingPage/SequenceWing/MobileSkygardenDescription.tsx @@ -12,13 +12,13 @@ const MobileSkygardenDescription = ({ return ( <>

Sky Garden

@@ -28,21 +28,29 @@ const MobileSkygardenDescription = ({
-
-

8

+
+

+ 8 +

-

Indoor

+

Indoor

-

3 amenties

+

+ 3 amenties +

-
-

8

+
+

+ 8 +

-

Studio

+

Studio

-

14 amenties

+

+ 14 amenties +

-
+
diff --git a/client/src/components/complexWingPage/SequenceWing/SequenceWing.tsx b/client/src/components/complexWingPage/SequenceWing/SequenceWing.tsx index c6f2e82..80f7fbb 100644 --- a/client/src/components/complexWingPage/SequenceWing/SequenceWing.tsx +++ b/client/src/components/complexWingPage/SequenceWing/SequenceWing.tsx @@ -2,13 +2,8 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ import { MouseEvent, useEffect, useState } from "react"; import { IDesctiptionFloor } from "../../../types/descriptionFloor"; -import useWingSidebar from "../../../store/useWingSidebar"; import useModal from "../../../store/useModal"; -import { - laptopWidth, - mobileWidht, - descriptions, -} from "../../../consts/masterplan"; +import { descriptions } from "../../../consts/masterplan"; import { updateAccessToken } from "../../../api/updateAccessToken"; import { IAparmentRes } from "../../../types/apartmentsRes"; import useMasterplanFilters from "../../../store/useMasterplanFilters"; @@ -16,7 +11,6 @@ import { initialRoveHomeCheckboxes } from "../../../consts/initialMasterplanFilt 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 FloorsHighlighting from "./FloorsHighlighting"; @@ -31,7 +25,7 @@ const SequenceWing = () => { const [width, setWidth] = useState(0); const [top, setTop] = useState(0); const [left, setLeft] = useState(0); - const { isSidebar, setIsSidebar } = useWingSidebar(); + // const { isSidebar, setIsSidebar } = useWingSidebar(); const [mousePos, setMousePos] = useState<[number, number]>([0, 0]); const [currentHoveredFloor, setHoverCurrentFloor] = useState(null); @@ -109,7 +103,7 @@ const SequenceWing = () => { ) { const isFloorClicked = Boolean(e.target.dataset.id); if (isFloorClicked) { - setMousePos([e.clientX - 384, e.clientY + Math.abs(top) - 20]); + setMousePos([e.clientX - 364, e.clientY + Math.abs(top) - 20]); } else { setIsDescriptionFloorMobile(false); } @@ -121,41 +115,14 @@ const SequenceWing = () => { // detect mouse pos const screenWidth = window.innerWidth; const screenHeight = window.innerHeight; - // >1072 - if (screenWidth > laptopWidth) { - const _top = screenWidth / 2 - screenHeight / 2; - setMousePos([e.clientX + 1284, e.clientY + Math.abs(_top) + 40]); - } else { - // 640-1072 - if (screenWidth > mobileWidht) { - const _top = screenHeight / 4; - const _left = laptopWidth - screenWidth; - setMousePos([ - e.clientX - 640 + _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, - ]); - } - } + const _top = screenWidth / 2 - screenHeight / 2; + setMousePos([e.clientX + 1184, e.clientY + Math.abs(_top) + 50]); //detect currentFloor, current sidebar and apartment on floor if (!currentHoveredFloor && !currentHoveredApartments) return; setCurrentFloor(currentHoveredFloor); - // if (!isMobile) { - // setIsFloorSidebar(true); - // setIsSkygardenSidebar(false); - // setIsSidebar(true); - // } else { setIsDescriptionFloorMobile(true); setCurrentFloor(null); - // } } } // function handleOnMouseDown(e: MouseEvent | any) { @@ -214,32 +181,6 @@ const SequenceWing = () => { setLeft(_left); } - // 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); - // } - // } - const handleOnExploreFloorClick = ( e: MouseEvent> | any ) => { @@ -274,13 +215,6 @@ const SequenceWing = () => { }; }, []); - useEffect(() => { - if (!isSidebar) { - setIsFloorSidebar(false); - setIsSkygardenSidebar(false); - } - }, [isSidebar]); - useEffect(() => { const localStorageToken = `${localStorage.getItem("ACCESS_TOKEN")}`; const perPage = 1000; diff --git a/client/src/components/header/Header/DesktopHeader.tsx b/client/src/components/header/Header/DesktopHeader.tsx index 7287779..d280420 100644 --- a/client/src/components/header/Header/DesktopHeader.tsx +++ b/client/src/components/header/Header/DesktopHeader.tsx @@ -1,13 +1,12 @@ import Auth from "../Auth/Auth"; import Logo from "../../Logo"; import Navbar from "../Navbar/Navbar"; -import Location from "../Location"; const DesktopHeader = () => (
- + {/* */}
diff --git a/client/src/components/header/Navbar/NavbarDesktop.tsx b/client/src/components/header/Navbar/NavbarDesktop.tsx index 60b1bef..7095ea1 100644 --- a/client/src/components/header/Navbar/NavbarDesktop.tsx +++ b/client/src/components/header/Navbar/NavbarDesktop.tsx @@ -9,7 +9,7 @@ interface NavbarProps { const NavbarDesktop = ({ selectedTab, onTabClick, tabs }: NavbarProps) => (
-

Disclaimer

+

Disclaimer

-

+

This masterplan has been designed solely to provide an impression of the Rove Home projects as well as the approximate location of existing and proposed facilities, services, and destinations and is not intended for any other purpose.

-

+

All elements including the interior design used in the units and images shown in the virtual tour are only for illustration. The pictures of the proposed residential units, furniture, landscaping, amenities, color schemes, fixtures, and accessories among all other items are illustrative to showcase the units.

-

+

IRTH does not make any representation or give any warranty concerning the future developments shown, or the current or future amenities, location, or existence of any facilities, services, and @@ -39,7 +39,7 @@ const DisclaimerModal = () => { any other information are approximate and for indicative purposes only and are not to scale.

-

+

IRTH gives notice that this virtual tour (including units, amenities, plans of the property) does not constitute any part of a sale offer or sale and purchase contract. diff --git a/client/src/components/modals/ZoomHintModal.tsx b/client/src/components/modals/ZoomHintModal.tsx index 4a36200..25a6979 100644 --- a/client/src/components/modals/ZoomHintModal.tsx +++ b/client/src/components/modals/ZoomHintModal.tsx @@ -43,17 +43,17 @@ const ZoomHint = () => { return (

-
+
-

Zoom and Move to select a location

+

Zoom and Move to select a location

); }; diff --git a/client/src/components/modals/mobile/MasterplanFiltersModal.tsx b/client/src/components/modals/mobile/MasterplanFiltersModal.tsx index b7293d5..a545eb8 100644 --- a/client/src/components/modals/mobile/MasterplanFiltersModal.tsx +++ b/client/src/components/modals/mobile/MasterplanFiltersModal.tsx @@ -120,13 +120,11 @@ const MasterplanFiltersModal = () => { return (
-
-

- Filters -

+
+

Filters

-

Apartment type

-
+

Apartment type

+
{localApartmentTypeCheckboxes.map((checkbox) => ( { ))}
-
+
{localMultirangeSliders.map((slider) => ( -
+
-

{slider.title}

-

{slider.unit}

+

{slider.title}

+

{slider.unit}

{ />
))} -
+
{localSwitchers.map((switcher) => (
-

{switcher.title}

+

{switcher.title}

))}
-
-

Views

-
+
+

Views

+
{localViewCheckboxes.map((checkbox) => ( {
-

195 apartments found

+ {/*

195 apartments found

*/} +