adaptive masterplan page

src/components/complexPage/ComplexTopPanel.tsx

@@ -53,7 +53,7 @@ const ComplexTopPanel = () => {
       <div
         className={`absolute top-[62px] left-0 z-20 w-full p-4 grid grid-cols-12 select-none touch-none pointer-events-none`}
       >
-        <div className="flex gap-2 col-span-5">
+        <div className="flex gap-2 sm:col-span-5 col-span-7">
           <Button
             icon={<LeftArrowSliderIcon />}
             buttonType="cta"
@@ -71,9 +71,9 @@ const ComplexTopPanel = () => {
             text="About Complex"
           />
         </div>
-        <div className="flex flex-col col-start-6 col-span-4 text-white text-center items-start">
+        <div className="flex flex-col sm:col-start-6 col-start-8 sm:col-span-4 col-span-4 text-white text-center items-start ">
           <div
-            className={`text-center duration-300 ease-in-out transition-opacity ${
+            className={`text-center duration-300 ease-in-out transition-opacity hidden lg:block ${
               isSidebar ? "opacity-0" : "opacity-100"
             }`}
           >

src/components/complexPage/SequenceSlider.tsx

@@ -10,6 +10,7 @@ import LeftArrowSliderIcon from "../icons/LeftArrowSliderIcon";
 import RightArrowSliderIcon from "../icons/RightArrowSliderIcon";
 import useCompass from "../../store/useCompass";
 import SequenceHighlighting from "./SequenceHighlighting";
+import { laptopWidth, mobileWidht } from "../../consts/masterplan";
 
 const arrayLength = 360;
 const keyframes: number[] = [51, 178, 249, 339];
@@ -26,6 +27,7 @@ function SequenceSlider({ path }: SequenceSliderProps) {
   const [isAnimate, setIsAnimate] = useState<boolean>(false);
   const [loadedImages, setLoadedImages] = useState<number>(0);
   const [keyframeIndex, setKeyframeIndex] = useState<number>(3);
+  const [left, setLeft] = useState<number>(0);
   const { setCurrentCompassRotate, currentCompassRotate } = useCompass();
   const [width, setWidth] = useState<number>();
   const [top, setTop] = useState<number>();
@@ -128,8 +130,26 @@ function SequenceSlider({ path }: SequenceSliderProps) {
   }
 
   function handleResize() {
-    setWidth(window.innerWidth);
+    const screenWidth = window.innerWidth;
-    setTop(window.innerWidth / 2 - window.innerHeight / 2);
+    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);
+    }
   }
 
   useEffect(() => {
@@ -149,7 +169,12 @@ function SequenceSlider({ path }: SequenceSliderProps) {
     >
       <div
         className="absolute left-0"
-        style={{ width: `${width}px`, height: `${width}px`, top: `-${top}px` }}
+        style={{
+          width: `${width}px`,
+          height: `${width}px`,
+          top: `-${top}px`,
+          left: `-${left}px`,
+        }}
       >
         <div
           className={`duration-150 transition-opacity ease-in-out opacity-100`}
@@ -225,7 +250,12 @@ function SequenceSlider({ path }: SequenceSliderProps) {
       />
       <div
         className="absolute left-0 z-40 select-none"
-        style={{ width: `${width}px`, height: `${width}px`, top: `-${top}px` }}
+        style={{
+          width: `${width}px`,
+          height: `${width}px`,
+          top: `-${top}px`,
+          left: `${left}`,
+        }}
       >
         <div
           className={`transition-opacity duration-75 ${

src/components/complexWingPage/SequenceWing.tsx

@@ -5,67 +5,20 @@ import SkygardenDescription from "./SkygardenDescription";
 import FloorSidebar from "./FloorSidebar/FloorSidebar";
 import SkygardenSidebar from "./SkygardenSidebar/SkygardenSidebar";
 import useWingSidebar from "../../store/useWingSidebar";
-
+import useModal from "../../store/useModal";
-const descriptions: IDesctiptionFloor[] = [
+import WingFloorModal from "../modals/mobile/WingFloorModal";
-  { id: "0", floor: 31, wing: "East Wing" },
+import {
-  { id: "1", floor: 21, wing: "East Wing" },
+  laptopWidth,
-  { id: "2", floor: 30, wing: "East Wing" },
+  mobileWidht,
-  { id: "3", floor: 29, wing: "East Wing" },
+  descriptions,
-  { id: "4", floor: 28, wing: "East Wing" },
+} from "../../consts/masterplan";
-  { id: "5", floor: 27, wing: "East Wing" },
-  { id: "6", floor: 26, wing: "East Wing" },
-  { id: "7", floor: 25, wing: "East Wing" },
-  { id: "8", floor: 24, wing: "East Wing" },
-  { id: "9", floor: 22, wing: "East Wing" },
-  { id: "10", floor: 20, wing: "East Wing" },
-  { id: "11", floor: 19, wing: "East Wing" },
-  { id: "12", floor: 18, wing: "East Wing" },
-  { id: "13", floor: 17, wing: "East Wing" },
-  { id: "14", floor: 16, wing: "East Wing" },
-  { id: "15", floor: 15, wing: "East Wing" },
-  { id: "16", floor: 14, wing: "East Wing" },
-  { id: "17", floor: 13, wing: "East Wing" },
-  { id: "18", floor: 12, wing: "East Wing" },
-  { id: "19", floor: 11, wing: "East Wing" },
-  { id: "20", floor: 10, wing: "East Wing" },
-  { id: "21", floor: 9, wing: "East Wing" },
-  { id: "22", floor: 8, wing: "East Wing" },
-  { id: "23", floor: 7, wing: "East Wing" },
-  { id: "24", floor: 6, wing: "East Wing" },
-  { id: "25", floor: 5, wing: "East Wing" },
-
-  { id: "50", floor: 31, wing: "West Wing" },
-  { id: "26", floor: 30, wing: "West Wing" },
-  { id: "27", floor: 29, wing: "West Wing" },
-  { id: "28", floor: 28, wing: "West Wing" },
-  { id: "29", floor: 27, wing: "West Wing" },
-  { id: "30", floor: 26, wing: "West Wing" },
-  { id: "31", floor: 25, wing: "West Wing" },
-  { id: "32", floor: 24, wing: "West Wing" },
-  { id: "33", floor: 20, wing: "West Wing" },
-  { id: "34", floor: 19, wing: "West Wing" },
-  { id: "35", floor: 18, wing: "West Wing" },
-  { id: "36", floor: 17, wing: "West Wing" },
-  { id: "37", floor: 16, wing: "West Wing" },
-  { id: "38", floor: 15, wing: "West Wing" },
-  { id: "39", floor: 14, wing: "West Wing" },
-  { id: "40", floor: 13, wing: "West Wing" },
-  { id: "41", floor: 12, wing: "West Wing" },
-  { id: "42", floor: 11, wing: "West Wing" },
-  { id: "43", floor: 10, wing: "West Wing" },
-  { id: "44", floor: 9, wing: "West Wing" },
-  { id: "45", floor: 8, wing: "West Wing" },
-  { id: "46", floor: 7, wing: "West Wing" },
-  { id: "47", floor: 6, wing: "West Wing" },
-  { id: "48", floor: 5, wing: "West Wing" },
-  { id: "49", floor: 21, wing: "West Wing" },
-];
 
 const skyGardenFloor = 22;
 
 const SequenceWing = () => {
   const [width, setWidth] = useState<number>(0);
   const [top, setTop] = useState<number>(0);
+  const [left, setLeft] = useState<number>(0);
   const leftWingRef = useRef(null);
   const { isSidebar, setIsSidebar } = useWingSidebar();
   const [mousePos, setMousePos] = useState<[number, number]>([0, 0]);
@@ -77,10 +30,29 @@ const SequenceWing = () => {
   const [isWrapperHovered, setIsWrapperHovered] = useState(false);
   const [isSkygardenSidebar, setIsSkygardenSidebar] = useState(false);
   const [isFloorSidebar, setIsFloorSidebar] = useState(false);
+  const { setModal } = useModal();
 
   function handleResize() {
-    setWidth(window.innerWidth);
+    const screenWidth = window.innerWidth;
-    setTop(window.innerWidth / 2 - window.innerHeight / 2);
+    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 = (
@@ -107,16 +79,26 @@ const SequenceWing = () => {
 
   const handleOnFloorClick = () => {
     if (!currentHoveredFloor) return;
+    const screenWidth = window.innerWidth;
     setCurrentFloor(currentHoveredFloor);
-    setIsFloorSidebar(true);
+    if (screenWidth < laptopWidth) {
-    setIsSkygardenSidebar(false);
+      setModal(<WingFloorModal />);
-    setIsSidebar(true);
+    } else {
+      setIsFloorSidebar(true);
+      setIsSkygardenSidebar(false);
+      setIsSidebar(true);
+    }
   };
 
   const handleOnSkygardenClick = () => {
-    setIsSkygardenSidebar(true);
+    const screenWidth = window.innerWidth;
-    setIsFloorSidebar(false);
+    if (screenWidth < laptopWidth) {
-    setIsSidebar(true);
+      setModal(<WingFloorModal />);
+    } else {
+      setIsSkygardenSidebar(true);
+      setIsFloorSidebar(false);
+      setIsSidebar(true);
+    }
   };
 
   function handleMouseMove(e: MouseEvent) {
@@ -171,11 +153,13 @@ const SequenceWing = () => {
           width: `${width}px`,
           height: `${width}px`,
           top: `-${top}px`,
-          left: `${isSkygardenSidebar || isFloorSidebar ? "-25%" : "0"}`,
+          left: `${
+            isSkygardenSidebar || isFloorSidebar ? "-25%" : `-${left}px`
+          }`,
         }}
       >
         <div
-          className={`absolute z-40 top-0 left-0 transition-opacity duration-300 ease-in-out ${
+          className={`absolute z-40 top-0 left-0 transition-opacity duration-300 ease-in-out lg:flex hidden ${
             currentHoveredFloor?.floor === skyGardenFloor && isWrapperHovered
               ? "opacity-100"
               : "opacity-0"
@@ -193,7 +177,7 @@ const SequenceWing = () => {
         </div>
 
         <div
-          className={`absolute z-40 top-0 left-0 transition-opacity duration-300 ease-in-out ${
+          className={`absolute z-40 top-0 left-0 transition-opacity duration-300 ease-in-out lg:flex hidden ${
             currentHoveredFloor?.floor !== skyGardenFloor &&
             currentHoveredFloor &&
             isWrapperHovered

src/components/icons/MinusIcon.tsx

@@ -1,8 +1,8 @@
 const MinusIcon = () => {
   return (
     <svg
-      width="20"
+      width="24"
-      height="20"
+      height="24"
       viewBox="0 0 20 20"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"

src/components/modals/mobile/WingFloorModal.tsx

@@ -0,0 +1,102 @@
+import { useSwipeable } from "react-swipeable";
+import useModal from "../../../store/useModal";
+import { useEffect, useState } from "react";
+import MinusIcon from "../../icons/MinusIcon";
+
+const WingFloorModal = () => {
+  const { setModal } = useModal();
+  const [isAnimate, setIsAnimate] = useState(false);
+
+  const handleOnClose = () => {
+    if (setIsAnimate) {
+      setIsAnimate(false);
+      const timeout = setTimeout(() => {
+        setModal(null);
+        clearTimeout(timeout);
+      }, 300);
+    }
+  };
+
+  const handlers = useSwipeable({
+    onSwipedDown: () => handleOnClose(),
+  });
+
+  useEffect(() => {
+    setIsAnimate(true);
+  }, []);
+
+  return (
+    <div
+      className={`h-[calc(100vh-64px)] w-screen pt-[128px] absolute z-[99999999] top-0 duration-300 ease-in-out `}
+    >
+      <div
+        className={`flex flex-col text-white px-4 pb-6 transition-opacity duration-300 ease-in-out ${
+          isAnimate ? "opacity-100" : "opacity-0"
+        }`}
+      >
+        <p className="text-subheadline-s font-semibold">
+          Rove Home Marasi Drive
+        </p>
+        <p className="text-s">11 floor</p>
+      </div>
+      <div
+        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"
+      >
+        <div
+          className="w-[calc(100%-48px)] absolute flex justify-center py-3"
+          {...handlers}
+        >
+          <MinusIcon />
+        </div>
+        <div className="pt-6 flex justify-between items-center">
+          <div className="flex flex-col">
+            <h2 className="font-semibold text-[#0D1922] text-subheadline-m">
+              11 floor
+            </h2>
+            <p className="text-s">East Wing</p>
+          </div>
+          <div className="py-[3px] px-2 text-white bg-[#00BED7] rounded-full text-caption-m">
+            22 units
+          </div>
+        </div>
+        <div className="flex justify-between items-center py-2 px-4 rounded-lg bg-white">
+          <div>11 floor</div>
+          <div className="flex items-center justify-center gap-6">
+            <div className="flex gap-2 text-[#0D1922B2] items-center">
+              <div className="w-5 h-5 flex items-center bg-[#A19E9E] text-white justify-center rounded-full pt-[1.5px] pb-[2.5px]">
+                1
+              </div>
+              <p className="text-caption-m font-semibold">Studio flex</p>
+            </div>
+            <div className="flex gap-2 text-[#0D1922B2] items-center">
+              <div className="w-5 h-5 flex items-center bg-[#8299AD] text-white justify-center rounded-full pt-[1.5px] pb-[2.5px]">
+                11
+              </div>
+              <p className="text-caption-m font-semibold">Studio</p>
+            </div>
+            <div className="flex gap-2 text-[#0D1922B2] items-center">
+              <div className="w-5 h-5 flex items-center bg-[#BFC9D1] text-white justify-center rounded-full pt-[1.5px] pb-[2.5px]">
+                3
+              </div>
+              <p className="text-caption-m font-semibold">1 Bedroom</p>
+            </div>
+            <div className="flex gap-2 text-[#0D1922B2] items-center">
+              <div className="w-5 h-5 flex items-center bg-[#878FA3] text-white justify-center rounded-full pt-[1.5px] pb-[2.5px]">
+                7
+              </div>
+              <p className="text-caption-m font-semibold">2 Bedroom</p>
+            </div>
+          </div>
+        </div>
+        <div className="h-fit w-full bg-white rounded-lg flex justify-center items-center">
+          <div className="">
+            <img src="/images/floor-apartment-layout.png" alt="" />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default WingFloorModal;

src/consts/masterplan.ts

@@ -0,0 +1,61 @@
+import { IDesctiptionFloor } from "../types/descriptionFloor";
+
+const descriptions: IDesctiptionFloor[] = [
+  { id: "0", floor: 31, wing: "East Wing" },
+  { id: "1", floor: 21, wing: "East Wing" },
+  { id: "2", floor: 30, wing: "East Wing" },
+  { id: "3", floor: 29, wing: "East Wing" },
+  { id: "4", floor: 28, wing: "East Wing" },
+  { id: "5", floor: 27, wing: "East Wing" },
+  { id: "6", floor: 26, wing: "East Wing" },
+  { id: "7", floor: 25, wing: "East Wing" },
+  { id: "8", floor: 24, wing: "East Wing" },
+  { id: "9", floor: 22, wing: "East Wing" },
+  { id: "10", floor: 20, wing: "East Wing" },
+  { id: "11", floor: 19, wing: "East Wing" },
+  { id: "12", floor: 18, wing: "East Wing" },
+  { id: "13", floor: 17, wing: "East Wing" },
+  { id: "14", floor: 16, wing: "East Wing" },
+  { id: "15", floor: 15, wing: "East Wing" },
+  { id: "16", floor: 14, wing: "East Wing" },
+  { id: "17", floor: 13, wing: "East Wing" },
+  { id: "18", floor: 12, wing: "East Wing" },
+  { id: "19", floor: 11, wing: "East Wing" },
+  { id: "20", floor: 10, wing: "East Wing" },
+  { id: "21", floor: 9, wing: "East Wing" },
+  { id: "22", floor: 8, wing: "East Wing" },
+  { id: "23", floor: 7, wing: "East Wing" },
+  { id: "24", floor: 6, wing: "East Wing" },
+  { id: "25", floor: 5, wing: "East Wing" },
+
+  { id: "50", floor: 31, wing: "West Wing" },
+  { id: "26", floor: 30, wing: "West Wing" },
+  { id: "27", floor: 29, wing: "West Wing" },
+  { id: "28", floor: 28, wing: "West Wing" },
+  { id: "29", floor: 27, wing: "West Wing" },
+  { id: "30", floor: 26, wing: "West Wing" },
+  { id: "31", floor: 25, wing: "West Wing" },
+  { id: "32", floor: 24, wing: "West Wing" },
+  { id: "33", floor: 20, wing: "West Wing" },
+  { id: "34", floor: 19, wing: "West Wing" },
+  { id: "35", floor: 18, wing: "West Wing" },
+  { id: "36", floor: 17, wing: "West Wing" },
+  { id: "37", floor: 16, wing: "West Wing" },
+  { id: "38", floor: 15, wing: "West Wing" },
+  { id: "39", floor: 14, wing: "West Wing" },
+  { id: "40", floor: 13, wing: "West Wing" },
+  { id: "41", floor: 12, wing: "West Wing" },
+  { id: "42", floor: 11, wing: "West Wing" },
+  { id: "43", floor: 10, wing: "West Wing" },
+  { id: "44", floor: 9, wing: "West Wing" },
+  { id: "45", floor: 8, wing: "West Wing" },
+  { id: "46", floor: 7, wing: "West Wing" },
+  { id: "47", floor: 6, wing: "West Wing" },
+  { id: "48", floor: 5, wing: "West Wing" },
+  { id: "49", floor: 21, wing: "West Wing" },
+];
+
+const laptopWidth = 1072;
+const mobileWidht = 640;
+
+export { descriptions, laptopWidth, mobileWidht };

src/index.css

@@ -6,6 +6,9 @@ body {
   background-color: #f3f3f2;
 }
 
+html {
+}
+
 .font-usual {
   font-family: "Usual", sans-serif;
 }