alex/canvasManagement
1
0
Fork 0
mirror of https://github.com/alexmickelson/canvasManagement.git synced 2026-03-26 15:48:32 -06:00
Code Issues Packages Projects Releases Wiki Activity

got the middle scrolling correct

Browse Source
This commit is contained in:
Alex Mickelson
2024-08-27 20:52:41 -06:00
parent 72f391dcf9
commit 6d760dbe6c
6 changed files with 35 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
nextjs/src/app/course/[courseName]/ModuleList.tsx
View File

@@ -1,3 +0,0 @@
export default function ModuleList() {
return <div></div>
}

4
nextjs/src/app/course/[courseName]/calendar/CourseCalendar.tsx
View File

@@ -19,10 +19,10 @@ export default function CourseCalendar() {
const months = getMonthsBetweenDates(startDateTime, endDateTime); const months = getMonthsBetweenDates(startDateTime, endDateTime);
return ( return (
<> <div className="overflow-y-scroll h-full border bg-slate-950">
{months.map((month) => ( {months.map((month) => (
<CalendarMonth key={month.month + "" + month.year} month={month} /> <CalendarMonth key={month.month + "" + month.year} month={month} />
))} ))}
</> </div>
); );
} }

11
nextjs/src/app/course/[courseName]/modules/ExpandableModule.tsx Normal file
View File

@@ -0,0 +1,11 @@
import { LocalModule } from "@/models/local/localModules";
import React from "react";
export default function ExpandableModule({ module }: { module: LocalModule }) {
return (
<details>
<summary> {module.name}</summary>
expanded details
</details>
);
}

16
nextjs/src/app/course/[courseName]/modules/ModuleList.tsx Normal file
View File

@@ -0,0 +1,16 @@
"use client";
import { useCourseContext } from "../context/courseContext";
import ExpandableModule from "./ExpandableModule";
export default function ModuleList() {
const {
localCourse: { modules },
} = useCourseContext();
return (
<div>
{modules.map((m) => (
<ExpandableModule key={m.name} module={m} />
))}
</div>
);
}

10
nextjs/src/app/course/[courseName]/page.tsx
View File

@@ -3,7 +3,7 @@ import CourseContextProvider from "./context/CourseContextProvider";
import CourseCalendar from "./calendar/CourseCalendar"; import CourseCalendar from "./calendar/CourseCalendar";
import { HydrationBoundary } from "@tanstack/react-query"; import { HydrationBoundary } from "@tanstack/react-query";
import CourseSettings from "./CourseSettings"; import CourseSettings from "./CourseSettings";
import ModuleList from "./ModuleList"; import ModuleList from "./modules/ModuleList";
export default async function CoursePage({ export default async function CoursePage({
params: { courseName }, params: { courseName },
@@ -14,13 +14,13 @@ export default async function CoursePage({
return ( return (
<HydrationBoundary state={dehydratedState}> <HydrationBoundary state={dehydratedState}>
<CourseContextProvider localCourseName={courseName}> <CourseContextProvider localCourseName={courseName}>
<div> <div className="h-full flex flex-col">
<CourseSettings /> <CourseSettings />
<div className="flex flex-row"> <div className="flex flex-row min-h-0">
<div className="grow"> <div className="flex-1 min-h-0">
<CourseCalendar /> <CourseCalendar />
</div> </div>
<div className="w-96"> <div className="m-5">
<ModuleList /> <ModuleList />
</div> </div>
</div> </div>

2
nextjs/src/app/layout.tsx
View File

@@ -25,7 +25,7 @@ export default function RootLayout({
return ( return (
<html lang="en"> <html lang="en">
<Providers> <Providers>
<body className="bg-slate-950">{children}</body> <body className="bg-slate-900 h-screen p-1">{children}</body>
</Providers> </Providers>
</html> </html>
); );