adaptive masterplan page
This commit is contained in:
Binary file not shown.
|
After Width: | Height: | Size: 62 KiB |
@@ -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"
|
||||
}`}
|
||||
>
|
||||
|
||||
@@ -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);
|
||||
setTop(window.innerWidth / 2 - window.innerHeight / 2);
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
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 ${
|
||||
|
||||
@@ -5,67 +5,20 @@ import SkygardenDescription from "./SkygardenDescription";
|
||||
import FloorSidebar from "./FloorSidebar/FloorSidebar";
|
||||
import SkygardenSidebar from "./SkygardenSidebar/SkygardenSidebar";
|
||||
import useWingSidebar from "../../store/useWingSidebar";
|
||||
|
||||
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" },
|
||||
];
|
||||
import useModal from "../../store/useModal";
|
||||
import WingFloorModal from "../modals/mobile/WingFloorModal";
|
||||
import {
|
||||
laptopWidth,
|
||||
mobileWidht,
|
||||
descriptions,
|
||||
} from "../../consts/masterplan";
|
||||
|
||||
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);
|
||||
setTop(window.innerWidth / 2 - window.innerHeight / 2);
|
||||
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 = (
|
||||
@@ -107,16 +79,26 @@ const SequenceWing = () => {
|
||||
|
||||
const handleOnFloorClick = () => {
|
||||
if (!currentHoveredFloor) return;
|
||||
const screenWidth = window.innerWidth;
|
||||
setCurrentFloor(currentHoveredFloor);
|
||||
if (screenWidth < laptopWidth) {
|
||||
setModal(<WingFloorModal />);
|
||||
} else {
|
||||
setIsFloorSidebar(true);
|
||||
setIsSkygardenSidebar(false);
|
||||
setIsSidebar(true);
|
||||
}
|
||||
};
|
||||
|
||||
const handleOnSkygardenClick = () => {
|
||||
const screenWidth = window.innerWidth;
|
||||
if (screenWidth < laptopWidth) {
|
||||
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
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
const MinusIcon = () => {
|
||||
return (
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
||||
@@ -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;
|
||||
@@ -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 };
|
||||
@@ -6,6 +6,9 @@ body {
|
||||
background-color: #f3f3f2;
|
||||
}
|
||||
|
||||
html {
|
||||
}
|
||||
|
||||
.font-usual {
|
||||
font-family: "Usual", sans-serif;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user