From d9a35c4dd6de1fb888990ba5b626948203672603 Mon Sep 17 00:00:00 2001
From: Thomas Makin <halorocker89@gmail.com>
Date: Thu, 14 Nov 2024 14:07:19 -0500
Subject: [PATCH] scheduler: further improve mobile

---
 app/layout.tsx                |  2 +-
 app/page.tsx                  |  4 ++--
 components/CourseCard.tsx     | 22 +++++++++++++---------
 components/FullCourseList.tsx |  2 +-
 components/Search.tsx         |  2 +-
 components/navbar.tsx         |  6 +++---
 6 files changed, 21 insertions(+), 17 deletions(-)

diff --git a/app/layout.tsx b/app/layout.tsx
index d3312c9..fd0fe63 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -54,7 +54,7 @@ export default function RootLayout({
             >
               <div className="flex flex-col h-screen ">
                 <Navbar />
-                <main className="container mx-auto  px-1 lg:px-7 lg:pt-10 justify-center items-center  flex-grow">
+                <main className="container mx-auto px-1 lg:px-7 lg:pt-10 justify-center items-center  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
index bd6b6c6..1a79d07 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -116,9 +116,9 @@ async function Home(props: any) {
 
   return (
     <>
-      <div className="grid grid-cols-10 p-4 h-full">
+      <div className="grid grid-cols-10 p-3 lg:p-4 h-full">
         <div className="col-span-10 lg:col-span-7">
-          <div className="flex flex-col gap-5 h-full">
+          <div className="flex flex-col gap-3 h-full">
             <Search codes={codes} terms={terms} times={uniqueTimes} />
             <div className="h-[70vh] overflow-y-scroll overflow-x-clip scrollbar-thin scrollbar-thumb-accent-500 scrollbar-track-transparent">
               {props.fullCourseList}
diff --git a/components/CourseCard.tsx b/components/CourseCard.tsx
index aa7c01a..0e31c7a 100644
--- a/components/CourseCard.tsx
+++ b/components/CourseCard.tsx
@@ -100,8 +100,8 @@ export default function CourseCard(props: any) {
               )}
             </h2>
           </div>
-          <div className="flex items-center pt-2">
-            <div className="absolute top-4 right-4 h-20 w-20 lg:h-24 lg:w-24 overflow-clip rounded-md">
+          <div className="flex items-center">
+            <div className="relative h-14 w-14 lg:h-20 lg:w-20 pr-2 lg:pr-3 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;", "'")}
@@ -119,8 +119,8 @@ export default function CourseCard(props: any) {
       </CardHeader>
 
       <CardBody className="pt-0 pl-6" onClick={() => updatePlan(props.course)}>
-        <div className="flex justify-between flex-row">
-          <div className="gap-4">
+        <div className="flex justify-between flex-row gap-3">
+          <div className="gap-4 basis-1/2">
             {props.course.facultyMeet.meetingTimes.room ? (
               <div className="bg-[#2C2C33] py-1 px-2 lg:py-2 lg:px-3 w-auto max-w-64 rounded-md">
                 <div className="font-semibold text-sm lg:text-lg text-white">
@@ -156,7 +156,7 @@ export default function CourseCard(props: any) {
               </div>
             ) : (
               <div className="bg-[#2C2C33] py-2 px-3 w-auto max-w-64 rounded-md">
-                <p className="font-semibold">
+                <p className="text-sm lg:text-base">
                   Contact your Professor for additional details.
                 </p>
               </div>
@@ -165,7 +165,7 @@ export default function CourseCard(props: any) {
               <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-col">
             <div className="flex flex-row gap-5 justify-end">
               <div>
                 <div className="text-right text-sm lg:text-md">Instructor</div>
@@ -183,15 +183,19 @@ export default function CourseCard(props: any) {
               )}
             </div>
             {props.course.seatsAvailable == 0 ? (
-              <div className="flex flex-row pt-2 gap-2 items-center">
-                <div className="font-medium text-slate text-right">
+              <div className="flex flex-row pt-2 gap-2 items-center justify-end">
+                <div className="hidden lg:flex text-medium text-slate text-right">
                   No available seats left for this section
                 </div>
+                {/* Use shorter msg for mobile */}
+                <div className="flex lg:hidden text-sm text-slate text-right">
+                  No seats
+                </div>
                 <Error color="error" />
               </div>
             ) : (
               <div className="flex flex-row ml-auto pt-1 lg:pt-2 gap-2">
-                <div className="text-sm lg:text-md text-slate">
+                <div className="text-sm lg:text-md text-slate text-right">
                   Seats Available: {props.course.seatsAvailable}
                 </div>
               </div>
diff --git a/components/FullCourseList.tsx b/components/FullCourseList.tsx
index 39d30b1..8a8ac76 100644
--- a/components/FullCourseList.tsx
+++ b/components/FullCourseList.tsx
@@ -62,7 +62,7 @@ export function FullCourseList({
   //const courseList: Course[] = await getCourses(query, term, dotw, stime);
   return (
     <>
-      <div className="grid gap-3 ">
+      <div className="flex flex-col gap-3">
         {courses?.map((course: any) => (
           <div key={course.id}>
             <CourseCard course={course} />
diff --git a/components/Search.tsx b/components/Search.tsx
index b67c279..0f35480 100644
--- a/components/Search.tsx
+++ b/components/Search.tsx
@@ -137,7 +137,7 @@ export default function Search(props: any) {
   };
 
   return (
-    <div className="grid grid-cols-9 gap-2 w-[97%]">
+    <div className="grid grid-cols-9 gap-3 w-[97%]">
       <meta name="viewport" content="width=device-width, user-scalable=no" />
       <Input
         isClearable
diff --git a/components/navbar.tsx b/components/navbar.tsx
index 5d60a65..030aa77 100644
--- a/components/navbar.tsx
+++ b/components/navbar.tsx
@@ -98,7 +98,7 @@ export const Navbar = (props: any) => {
         </NavbarContent>
 
         <NavbarContent
-          className="hidden lg:flex basis-1/5 sm:basis-full"
+          className="hidden lg:flex basis-1/5 lg:basis-full"
           justify="end"
         >
           <NavbarItem className="hidden lg:flex gap-2">
@@ -135,7 +135,7 @@ export const Navbar = (props: any) => {
           </NavbarItem>
         </NavbarContent>
 
-        <NavbarContent className="flex sm:hidden" justify="end">
+        <NavbarContent className="flex lg:hidden" justify="end">
           <ThemeSwitch />
           <NavbarMenuToggle
             aria-label={isMenuOpen ? "Close menu" : "Open menu"}
@@ -143,7 +143,7 @@ export const Navbar = (props: any) => {
         </NavbarContent>
 
         {/* Mobile?*/}
-        <NavbarMenu className=" sm:flex">
+        <NavbarMenu className=" lg:flex">
           <div className="mx-4 mt-2 flex flex-col gap-2">
             {siteConfig.navItems.map((item, index) => (
               <NavbarMenuItem key={`${item}-${index}`}>