fix the flooding btns

BetaNYC · Mar 23, 2024 · ec3d887 · ec3d887
1 parent d7e3dc5
commit ec3d887
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 9 deletions.
diff --git a/components/infoPage/infoBox/InfoBox.tsx b/components/infoPage/infoBox/InfoBox.tsx
@@ -25,7 +25,7 @@ const InfoBox = () => {
     const { setOpenStreetView, openStreetView } = useContext(StreetViewContext) as StreetViewType
 
 
-    const isDesktop = useMediaQuery({ query: "(min-width: 1024px)" })
+
 
 
     const selectedClickHandler = (s: 'About' | "Credit" | "Introduction" | "AI") => {
@@ -64,7 +64,7 @@ const InfoBox = () => {
                     </div>
                 </div>
             </div>
-            <div className={`absolute top-6 ${openStreetView ? "left-4" : "left-[calc(100%_-_3.5rem)]"}  flex items-center justify-center w-10 h-10 bg-[rgba(255,255,255,.65)] z-40 shadow-2xl`} onClick={() => boxShown ? boxShownClickHandler(false) : boxShownClickHandler(true)}>
+            <div className={`absolute top-6 ${openStreetView ? "left-4 lg:left-[calc(100%_-_3.5rem)]" : "left-[calc(100%_-_3.5rem)]"}  flex items-center justify-center w-10 h-10 bg-[rgba(255,255,255,.65)] z-40 shadow-2xl`} onClick={() => boxShown ? boxShownClickHandler(false) : boxShownClickHandler(true)}>
                 {
                     boxShown ? <XMarkIcon className='w-6 h-6 text-black' /> : <Bars3Icon className='w-5 h-5 text-black' />
                 }

diff --git a/components/streetView/FloodingButton.tsx b/components/streetView/FloodingButton.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 
-import Image from 'next/image'
+import { useMediaQuery } from 'react-responsive'
 
 type Props = {
     clicked: boolean
@@ -13,11 +13,15 @@ type Props = {
 }
 
 const FloodingButton = ({ clicked, hovered, title, src, clickHandler, mouseEnterHandler, mouseLeaveHandler }: Props) => {
+
+    const isDesktop = useMediaQuery({ query: "(min-width: 1024px)" })
+
     return (
-        <div className={`inline-flex items-center gap-[0.56rem] px-2 py-[0.5rem] min-w-[6.5625rem] max-h-[2.5rem] font-semibold text-small bg-opacity-80 rounded-[37px] cursor-pointer shadow-2xl ${clicked || hovered ? "text-white bg-primary_blue" : "text-black bg-white "}`} onClick={clickHandler} onMouseEnter={mouseEnterHandler} onMouseLeave={mouseLeaveHandler}>
+        <div className={`inline-flex items-center gap-[0.56rem] px-2 py-[0.5rem] lg:min-w-[6.5625rem] max-h-[2.5rem] font-semibold text-small bg-opacity-80 rounded-[37px] cursor-pointer shadow-2xl ${clicked || hovered ? "text-white bg-primary_blue" : "text-black bg-white "}`} onClick={clickHandler} onMouseEnter={mouseEnterHandler} onMouseLeave={mouseLeaveHandler}>
             {/* <Image width={24} height={24} src={src} alt={title} className='' /> */}
             <img src={src} alt={title} className='w-6 h-6' />
-            <p className=''>{title}</p>
+            {isDesktop && <p className=''>{title}</p>}
+
         </div>
     )
 }

diff --git a/components/streetView/StreetView.tsx b/components/streetView/StreetView.tsx
@@ -129,13 +129,13 @@ const StreetView = () => {
 
     return (
         <>
-            <div className={`absolute top-0 left-0  ${openStreetView ? "translate-y-0" : "translate-y-[-100%]"} w-full h-[65%] z-20 transition-all duration-[1500ms] ease-in-out`}>
+            <div className={`absolute top-0 left-0  ${openStreetView ? "translate-y-0" : "translate-y-[-100%]"} w-[100vw] h-[65%] z-20 transition-all duration-[1500ms] ease-in-out`}>
                 <div className='w-full h-full overflow-hidden'>
                     <img src={`https://raw.githubusercontent.com/BetaNYC/floodgen-images/main/flood_image_output/${urlID}_F${streetViewImgFloodHeight}_V${streetViewImgAngle}.png`} alt="" className={`w-full h-[100%] lg:h-[135%] aspect-[787/750] `} />
                 </div>
 
                 <div className={`pt-[1.75rem] lg:pl-8`}>
-                    <div className='absolute top-6 left-8 flex gap-[1rem] ml-[4.5rem] lg:ml-[18.56rem] overflow-x-scroll [&::-webkit-scrollbar]:hidden'>
+                    <div className='absolute top-6 left-0 lg:left-8 flex gap-4 ml-24 lg:ml-[18.56rem] overflow-x-scroll [&::-webkit-scrollbar]:hidden'>
                         {
                             floodingBtnsData.map((f, i) => <FloodingButton key={f.title} clicked={clicked[f.title]} hovered={hovered[i]} title={f.title} src={clicked[f.title] || hovered[i] ? f.src_white : f.src} clickHandler={() => floodingButtonClickHandler(f.title)} mouseEnterHandler={() => mouseEnterHandler(i)} mouseLeaveHandler={mouseLeaveHandler} />)
                         }
@@ -150,7 +150,7 @@ const StreetView = () => {
                     <div className='absolute right-4  bottom-10 flex justify-center items-center w-[2.5rem] h-[2.5rem] bg-[rgba(255,255,255,0.65)] rounded-full cursor-pointer shadow-2xl' onClick={() => fullScreenStreetViewClickHandler("open")}>
                         <ArrowsPointingOutIcon className=' w-5 h-5 text-black opacity-75 cursor-pointer' />
                     </div>
-                    <div className='absolute left-[calc(50%_-_105px)] bottom-10 px-4 py-2 font-bold text-[0.75rem] bg-black bg-opacity-20'>Image {streetViewImgAngle}/8</div>
+                    <div className='absolute left-[calc(50%_-_45px)] lg:left-[calc(50%_-_105px)] bottom-10 px-4 py-2 font-bold text-[0.75rem] bg-black bg-opacity-20'>Image {streetViewImgAngle}/8</div>
                     <img src="/logos/fg_logo.png" className='absolute right-2 bottom-2 w-[15px] h-[17.54px]' alt="" />
                     {/* <div className='absolute left-0 bottom-0 px-2 py-2 flex justify-center gap-2 bg-black bg-opacity-20'>
                                 <img src="/logos/fg_logo.png" className='w-[15px] h-[17.54px]' alt="" />
@@ -162,7 +162,7 @@ const StreetView = () => {
             </div>
             {
                 streetViewImgFullscreen && (
-                    <div className='absolute top-0 left-0 flex justify-center items-center w-full h-full bg-black bg-opacity-70 z-30'>
+                    <div className='absolute top-0 left-0 flex justify-center items-center w-full h-full bg-black bg-opacity-70 z-30 '>
                         <div className='relative  lg:w-[1347px] h-full lg:h-[616px]'>
                             <img src={`https://raw.githubusercontent.com/BetaNYC/floodgen-images/main/flood_image_output/${urlID}_F${streetViewImgFloodHeight}_V${streetViewImgAngle}.png`} alt="" className='w-full h-full object-cover' />
                             <div className='absolute right-4 bottom-10 lg:top-10 flex justify-center items-center w-[2.5rem] h-[2.5rem] bg-[rgba(255,255,255,0.65)] rounded-full cursor-pointer shadow-2xl z-40' onClick={() => fullScreenStreetViewClickHandler("close")}>