From 2f390566f345070f90b77fc96e321edfa1137549 Mon Sep 17 00:00:00 2001
From: swve <bdswve@gmail.com>
Date: Thu, 18 Jan 2024 00:12:32 +0100
Subject: [PATCH] fix: make chapters ordering scrollable

---
 .../course/[courseuuid]/[subpage]/page.tsx    |   6 +-
 .../EditCourseGeneral/EditCourseGeneral.tsx   | 126 +++++++++---------
 .../EditCourseStructure.tsx                   |   3 +-
 3 files changed, 69 insertions(+), 66 deletions(-)

diff --git a/apps/web/app/orgs/[orgslug]/dash/courses/course/[courseuuid]/[subpage]/page.tsx b/apps/web/app/orgs/[orgslug]/dash/courses/course/[courseuuid]/[subpage]/page.tsx
index f49069dc..d64d1331 100644
--- a/apps/web/app/orgs/[orgslug]/dash/courses/course/[courseuuid]/[subpage]/page.tsx
+++ b/apps/web/app/orgs/[orgslug]/dash/courses/course/[courseuuid]/[subpage]/page.tsx
@@ -32,9 +32,9 @@ function CourseOverviewPage({ params }: { params: CourseOverviewParams }) {
     }
 
     return (
-        <div className='h-full w-full bg-[#f8f8f8]'>
+        <div className='h-screen w-full bg-[#f8f8f8] grid grid-rows-[auto,1fr]'>
             <CourseProvider courseuuid={getEntireCourseUUID(params.courseuuid)}>
-                <div className='pl-10 pr-10  tracking-tight bg-[#fcfbfc] shadow-[0px_4px_16px_rgba(0,0,0,0.02)]'>
+                <div className='pl-10 pr-10  tracking-tight bg-[#fcfbfc] z-10 shadow-[0px_4px_16px_rgba(0,0,0,0.06)]'>
                     <CourseOverviewTop params={params} />
                     <div className='flex space-x-5 font-black text-sm'>
                         <Link href={getUriWithOrg(params.orgslug, "") + `/dash/courses/course/${params.courseuuid}/general`}>
@@ -57,12 +57,12 @@ function CourseOverviewPage({ params }: { params: CourseOverviewParams }) {
                         </Link>
                     </div>
                 </div>
-                <div className='h-6'></div>
                 <motion.div
                     initial={{ opacity: 0, }}
                     animate={{ opacity: 1 }}
                     exit={{ opacity: 0 }}
                     transition={{ duration: 0.10, type: "spring", stiffness: 80 }}
+                    className='h-full overflow-y-auto'
                 >
                     {params.subpage == 'content' ? <EditCourseStructure orgslug={params.orgslug} /> : ''}
                     {params.subpage == 'general' ? <EditCourseGeneral orgslug={params.orgslug} /> : ''}
diff --git a/apps/web/components/Dashboard/Course/EditCourseGeneral/EditCourseGeneral.tsx b/apps/web/components/Dashboard/Course/EditCourseGeneral/EditCourseGeneral.tsx
index 636d32e9..163e0e22 100644
--- a/apps/web/components/Dashboard/Course/EditCourseGeneral/EditCourseGeneral.tsx
+++ b/apps/web/components/Dashboard/Course/EditCourseGeneral/EditCourseGeneral.tsx
@@ -84,71 +84,73 @@ function EditCourseGeneral(props: EditCourseStructureProps) {
     }, [course, formik.values, formik.initialValues]);
 
     return (
-        <div className='ml-10 mr-10 mx-auto bg-white rounded-xl shadow-sm px-6 py-5'>
+        <div> <div className="h-6"></div>
+            <div className='ml-10 mr-10 mx-auto bg-white rounded-xl shadow-sm px-6 py-5'>
 
-            {course.courseStructure && (
-                <div className="editcourse-form">
-                    {error && (
-                        <div className="flex justify-center bg-red-200 rounded-md text-red-950 space-x-2 items-center p-4 transition-all shadow-sm">
-                            <AlertTriangle size={18} />
-                            <div className="font-bold text-sm">{error}</div>
-                        </div>
-                    )}
-                    <FormLayout onSubmit={formik.handleSubmit}>
-                        <FormField name="name">
-                            <FormLabelAndMessage label='Name' message={formik.errors.name} />
-                            <Form.Control asChild>
-                                <Input style={{ backgroundColor: "white" }} onChange={formik.handleChange} value={formik.values.name} type="text" required />
-                            </Form.Control>
-                        </FormField>
-
-                        <FormField name="description">
-                            <FormLabelAndMessage label='Description' message={formik.errors.description} />
-                            <Form.Control asChild>
-                                <Textarea style={{ backgroundColor: "white" }} onChange={formik.handleChange} value={formik.values.description} required />
-                            </Form.Control>
-                        </FormField>
-
-                        <FormField name="about">
-                            <FormLabelAndMessage label='About' message={formik.errors.about} />
-                            <Form.Control asChild>
-                                <Textarea style={{ backgroundColor: "white" }} onChange={formik.handleChange} value={formik.values.about} required />
-                            </Form.Control>
-                        </FormField>
-
-                        <FormField name="learnings">
-                            <FormLabelAndMessage label='Learnings' message={formik.errors.learnings} />
-                            <Form.Control asChild>
-                                <Textarea style={{ backgroundColor: "white" }} onChange={formik.handleChange} value={formik.values.learnings} required />
-                            </Form.Control>
-                        </FormField>
-
-                        <FormField name="tags">
-                            <FormLabelAndMessage label='Tags' message={formik.errors.tags} />
-                            <Form.Control asChild>
-                                <Textarea style={{ backgroundColor: "white" }} onChange={formik.handleChange} value={formik.values.tags} required />
-                            </Form.Control>
-                        </FormField>
-
-                        <FormField className="flex items-center h-10" name="public">
-                            <div className='flex my-auto items-center'>
-                                <label className="text-black text-[15px] leading-none pr-[15px]" htmlFor="public-course">
-                                    Public Course
-                                </label>
-                                <Switch.Root
-                                    className="w-[42px] h-[25px] bg-neutral-200 rounded-full relative  data-[state=checked]:bg-neutral-500 outline-none cursor-default"
-                                    id="public-course"
-                                    onCheckedChange={checked => formik.setFieldValue('public', checked)}
-                                    checked={formik.values.public === 'true'}
-                                >
-                                    <Switch.Thumb className="block w-[21px] h-[21px] bg-white rounded-full shadow-[0_2px_2px] shadow-neutral-300 transition-transform duration-100 translate-x-0.5 will-change-transform data-[state=checked]:translate-x-[19px]" />
-                                </Switch.Root>
+                {course.courseStructure && (
+                    <div className="editcourse-form">
+                        {error && (
+                            <div className="flex justify-center bg-red-200 rounded-md text-red-950 space-x-2 items-center p-4 transition-all shadow-sm">
+                                <AlertTriangle size={18} />
+                                <div className="font-bold text-sm">{error}</div>
                             </div>
-                        </FormField>
+                        )}
+                        <FormLayout onSubmit={formik.handleSubmit}>
+                            <FormField name="name">
+                                <FormLabelAndMessage label='Name' message={formik.errors.name} />
+                                <Form.Control asChild>
+                                    <Input style={{ backgroundColor: "white" }} onChange={formik.handleChange} value={formik.values.name} type="text" required />
+                                </Form.Control>
+                            </FormField>
 
-                    </FormLayout>
-                </div>
-            )}
+                            <FormField name="description">
+                                <FormLabelAndMessage label='Description' message={formik.errors.description} />
+                                <Form.Control asChild>
+                                    <Textarea style={{ backgroundColor: "white" }} onChange={formik.handleChange} value={formik.values.description} required />
+                                </Form.Control>
+                            </FormField>
+
+                            <FormField name="about">
+                                <FormLabelAndMessage label='About' message={formik.errors.about} />
+                                <Form.Control asChild>
+                                    <Textarea style={{ backgroundColor: "white" }} onChange={formik.handleChange} value={formik.values.about} required />
+                                </Form.Control>
+                            </FormField>
+
+                            <FormField name="learnings">
+                                <FormLabelAndMessage label='Learnings' message={formik.errors.learnings} />
+                                <Form.Control asChild>
+                                    <Textarea style={{ backgroundColor: "white" }} onChange={formik.handleChange} value={formik.values.learnings} required />
+                                </Form.Control>
+                            </FormField>
+
+                            <FormField name="tags">
+                                <FormLabelAndMessage label='Tags' message={formik.errors.tags} />
+                                <Form.Control asChild>
+                                    <Textarea style={{ backgroundColor: "white" }} onChange={formik.handleChange} value={formik.values.tags} required />
+                                </Form.Control>
+                            </FormField>
+
+                            <FormField className="flex items-center h-10" name="public">
+                                <div className='flex my-auto items-center'>
+                                    <label className="text-black text-[15px] leading-none pr-[15px]" htmlFor="public-course">
+                                        Public Course
+                                    </label>
+                                    <Switch.Root
+                                        className="w-[42px] h-[25px] bg-neutral-200 rounded-full relative  data-[state=checked]:bg-neutral-500 outline-none cursor-default"
+                                        id="public-course"
+                                        onCheckedChange={checked => formik.setFieldValue('public', checked)}
+                                        checked={formik.values.public === 'true'}
+                                    >
+                                        <Switch.Thumb className="block w-[21px] h-[21px] bg-white rounded-full shadow-[0_2px_2px] shadow-neutral-300 transition-transform duration-100 translate-x-0.5 will-change-transform data-[state=checked]:translate-x-[19px]" />
+                                    </Switch.Root>
+                                </div>
+                            </FormField>
+
+                        </FormLayout>
+                    </div>
+                )}
+            </div>
         </div>
     )
 }
diff --git a/apps/web/components/Dashboard/Course/EditCourseStructure/EditCourseStructure.tsx b/apps/web/components/Dashboard/Course/EditCourseStructure/EditCourseStructure.tsx
index 8b3262e2..43c26be6 100644
--- a/apps/web/components/Dashboard/Course/EditCourseStructure/EditCourseStructure.tsx
+++ b/apps/web/components/Dashboard/Course/EditCourseStructure/EditCourseStructure.tsx
@@ -92,6 +92,7 @@ const EditCourseStructure = (props: EditCourseStructureProps) => {
 
     return (
         <div className='flex flex-col'>
+            <div className="h-6"></div>
             {winReady ?
                 <DragDropContext onDragEnd={updateStructure}>
                     <Droppable type='chapter' droppableId='chapters'>
@@ -129,7 +130,7 @@ const EditCourseStructure = (props: EditCourseStructureProps) => {
                         dialogTitle="Create chapter"
                         dialogDescription="Add a new chapter to the course"
                         dialogTrigger={
-                            <div className="mt-4 w-44 max-w-screen-2xl mx-auto bg-cyan-800 text-white rounded-xl shadow-sm px-6 items-center flex flex-row h-10">
+                            <div className="w-44 my-16 py-5 max-w-screen-2xl mx-auto bg-cyan-800 text-white rounded-xl shadow-sm px-6 items-center flex flex-row h-10">
                                 <div className='mx-auto flex space-x-2 items-center hover:cursor-pointer'>
                                     <Hexagon strokeWidth={3} size={16} className="text-white text-sm " />
                                     <div className='font-bold text-sm'>Add Chapter</div></div>