scheduler: further improve mobile

swat-sccs · Nov 17, 2024 · d9a35c4 · d9a35c4
1 parent 7ca3ee9
commit d9a35c4
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 17 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,15 +135,15 @@ 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"}
           />
         </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}`}>