Added divider for course select, widen right bar

nthumodifications · Nov 2, 2023 · 1522a55 · 1522a55
1 parent 2b108da
commit 1522a55
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 10 deletions.
diff --git a/src/app/[lang]/courses/page.tsx b/src/app/[lang]/courses/page.tsx
@@ -233,14 +233,16 @@ const CoursePage: NextPage = () => {
                 <div className="relative">
                     {/* loading covers all with white cover */}
                     {loading && <div className="absolute inset-0 bg-white/60 dark:bg-neutral-900/60 z-10"></div>}
-                    <div className="flex flex-col w-full h-full space-y-5 pb-8">
+                    <div className="flex flex-col w-full h-full space-y-4 pb-8">
                         <div className="flex flex-row justify-between px-3 py-1 border-b">
                             <h6 className="text-gray-600">{dict.course.list.courses}</h6>
                             <h6 className="text-gray-600">{dict.course.list.found}: {totalCount} {dict.course.list.courses}</h6>
                         </div>
-                        {courses.map((course, index) => (
-                            <CourseListItem key={index} course={course} />
-                        ))}
+                        <div className="flex flex-col w-full h-full space-y-5">
+                            {courses.map((course, index) => (
+                                <CourseListItem key={index} course={course} />
+                            ))}
+                        </div>
                         <Stack
                             direction="row"
                             justifyContent="center"

diff --git a/src/components/Courses/CourseListItem.tsx b/src/components/Courses/CourseListItem.tsx
@@ -18,8 +18,8 @@ const CourseListItem: FC<{ course: CourseDefinition }> = ({ course }) => {
     const dict = useDictionary();
     const isCourseSelected = useMemo(() => courses.includes(course.raw_id ?? ""), [courses, course]);
 
-    return <div className="text-gray-600 dark:text-gray-400 px-4">
-        <div className="grid grid-cols-1 lg:grid-rows-none lg:grid-cols-[auto_224px]">
+    return <div className="text-gray-600 dark:text-gray-400 px-4 border-b border-gray-200 pb-4">
+        <div className="grid grid-cols-1 lg:grid-rows-none lg:grid-cols-[auto_250px]">
             <div className='flex-1 space-y-4'>
                 <div className="mb-3 space-y-1">
                     <Link className="font-semibold text-lg text-[#AF7BE4]" href={'courses/'+course.raw_id}>{course.department} {course.course}-{course.class} {course.name_zh} - {(course.teacher_zh ?? []).join(',')}</Link>
@@ -79,18 +79,17 @@ const CourseListItem: FC<{ course: CourseDefinition }> = ({ course }) => {
                     </div>
             </div>
             <div className='flex flex-col space-y-3'>
-                <p>{course.semester} 學期</p>
+                <p className='text-black dark:text-white text-sm'>{course.semester} 學期</p>
                 {course.venues? 
-                    course.venues.map((vn, i) => <p className='text-blue-600 dark:text-blue-400'>{vn} <span className='text-black dark:text-white'>{course.times![i]}</span></p>) : 
+                    course.venues.map((vn, i) => <p className='text-blue-600 dark:text-blue-400 text-sm'>{vn} <span className='text-black dark:text-white'>{course.times![i]}</span></p>) : 
                     <p>No Venues</p>
                 }
                 <div className='flex flex-row space-x-1 text-sm'>
                     <HighlightItem>
                         <span className="">
                             {course.capacity ?? '-'} 
                             {(course.reserve ?? 0) > 0 && <>
-                                <br/>
-                                {`保 ${course.reserve}`}
+                                {` 保 ${course.reserve}`}
                             </>}
                         </span>