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

modals

Browse Source
This commit is contained in:
zojgame
2024-07-04 19:22:02 +05:00
parent 02505df229
commit b021168c7a
14 changed files with 116 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/Button.tsx
+2 -2
View File
@@ -43,9 +43,9 @@ const Button = ({
type={type}
disabled={disabled}
onClick={onClick}
className={`zoom-280 min-w-10 max-h-10 ${rounded} ${
className={`zoom-280 min-w-[40px] max-h-[40px] ${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} ${
} transition-all duration-300 ease-in-out text-[16px] pointer-events-auto flex gap-1 items-center align-middle h-fit ${backgroundColor} ${textColor} ${border} ${disabledStyle} ${
className ? className : ""
}`}
>
client/src/components/Logo.tsx
+1 -1
View File
@@ -14,7 +14,7 @@ const Logo = ({ className = "" }: LogoProps) => {
return (
<div
className={`zoom-280 text-[#0D1922] py-4 px-6 border-r border-r-[#F3F3F2] cursor-pointer select-none ${className}`}
className={`zoom-280 text-[#0D1922] py-[16px] px-[24px] border-r border-r-[#F3F3F2] cursor-pointer select-none ${className}`}
onClick={handleOnLogoClick}
>
<LogoIcon />
client/src/components/complexPage/ComplexTopPanel.tsx
+6 -3
View File
@@ -15,7 +15,7 @@ import { MobileModalWrapper } from "../modals/mobile/MobileModalWrapper";
import MasterplanFiltersModal from "../modals/mobile/MasterplanFiltersModal";
const ComplexTopPanel = () => {
const { setModal } = useModal();
const { setModal, modal } = useModal();
const { onFullscreen, isFullscreen, setIsFullscreen } = useFullScreen();
const { setIsSidebar, isSidebar } = useWingSidebar();
const navigate = useNavigate();
@@ -119,11 +119,14 @@ const ComplexTopPanel = () => {
</div>
<div className="flex flex-col col-start-1 col-span-4 text-white text-center items-start text-[53.25px] pt-[45px]">
<div
className={`text-center duration-300 ease-in-out transition-opacity`}
className={`text-left duration-300 ease-in-out transition-opacity flex flex-col ${
modal ? "opacity-0" : "opacity-100"
}`}
>
<h2 className="font-semibold text-[56.5px] drop-shadow drop-shadow-[0_2px_8px_0px_rgba(62, 84, 100, 0.25)] select-none">
<h2 className="font-semibold text-[56.25px] drop-shadow drop-shadow-[0_2px_8px_0px_rgba(62, 84, 100, 0.25)] select-none">
ROVE Home Marasi Drive
</h2>
<p className="text-s">Select а floor</p>
</div>
</div>
</div>
client/src/components/complexWingPage/MobileApartmentDescription.tsx
+6 -4
View File
@@ -58,7 +58,7 @@ const MobileApartmentDescription = ({
{apartment && (
<div className="p-6 py-3">
<div
className={`bg-white rounded-2xl p-6 flex flex-col text-subheadline-s relative text-nowrap desc-shadow py-2 duration-300 ease-in-out transition-opacity min-w-[344px]`}
className={`bg-white rounded-2xl p-6 flex flex-col text-subheadline-s relative text-nowrap desc-shadow py-2 duration-300 ease-in-out transition-opacity min-w-[825px]`}
>
<h2 className="text-[#0D1922] font-semibold pt-6">
{apartment?.Unit_Type},{" "}
@@ -80,16 +80,18 @@ const MobileApartmentDescription = ({
</p> */}
{isVirtualTourAvailiable && (
<div
className={`bg-[#30B21614] text-[#30B216] px-2 py-[6px] flex gap-1 items-center rounded-lg opacity-100`}
className={`bg-[#30B21614] text-[#30B216] px-[19.2px] py-[9.6px] flex gap-[9.6px] items-center rounded-lg opacity-100`}
>
<VirtualTourIcon />
<div className="zoom-280">
<VirtualTourIcon />
</div>
<p className="text-caption-m font-semibold text-[#30B216]">
3D-tour
</p>
</div>
)}
</div>
<div className="w-0 h-0 border-transparent border-t-[14px] border-x-[6px] border-b-0 absolute left-6 -bottom-[13px] border-t-white"></div>
<div className="w-0 h-0 border-transparent border-t-[33px] border-x-[14px] border-b-0 absolute left-[57.6px] -bottom-[32px] border-t-white"></div>
<div className="w-full pb-6 ">
<Button
buttonType="cta"
client/src/components/complexWingPage/SequenceWing/MobileFloorDescription.tsx
+1 -1
View File
@@ -18,7 +18,7 @@ const MobileFloorDescription = ({
return (
<>
<div
className={`bg-white rounded-2xl p-6 flex flex-col gap-4 w-[825px] absolute left-[414px] transition-opacity duration-300 desc-shadow h-[816px]`}
className={`bg-white rounded-2xl p-6 flex flex-col gap-4 w-[825px] absolute left-[414px] transition-opacity duration-300 desc-shadow `}
>
<div className="relative">
<div className="flex justify-between border-b pb-4">
client/src/components/complexWingPage/SkygardenSidebar/ActivityCard.tsx
+1 -1
View File
@@ -10,7 +10,7 @@ const ActivityCard = ({ icon, title }: ActivityCardProps) => {
<div className="w-3 h-3 bg-[#E2E2DC] rounded-full"></div>
<p className="text-m text-[#0D1922]">{title}</p>
</div>
<div className="w-14 h-14 rounded-lg bg-[#F3F3F2] self-end text-[#00BED7]">
<div className="w-[56px] h-[56px] rounded-lg bg-[#F3F3F2] self-end text-[#00BED7] zoom-280">
{icon}
</div>
</div>
client/src/components/complexWingPage/SkygardenSidebar/SkygardenIndoorLayout.tsx
+1
View File
@@ -1,6 +1,7 @@
function SkygardenIndoorLayout() {
return (
<img
className="zoom-280"
src="/images/masterplanWing/skygardenIndoor.png"
alt=""
width={672}
client/src/components/complexWingPage/SkygardenSidebar/SkygardenOutdoorLayout.tsx
+1
View File
@@ -1,6 +1,7 @@
const SkygardenOutdoorLayout = () => {
return (
<img
className="zoom-280"
src="/images/masterplanWing/skygardenOutdoor.png"
width={672}
height={544}
client/src/components/complexWingPage/SkygardenSidebar/ZoneSlider.tsx
+15 -11
View File
@@ -1,11 +1,10 @@
/* eslint-disable react-hooks/exhaustive-deps */
import { useSwipeable } from "react-swipeable";
import { Image } from "../../../types/image";
import { useLayoutEffect, useRef, useState } from "react";
import { Image } from "../../../types/image";
import Button from "../../Button";
import LeftArrowSliderIcon from "../../icons/LeftArrowSliderIcon";
import RightArrowSliderIcon from "../../icons/RightArrowSliderIcon";
import { isMobile } from "react-device-detect";
const images: Image[] = [
{ id: "1", src: "/images/company/slider/1.png" },
@@ -14,7 +13,7 @@ const images: Image[] = [
];
const getGapOffset = (screenWidth: number) => {
if (screenWidth > 1600) return 16;
if (screenWidth > 1600) return 45;
if (screenWidth > 1280) return 24;
if (screenWidth > 640) return 16;
return 16;
@@ -37,7 +36,8 @@ const ZoneSlider = () => {
const gapOffset = getGapOffset(screenWidth);
const _rightImageOffset = `${
-24 + (selectedImageIndex + 1) * (imageWidth + gapOffset)
// -24 + (selectedImageIndex + 1) * (imageWidth + gapOffset)
-57.5 + (selectedImageIndex + 1) * (imageWidth + gapOffset)
}px`;
setRightImageOffset(_rightImageOffset);
@@ -50,7 +50,7 @@ const ZoneSlider = () => {
});
function next() {
const lastIndex = isMobile ? images.length - 2 : images.length - 3;
const lastIndex = images.length - 3;
if (selectedImageIndex === lastIndex + 1) return;
setSelectedImageIndex((prev) => prev + 1);
@@ -62,8 +62,10 @@ const ZoneSlider = () => {
}
return (
<div className="flex flex-col gap-6 " {...handlers}>
<div className="relative col-span-full overflow-x-hidden flex flex-col h-[372px] ">
<div className="flex flex-col gap-6 pt-[1147px] pb-[96px]" {...handlers}>
{/* <div className="flex flex-col gap-6 pt-[1108.5px]" {...handlers}> */}
<div className="relative col-span-full overflow-x-hidden flex flex-col h-[892px] border-b">
{/* <div className="relative col-span-full overflow-x-hidden flex flex-col h-[372px] "> */}
<div
className={`flex gap-4 w-full absolute h-full transition-all duration-300 ease-in-out select-none xl:px-0 px-4`}
style={{
@@ -81,24 +83,26 @@ const ZoneSlider = () => {
))}
</div>
<Button
isCircleRounded
onClick={prev}
icon={<LeftArrowSliderIcon />}
className="absolute text-[#73787C] top-[calc(50%-22px)] left-8 hidden sm:block"
/>
<Button
isCircleRounded
onClick={next}
icon={<RightArrowSliderIcon />}
className="absolute text-[#73787C] top-[calc(50%-22px)] right-8 hidden sm:block"
/>
</div>
<div className="self-center gap-1 sm:hidden flex">
<div className="self-center gap-[4px] sm:hidden flex zoom-280">
{images.map((image, index) => (
<div
key={image.id}
className={`transition-all duration-300 ease-in-out rounded-full h-2 ${
className={`transition-all duration-300 ease-in-out rounded-full h-[8px] ${
index - 1 === selectedImageIndex
? "w-6 bg-[#0D1922]"
: "w-2 bg-[#0D192266]"
? "w-[24px] bg-[#0D1922]"
: "w-[8px] bg-[#0D192266]"
}`}
></div>
))}
client/src/components/modals/mobile/SkygardenModal.tsx
+12 -11
View File
@@ -47,27 +47,28 @@ const SkygardenModal = () => {
return (
<div
className={`h-[calc(100vh-64px)] w-screen pt-[128px] absolute z-[99999999] top-0 duration-300 ease-in-out `}
// className={`h-[calc(100vh-78.75px)] w-screen pt-[562.5px] absolute z-[99999999] top-0 duration-300 ease-in-out `}
className={`h-[calc(100vh-78.75px)] w-screen pt-[157.5px] 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 ${
className={`flex flex-col text-white px-4 pb-6 transition-opacity duration-300 ease-in-out h-[405px] pt-[202.5px] ${
isAnimate ? "opacity-100" : "opacity-0"
}`}
>
<p className="text-subheadline-s font-semibold">
Rove Home Marasi Drive
</p>
<p className="font-semibold text-[56.25px]">ROVE Home Marasi Drive</p>
<p className="text-s">Skygarden</p>
</div>
<div
style={{ transform: `translateY(${isAnimate ? 0 : 100}%)` }}
className="bg-[#F3F3F2] h-full p-6 pt-0 flex flex-col gap-6 transition-transform ease-in-out relative"
className="bg-[#F3F3F2] h-full p-[57.5px] pt-0 flex flex-col gap-6 transition-transform ease-in-out relative border-b"
>
<div
className="w-[calc(100%-48px)] absolute flex justify-center py-3"
className="w-[calc(100%-135px)] absolute flex justify-center py-3"
{...handlers}
>
<MinusIcon />
<div className="zoom-280">
<MinusIcon />
</div>
</div>
<div className="pt-6 flex justify-between items-center">
<div className="flex flex-col">
@@ -76,7 +77,7 @@ const SkygardenModal = () => {
</h2>
<p className="text-s">22-23 floor</p>
</div>
<div className="py-[3px] px-2 text-white bg-[#00BED7] rounded-full text-caption-m">
<div className="py-[8.44px] px-2 text-white bg-[#00BED7] rounded-full text-caption-m">
17 amenties
</div>
</div>
@@ -85,7 +86,7 @@ const SkygardenModal = () => {
<LayoutSlider />
</div>
</div>
<div className="grid grid-cols-3 gap-4 border-t pt-4 pb-4 mx-6">
<div className="grid grid-cols-3 gap-4 border-t pt-4 pb-4">
<div className="font-semibold text-subheadline-s">
Indoor Amenties
</div>
@@ -99,7 +100,7 @@ const SkygardenModal = () => {
/>
<ActivityCard title={"Changing Rooms"} icon={<ChangingRoomsIcon />} />
</div>
<div className="grid grid-cols-3 gap-4 border-t py-4 border-b mb-4 mx-6">
<div className="grid grid-cols-3 gap-4 border-t py-4 border-b mb-4">
<div className="font-semibold text-subheadline-s">
Outdoor Amenties
</div>
client/src/components/modals/mobile/WingFloorModal.tsx
+18 -15
View File
@@ -115,8 +115,9 @@ const WingFloorModal = ({
} else {
const scrollOffsetY = window.scrollY;
//detect mouse pos
const y = event.clientY - 65 + scrollOffsetY - 205;
const x = event.clientX - 50;
const y = event.clientY - 65 + scrollOffsetY - 650;
const x = event.clientX - 140;
// const x = event.clientX - 50;
setMousePos([x, y]);
}
}
@@ -142,7 +143,7 @@ const WingFloorModal = ({
return (
<>
<div
className={`h-[calc(100vh-64px)] w-screen pt-[128px] absolute z-[99999997] top-0 duration-300 ease-in-out overflow-x-clip`}
className={`h-[calc(100vh-78.75px)] w-screen pt-[157.5px] absolute z-[99999997] top-0 duration-300 ease-in-out overflow-x-clip`}
>
{isDescVisible && (
<div
@@ -158,7 +159,7 @@ const WingFloorModal = ({
</div>
)}
<div
className={`flex flex-col text-white px-4 pb-6 transition-opacity duration-300 ease-in-out ${
className={`flex flex-col text-white px-4 pb-6 transition-opacity duration-300 ease-in-out h-[405px] pt-[202.5px] ${
isAnimate ? "opacity-100" : "opacity-0"
}`}
>
@@ -172,10 +173,12 @@ const WingFloorModal = ({
className="bg-[#F3F3F2] h-full 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"
className="w-[calc(100%-135px)] absolute flex justify-center py-3"
{...handlers}
>
<MinusIcon />
<div className="zoom-280">
<MinusIcon />
</div>
</div>
<div className="pt-6 flex justify-between items-center">
<div className="flex flex-col">
@@ -184,33 +187,33 @@ const WingFloorModal = ({
</h2>
<p className="text-s">{wing}</p>
</div>
<div className="py-[3px] px-2 text-white bg-[#00BED7] rounded-full text-caption-m">
<div className="py-[8.44px] px-2 text-white bg-[#00BED7] rounded-full text-caption-m">
{floorApartments.length} units
</div>
</div>
<div className="flex justify-between items-center py-2 px-4 rounded-lg bg-white">
<div>{currentFloor?.floor} floor</div>
<div className="">{currentFloor?.floor} 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]">
<div className="w-[48px] h-[48px] 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]">
<div className="w-[48px] h-[48px] 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]">
<div className="w-[48px] h-[48px] 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]">
<div className="w-[48px] h-[48px] 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>
@@ -221,7 +224,7 @@ const WingFloorModal = ({
{currentFloor?.wing === "West Wing" ? (
currentFloor && currentFloor.floor <= 21 ? (
<svg
className="rotate-[135deg]"
className="rotate-[135deg] zoom-280"
xmlns="http://www.w3.org/2000/svg"
width="400"
height="500"
@@ -235,7 +238,7 @@ const WingFloorModal = ({
</svg>
) : (
<svg
className="rotate-[135deg]"
className="rotate-[135deg] zoom-280"
xmlns="http://www.w3.org/2000/svg"
width="400"
height="700"
@@ -250,7 +253,7 @@ const WingFloorModal = ({
)
) : (
<svg
className="rotate-[135deg]"
className="rotate-[135deg] zoom-280"
xmlns="http://www.w3.org/2000/svg"
fill="none"
width="672"
client/src/consts/buttonStyles.ts
+1 -1
View File
@@ -32,7 +32,7 @@ const borders: ButtonStyle = {
const paddings: ButtonStyle = {
cta: "py-[12px] px-[24px]",
primary: "py-[10px] pr-[24px] pl-4",
primary: "py-[10px] pr-[24px] pl-[16px]",
secondary: "py-[12px] px-[24px]",
tertiary: "py-[4px] px-[12px]",
fab: "py-[12px] px-[24px]",
client/src/index.css
+29 -24
View File
@@ -169,7 +169,7 @@ html {
margin: 0;
}
/* 1280px - 1600px */
@media (max-width: 1600px) {
@media (min-width: 1280px) {
.text-caption-s {
font-family: "Usual", sans-serif;
font-size: clamp(10px, 0.3744rem + 0.313vw, 12px);
@@ -186,13 +186,15 @@ html {
.text-s {
font-family: "Usual", sans-serif;
line-height: 140%;
font-size: clamp(12px, 0.01rem + 0.93vw, 16px);
/* font-size: clamp(12px, 0.01rem + 0.93vw, 16px); */
font-size: 40px;
}
.text-m {
font-family: "Usual", sans-serif;
line-height: 125%;
font-size: clamp(13px, 0.01rem + 0.99vw, 19px);
/* font-size: clamp(13px, 0.01rem + 0.99vw, 19px); */
font-size: 45px;
}
.text-subheadline-s {
@@ -204,7 +206,8 @@ html {
.text-subheadline-m {
font-family: "Usual", sans-serif;
font-size: clamp(20px, 0.2477rem + 1.252vw, 28px);
/* font-size: clamp(20px, 0.2477rem + 1.252vw, 28px); */
font-size: 67.5px;
line-height: 135%;
}
@@ -228,7 +231,8 @@ html {
}
.text-caption-m {
font-size: clamp(0.625rem, 0.125rem + 1.25vw, 1.125rem);
/* font-size: clamp(0.625rem, 0.125rem + 1.25vw, 1.125rem); */
font-size: 28.8px;
}
.text-s {
@@ -241,6 +245,7 @@ html {
.text-subheadline-s {
font-size: clamp(1rem, 0.25rem + 1.875vw, 1.75rem);
/* font-size: clamp(1rem, 0.25rem + 1.875vw, 1.75rem); */
}
.text-subheadline-m {
@@ -317,29 +322,29 @@ html {
font-size: clamp(10px, 0.01rem + 0.93vw, 20px);
}
}
}
/* scrollbar */
/* scrollbar */
::-webkit-scrollbar {
width: 5px;
height: 5px;
}
::-webkit-scrollbar {
width: 5px;
height: 5px;
}
::-webkit-scrollbar-track {
background: #fff;
}
::-webkit-scrollbar-track {
background: #fff;
}
::-webkit-scrollbar-thumb {
background: #c7bdba;
border-radius: 99px;
}
::-webkit-scrollbar-thumb {
background: #c7bdba;
border-radius: 99px;
}
:fullscreen::backdrop {
background: none;
}
:fullscreen::backdrop {
background: none;
}
body {
scrollbar-color: #c7bdba;
scrollbar-width: thin;
body {
scrollbar-color: #c7bdba;
scrollbar-width: thin;
}
}
client/tailwind.config.js
+22 -2
View File
@@ -3,23 +3,43 @@ export default {
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
theme: {
extend: {
borderRadius: {
"2xl": "38.4px",
lg: "19.2px",
},
borderWidth: {
DEFAULT: "2.4px",
},
padding: {
6: "67.5px",
1: "11.25px",
4: "45px",
3: "33.75px",
2: "22.5px",
},
margin: {
6: "67.5px",
1: "11.25px",
4: "45px",
3: "33.75px",
2: "22.5px",
},
gap: {
2: "22.5px",
4: "45px",
8: "90px",
6: "67.5px",
9: "101.5px",
},
minHeight: {
6: "57.6px",
width: {
3: "33.75px",
},
height: {
6: "57.6px",
3: "33.75px",
},
minHeight: {
6: "57.6px",
},
minWidth: {
6: "57.6px",