fix: <Schedule> now appearing on smaller screens

NIAEFEUP · Aug 24, 2024 · 18fbb7e · 18fbb7e
1 parent ab86239
commit 18fbb7e
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 4 deletions.
diff --git a/src/components/planner/Schedule.tsx b/src/components/planner/Schedule.tsx
@@ -64,6 +64,7 @@ const Schedule = () => {
 
   return (
     <>
+      {/*Schedule desktop*/}
       <div ref={scheduleRef} className="schedule-area gap-2">
         {/* Days Column Names */}
         <div className="schedule-top">
@@ -105,6 +106,7 @@ const Schedule = () => {
           </div>
         </div>
 
+
         {/* Bottom bar */}
         <div className="flex justify-between gap-5 pl-16">
           <div className="flex flex-wrap gap-4 gap-y-1 text-sm text-gray-600 dark:text-white 2xl:gap-y-2 2xl:text-base">
@@ -116,6 +118,26 @@ const Schedule = () => {
           </div>
         </div>
       </div>
+
+      {/*Schedule mobile*/}
+      <div className="flex h-full w-full flex-col items-center justify-start space-y-2 lg:hidden">
+        <div className="flex w-full items-center justify-start gap-2" key={`responsive-lesson-row-${""}`}>
+          <div className="h-full w-1 rounded bg-primary" />
+          <div className="flex w-full flex-row flex-wrap items-center justify-start gap-2">
+            {classes
+              .filter((c) => c.classInfo !== undefined)
+              .map((c) => (
+                <ClassBox
+                  key={`course[${c.courseInfo.id}]-class[${c.classInfo.id}]`}
+                  courseInfo={c.courseInfo}
+                  classInfo={c.classInfo ?? null}
+                  classes={classes}
+                />
+              ))}
+          </div>
+        </div>
+      </div>
+
     </>
   )
 }

diff --git a/src/components/planner/schedules/ClassBox.tsx b/src/components/planner/schedules/ClassBox.tsx
@@ -1,24 +1,38 @@
 import { CourseInfo, ClassInfo, ClassDescriptor } from '../../../@types'
 import LessonBox from './LessonBox'
+import ResponsiveLessonBox from './ResponsiveLessonBox'
 
 type Props = {
   courseInfo: CourseInfo
   classInfo: ClassInfo
   classes: ClassDescriptor[]
 }
 
-const ClassBox = ({courseInfo, classInfo, classes} : Props) => {
+const ClassBox = ({ courseInfo, classInfo, classes }: Props) => {
   return (
     <>
-        {classInfo.slots.map((slot, index) => (
+      {classInfo.slots.map((slot, index) => (
+        <>
+          <div className="hidden lg:flex lg:flex-col">
             <LessonBox
-              key={`course[${courseInfo.id}]-class[${classInfo.id}]-${slot.lesson_type}-${index}`} 
+              key={`course[${courseInfo.id}]-class[${classInfo.id}]-${slot.lesson_type}-${index}`}
               courseInfo={courseInfo}
               classInfo={classInfo}
               slotInfo={slot}
               classes={classes.filter((classDescriptor) => classDescriptor.classInfo.id !== classInfo.id)}
             />
-        ))}
+          </div>
+
+          <div className="lg:hidden flex flex-col ">
+            <ResponsiveLessonBox
+              key={`course[${courseInfo.id}]-class[${classInfo.id}]-${slot.lesson_type}-${index}`}
+              courseInfo={courseInfo}
+              classInfo={classInfo}
+              slotInfo={slot}
+            />
+          </div>
+        </>
+      ))}
     </>
   )
 }

diff --git a/src/components/planner/sidebar/SelectedOptionController.tsx b/src/components/planner/sidebar/SelectedOptionController.tsx
@@ -7,6 +7,9 @@ import MultipleOptionsContext from '../../../contexts/MultipleOptionsContext'
 import { CourseOption } from '../../../@types'
 import { ThemeContext } from '../../../contexts/ThemeContext'
 import { Popover, PopoverContent, PopoverTrigger } from '../../ui/popover'
+import { Button } from '../../ui/button'
+import { ArrowPathIcon } from '@heroicons/react/24/outline'
+import { CheckIcon } from 'lucide-react'
 
 type Props = {
   currentOption: CourseOption[]