From 5158e6f8afd74044beac8253add07c1b16390a44 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Magnus=20Alexander=20Str=C3=B8mseng?= Date: Tue, 2 Apr 2024 20:12:14 +0200 Subject: [PATCH] 180 fix coloredSection opacity, style globe on frontpage (#188) * feat(frontend): change coloredSection opacity, and hero pading * feat(frontend): :art: create new example framer motion animated divs * position globe in grid and resize it automatically --- frontend/package-lock.json | 25 ++++++++ frontend/package.json | 1 + frontend/src/app/page.tsx | 33 +++++------ frontend/src/components/map/MyGlobe.tsx | 29 ++++----- frontend/src/components/ui/coloredSection.tsx | 14 ++++- .../src/components/ui/scrollLinkedDiv.tsx | 59 +++++++++++++++++++ 6 files changed, 125 insertions(+), 36 deletions(-) create mode 100644 frontend/src/components/ui/scrollLinkedDiv.tsx diff --git a/frontend/package-lock.json b/frontend/package-lock.json index c6be8ab..c4420ad 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -23,6 +23,7 @@ "chartjs-adapter-luxon": "^1.3.1", "class-variance-authority": "^0.7.0", "clsx": "^2.1.0", + "framer-motion": "^11.0.24", "globe.gl": "^2.32.2", "gsap": "^3.12.5", "lucide-react": "^0.314.0", @@ -10328,6 +10329,30 @@ "simplesignal": "^2.1.6" } }, + "node_modules/framer-motion": { + "version": "11.0.24", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.0.24.tgz", + "integrity": "sha512-l2iM8NR53qtcujgAqYvGPJJGModPNWEVUaATRDLfnaLvUoFpImovBm0AHalSSsY8tW6knP8mfJTW4WYGbnAe4w==", + "dependencies": { + "tslib": "^2.4.0" + }, + "peerDependencies": { + "@emotion/is-prop-valid": "*", + "react": "^18.0.0", + "react-dom": "^18.0.0" + }, + "peerDependenciesMeta": { + "@emotion/is-prop-valid": { + "optional": true + }, + "react": { + "optional": true + }, + "react-dom": { + "optional": true + } + } + }, "node_modules/from2": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/from2/-/from2-2.3.0.tgz", diff --git a/frontend/package.json b/frontend/package.json index 37b4d8e..cef4828 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -28,6 +28,7 @@ "chartjs-adapter-luxon": "^1.3.1", "class-variance-authority": "^0.7.0", "clsx": "^2.1.0", + "framer-motion": "^11.0.24", "globe.gl": "^2.32.2", "gsap": "^3.12.5", "lucide-react": "^0.314.0", diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx index 937db5c..719e792 100644 --- a/frontend/src/app/page.tsx +++ b/frontend/src/app/page.tsx @@ -8,15 +8,9 @@ const HOST_URL = process.env.HOST_URL; import Image from "next/image"; import Link from "next/link"; -// Dynamic import because of leaflet and globe.gl ssr problem with next.js -import dynamic from "next/dynamic"; import SatelliteFetcher from "@/components/map/SatelliteFetcher"; import SatelliteDataTable from "@/components/satelliteData/SatelliteDataTable"; -const MyCustomMap = dynamic(() => import("@/components/map/MyCustomMap"), { - ssr: false, -}); - const GET_MOST_RECENT_IMAGE = gql(` query MostRecentImages { mostRecentImages(sort: ["publishedAt:desc"]) { @@ -62,19 +56,19 @@ export default async function Home() { } return ( -
+ <>
- - - - - - -
- - +
+ + + + + + +
- + + -
+

Projects

@@ -133,6 +127,7 @@ export default async function Home() {

+

Most recent picture

@@ -147,6 +142,6 @@ export default async function Home() {
-
+ ); } diff --git a/frontend/src/components/map/MyGlobe.tsx b/frontend/src/components/map/MyGlobe.tsx index e930d95..5f59312 100644 --- a/frontend/src/components/map/MyGlobe.tsx +++ b/frontend/src/components/map/MyGlobe.tsx @@ -40,7 +40,6 @@ export default function MyGlobe({ satelliteDatas: string; // Expects a string of TLE strings such as the example files in the datasets folder }) { const chart = React.useRef(null); - const timeLogger = React.useRef(null); // useEffect is used because we want to run the code only once when the component is mounted useEffect(() => { @@ -54,14 +53,26 @@ export default function MyGlobe({ .objectLng("lng") .objectAltitude("alt") .objectFacesSurface(false) - .objectLabel("name"); + .objectLabel("name") + .backgroundColor("rgba(0,0,0,0)") + .width(window.innerWidth / 2); + + window.addEventListener("resize", (event) => { + let target = event.target as Window; + if (target.innerWidth != null && target.innerHeight != null) { + myGlobe.width(target.innerWidth / 2); + // myGlobe.height(event.target.innerHeight / 2); + } + }); // Set initial camera distance setTimeout(() => myGlobe.pointOfView({ altitude: 3.5 })); // Disable OrbitControls and enable auto-rotation // myGlobe.controls().autoRotate = true; - // myGlobe.controls().enabled = false; + myGlobe.controls().enabled = true; + // Disable zooming + myGlobe.controls().enableZoom = false; // Invert rotation direction // myGlobe.controls().autoRotateSpeed *= -1; @@ -102,9 +113,6 @@ export default function MyGlobe({ requestAnimationFrame(frameTicker); time = new Date(+time + TIME_STEP); - if (timeLogger.current) { - timeLogger.current.innerText = time.toString(); - } // Update satellite positions const gmst = satellite.gstime(time); @@ -128,14 +136,7 @@ export default function MyGlobe({ return ( <> -
-
-
-
+
); } diff --git a/frontend/src/components/ui/coloredSection.tsx b/frontend/src/components/ui/coloredSection.tsx index 88a6669..13cb503 100644 --- a/frontend/src/components/ui/coloredSection.tsx +++ b/frontend/src/components/ui/coloredSection.tsx @@ -4,9 +4,17 @@ import { cn } from "@/lib/utils"; const ColoredSection = React.forwardRef< HTMLDivElement, React.HTMLAttributes ->(({ className, ...props }, ref) => ( -
-)); +>(({ className, ...props }, ref) => { + return ( + <> +
+ + ); +}); ColoredSection.displayName = "ColoredSection"; // Add display name diff --git a/frontend/src/components/ui/scrollLinkedDiv.tsx b/frontend/src/components/ui/scrollLinkedDiv.tsx new file mode 100644 index 0000000..8d92f47 --- /dev/null +++ b/frontend/src/components/ui/scrollLinkedDiv.tsx @@ -0,0 +1,59 @@ +"use client"; +import { motion, useScroll } from "framer-motion"; +import { useRef } from "react"; +import React from "react"; +function ScrollLinkedDiv({ + transformOrigin = "left", +}: { + transformOrigin?: string; +}) { + const ref = useRef(null); + const { scrollYProgress } = useScroll({ + target: ref, + offset: ["end end", "start start"], + }); + + return ( + + ); +} + +function WindowScrollLinkedDiv({ children }: { children?: React.ReactNode }) { + const ref = useRef(null); + const { scrollYProgress } = useScroll({ + target: ref, + offset: ["end end", "start start"], + }); + return ( + <> + + {children} + + + ); +} + +export { ScrollLinkedDiv, WindowScrollLinkedDiv };