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
NTNU-SmallSatLab · Apr 17, 2024 · 6634509 · 6634509
1 parent e1240f6
commit 6634509
Show file tree

Hide file tree

Showing 7 changed files with 119 additions and 78 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -42,32 +42,32 @@ 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"
                             : "Loading..."}
                     </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"
                             : "Loading..."}
                     </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"
                             : "Loading..."}
                     </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
@@ -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
@@ -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)",