zojgame/IRTH-Touch
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

map page scaling

Browse Source
This commit is contained in:
zojgame
2024-07-02 14:41:15 +05:00
parent 497cb6aa44
commit 5bad67dbb6
27 changed files with 191 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/ApartmentSidebar.tsx
+4 -4
View File
@@ -18,8 +18,8 @@ const ApartmentSidebar = ({ currentApartment }: ApartmentSidebarProps) => {
}; };
return ( return (
<div className="flex lg:flex-col gap-2 h-full"> <div className="flex gap-2 w-full">
<div className="rounded-2xl overflow-clip lg:flex-1 flex-none relative"> <div className="rounded-2xl overflow-clip flex-none relative w-1/2">
<p className="absolute top-[30px] left-6 font-semibold text-m text-white"> <p className="absolute top-[30px] left-6 font-semibold text-m text-white">
View from window View from window
</p> </p>
@@ -29,8 +29,8 @@ const ApartmentSidebar = ({ currentApartment }: ApartmentSidebarProps) => {
className="w-full h-full object-cover" className="w-full h-full object-cover"
/> />
</div> </div>
<div className="flex gap-2 flex-col flex-1 lg:flex-none"> <div className="flex gap-2 flex-col flex-1 w-1/2 aspect-square">
<div className="flex flex-col rounded-2xl bg-white p-6 gap-6 "> <div className="flex flex-col rounded-2xl bg-white p-6 gap-6 h-full">
<h2 className="font-semibold text-[#0D1922] text-subheadline-s"> <h2 className="font-semibold text-[#0D1922] text-subheadline-s">
Parameters Parameters
</h2> </h2>
client/src/components/ButtomPanel.tsx
+5 -1
View File
@@ -25,7 +25,11 @@ const ButtomPanel = () => {
</div> </div>
<div className="p-6"> <div className="p-6">
<div className="bg-[#0D192266] rounded-full backdrop-blur-sm"> <div className="bg-[#0D192266] rounded-full backdrop-blur-sm">
<img src="../images/masterplan/compass.png" alt="compass" /> <img
src="../images/masterplan/compass.png"
className="w-[250px] h-[250px]"
alt="compass"
/>
</div> </div>
</div> </div>
</div> </div>
client/src/components/Button.tsx
+1 -1
View File
@@ -43,7 +43,7 @@ const Button = ({
type={type} type={type}
disabled={disabled} disabled={disabled}
onClick={onClick} onClick={onClick}
className={`min-w-10 max-h-10 ${rounded} ${ className={`zoom-280 min-w-10 max-h-10 ${rounded} ${
icon && !text ? "p-[10px]" : padding 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} ${ } 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 : "" className ? className : ""
client/src/components/Logo.tsx
+1 -1
View File
@@ -14,7 +14,7 @@ const Logo = ({ className = "" }: LogoProps) => {
return ( return (
<div <div
className={`text-[#0D1922] py-4 px-6 border-r border-r-[#F3F3F2] cursor-pointer select-none ${className}`} className={`zoom-280 text-[#0D1922] py-4 px-6 border-r border-r-[#F3F3F2] cursor-pointer select-none ${className}`}
onClick={handleOnLogoClick} onClick={handleOnLogoClick}
> >
<LogoIcon /> <LogoIcon />
client/src/components/aboutComplex/LivingSolutionSlider.tsx
+2 -1
View File
@@ -2,11 +2,12 @@
import { useSwipeable } from "react-swipeable"; import { useSwipeable } from "react-swipeable";
import { useEffect, useLayoutEffect, useRef, useState } from "react"; import { useEffect, useLayoutEffect, useRef, useState } from "react";
import { Image } from "../../types/image"; import { Image } from "../../types/image";
import { isMobile } from "react-device-detect";
import Button from "../Button"; import Button from "../Button";
import LeftArrowSliderIcon from "../icons/LeftArrowSliderIcon"; import LeftArrowSliderIcon from "../icons/LeftArrowSliderIcon";
import RightArrowSliderIcon from "../icons/RightArrowSliderIcon"; import RightArrowSliderIcon from "../icons/RightArrowSliderIcon";
const isMobile = true;
const images: Image[] = [ const images: Image[] = [
{ id: "1", src: "/images/aboutCompany/livingSolutionsSlider/1.png" }, { id: "1", src: "/images/aboutCompany/livingSolutionsSlider/1.png" },
{ id: "2", src: "/images/aboutCompany/livingSolutionsSlider/2.png" }, { id: "2", src: "/images/aboutCompany/livingSolutionsSlider/2.png" },
client/src/components/apartmentPage/ApartmentLayout.tsx
+1 -1
View File
@@ -26,7 +26,7 @@ const ApartmentLayout = ({ currentApartment }: ApartmentLayoutProps) => {
)?.layout; )?.layout;
return ( return (
<div className="p-10 pt-6 rounded-2xl bg-white flex flex-col items-center gap-8 relative h-full"> <div className="p-10 pt-6 rounded-2xl bg-white flex flex-col items-center gap-8 relative h-full flex-1">
<div className="w-full xl:px-[304px] sm:px-24 h-full flex justify-center items-center"> <div className="w-full xl:px-[304px] sm:px-24 h-full flex justify-center items-center">
<img <img
className="w-full h-full object-contain max-h-[628px]" className="w-full h-full object-contain max-h-[628px]"
client/src/components/companyPage/OurValues/Slider.tsx
+2 -1
View File
@@ -5,8 +5,9 @@ import { useLayoutEffect, useRef, useState } from "react";
import Button from "../../Button"; import Button from "../../Button";
import LeftArrowSliderIcon from "../../icons/LeftArrowSliderIcon"; import LeftArrowSliderIcon from "../../icons/LeftArrowSliderIcon";
import RightArrowSliderIcon from "../../icons/RightArrowSliderIcon"; import RightArrowSliderIcon from "../../icons/RightArrowSliderIcon";
import { isMobile } from "react-device-detect"; // import { isMobile } from "react-device-detect";
const isMobile = true;
const images: Image[] = [ const images: Image[] = [
{ id: "1", src: "./images/company/slider/1.png" }, { id: "1", src: "./images/company/slider/1.png" },
{ id: "2", src: "./images/company/slider/2.png" }, { id: "2", src: "./images/company/slider/2.png" },
client/src/components/complexPage/ComplexTopPanel.tsx
+6 -6
View File
@@ -6,7 +6,7 @@ import HintIcon from "../icons/HintIcon";
import LeftArrowSliderIcon from "../icons/LeftArrowSliderIcon"; import LeftArrowSliderIcon from "../icons/LeftArrowSliderIcon";
import ResizeIcon from "../icons/ResizeIcon"; import ResizeIcon from "../icons/ResizeIcon";
import HelpModal from "../modals/HelpModal"; import HelpModal from "../modals/HelpModal";
import MasterplanFilters from "../modals/MasterplanFilters"; // import MasterplanFilters from "../modals/MasterplanFilters";
import InfoIcon from "../icons/InfoIcon"; import InfoIcon from "../icons/InfoIcon";
import useFullScreen from "../../store/useFullScreen"; import useFullScreen from "../../store/useFullScreen";
import ActiveResizeIcon from "../icons/ActiveResizeIcon"; import ActiveResizeIcon from "../icons/ActiveResizeIcon";
@@ -24,9 +24,9 @@ const ComplexTopPanel = () => {
setModal(<HelpModal />); setModal(<HelpModal />);
}; };
const handleOnFiltersClick = () => { // const handleOnFiltersClick = () => {
setModal(<MasterplanFilters />); // setModal(<MasterplanFilters />);
}; // };
const handleOnMobileFiltersClick = () => { const handleOnMobileFiltersClick = () => {
setModal( setModal(
@@ -61,7 +61,7 @@ const ComplexTopPanel = () => {
return ( return (
<> <>
<div className="absolute top-0 w-screen z-20 select-none pointer-events-none"> <div className=" absolute top-0 w-screen z-20 select-none pointer-events-none">
<img src="../images/top_shadow.png" className="w-screen" alt="" /> <img src="../images/top_shadow.png" className="w-screen" alt="" />
</div> </div>
<div <div
@@ -78,7 +78,7 @@ const ComplexTopPanel = () => {
icon={<FilterIcon />} icon={<FilterIcon />}
buttonType="primary" buttonType="primary"
text="Filters" text="Filters"
onClick={handleOnFiltersClick} onClick={handleOnMobileFiltersClick}
/> />
<Button <Button
className="lg:hidden flex" className="lg:hidden flex"
client/src/components/complexPage/SequenceSlider.tsx
+38 -18
View File
@@ -10,7 +10,7 @@ import LeftArrowSliderIcon from "../icons/LeftArrowSliderIcon";
import RightArrowSliderIcon from "../icons/RightArrowSliderIcon"; import RightArrowSliderIcon from "../icons/RightArrowSliderIcon";
import useCompass from "../../store/useCompass"; import useCompass from "../../store/useCompass";
import SequenceHighlighting from "./SequenceHighlighting"; import SequenceHighlighting from "./SequenceHighlighting";
import { laptopWidth, mobileWidht } from "../../consts/masterplan"; // import { laptopWidth, mobileWidht } from "../../consts/masterplan";
const arrayLength = 360; const arrayLength = 360;
const keyframes: number[] = [51, 178, 249, 339]; const keyframes: number[] = [51, 178, 249, 339];
@@ -129,27 +129,47 @@ function SequenceSlider({ path }: SequenceSliderProps) {
animateToLeft(currentOffset); animateToLeft(currentOffset);
} }
// function handleResize() {
// const screenWidth = window.innerWidth;
// const screenHeight = window.innerHeight;
// // if (screenWidth > laptopWidth) {
// const _top = screenHeight / 7;
// setTop(_top);
// const _left = 2500 - screenWidth;
// // const _left = laptopWidth - screenWidth;
// const _width = screenWidth + _left * 2;
// setWidth(_width);
// setLeft(_left);
// // 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);
// // }
// }
function handleResize() { function handleResize() {
const screenWidth = window.innerWidth; const screenWidth = window.innerWidth;
const screenHeight = window.innerHeight; const screenHeight = window.innerHeight;
if (screenWidth > laptopWidth) { const _top = screenHeight / 4.5;
setWidth(screenWidth); setTop(_top);
setTop(screenWidth / 2 - screenHeight / 2); const _left = screenHeight - screenWidth;
setLeft(0); const _width = screenHeight + _left;
} 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); setWidth(_width);
setLeft(_left); setLeft(_left);
}
} }
function handleOnSequenceClick(): void { function handleOnSequenceClick(): void {
navigate("./wing"); navigate("./wing");
client/src/components/complexWingPage/SequenceWing/SequenceWing.tsx
+93 -41
View File
@@ -19,7 +19,6 @@ import { getFilteredApartments } from "../../../calc/getFilteredApartments";
import LoaderModal from "../../modals/LoaderModal"; import LoaderModal from "../../modals/LoaderModal";
import FloorNumbers from "./FloorNumbers"; import FloorNumbers from "./FloorNumbers";
import WingSignatures from "./WingSignatures"; import WingSignatures from "./WingSignatures";
import { isMobile } from "react-device-detect";
import FloorsHighlighting from "./FloorsHighlighting"; import FloorsHighlighting from "./FloorsHighlighting";
import MobileFloorDescription from "./MobileFloorDescription"; import MobileFloorDescription from "./MobileFloorDescription";
import WingFloorModal from "../../modals/mobile/WingFloorModal"; import WingFloorModal from "../../modals/mobile/WingFloorModal";
@@ -125,14 +124,14 @@ const SequenceWing = () => {
// >1072 // >1072
if (screenWidth > laptopWidth) { if (screenWidth > laptopWidth) {
const _top = screenWidth / 2 - screenHeight / 2; const _top = screenWidth / 2 - screenHeight / 2;
setMousePos([e.clientX - 384, e.clientY + Math.abs(_top) - 20]); setMousePos([e.clientX + 1284, e.clientY + Math.abs(_top) + 40]);
} else { } else {
// 640-1072 // 640-1072
if (screenWidth > mobileWidht) { if (screenWidth > mobileWidht) {
const _top = screenHeight / 4; const _top = screenHeight / 4;
const _left = laptopWidth - screenWidth; const _left = laptopWidth - screenWidth;
setMousePos([ setMousePos([
e.clientX - 440 + _left, e.clientX - 640 + _left,
e.clientY + Math.abs(_top) + 20, e.clientY + Math.abs(_top) + 20,
]); ]);
// <640 // <640
@@ -149,43 +148,98 @@ const SequenceWing = () => {
//detect currentFloor, current sidebar and apartment on floor //detect currentFloor, current sidebar and apartment on floor
if (!currentHoveredFloor && !currentHoveredApartments) return; if (!currentHoveredFloor && !currentHoveredApartments) return;
setCurrentFloor(currentHoveredFloor); setCurrentFloor(currentHoveredFloor);
if (!isMobile) { // if (!isMobile) {
setIsFloorSidebar(true); // setIsFloorSidebar(true);
setIsSkygardenSidebar(false); // setIsSkygardenSidebar(false);
setIsSidebar(true); // setIsSidebar(true);
} else { // } else {
setIsDescriptionFloorMobile(true); setIsDescriptionFloorMobile(true);
setCurrentFloor(null); setCurrentFloor(null);
} // }
} }
} }
// function handleOnMouseDown(e: MouseEvent | any) {
// const isFloorClicked = Boolean(e.target.dataset.id);
// if (isFloorClicked) {
// // detect mouse pos
// 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,
// ]);
// }
// }
// //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 handleResize() { function handleResize() {
const screenWidth = window.innerWidth; const screenWidth = window.innerWidth;
const screenHeight = window.innerHeight; const screenHeight = window.innerHeight;
// >1072 const _top = screenHeight / 4.5;
if (screenWidth > laptopWidth) { setTop(_top);
setWidth(screenWidth); const _left = screenHeight - screenWidth;
setTop(screenWidth / 2 - screenHeight / 2); const _width = screenHeight + _left;
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); setWidth(_width);
setLeft(_left); 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 = ( const handleOnExploreFloorClick = (
e: MouseEvent<Element, MouseEvent<Element, MouseEvent>> | any e: MouseEvent<Element, MouseEvent<Element, MouseEvent>> | any
) => { ) => {
@@ -280,13 +334,13 @@ const SequenceWing = () => {
sortList, sortList,
]); ]);
useEffect(() => { // useEffect(() => {
if (isLoading) { // if (isLoading) {
setModal(<LoaderModal />); // setModal(<LoaderModal />);
} else { // } else {
setModal(null); // setModal(null);
} // }
}, [isLoading, setModal]); // }, [isLoading, setModal]);
return ( return (
<div className="absolute left-0 overflow-hidden h-screen w-screen select-none "> <div className="absolute left-0 overflow-hidden h-screen w-screen select-none ">
@@ -296,9 +350,7 @@ const SequenceWing = () => {
width: `${width}px`, width: `${width}px`,
height: `${width}px`, height: `${width}px`,
top: `-${top}px`, top: `-${top}px`,
left: `${ left: `-${left}px`,
isSkygardenSidebar || isFloorSidebar ? "-25%" : `-${left}px`
}`,
}} }}
> >
{/* */} {/* */}
client/src/components/header/Auth/Auth.tsx
+1 -7
View File
@@ -1,6 +1,4 @@
import { isMobile } from "react-device-detect";
import AuthDesktop from "./AuthDesktop"; import AuthDesktop from "./AuthDesktop";
import AuthMobile from "./AuthMobile";
interface AuthProps { interface AuthProps {
isAuth?: boolean; isAuth?: boolean;
@@ -11,11 +9,7 @@ const Auth = ({ isAuth = false }: AuthProps) => {
return ( return (
<> <>
{isMobile ? ( <AuthDesktop isAuth={isAuth} userName={userName} />
<AuthMobile isAuth={isAuth} userName={userName} />
) : (
<AuthDesktop isAuth={isAuth} userName={userName} />
)}
</> </>
); );
}; };
client/src/components/header/Header/DesktopHeader.tsx
+1 -1
View File
@@ -4,7 +4,7 @@ import Navbar from "../Navbar/Navbar";
import Location from "../Location"; import Location from "../Location";
const DesktopHeader = () => ( const DesktopHeader = () => (
<header className="bg-white w-full text-white sm:grid grid-cols-6 fixed left-0 top-0 z-[99999900] font-usual text-m select-none"> <header className="bg-white w-full text-white sm:grid grid-cols-6 fixed left-0 top-0 z-[99999900] font-usual text-m select-none items-center">
<div className="flex gap-4 col-span-2"> <div className="flex gap-4 col-span-2">
<Logo /> <Logo />
<Location /> <Location />
client/src/components/header/Header/Layout.tsx
+2 -2
View File
@@ -2,8 +2,8 @@ import { Outlet } from "react-router-dom";
import { FullScreen, useFullScreenHandle } from "react-full-screen"; import { FullScreen, useFullScreenHandle } from "react-full-screen";
import { useEffect } from "react"; import { useEffect } from "react";
import useModal from "../../../store/useModal"; import useModal from "../../../store/useModal";
import MobileHeader from "./MobileHeader";
import useFullScreen from "../../../store/useFullScreen"; import useFullScreen from "../../../store/useFullScreen";
import DesktopHeader from "./DesktopHeader";
const Layout = () => { const Layout = () => {
const { modal } = useModal(); const { modal } = useModal();
@@ -17,7 +17,7 @@ const Layout = () => {
return ( return (
<> <>
<FullScreen handle={onFullscreenHandle}> <FullScreen handle={onFullscreenHandle}>
<MobileHeader /> <DesktopHeader />
{modal} {modal}
<Outlet /> <Outlet />
</FullScreen> </FullScreen>
client/src/components/header/Header/MobileHeader.tsx
+1 -1
View File
@@ -14,7 +14,7 @@ const MobileHeader = () => {
}; };
return ( return (
<header <header
className={`bg-white w-full ${ className={` bg-white w-full ${
isToggled isToggled
? "rounded-ee-lg rounded-es-lg shadow-[#00000026] shadow-md" ? "rounded-ee-lg rounded-es-lg shadow-[#00000026] shadow-md"
: "" : ""
client/src/components/header/Location.tsx
+1 -1
View File
@@ -2,7 +2,7 @@ import LocationIcon from "../icons/LocationIcon";
const Location = () => { const Location = () => {
return ( return (
<div className="text-[#73787C] flex gap-1 items-center justify-center"> <div className="text-[#73787C] flex gap-1 items-center justify-center zoom-280">
<LocationIcon /> <LocationIcon />
<p className="">Dubai</p> <p className="">Dubai</p>
</div> </div>
client/src/components/header/Navbar/Navbar.tsx
+2 -2
View File
@@ -1,9 +1,9 @@
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { useNavigate, useLocation } from "react-router-dom"; import { useNavigate, useLocation } from "react-router-dom";
import { Tab } from "../../../types/tab"; import { Tab } from "../../../types/tab";
import NavbarMobile from "./NavbarMobile";
import { tabs as _tabs } from "../../../consts/tabs"; import { tabs as _tabs } from "../../../consts/tabs";
import useFavorites from "../../../store/useFavorites"; import useFavorites from "../../../store/useFavorites";
import NavbarDesktop from "./NavbarDesktop";
const Navbar = () => { const Navbar = () => {
const [selectedTab, setSelectedTab] = useState<Tab | null>(null); const [selectedTab, setSelectedTab] = useState<Tab | null>(null);
@@ -49,7 +49,7 @@ const Navbar = () => {
return ( return (
<> <>
{ {
<NavbarMobile <NavbarDesktop
onTabClick={onTabClick} onTabClick={onTabClick}
tabs={tabs} tabs={tabs}
selectedTab={selectedTab} selectedTab={selectedTab}
client/src/components/header/Navbar/NavbarDesktop.tsx
+1 -1
View File
@@ -9,7 +9,7 @@ interface NavbarProps {
const NavbarDesktop = ({ selectedTab, onTabClick, tabs }: NavbarProps) => ( const NavbarDesktop = ({ selectedTab, onTabClick, tabs }: NavbarProps) => (
<nav <nav
className={`text-[#73787C] self-center col-span-2 justify-center flex h-full`} className={`text-[#73787C] self-center col-span-2 justify-center flex h-full `}
> >
{tabs.map((tab) => ( {tabs.map((tab) => (
<NavbarTabDesktop <NavbarTabDesktop
client/src/components/header/Navbar/NavbarTabDesktop.tsx
+2 -2
View File
@@ -17,7 +17,7 @@ const NavbarTabDesktop = ({
onClick={() => onClick(tab)} onClick={() => onClick(tab)}
> >
<div <div
className={`border-b-2 h-full flex items-center transition-all duration-300 ${ className={`border-b-2 h-full flex items-center transition-all duration-300 text-[38.4px] ${
isSelected isSelected
? "border-b-[#00BED7]" ? "border-b-[#00BED7]"
: "border-b-transparent hover:border-b-[#E2E2DC] active:border-b-[#00BED7]" : "border-b-transparent hover:border-b-[#E2E2DC] active:border-b-[#00BED7]"
@@ -26,7 +26,7 @@ const NavbarTabDesktop = ({
{tab.value} {tab.value}
</div> </div>
{tab.count !== 0 && ( {tab.count !== 0 && (
<div className="absolute top-2 right-0 w-4 h-4 bg-[#00BED7] rounded-full text-white text-[10px] flex items-center justify-center pt-0.5 pr-[1px]"> <div className="absolute top-2 right-0 w-4 h-4 bg-[#00BED7] rounded-full text-white text-[24px] flex items-center justify-center pt-0.5 pr-[1px]">
<span className="leading-none">{tab.count}</span> <span className="leading-none">{tab.count}</span>
</div> </div>
)} )}
client/src/components/masterplanPage/TopPanel.tsx
+1 -1
View File
@@ -31,7 +31,7 @@ const TopPanel = () => {
<img src="/images/top_shadow.png" className="w-screen" alt="" /> <img src="/images/top_shadow.png" className="w-screen" alt="" />
</div> </div>
<div <div
className={`absolute top-[62px] left-0 z-20 w-full p-4 flex justify-end gap-2 select-none touch-none pointer-events-none`} className={`absolute top-[172px] left-0 z-20 w-full p-4 flex justify-end gap-2 select-none touch-none pointer-events-none`}
> >
{isFullscreen ? ( {isFullscreen ? (
<Button <Button
client/src/components/masterplanPage/map/Map.tsx
+6 -6
View File
@@ -1,6 +1,6 @@
import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch"; import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
import ImageMarker, { MarkerComponentProps } from "react-image-marker"; import ImageMarker, { MarkerComponentProps } from "react-image-marker";
import { isMobile } from "react-device-detect"; // import { isMobile } from "react-device-detect";
import Marker from "./Marker"; import Marker from "./Marker";
import { markers } from "../../../consts/markers"; import { markers } from "../../../consts/markers";
import useMarker from "../../../store/useMarker"; import useMarker from "../../../store/useMarker";
@@ -20,9 +20,9 @@ const Map = () => {
return ( return (
<div className="relative"> <div className="relative">
<TransformWrapper <TransformWrapper
initialScale={isMobile ? 2 : 1} initialScale={2}
minScale={isMobile ? 2 : 1} minScale={2}
maxScale={2} maxScale={4}
alignmentAnimation={{ sizeX: 50, sizeY: 50 }} alignmentAnimation={{ sizeX: 50, sizeY: 50 }}
wheel={{ step: 10000, smoothStep: 0.0005 }} wheel={{ step: 10000, smoothStep: 0.0005 }}
zoomAnimation={{ zoomAnimation={{
@@ -45,10 +45,10 @@ const Map = () => {
wrapperClass={"top-[-50px] left-[-200px]"} wrapperClass={"top-[-50px] left-[-200px]"}
> >
<ImageMarker <ImageMarker
src="images/Map.jpg" src="/images/Map.jpg"
markers={imageMarkers} markers={imageMarkers}
markerComponent={Marker} markerComponent={Marker}
extraClass={`transition-all duration-300 ease-in-out ${ extraClass={`transition-all duration-300 ease-in-out ${
hoveredMarker ? "brightness-[.7]" : "" hoveredMarker ? "brightness-[.7]" : ""
}`} }`}
/> />
client/src/components/masterplanPage/map/Marker.tsx
+1 -1
View File
@@ -34,7 +34,7 @@ const Marker = (props: MarkerComponentProps) => {
return ( return (
<div <div
className="relative transition-transform " className="relative transition-transform zoom-280"
style={{ transform: `scale(${markerScale})` }} style={{ transform: `scale(${markerScale})` }}
> >
<div <div
client/src/components/modals/mobile/SkygardenModal.tsx
+1 -1
View File
@@ -61,7 +61,7 @@ const SkygardenModal = () => {
</div> </div>
<div <div
style={{ transform: `translateY(${isAnimate ? 0 : 100}%)` }} style={{ transform: `translateY(${isAnimate ? 0 : 100}%)` }}
className="bg-[#F3F3F2] h-fit p-6 pt-0 flex flex-col gap-6 transition-transform ease-in-out relative" className="bg-[#F3F3F2] h-full p-6 pt-0 flex flex-col gap-6 transition-transform ease-in-out relative"
> >
<div <div
className="w-[calc(100%-48px)] absolute flex justify-center py-3" className="w-[calc(100%-48px)] absolute flex justify-center py-3"
client/src/components/modals/mobile/WingFloorModal.tsx
+2 -2
View File
@@ -169,7 +169,7 @@ const WingFloorModal = ({
</div> </div>
<div <div
style={{ transform: `translateY(${isAnimate ? 0 : 100}%)` }} style={{ transform: `translateY(${isAnimate ? 0 : 100}%)` }}
className="bg-[#F3F3F2] h-fit p-6 pt-0 flex flex-col gap-6 transition-transform ease-in-out relative" className="bg-[#F3F3F2] h-full p-6 pt-0 flex flex-col gap-6 transition-transform ease-in-out relative"
> >
<div <div
className="w-[calc(100%-48px)] absolute flex justify-center py-3" className="w-[calc(100%-48px)] absolute flex justify-center py-3"
@@ -217,7 +217,7 @@ const WingFloorModal = ({
</div> </div>
</div> </div>
</div> </div>
<div className="px-10 bg-white flex gap-6 font-semibold text-caption-m rounded-2xl justify-center items-center flex-1 py-4 overflow-clip"> <div className="px-10 bg-white flex gap-6 font-semibold text-caption-m rounded-2xl justify-center items-center py-4 overflow-clip">
{currentFloor?.wing === "West Wing" ? ( {currentFloor?.wing === "West Wing" ? (
currentFloor && currentFloor.floor <= 21 ? ( currentFloor && currentFloor.floor <= 21 ? (
<svg <svg
client/src/components/searchPage/SidebarFilters.tsx
+3 -3
View File
@@ -99,9 +99,9 @@ const SidebarFilters = () => {
return ( return (
<div> <div>
<div className="h-full w-[360px] bg-[#F3F3F2] flex-col items-center justify-between border-r lg:flex hidden"> <div className=" h-full w-[360px] bg-[#F3F3F2] flex-col items-center justify-between border-r lg:flex hidden">
<div className="w-full py-6 px-6 flex flex-col items-center"> <div className="w-full py-6 px-6 flex flex-col items-center ">
<div className="flex justify-between border-b border-[#E2E2DC] w-full pb-4"> <div className="flex justify-between border-b border-[#E2E2DC] w-full pb-4 ">
<h2 className="text-subheadline-m font-semibold">Filters</h2> <h2 className="text-subheadline-m font-semibold">Filters</h2>
<Button <Button
isCircleRounded isCircleRounded
client/src/consts/markers.ts
+6 -6
View File
@@ -2,22 +2,22 @@ import { Marker } from "../types/marker";
const markers: Marker[] = [ const markers: Marker[] = [
{ {
top: 38.2, top: 33.5,
left: 54, left: 51.5,
itemNumber: 0, itemNumber: 0,
popup: "/images/markers/popups/1.svg", popup: "/images/markers/popups/1.svg",
isPopupLeft: true, isPopupLeft: true,
}, },
{ {
top: 39.5, top: 35.5,
left: 56, left: 53,
itemNumber: 1, itemNumber: 1,
popup: "/images/markers/popups/1.svg", popup: "/images/markers/popups/1.svg",
isPopupLeft: false, isPopupLeft: false,
}, },
{ {
top: 73, top: 69,
left: 22.5, left: 20.0,
itemNumber: 2, itemNumber: 2,
popup: "/images/markers/popups/1.svg", popup: "/images/markers/popups/1.svg",
isPopupLeft: false, isPopupLeft: false,
client/src/index.css
+4
View File
@@ -50,6 +50,10 @@ html {
} }
@layer components { @layer components {
.zoom-280 {
zoom: 280%;
}
.desc-shadow { .desc-shadow {
box-shadow: 0px 4px 20px 1px #00000026; box-shadow: 0px 4px 20px 1px #00000026;
} }
client/src/pages/AboutComplex.tsx
+3 -1
View File
@@ -1,4 +1,4 @@
import { isMobile } from "react-device-detect"; // import { isMobile } from "react-device-detect";
import Footer from "../components/Footer"; import Footer from "../components/Footer";
import Button from "../components/Button"; import Button from "../components/Button";
import LeftArrowIcon from "../components/icons/LeftArrowIcon"; import LeftArrowIcon from "../components/icons/LeftArrowIcon";
@@ -6,6 +6,8 @@ import LivingSolutionSlider from "../components/aboutComplex/LivingSolutionSlide
import RoveHomeSlider from "../components/aboutComplex/RoveHomeSlider"; import RoveHomeSlider from "../components/aboutComplex/RoveHomeSlider";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
const isMobile = true;
interface ICityItem { interface ICityItem {
time: number; time: number;
title: string; title: string;