make landing page globe responsive

anomic30 · Oct 20, 2022 · fbe47bd · fbe47bd
1 parent 78dfb38
commit fbe47bd
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 7 deletions.
diff --git a/client/src/components/globe/Globe.jsx b/client/src/components/globe/Globe.jsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState } from 'react'
+import { memo, useCallback, useEffect, useRef, useState } from 'react'
 import { MeshBasicMaterial } from 'three'
 import { default as ReactGlobe } from 'react-globe.gl'
 import countries from '../../assets/datasets/ne_110m_admin_0_countries.json'
@@ -159,4 +159,4 @@ function Globe({width, height, backgroundColor, dotColor}) {
     )
 }
 
-export default Globe
+export default memo(Globe)
diff --git a/client/src/pages/landing/Landing.css b/client/src/pages/landing/Landing.css
@@ -661,7 +661,7 @@ text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.25);
 }
 
 @media screen and (max-width: 1320px){
-    .hero-con .right-con img{
+    .hero-con .right-con * {
         display: none;
     }
 

diff --git a/client/src/pages/landing/Landing.jsx b/client/src/pages/landing/Landing.jsx
@@ -1,4 +1,4 @@
-import React, { useContext,useEffect,useState } from 'react'
+import React, { useContext,useEffect,useRef,useState } from 'react'
 import './Landing.css'
 import landing_gradient from '../../assets/images/landing-gradient2.png'
 import feature_gradient from '../../assets/images/landing-center.png'
@@ -25,7 +25,9 @@ import Globe from '../../components/globe/Globe'
 function Landing() {
     const navigate = useNavigate();
     const [user, setUser] = useContext(UserContext);
+    const globeContainerRef = useRef();
     const [isVisible, setIsVisible] = useState(false);
+    const [globeSize, setGlobeSize] = useState({ width: 0, height: 0 });
 
     useEffect(()=>{
         Aos.init({duration:1000})
@@ -55,6 +57,21 @@ function Landing() {
         return () => window.removeEventListener("scroll", listentoScroll);
     }, []);
 
+    const resizeGlobe = () => {
+        const width = globeContainerRef.current?.clientWidth * 1.2 ?? 0;
+        const height = width;
+        setGlobeSize({ width, height });
+    };
+
+    useEffect(() => {
+        window.addEventListener("resize", resizeGlobe);
+        return () => window.removeEventListener("resize", resizeGlobe);
+    }, []);
+
+    useEffect(() => {
+        resizeGlobe();
+    }, [globeContainerRef]);
+
     return (
         <>
         {isVisible && (
@@ -97,11 +114,11 @@ function Landing() {
                         </div>
                     </div>
                 </div>
-                <div className="right-con">
+                <div className="right-con" ref={globeContainerRef}>
                     {/* <img src={globe} alt="Globe" /> */}
                     <Globe
-                        width={525}
-                        height={525}
+                        width={globeSize.width}
+                        height={globeSize.height}
                         backgroundColor={'#121916'}
                         dotColor={'#00ffa8'}
                     />