solve the infobox mobile version

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

Hide file tree

Showing 2 changed files with 3 additions and 3 deletions.
diff --git a/components/infoPage/infoBox/InfoBox.tsx b/components/infoPage/infoBox/InfoBox.tsx
@@ -22,7 +22,7 @@ const InfoBox = () => {
     const [boxShown, setBoxShown] = useState(false)
 
     const { setOpenNarrative } = useContext(NarrativeContext) as NarrativeType
-    const { setOpenStreetView } = useContext(StreetViewContext) as StreetViewType
+    const { setOpenStreetView, openStreetView } = useContext(StreetViewContext) as StreetViewType
 
 
     const isDesktop = useMediaQuery({ query: "(min-width: 1024px)" })
@@ -64,7 +64,7 @@ const InfoBox = () => {
                     </div>
                 </div>
             </div>
-            <div className={`absolute top-6 left-4 lg: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" : "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/StreetInfo.tsx b/components/streetView/StreetInfo.tsx
@@ -22,7 +22,7 @@ const StreetInfo = ({ openStreetView }: Props) => {
   return (
     <>
       {
-        openStreetView && <div className={`absolute bottom-[-100%] flex flex-col lg:left-4 lg:top-6 px-4 pt-[1.56rem] lg:pt-4 w-full lg:w-[17.56rem] ${expanded ? "h-[100%] lg:h-[calc(100%_-_3.5rem)]" : "h-[9.375rem] lg:h-[9.5rem]"}  bg-white rounded-[1rem] z-20`}>
+        openStreetView && <div className={`absolute bottom-[-65%] flex flex-col lg:left-4 lg:top-6 px-4 pt-[1.56rem] lg:pt-4 w-full lg:w-[17.56rem] ${expanded ? "h-[65%] lg:h-[calc(100%_-_3.5rem)]" : "h-[9.375rem] lg:h-[9.5rem]"}  bg-white rounded-[1rem] z-40`}>
           <div className='flex justify-between items-center w-full'>
             <h2 className='font-bold text-heading text-content_black'>{selectedSitesFeatures.properties['Place']}</h2>