rzmk/learnhouse
1
0
Fork 0
mirror of https://github.com/rzmk/learnhouse.git synced 2025-12-19 04:19:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: make chapters ordering scrollable

Browse source
This commit is contained in:
swve 2024-01-18 00:12:32 +01:00
parent 2552016a36
commit 2f390566f3
3 changed files with 69 additions and 66 deletions
Download patch file Download diff file Expand all files Collapse all files

6
apps/web/app/orgs/[orgslug]/dash/courses/course/[courseuuid]/[subpage]/page.tsx
View file

@ -32,9 +32,9 @@ function CourseOverviewPage({ params }: { params: CourseOverviewParams }) {
} }
return ( 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)}> <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} /> <CourseOverviewTop params={params} />
<div className='flex space-x-5 font-black text-sm'> <div className='flex space-x-5 font-black text-sm'>
<Link href={getUriWithOrg(params.orgslug, "") + `/dash/courses/course/${params.courseuuid}/general`}> <Link href={getUriWithOrg(params.orgslug, "") + `/dash/courses/course/${params.courseuuid}/general`}>
@ -57,12 +57,12 @@ function CourseOverviewPage({ params }: { params: CourseOverviewParams }) {
</Link> </Link>
</div> </div>
</div> </div>
<div className='h-6'></div>
<motion.div <motion.div
initial={{ opacity: 0, }} initial={{ opacity: 0, }}
animate={{ opacity: 1 }} animate={{ opacity: 1 }}
exit={{ opacity: 0 }} exit={{ opacity: 0 }}
transition={{ duration: 0.10, type: "spring", stiffness: 80 }} transition={{ duration: 0.10, type: "spring", stiffness: 80 }}
className='h-full overflow-y-auto'
> >
{params.subpage == 'content' ? <EditCourseStructure orgslug={params.orgslug} /> : ''} {params.subpage == 'content' ? <EditCourseStructure orgslug={params.orgslug} /> : ''}
{params.subpage == 'general' ? <EditCourseGeneral orgslug={params.orgslug} /> : ''} {params.subpage == 'general' ? <EditCourseGeneral orgslug={params.orgslug} /> : ''}

2
apps/web/components/Dashboard/Course/EditCourseGeneral/EditCourseGeneral.tsx
View file

@ -84,6 +84,7 @@ function EditCourseGeneral(props: EditCourseStructureProps) {
}, [course, formik.values, formik.initialValues]); }, [course, formik.values, formik.initialValues]);
return ( return (
<div> <div className="h-6"></div>
<div className='ml-10 mr-10 mx-auto bg-white rounded-xl shadow-sm px-6 py-5'> <div className='ml-10 mr-10 mx-auto bg-white rounded-xl shadow-sm px-6 py-5'>
{course.courseStructure && ( {course.courseStructure && (
@ -150,6 +151,7 @@ function EditCourseGeneral(props: EditCourseStructureProps) {
</div> </div>
)} )}
</div> </div>
</div>
) )
} }

3
apps/web/components/Dashboard/Course/EditCourseStructure/EditCourseStructure.tsx
View file

@ -92,6 +92,7 @@ const EditCourseStructure = (props: EditCourseStructureProps) => {
return ( return (
<div className='flex flex-col'> <div className='flex flex-col'>
<div className="h-6"></div>
{winReady ? {winReady ?
<DragDropContext onDragEnd={updateStructure}> <DragDropContext onDragEnd={updateStructure}>
<Droppable type='chapter' droppableId='chapters'> <Droppable type='chapter' droppableId='chapters'>
@ -129,7 +130,7 @@ const EditCourseStructure = (props: EditCourseStructureProps) => {
dialogTitle="Create chapter" dialogTitle="Create chapter"
dialogDescription="Add a new chapter to the course" dialogDescription="Add a new chapter to the course"
dialogTrigger={ 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'> <div className='mx-auto flex space-x-2 items-center hover:cursor-pointer'>
<Hexagon strokeWidth={3} size={16} className="text-white text-sm " /> <Hexagon strokeWidth={3} size={16} className="text-white text-sm " />
<div className='font-bold text-sm'>Add Chapter</div></div> <div className='font-bold text-sm'>Add Chapter</div></div>