From 66345091a79218944b640e27f5b30bf2bdb8ba07 Mon Sep 17 00:00:00 2001
From: EliasKnudsen <38568225+EliasKnudsen@users.noreply.github.com>
Date: Wed, 17 Apr 2024 14:25:22 +0200
Subject: [PATCH] 308 make homepage responsive (#313)

* Satellite sdatahome responsive on phones 300 max screen width #308

* Responsivness

* Fix table on satellites to be more responsive #308

* Lint and prettier #308

* Navbar aschild
---
 frontend/src/app/page.tsx                     |  2 +-
 frontend/src/app/satellites/page.tsx          | 54 ++----------------
 frontend/src/components/Navbar.tsx            | 39 ++++++++-----
 .../components/SatelliteResponsiveTable.tsx   | 57 +++++++++++++++++++
 .../satelliteData/SatelliteDataHome.tsx       | 10 ++--
 .../satelliteData/SatelliteStatsTableRow.tsx  | 31 ++++++----
 frontend/tailwind.config.ts                   |  4 ++
 7 files changed, 119 insertions(+), 78 deletions(-)
 create mode 100644 frontend/src/components/SatelliteResponsiveTable.tsx

diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
index f23b569..cc36579 100644
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -25,7 +25,7 @@ export default async function Home() {
         <>
             <div className="flex min-h-[calc(100vh-73px)] flex-col gap-0 xl:flex-row">
                 {/* Stats Container */}
-                <div className="z-10 flex w-full min-w-[500px] flex-col border-2 border-r border-gray-600 bg-black xl:w-1/3">
+                <div className="z-10 flex w-full flex-col border-2 border-r border-gray-600 bg-black md:min-w-[500px] xl:w-1/3">
                     <SatelliteSelector />
                     <SatelliteDataHome />
                 </div>
diff --git a/frontend/src/app/satellites/page.tsx b/frontend/src/app/satellites/page.tsx
index 4502e7b..958067d 100644
--- a/frontend/src/app/satellites/page.tsx
+++ b/frontend/src/app/satellites/page.tsx
@@ -1,18 +1,6 @@
 import { gql } from "@/__generated__/gql";
-import {
-    PageHeaderAndSubtitle,
-    PageHeader,
-    PageSubtitle,
-} from "@/components/PageHeader";
-import SatelliteStatsTableRow from "@/components/satelliteData/SatelliteStatsTableRow";
 import { getClient } from "@/lib/ApolloClient";
-import {
-    Table,
-    TableBody,
-    TableHead,
-    TableHeader,
-    TableRow,
-} from "@/components/shadcn/table";
+import SatelliteResponsiveTable from "@/components/SatelliteResponsiveTable";
 
 const GET_SATELLITES = gql(`
 query GET_SATELLITES {
@@ -45,41 +33,11 @@ export default async function Satellites() {
         });
 
         return (
-            <div className="flex w-full flex-col items-center justify-center">
-                <PageHeaderAndSubtitle>
-                    <PageHeader>Satellites</PageHeader>
-                    <PageSubtitle>
-                        Here are the satellites we have worked on. Click on them
-                        to see more details.
-                    </PageSubtitle>
-                </PageHeaderAndSubtitle>
-                <Table className="table-auto border-collapse rounded-md border-b border-white shadow">
-                    <TableHeader>
-                        <TableRow className="border-y border-white px-3 py-2 text-left text-white">
-                            <TableHead className="px-6">Satellite</TableHead>
-                            <TableHead className="px-6">Speed</TableHead>
-                            <TableHead className="px-6">Altitude</TableHead>
-                            <TableHead className="px-6">Latitude</TableHead>
-                            <TableHead className="px-6">Longitude</TableHead>
-                        </TableRow>
-                    </TableHeader>
-                    <TableBody>
-                        {graphqlData?.data?.satellites?.data?.map(
-                            (satellite: any) => {
-                                let satelliteName =
-                                    satellite?.attributes?.name ?? "";
-                                return (
-                                    <SatelliteStatsTableRow
-                                        key={satellite.id}
-                                        satName={satelliteName}
-                                        slug={satellite?.attributes?.slug}
-                                    />
-                                );
-                            },
-                        )}
-                    </TableBody>
-                </Table>
-            </div>
+            <>
+                <SatelliteResponsiveTable
+                    satellites={graphqlData.data.satellites?.data}
+                ></SatelliteResponsiveTable>
+            </>
         );
     } catch (error) {
         console.error("Error fetching satellites:", error);
diff --git a/frontend/src/components/Navbar.tsx b/frontend/src/components/Navbar.tsx
index 444d5ed..8861eb9 100644
--- a/frontend/src/components/Navbar.tsx
+++ b/frontend/src/components/Navbar.tsx
@@ -6,6 +6,7 @@ import {
     Drawer,
     DrawerContent,
     DrawerTrigger,
+    DrawerClose,
 } from "@/components/shadcn/drawer";
 import Image from "next/image";
 
@@ -126,16 +127,20 @@ export default function Navbar() {
         return "ghost";
     };
 
+    const handleHomeClick = () => {
+        window.location.href = "/";
+    };
+
     return (
         <nav className="flex w-full items-center justify-between border-b border-x-neutral-600 bg-background p-4 text-foreground">
             <div>
                 <Link href="/">
                     <Image
                         width={256}
-                        height={0}
+                        height={70} // Adjusted height
                         src="/images/ntnu-white-logo.svg"
                         alt="logo"
-                        className="w-64 min-w-64"
+                        onClick={handleHomeClick}
                     />
                 </Link>
             </div>
@@ -149,29 +154,35 @@ export default function Navbar() {
                             href="/blog"
                             className="py-5 duration-200 hover:bg-primary"
                         >
-                            <Button variant={"ghost"} className="text-left">
-                                <MingcuteEdit4Line />
-                                Blog
-                            </Button>
+                            <DrawerClose asChild>
+                                <Button variant={"ghost"} className="text-left">
+                                    <MingcuteEdit4Line />
+                                    Blog
+                                </Button>
+                            </DrawerClose>
                         </Link>
 
                         <Link
                             href="/projects"
                             className="py-5 duration-200 hover:bg-primary"
                         >
-                            <Button variant={"ghost"} className="text-left">
-                                <CodiconGithubProject />
-                                Projects
-                            </Button>
+                            <DrawerClose asChild>
+                                <Button variant={"ghost"} className="text-left">
+                                    <CodiconGithubProject />
+                                    Projects
+                                </Button>
+                            </DrawerClose>
                         </Link>
                         <Link
                             href="/satellites"
                             className="py-5 duration-200 hover:bg-primary"
                         >
-                            <Button variant={"ghost"} className="text-left">
-                                <SolarSatelliteLineDuotone />
-                                Satellites
-                            </Button>
+                            <DrawerClose asChild>
+                                <Button variant={"ghost"} className="text-left">
+                                    <SolarSatelliteLineDuotone />
+                                    Satellites
+                                </Button>
+                            </DrawerClose>
                         </Link>
                     </div>
                 </DrawerContent>
diff --git a/frontend/src/components/SatelliteResponsiveTable.tsx b/frontend/src/components/SatelliteResponsiveTable.tsx
new file mode 100644
index 0000000..2462ad0
--- /dev/null
+++ b/frontend/src/components/SatelliteResponsiveTable.tsx
@@ -0,0 +1,57 @@
+"use client";
+import {
+    PageHeaderAndSubtitle,
+    PageHeader,
+    PageSubtitle,
+} from "@/components/PageHeader";
+import SatelliteStatsTableRow from "@/components/satelliteData/SatelliteStatsTableRow";
+import {
+    Table,
+    TableBody,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from "@/components/shadcn/table";
+
+export default function SatelliteResponsiveTable({ satellites }: any) {
+    return (
+        <div className="flex w-full flex-col items-center justify-center">
+            <PageHeaderAndSubtitle>
+                <PageHeader>Satellites</PageHeader>
+                <PageSubtitle>
+                    Here are the satellites we have worked on. Click on them to
+                    see more details.
+                </PageSubtitle>
+            </PageHeaderAndSubtitle>
+            <Table className="table-auto border-collapse rounded-md border-b border-white shadow">
+                <TableHeader>
+                    <TableRow className="border-y border-white px-3 py-2 text-left text-white">
+                        <TableHead className="px-6">Satellite</TableHead>
+                        <TableHead className="px-6">Speed</TableHead>
+                        <TableHead className=" hidden px-6 lg:table-cell">
+                            Altitude
+                        </TableHead>
+                        <TableHead className="hidden px-6 md:table-cell">
+                            Latitude
+                        </TableHead>
+                        <TableHead className="hidden px-6 md:table-cell ">
+                            Longitude
+                        </TableHead>
+                    </TableRow>
+                </TableHeader>
+                <TableBody>
+                    {satellites.map((satellite: any) => {
+                        let satelliteName = satellite?.attributes?.name ?? "";
+                        return (
+                            <SatelliteStatsTableRow
+                                key={satellite.id}
+                                satName={satelliteName}
+                                slug={satellite?.attributes?.slug}
+                            />
+                        );
+                    })}
+                </TableBody>
+            </Table>
+        </div>
+    );
+}
diff --git a/frontend/src/components/satelliteData/SatelliteDataHome.tsx b/frontend/src/components/satelliteData/SatelliteDataHome.tsx
index 687c5d4..79e58c4 100644
--- a/frontend/src/components/satelliteData/SatelliteDataHome.tsx
+++ b/frontend/src/components/satelliteData/SatelliteDataHome.tsx
@@ -42,8 +42,8 @@ export default function SatelliteDataHome() {
 
     return (
         <div>
-            <div className="grid grid-cols-2 ">
-                <div className="border-y border-r border-gray-600 bg-black p-5">
+            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-1">
+                <div className="border-y border-gray-600 bg-black p-5 md:border-r">
                     <p className="text-xl font-medium">
                         {satelliteInfo
                             ? satelliteInfo.velocity + " km/s"
@@ -51,7 +51,7 @@ export default function SatelliteDataHome() {
                     </p>
                     <p className="text-gray-400">Velocity</p>
                 </div>
-                <div className="border-y border-l border-gray-600 bg-black p-5">
+                <div className="border-y border-gray-600 bg-black p-5 md:border-l">
                     <p className="text-xl font-medium">
                         {satelliteInfo
                             ? satelliteInfo.altitude + " km"
@@ -59,7 +59,7 @@ export default function SatelliteDataHome() {
                     </p>
                     <p className="text-gray-400">Altitude</p>
                 </div>
-                <div className="border-y border-r border-gray-600 bg-black p-5">
+                <div className="border-y border-gray-600 bg-black p-5 md:border-r">
                     <p className="text-xl font-medium">
                         {satelliteInfo
                             ? satelliteInfo.latitudeDeg + "° N"
@@ -67,7 +67,7 @@ export default function SatelliteDataHome() {
                     </p>
                     <p className="text-gray-400">Latitude</p>
                 </div>
-                <div className="border-y border-l border-gray-600 bg-black p-5">
+                <div className="border-y border-gray-600 bg-black p-5 md:border-l">
                     <p className="text-xl font-medium">
                         {satelliteInfo
                             ? satelliteInfo.longitudeDeg + "° E"
diff --git a/frontend/src/components/satelliteData/SatelliteStatsTableRow.tsx b/frontend/src/components/satelliteData/SatelliteStatsTableRow.tsx
index b6c3097..8c2acaf 100644
--- a/frontend/src/components/satelliteData/SatelliteStatsTableRow.tsx
+++ b/frontend/src/components/satelliteData/SatelliteStatsTableRow.tsx
@@ -46,10 +46,10 @@ export default function SatelliteStatsTableRow({
         return (
             <tr>
                 <td className="px-6 py-4">Loading...</td>
-                <td className="px-6 py-4">Loading...</td>
-                <td className="px-6 py-4">Loading...</td>
-                <td className="px-6 py-4">Loading...</td>
-                <td className="px-6 py-4">Loading...</td>
+                <td className="px-6">Loading...</td>
+                <td className="px-6">Loading...</td>
+                <td className="px-6">Loading...</td>
+                <td className="px-6">Loading...</td>
             </tr>
         );
     }
@@ -61,19 +61,30 @@ export default function SatelliteStatsTableRow({
     return (
         <TableRow
             onClick={handleClick}
-            className="hover: cursor-pointer hover:bg-white hover:bg-white hover:text-black"
+            className="cursor-pointer hover:bg-white hover:text-black"
         >
-            <TableCell className="px-6 py-4">{satName}</TableCell>
-            <TableCell className="px-6 py-4">
+            <TableCell className="px-6 py-4" style={{ width: "20%" }}>
+                {satName}
+            </TableCell>
+            <TableCell className="px-6 py-4" style={{ width: "20%" }}>
                 {satelliteInfo.velocity + " km/s"}
             </TableCell>
-            <TableCell className="px-6 py-4">
+            <TableCell
+                className="hidden px-6 py-4 lg:table-cell"
+                style={{ width: "20%" }}
+            >
                 {satelliteInfo.altitude + " km"}
             </TableCell>
-            <TableCell className="px-6 py-4">
+            <TableCell
+                className="hidden px-6 py-4 md:table-cell"
+                style={{ width: "20%" }}
+            >
                 {satelliteInfo.latitudeDeg + "° N"}
             </TableCell>
-            <TableCell className="px-6 py-4">
+            <TableCell
+                className="hidden px-6 py-4 md:table-cell"
+                style={{ width: "20%" }}
+            >
                 {satelliteInfo.longitudeDeg + "° E"}
             </TableCell>
         </TableRow>
diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts
index 06e306a..2b872d3 100644
--- a/frontend/tailwind.config.ts
+++ b/frontend/tailwind.config.ts
@@ -18,6 +18,10 @@ const config = {
             },
         },
         extend: {
+            screens: {
+                xs: "400px",
+                xxs: "300px",
+            },
             colors: {
                 // These should all be defined in the global CSS file and used with the var(--color) syntax. Preferably using hsl
                 border: "var(--border)",