feat(frontend): ✨ Update satellite page layout and map compo… (#312)

* feat(frontend): ✨ Update satellite page layout and map component + navbar fix * feat(frontend): ✨ prettier write * small fixes with styling * underline noradID * prettier --------- Co-authored-by: Lukas <lukas@thrane.name>
NTNU-SmallSatLab · Apr 22, 2024 · 21e89f6 · 21e89f6
1 parent 1a93108
commit 21e89f6
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 25 deletions.
diff --git a/frontend/src/app/satellites/[satelliteSlug]/page.tsx b/frontend/src/app/satellites/[satelliteSlug]/page.tsx
@@ -52,7 +52,7 @@ export default async function SatelliteInfoPage({
 
     return (
         <>
-            <div className="flex flex-col items-center ">
+            <div className="flex flex-col items-center">
                 <PageHeaderAndSubtitle>
                     <PageHeader>{satelliteInfo.name}</PageHeader>
                     <PageSubtitle>
@@ -62,22 +62,24 @@ export default async function SatelliteInfoPage({
                     </PageSubtitle>
                 </PageHeaderAndSubtitle>
 
-                {satelliteInfo.launchDate ? (
-                    <div className="mt-6 w-full">
-                        <LaunchDateCountDown
-                            launchDateString={satelliteInfo.launchDate}
-                        ></LaunchDateCountDown>
-                    </div>
-                ) : null}
                 {/* Container for satname, stats and sat image */}
                 {satelliteInfo.noradId ? (
                     <div className="flex w-full flex-col border-2 border-gray-600 xl:flex-row">
                         {/* Stats Container */}
                         <div className="z-10 flex w-full flex-col border-gray-600 xl:border-r-2">
                             <div className="border-b border-gray-600 bg-black p-5">
-                                {satelliteInfo.noradId
-                                    ? "NORAD ID: " + satelliteInfo.noradId
-                                    : null}
+                                {satelliteInfo.noradId ? (
+                                    <div className="flex flex-row">
+                                        <p>NORAD ID: </p>
+                                        <a
+                                            href={`https://www.n2yo.com/satellite/?s=${satelliteInfo.noradId}`}
+                                            target="_blank"
+                                            className="ml-2 underline"
+                                        >
+                                            {satelliteInfo.noradId}
+                                        </a>
+                                    </div>
+                                ) : null}
                                 <p className="text-gray-400">
                                     {satelliteInfo.massKg
                                         ? "Mass: " +
@@ -115,8 +117,17 @@ export default async function SatelliteInfoPage({
                     </div>
                 ) : null}
 
+                {/* Container for launch date */}
+                {satelliteInfo.launchDate ? (
+                    <div className="w-full">
+                        <LaunchDateCountDown
+                            launchDateString={satelliteInfo.launchDate}
+                        ></LaunchDateCountDown>
+                    </div>
+                ) : null}
+
                 {/* Container for body content */}
-                <div className="mt-6">
+                <div className="mt-6 px-4 sm:px-0">
                     <BlockRendererClient content={satelliteInfo.content} />
                 </div>
             </div>

diff --git a/frontend/src/components/2dmap/Map2d.tsx b/frontend/src/components/2dmap/Map2d.tsx
@@ -8,7 +8,7 @@ import {
     predictFuturePositions,
 } from "@/lib/convertSatrec";
 
-const updateInterval = 50;
+const updateInterval = 100;
 
 export default function Map2d({ satName }: { satName: string }) {
     const { satelliteData } = useSatelliteStore();
@@ -94,9 +94,9 @@ export default function Map2d({ satName }: { satName: string }) {
 
     return (
         <div ref={containerRef} className="w-full">
-            <div className="flex items-center justify-between bg-black px-6 py-4">
-                <h1 className="text-lg font-semibold text-white">
-                    Current and Predicted Satellite Position
+            <div className="flex flex-col items-center justify-between bg-black px-6 py-4 md:flex-row">
+                <h1 className="text-center text-lg font-semibold text-white md:text-left">
+                    Satellite Position
                 </h1>
                 <div className="flex flex-col items-end">
                     <input
@@ -106,11 +106,11 @@ export default function Map2d({ satName }: { satName: string }) {
                         step="60"
                         value={inputValue}
                         onChange={handleSliderChange}
-                        className="rounded-lg bg-gray-200 py-2 text-black focus:outline-none focus:ring"
+                        className="w-full rounded-lg bg-gray-200 py-2 text-black focus:outline-none focus:ring"
                     />
                     <p className="mt-2 font-thin">
-                        Positions {projectionAmount} minutes into the{" "}
-                        {projectionAmount >= 0 ? "future" : "past"}
+                        Projected positions {projectionAmount / 60} hours into
+                        the {projectionAmount >= 0 ? "future" : "past"}
                     </p>
                 </div>
             </div>

diff --git a/frontend/src/components/Navbar.tsx b/frontend/src/components/Navbar.tsx
@@ -122,7 +122,7 @@ export function CodiconGithubProject(props: SVGProps<SVGSVGElement>) {
 export default function Navbar() {
     const pathname = usePathname();
     const getButtonVariant = (path: string) => {
-        if (path === pathname) {
+        if (pathname.includes(path)) {
             return;
         }
         return "ghost";

diff --git a/frontend/src/components/ui/launchDateCountDown.tsx b/frontend/src/components/ui/launchDateCountDown.tsx
@@ -1,5 +1,4 @@
-"use client"; // This directive marks the component for client-side execution
-
+"use client";
 import React, { useState, useEffect } from "react";
 
 type LaunchDateCountDownProps = {
@@ -62,11 +61,11 @@ const LaunchDateCountDown: React.FC<LaunchDateCountDownProps> = ({
                 )}
             </div>
 
-            <div className="flex justify-center pt-3">
-                <hr className="w-32 self-center border-white"></hr>
+            <div className="mt-8 flex justify-center">
+                <hr className="w-full max-w-[350px] self-center border-white"></hr>
             </div>
 
-            <div className="pt-5">
+            <div className="mt-4">
                 <div className="rounded-lg p-4 text-center text-4xl tracking-widest text-white shadow-md">
                     {displayTime.length > 0 && (
                         <div className="flex justify-center">