scheduler: ui overhaul

- mobile ui set up - cards reduced in size
swat-sccs · Nov 12, 2024 · 2e2a142 · 2e2a142
1 parent d4c7bb0
commit 2e2a142
Show file tree

Hide file tree

Showing 10 changed files with 96 additions and 97 deletions.
diff --git a/app/admin/page.tsx b/app/admin/page.tsx
@@ -101,7 +101,7 @@ export default function AdminPage() {
         <div className="w-[90vw]">
           <Table
             isHeaderSticky
-            className="overflow-scroll"
+            className="overflow-scroll scrollbar-thin scrollbar-thumb-accent-500 scrollbar-track-transparent"
             fullWidth
             aria-label="Rating table with dynamic content(ratings)"
           >

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -52,9 +52,9 @@ export default function RootLayout({
                 defaultTheme: "dark",
               }}
             >
-              <div className="relative flex flex-col h-screen ">
+              <div className="flex flex-col h-screen ">
                 <Navbar />
-                <main className="container mx-auto max-w-7xl pt-16 px-6 flex-grow">
+                <main className="container mx-auto max-w-7xl px-1 md:px-6 flex-grow">
                   {children}
                 </main>
                 <footer className="w-full flex items-center justify-center py-3">

diff --git a/app/page.tsx b/app/page.tsx
@@ -104,18 +104,18 @@ async function Home(props: any) {
 
   return (
     <>
-      <div className="grid grid-cols-3 p-4 -mt-10 ">
-        <div className="col-span-2 col-start-1">
-          <div className="grid grid-rows-subgrid grid-cols-1 gap-5 ">
-            <div className="row-start-1">
+      <div className="grid grid-cols-3 p-4 h-full">
+        <div className="col-span-3 md:col-span-2 col-start-1">
+          <div className="grid grid-rows-subgrid grid-cols-1 gap-5 h-full">
+            <div className="row-start-1 mt-auto mb-auto">
               <Search codes={codes} terms={terms} times={uniqueTimes} />
             </div>
-            <div className="row-start-2 h-[62vh] overflow-y-scroll overflow-x-clip">
+            <div className="row-start-2 h-[62vh] overflow-y-scroll overflow-x-clip scrollbar-thin scrollbar-thumb-accent-500 scrollbar-track-transparent">
               {props.fullCourseList}
             </div>
           </div>
         </div>
-        <div className="col-start-3">
+        <div className="col-span-3 md:col-start-3">
           <CreatePlan />
         </div>
       </div>

diff --git a/components/CourseCard.tsx b/components/CourseCard.tsx
@@ -53,10 +53,10 @@ export default function CourseCard(props: any) {
       return (
         <div
           key={index}
-          className="flex w-8 h-8 rounded-md justify-center items-center"
+          className="flex w-6 h-6 md:w-8 md:h-8 rounded-md justify-center items-center"
           style={{ backgroundColor: color_mappings[index] }}
         >
-          <p className="font-bold text-white">{item[0]}</p>
+          <p className="font-bold text-sm md:text-base text-white">{item[0]}</p>
         </div>
       );
     }
@@ -87,47 +87,47 @@ export default function CourseCard(props: any) {
       <CardHeader className="pl-6" onClick={() => updatePlan(props.course)}>
         <div className="flex items-center flex-row justify-between w-full">
           <div className="flex flex-col">
-            <h1 className="font-bold text-3xl text-left">
+            <h1 className="font-bold text-md md:text-2xl text-left">
               {props.course.courseTitle.replace("&amp;", "&")}
             </h1>
-            <h2 className=" flex text-left">
+            <h2 className="flex text-sm md:text-lg text-left">
               {props.course.subject} {props.course.courseNumber} |{" "}
-              {props.course.creditHours} credit(s) | &nbsp;
+              {props.course.creditHours} credit(s)
               {props.course.sectionAttributes.length > 0 && (
-                <div>{attributeCodes}</div>
+                <div className="hidden md:flex max-w-48 md:max-w-64 items-center">&nbsp;|&nbsp;{attributeCodes}</div>
               )}
             </h2>
           </div>
-          <div className="flex items-center ml-auto mr-8">
-            <Image
-              // src={"https://www.swarthmore.edu/sites/default/files/styles/headshot/public/assets/images/user_photos/cmurphy4.jpg.webp"}
-              alt="Professor"
-              className="object-cover rounded-md absolute top-6 right-6"
-              height={100}
-              src={
-                "https://cdn.vectorstock.com/i/500p/08/19/gray-photo-placeholder-icon-design-ui-vector-35850819.jpg"
-              }
-              width={100}
-            />
+          <div className="flex items-center pt-2">
+            <div className="absolute top-4 right-4 h-20 w-20 md:h-24 md:w-24 overflow-clip rounded-md">
+              <Image
+                // src={"https://www.swarthmore.edu/sites/default/files/styles/headshot/public/assets/images/user_photos/cmurphy4.jpg.webp"}
+                alt={props.course.instructor.displayName.replace("&#39;", "'")}
+                fill
+                className="object-cover overflow-clip"
+                sizes="(max-width: 768px) 30vw, (max-width: 1200px) 20vw, 15vw"
+                loading={"lazy"}
+                src={
+                  "https://cdn.vectorstock.com/i/500p/08/19/gray-photo-placeholder-icon-design-ui-vector-35850819.jpg"
+                }
+              />
+            </div>
           </div>
         </div>
       </CardHeader>
 
-      <CardBody
-        className="mt-0 mb-2 pl-6"
-        onClick={() => updatePlan(props.course)}
-      >
+      <CardBody className="pt-0 pl-6" onClick={() => updatePlan(props.course)}>
         <div className="flex justify-between flex-row">
-          <div className="gap-10">
+          <div className="gap-4">
             {props.course.facultyMeet.meetingTimes.room ? (
-              <div className="bg-[#2C2C33] p-3 w-64 rounded-md">
-                <div className="font-semibold text-lg text-white">
+              <div className="bg-[#2C2C33] py-1 px-2 md:py-2 md:px-3 w-auto max-w-64 rounded-md">
+                <div className="font-semibold text-sm md:text-lg text-white">
                   {props.course.facultyMeet.meetingTimes.buildingDescription}{" "}
                   {props.course.facultyMeet.meetingTimes.room}
                 </div>
-                <div className="text-base">
+                <div className="text-sm md:text-base">
                   {props.course.facultyMeet.meetingTimes ? (
-                    <div className="mt-2">
+                    <div className="mt-1">
                       <div className="font-normal">
                         {" "}
                         {props.course.facultyMeet.meetingTimes.beginTime.slice(
@@ -153,21 +153,21 @@ export default function CourseCard(props: any) {
                 </div>
               </div>
             ) : (
-              <div className="bg-[#2C2C33] p-4 w-64 rounded-md">
+              <div className="bg-[#2C2C33] py-2 px-3 w-auto max-w-64 rounded-md">
                 <p className="font-semibold">
                   Contact your Professor for additional details.
                 </p>
               </div>
             )}
             <div className="flex flex-row">
-              <div className="flex flex-row gap-2 mt-5">{coloredDays}</div>
+              <div className="flex flex-row gap-2 mt-4">{coloredDays}</div>
             </div>
           </div>
           <div className="flex flex-col pr-3 pt-10">
             <div className="flex flex-row gap-5 justify-end">
               <div>
-                <div className="text-right font-medium">Instructor</div>
-                <div className="text-2xl font-bold">
+                <div className="text-right text-sm md:text-md">Instructor</div>
+                <div className="text-right text-md md:text-xl font-bold">
                   {props.course.instructor.displayName.replace("&#39;", "'")}
                 </div>
               </div>
@@ -181,15 +181,15 @@ export default function CourseCard(props: any) {
               )}
             </div>
             {props.course.seatsAvailable == 0 ? (
-              <div className="flex flex-row items-end pt-4 gap-2">
-                <div className="font-medium text-slate">
+              <div className="flex flex-row pt-2 gap-2 items-center">
+                <div className="font-medium text-slate text-right">
                   No available seats left for this section
                 </div>
                 <Error color="error" />
               </div>
             ) : (
-              <div className="flex flex-row ml-auto pt-4 gap-2">
-                <div className="font-medium text-slate">
+              <div className="flex flex-row ml-auto pt-1 md:pt-2 gap-2">
+                <div className="text-sm md:text-md text-slate">
                   Seats Available: {props.course.seatsAvailable}
                 </div>
               </div>

diff --git a/components/CreatePlan.tsx b/components/CreatePlan.tsx
@@ -10,12 +10,13 @@ import {
 import AddIcon from "@mui/icons-material/Add";
 import DeleteIcon from "@mui/icons-material/Delete";
 import IosShareIcon from "@mui/icons-material/IosShare";
+import ExpandLessIcon from '@mui/icons-material/ExpandLess';
 import axios from "axios";
 import { Select, SelectItem } from "@nextui-org/react";
 import { useRouter } from "next/navigation";
 import { usePathname } from "next/navigation";
 import { useSession } from "next-auth/react";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import useSWR from "swr";
 import { useCookies } from "next-client-cookies";
 
@@ -25,6 +26,7 @@ import { generateColorFromName } from "../components/primitives";
 export default function CreatePlan(props: any) {
   const cookies = useCookies();
   const router = useRouter();
+  const scrollRef = useRef<HTMLDivElement>(null);
 
   const pathname = usePathname();
   const { data: session, status } = useSession();
@@ -163,12 +165,22 @@ export default function CreatePlan(props: any) {
     return output;
   };
 
+  const scrollToPlan = () => {
+    if (scrollRef.current)
+        scrollRef.current.scrollIntoView({behavior: 'smooth', inline: "start"});
+  }
+
   return (
     <>
-      <Divider className="h-[60vh] absolute mt-20" orientation="vertical" />
-
-      <div className="grid grid-cols-1 grid-rows-10 ml-10 gap-5 h-[66vh] mt-10 overflow-clip">
-        <div className="font-bold text-primary h1">Create a Plan</div>
+      <Divider className="hidden md:absolute h-[60vh] mt-32" orientation="vertical" />
+
+      <div className="grid grid-cols-1 grid-rows-10 md:ml-10 gap-5 h-[66vh] mt-10 overflow-clip">
+        <div className="flex flex-row" ref={scrollRef}>
+            <div className="font-bold text-primary h1">Create a Plan</div>
+            <button className="flex md:hidden" onClick={scrollToPlan}>
+                <ExpandLessIcon/>
+            </button>
+        </div>
         <div className="grid grid-rows-subgrid grid-cols-3 gap-2 ">
           <Input
             isRequired
@@ -189,7 +201,7 @@ export default function CreatePlan(props: any) {
           </Button>
         </div>
 
-        <div className="  ">
+        <div>
           <div className="grid grid-rows-subgrid  grid-cols-3 ">
             <Divider className="mt-2" />
             <div className="text-center">or</div>
@@ -227,7 +239,7 @@ export default function CreatePlan(props: any) {
         </div>
 
         <div
-          className="grid overflow-y-scroll gap-1 h-[30vh] mt-5"
+          className="grid overflow-y-scroll gap-1 h-[30vh] mt-5 scrollbar-thin scrollbar-thumb-accent-500 scrollbar-track-transparent"
           id="scrollMe"
         >
           <CoursesList />

diff --git a/components/Search.tsx b/components/Search.tsx
@@ -134,10 +134,10 @@ export default function Search(props: any) {
   };
 
   return (
-    <div className="grid grid-cols-5 gap-5">
+    <div className="grid grid-cols-6 gap-5">
       <Input
         isClearable
-        className="max-w-xs col-span-2"
+        className="md:max-w-xs col-span-6 md:col-span-3"
         defaultValue={searchParams.get("query")?.toString()}
         label="Search"
         labelPlacement="inside"
@@ -152,7 +152,7 @@ export default function Search(props: any) {
       />
 
       <Select
-        className="max-w-xs col-span-1"
+        className="max-w-xs col-span-2 md:col-span-1"
         defaultSelectedKeys={searchParams.get("term")?.toString()}
         disallowEmptySelection={true}
         label="Select Term"
@@ -163,7 +163,7 @@ export default function Search(props: any) {
         {RenderSelectOptions()}
       </Select>
       <Select
-        className="max-w-xs"
+        className="max-w-xs col-span-2 md:col-span-1"
         label="Day of the Week"
         selectedKeys={selectedDOTW}
         selectionMode={"multiple"}
@@ -194,7 +194,7 @@ export default function Search(props: any) {
       </Select>
 
       <Select
-        className="max-w-xs"
+        className="max-w-xs col-span-2 md:col-span-1"
         label="Start Time"
         selectedKeys={selectedStartTime}
         selectionMode={"multiple"}

diff --git a/components/navbar.tsx b/components/navbar.tsx
@@ -23,19 +23,12 @@ import NextLink from "next/link";
 import { usePathname } from "next/navigation";
 import { button as buttonStyles } from "@nextui-org/theme";
 import InputIcon from "@mui/icons-material/Input";
-import HomeIcon from "@mui/icons-material/Home";
-import SendIcon from "@mui/icons-material/Send";
 import axios from "axios";
 
 import { siteConfig } from "../config/site";
 import { ThemeSwitch } from "../components/theme-switch";
 import { title } from "../components/primitives";
 
-const pages = {
-  Home: { link: "/", image: <HomeIcon /> },
-  Submit: { link: "/submit", image: <SendIcon /> },
-};
-
 export const Navbar = (props: any) => {
   const pathname = usePathname();
   const { data: session, status } = useSession();
@@ -87,37 +80,14 @@ export const Navbar = (props: any) => {
     }
   }
 
-  const [anchorElNav, setAnchorElNav] = React.useState<null | HTMLElement>(
-    null
-  );
-  const [anchorElUser, setAnchorElUser] = React.useState<null | HTMLElement>(
-    null
-  );
-
-  const handleOpenNavMenu = (event: React.MouseEvent<HTMLElement>) => {
-    setAnchorElNav(event.currentTarget);
-  };
-
-  const handleOpenUserMenu = (event: React.MouseEvent<HTMLElement>) => {
-    setAnchorElUser(event.currentTarget);
-  };
-
-  const handleCloseNavMenu = () => {
-    setAnchorElNav(null);
-  };
-
-  const handleCloseUserMenu = () => {
-    setAnchorElUser(null);
-  };
-
   return (
-    <div className="bg-background_navbar">
+    <div className="bg-background_navbar h-auto">
       <NextUINavbar
-        className="mt-2 bg-inherit"
+        className="bg-inherit md:py-2"
         maxWidth="full"
         position="sticky"
       >
-        <NavbarContent className="basis-1/5 sm:basis-full" justify="start">
+        <NavbarContent className="basis-1/5 md:basis-full" justify="start">
           <NavbarBrand as="li" className="gap-3 max-w-fit">
             <NextLink
               className="flex justify-start items-center gap-1"
@@ -133,9 +103,9 @@ export const Navbar = (props: any) => {
           </NavbarBrand>
         </NavbarContent>
 
-        <NavbarContent justify="start">
+        <NavbarContent justify="start" className="hidden md:flex">
           <Spacer x={24} />
-          <ul className="hidden lg:flex gap-4 justify-start ml-2">
+          <ul className="gap-4 flex-row justify-start ml-2">
             {siteConfig.navItems.map((item) => (
               <Link
                 key={item.href}
@@ -153,10 +123,10 @@ export const Navbar = (props: any) => {
         </NavbarContent>
 
         <NavbarContent
-          className="hidden sm:flex basis-1/5 sm:basis-full"
+          className="hidden md:flex basis-1/5 sm:basis-full"
           justify="end"
         >
-          <NavbarItem className="hidden sm:flex gap-2">
+          <NavbarItem className="hidden md:flex gap-2">
             <ThemeSwitch />
           </NavbarItem>
 
@@ -191,24 +161,21 @@ export const Navbar = (props: any) => {
           </NavbarItem>
         </NavbarContent>
 
-        <NavbarContent className="sm:hidden basis-1 pl-4" justify="end">
+        <NavbarContent className="flex md:hidden" justify="end">
           <ThemeSwitch />
           <NavbarMenuToggle />
         </NavbarContent>
 
         {/* Mobile?*/}
         <NavbarMenu>
           <div className="mx-4 mt-2 flex flex-col gap-2">
-            {siteConfig.navMenuItems.map((item, index) => (
+            {siteConfig.navItems.map((item, index) => (
               <NavbarMenuItem key={`${item}-${index}`}>
                 <Link href={item.href} size="lg">
                   {item.label}
                 </Link>
               </NavbarMenuItem>
             ))}
-            <NavbarItem className="hidden sm:flex gap-2">
-              <ThemeSwitch />
-            </NavbarItem>
 
             <NavbarItem>
               <Dropdown>