373 bug cannot scroll on phones because of globe (#404)

* fix globe phone scroll, set proper featured image height, fix scrollindicator position * fix zero norad id bug * remove unnecessary code * remove scroll indicator if user scrolls down beyond it
NTNU-SmallSat-Lab · May 9, 2024 · 77ebecc · 77ebecc
1 parent 974e2d4
commit 77ebecc
Show file tree

Hide file tree

Showing 10 changed files with 63 additions and 48 deletions.
diff --git a/frontend/public/images/earth-blue-marble.jpg b/frontend/public/images/earth-blue-marble.jpg
diff --git a/frontend/public/images/night-sky.png b/frontend/public/images/night-sky.png
diff --git a/frontend/src/app/_homeComponents/FeaturedImage.tsx b/frontend/src/app/_homeComponents/FeaturedImage.tsx
@@ -65,7 +65,7 @@ export default async function featuredImage() {
                     src={STRAPI_URL + featuredImageURL}
                     width={900}
                     height={900}
-                    className="bg-black-900 max-w-screen-xs object-contain sm:max-w-screen-sm md:max-w-screen-md "
+                    className="bg-black-900 max-w-screen-xxs object-contain sm:max-w-screen-sm md:max-w-screen-md "
                 />
 
                 {satelliteName && satelliteSlug ? (

diff --git a/frontend/src/app/_homeComponents/GlobeWithStats.tsx b/frontend/src/app/_homeComponents/GlobeWithStats.tsx
@@ -10,13 +10,13 @@ const SatelliteGlobeNoSSR = dynamic(() => import("./SatelliteGlobe"), {
 export default function GlobeWithStats() {
     return (
         <>
-            <div className="flex min-h-[calc(100vh-73px)] flex-col gap-0 bg-black sm:flex-row">
-                <div className="z-10 flex w-full flex-col border-b-2 border-l-2 border-r-2 border-t-2 border-gray-600 bg-black md:min-w-[500px] xl:w-1/3">
+            <div className="flex min-h-[calc(100vh-73px)] flex-col gap-0 bg-black md:flex-row">
+                <div className="z-10 flex flex-col border-b-2 border-l-2 border-r-2 border-t-2 border-gray-600 bg-black">
                     <SatelliteSelector />
                     <SatelliteDataHome />
                 </div>
 
-                <div className="relative z-0 h-full w-full grow overflow-x-hidden border-b-2 border-l-2 border-r-2 border-t-0 border-gray-600 bg-black sm:border-l-0 sm:border-t-2 xl:w-2/3">
+                <div className="relative z-0 h-full w-full grow overflow-x-hidden border-b-2 border-l-2 border-r-2 border-t-0 border-gray-600 bg-black md:border-l-0 md:border-t-2 xl:w-2/3">
                     <div className="flex h-full w-full items-center justify-center bg-black">
                         <SatelliteGlobeNoSSR />
                     </div>

diff --git a/frontend/src/app/_homeComponents/SatDropdown.tsx b/frontend/src/app/_homeComponents/SatDropdown.tsx
@@ -96,7 +96,11 @@ export default function SatDropdown() {
         const value = event.target.value;
         // Allow only numeric input
         if (/^\d*$/.test(value)) {
-            setNoradID(Number(value) as SatelliteNumber);
+            if (value.length == 0) {
+                setNoradID(undefined);
+            } else {
+                setNoradID(Number(value) as SatelliteNumber);
+            }
         }
     };
 

diff --git a/frontend/src/app/_homeComponents/SatelliteGlobe.tsx b/frontend/src/app/_homeComponents/SatelliteGlobe.tsx
@@ -31,12 +31,8 @@ export default function SatelliteGlobe() {
     useEffect(() => {
         if (chart.current && !globeRef.current) {
             globeRef.current = Globe()(chart.current)
-                .globeImageUrl(
-                    "//unpkg.com/three-globe/example/img/earth-blue-marble.jpg",
-                )
-                .backgroundImageUrl(
-                    "//unpkg.com/three-globe/example/img/night-sky.png",
-                )
+                .globeImageUrl("/images/earth-blue-marble.jpg")
+                .backgroundImageUrl("/images/night-sky.png")
                 .objectLat("lat")
                 .objectLng("lng")
                 .objectAltitude("alt")
@@ -67,19 +63,35 @@ export default function SatelliteGlobe() {
             globeRef.current.controls().enableRotate = true;
 
             // lock the initial height of the globe
-            const setInitialGlobeSize = () => {
+            const setGlobeSize = () => {
                 if (globeRef.current && chart.current) {
-                    const { width, height } =
-                        chart.current.getBoundingClientRect();
-                    globeRef.current.width(width);
-                    globeRef.current.height(height - 76);
+                    const { width } = chart.current.getBoundingClientRect();
 
-                    console.log(width, height);
+                    globeRef.current.width(width);
+                    if (typeof window !== "undefined") {
+                        let windowWidth = window.innerWidth;
+                        let windowHeight = window.innerHeight;
+
+                        // If the window width is less than 768, disable controls and set height to window height
+                        if (windowWidth <= 768) {
+                            globeRef.current.controls().enabled = false;
+                            globeRef.current.controls().enableRotate = false;
+                            globeRef.current.height(windowWidth); // Minus navbar height and stats height
+                            // Set touch action to auto to allow for scrolling on mobile
+                            let globeElement =
+                                globeRef.current.renderer().domElement;
+                            globeElement.style.touchAction = "auto";
+                        } else {
+                            globeRef.current.controls().enabled = true;
+                            globeRef.current.controls().enableRotate = true;
+                            globeRef.current.height(windowHeight - 73); // Minus navbar height
+                        }
+                    }
                 }
             };
 
             // Initially set the globe size to match the container
-            setInitialGlobeSize();
+            setGlobeSize();
 
             // Set initial positions of satellites
             let initialPositions: initpostype[] = Object.entries(satNumToEntry)
@@ -109,27 +121,17 @@ export default function SatelliteGlobe() {
                 globeRef.current.objectsData(initialPositions);
             }
 
-            // Function to update the globe size based on the current size of the chart
-            const setGlobeSize = () => {
-                if (globeRef.current && chart.current) {
-                    const { width, height } =
-                        chart.current.getBoundingClientRect();
-                    globeRef.current.width(width);
-                    globeRef.current.height(width <= 640 ? width : height - 76);
-                }
-            };
-
             // Add resize event listener if the window is defined (i.e., in client-side environment)
             if (typeof window !== "undefined") {
                 window.addEventListener("resize", setGlobeSize);
             }
 
             // Cleanup function to remove the resize event listener
-            return () => {
-                if (typeof window !== "undefined") {
-                    window.removeEventListener("resize", setGlobeSize);
-                }
-            };
+            // return () => {
+            //     if (typeof window !== "undefined") {
+            //         window.removeEventListener("resize", setGlobeSize);
+            //     }
+            // };
         }
     }, [satNumToEntry, setSelectedSatellite]);
 
@@ -197,5 +199,5 @@ export default function SatelliteGlobe() {
         return () => clearInterval(intervalId);
     }, [satNumToEntry, selectedSatellite]);
 
-    return <div id="chart" className="" ref={chart}></div>;
+    return <div id="chart" ref={chart}></div>;
 }
diff --git a/frontend/src/app/_homeComponents/ScrollIndicator.tsx b/frontend/src/app/_homeComponents/ScrollIndicator.tsx
@@ -1,7 +1,8 @@
 "use client";
 import { motion, useScroll } from "framer-motion";
-import React, { useRef } from "react";
+import React, { useEffect, useRef } from "react";
 import type { SVGProps } from "react";
+import { inView } from "framer-motion";
 
 export function UiwDown(props: SVGProps<SVGSVGElement>) {
     return (
@@ -27,12 +28,26 @@ export default function ScrollIndicator() {
         offset: ["start start", "end end"],
     });
 
+    useEffect(() => {
+        if (ref.current) {
+            inView(ref.current, () => {
+                return () => {
+                    ref.current?.style.setProperty(
+                        "display",
+                        "none",
+                        "important",
+                    );
+                };
+            });
+        }
+    }, []);
+
     return (
         <motion.div
             ref={ref}
             transition={{ duration: 0.3 }}
             style={{ opacity: scrollYProgress }}
-            className="absolute -bottom-3 left-1/2 z-50 text-center"
+            className="absolute -bottom-3 z-50 hidden self-center text-center md:block"
         >
             <UiwDown
                 className={

diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
@@ -61,8 +61,4 @@
     body {
         @apply bg-background text-foreground;
     }
-
-    html {
-        @apply snap-y snap-proximity;
-    }
 }
diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
@@ -10,13 +10,11 @@ export default async function Home() {
         <>
             <ScrollIndicator></ScrollIndicator>
             {/* Globe */}
-            <div className="snap-end">
-                <GlobeWithStats />
-            </div>
-            <div className="snap-center">
-                {/* Mission Statement Section */}
-                <MissionStatement />
-            </div>
+
+            <GlobeWithStats />
+
+            {/* Mission Statement Section */}
+            <MissionStatement />
 
             {/* Projects Section */}
             <FeaturedProjects />

diff --git a/frontend/src/components/ui/hero.tsx b/frontend/src/components/ui/hero.tsx
@@ -12,7 +12,7 @@ const Hero = React.forwardRef<HTMLDivElement, HeroProps>(
         <div
             ref={ref}
             {...props}
-            className={`flex min-h-svh w-full flex-col items-center justify-center ${className}`}
+            className={`flex min-h-dvh w-full flex-col items-center justify-center ${className}`}
         >
             <h1 className="mb-4  text-center text-5xl font-bold sm:text-7xl md:text-8xl">
                 {title}
-Original file line number
+Diff line change
@@ Expand Up / @@ -61,8 +61,4 @@ @@
         body {
             @apply bg-background text-foreground;
         }
-        html {
-            @apply snap-y snap-proximity;
-        }
     }