alex/canvasManagement
1
0
Fork 0
mirror of https://github.com/alexmickelson/canvasManagement.git synced 2026-03-25 23:28:33 -06:00
Code Issues Packages Projects Releases Wiki Activity

consoladating layouts

Browse Source
This commit is contained in:
Alex Mickelson
2025-07-15 11:43:46 -06:00
parent c33b40b55e
commit 57b7d8ac1e
10 changed files with 135 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/AssignmentPreview.tsx
View File

@@ -15,7 +15,7 @@ export default function AssignmentPreview({
0 0
); );
return ( return (
<div className="h-full overflow-y-auto"> <div className="h-full overflow-y-auto ">
<section> <section>
<div className="flex"> <div className="flex">
<div className="flex-1 text-end pe-3">Due Date</div> <div className="flex-1 text-end pe-3">Due Date</div>

91
src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/EditAssignment.tsx
View File

@@ -21,6 +21,7 @@ import { useAuthoritativeUpdates } from "@/app/course/[courseName]/utils/useAuth
import EditAssignmentHeader from "./EditAssignmentHeader"; import EditAssignmentHeader from "./EditAssignmentHeader";
import { Spinner } from "@/components/Spinner"; import { Spinner } from "@/components/Spinner";
import { getAssignmentHelpString } from "./getAssignmentHelpString"; import { getAssignmentHelpString } from "./getAssignmentHelpString";
import { EditLayout } from "@/components/EditLayout";
export default function EditAssignment({ export default function EditAssignment({
moduleName, moduleName,
@@ -95,7 +96,7 @@ export default function EditAssignment({
} }
} }
setError(""); setError("");
// eslint-disable-next-line @typescript-eslint/no-explicit-any // eslint-disable-next-line @typescript-eslint/no-explicit-any
} catch (e: any) { } catch (e: any) {
setError(e.toString()); setError(e.toString());
} }
@@ -120,47 +121,53 @@ export default function EditAssignment({
]); ]);
return ( return (
<div className="h-full flex flex-col align-middle px-1"> <EditLayout
<EditAssignmentHeader Header={
moduleName={moduleName} <EditAssignmentHeader
assignmentName={assignmentName} moduleName={moduleName}
/> assignmentName={assignmentName}
<div className={"min-h-0 flex flex-row w-full flex-grow"}> />
{showHelp && ( }
<pre className=" max-w-96"> Body={
<code>{getAssignmentHelpString(settings)}</code> <>
</pre> {showHelp && (
)} <pre className=" max-w-96">
<div className="flex-1 h-full"> <code>{getAssignmentHelpString(settings)}</code>
<MonacoEditor key={monacoKey} value={text} onChange={textUpdate} /> </pre>
</div> )}
<div className="flex-1 h-full"> <div className="flex-1 h-full">
<div className="text-red-300">{error && error}</div> <MonacoEditor key={monacoKey} value={text} onChange={textUpdate} />
<div className="px-3 h-full">
<ClientOnly>
<SuspenseAndErrorHandling showToast={false}>
{imageUpdateIsPending && (
<div className="flex justify-center">
<Spinner /> images being uploaded to canvas
</div>
)}
<AssignmentPreview assignment={assignment} />
</SuspenseAndErrorHandling>
</ClientOnly>
</div> </div>
</div> <div className="flex-1 h-full">
</div> <div className="text-red-300">{error && error}</div>
<ClientOnly>
<SuspenseAndErrorHandling> <div className="px-3 h-full ">
<AssignmentFooterButtons <ClientOnly>
moduleName={moduleName} <SuspenseAndErrorHandling showToast={false}>
assignmentName={assignmentName} {imageUpdateIsPending && (
toggleHelp={() => setShowHelp((h) => !h)} <div className="flex justify-center">
/> <Spinner /> images being uploaded to canvas
</SuspenseAndErrorHandling> </div>
</ClientOnly> )}
</div>
<AssignmentPreview assignment={assignment} />
</SuspenseAndErrorHandling>
</ClientOnly>
</div>
</div>
</>
}
Footer={
<ClientOnly>
<SuspenseAndErrorHandling>
<AssignmentFooterButtons
moduleName={moduleName}
assignmentName={assignmentName}
toggleHelp={() => setShowHelp((h) => !h)}
/>
</SuspenseAndErrorHandling>
</ClientOnly>
}
/>
); );
} }

4
src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/EditAssignmentHeader.tsx
View File

@@ -13,14 +13,14 @@ export default function EditAssignmentHeader({
const { courseName } = useCourseContext(); const { courseName } = useCourseContext();
return ( return (
<div className="py-1 flex flex-row justify-start gap-3"> <div className="py-1 flex flex-row justify-start gap-3">
<Link className="btn btn-thin" href={getCourseUrl(courseName)} shallow={true}> <Link className="btn" href={getCourseUrl(courseName)} shallow={true}>
{courseName} {courseName}
</Link> </Link>
<UpdateAssignmentName <UpdateAssignmentName
assignmentName={assignmentName} assignmentName={assignmentName}
moduleName={moduleName} moduleName={moduleName}
/> />
<div>{assignmentName}</div> <div className="my-auto">{assignmentName}</div>
</div> </div>
); );
} }

56
src/app/course/[courseName]/modules/[moduleName]/page/[pageName]/EditPage.tsx
View File

@@ -14,6 +14,7 @@ import { useRouter } from "next/navigation";
import { useCourseContext } from "@/app/course/[courseName]/context/courseContext"; import { useCourseContext } from "@/app/course/[courseName]/context/courseContext";
import { useAuthoritativeUpdates } from "@/app/course/[courseName]/utils/useAuthoritativeUpdates"; import { useAuthoritativeUpdates } from "@/app/course/[courseName]/utils/useAuthoritativeUpdates";
import EditPageHeader from "./EditPageHeader"; import EditPageHeader from "./EditPageHeader";
import { EditLayout } from "@/components/EditLayout";
export default function EditPage({ export default function EditPage({
moduleName, moduleName,
@@ -67,17 +68,6 @@ export default function EditPage({
previousPageName: pageName, previousPageName: pageName,
courseName, courseName,
}); });
// .then(() => {
// if (updatedPage.name !== pageName)
// router.replace(
// getModuleItemUrl(
// courseName,
// moduleName,
// "page",
// updatedPage.name
// )
// );
// });
} else { } else {
console.log( console.log(
"client not authoritative, updating client with server page" "client not authoritative, updating client with server page"
@@ -109,25 +99,31 @@ export default function EditPage({
]); ]);
return ( return (
<div className="h-full flex flex-col"> <EditLayout
<EditPageHeader pageName={pageName} moduleName={moduleName} /> Header={<EditPageHeader pageName={pageName} moduleName={moduleName} />}
<div className="columns-2 min-h-0 flex-1"> Body={
<div className="flex-1 h-full"> <div className="columns-2 min-h-0 flex-1">
<MonacoEditor key={monacoKey} value={text} onChange={textUpdate} /> <div className="flex-1 h-full">
</div> <MonacoEditor key={monacoKey} value={text} onChange={textUpdate} />
<div className="h-full"> </div>
<div className="text-red-300">{error && error}</div> <div className="h-full">
<div className="h-full overflow-y-auto"> <div className="text-red-300">{error && error}</div>
<br /> <div className="h-full overflow-y-auto">
<PagePreview page={page} /> <br />
<PagePreview page={page} />
</div>
</div> </div>
</div> </div>
</div> }
{settings.canvasId && ( Footer={
<ClientOnly> <>
<EditPageButtons pageName={pageName} moduleName={moduleName} /> {settings.canvasId && (
</ClientOnly> <ClientOnly>
)} <EditPageButtons pageName={pageName} moduleName={moduleName} />
</div> </ClientOnly>
); )}
</>
}
/>
)
} }

57
src/app/course/[courseName]/modules/[moduleName]/quiz/[quizName]/EditQuiz.tsx
View File

@@ -17,6 +17,7 @@ import { extractLabelValue } from "@/models/local/assignment/utils/markdownUtils
import EditQuizHeader from "./EditQuizHeader"; import EditQuizHeader from "./EditQuizHeader";
import { LocalCourseSettings } from "@/models/local/localCourseSettings"; import { LocalCourseSettings } from "@/models/local/localCourseSettings";
import { useLocalCourseSettingsQuery } from "@/hooks/localCourse/localCoursesHooks"; import { useLocalCourseSettingsQuery } from "@/hooks/localCourse/localCoursesHooks";
import { EditLayout } from "@/components/EditLayout";
const helpString = (settings: LocalCourseSettings) => { const helpString = (settings: LocalCourseSettings) => {
const groupNames = settings.assignmentGroups.map((g) => g.name).join("\n- "); const groupNames = settings.assignmentGroups.map((g) => g.name).join("\n- ");
@@ -148,31 +149,35 @@ export default function EditQuiz({
]); ]);
return ( return (
<div className="h-full flex flex-col align-middle px-1"> <EditLayout
<EditQuizHeader moduleName={moduleName} quizName={quizName} /> Header={<EditQuizHeader moduleName={moduleName} quizName={quizName} />}
<div className={"min-h-96 h-full flex flex-row w-full"}> Body={
{showHelp && ( <>
<pre className=" max-w-96"> {showHelp && (
<code>{helpString(settings)}</code> <pre className=" max-w-96">
</pre> <code>{helpString(settings)}</code>
)} </pre>
<div className="flex-1 h-full"> )}
<MonacoEditor key={monacoKey} value={text} onChange={textUpdate} /> <div className="flex-1 h-full">
</div> <MonacoEditor key={monacoKey} value={text} onChange={textUpdate} />
<div className="flex-1 h-full"> </div>
<div className="text-red-300">{error && error}</div> <div className="flex-1 h-full">
<QuizPreview moduleName={moduleName} quizName={quizName} /> <div className="text-red-300">{error && error}</div>
</div> <QuizPreview moduleName={moduleName} quizName={quizName} />
</div> </div>
<ClientOnly> </>
<SuspenseAndErrorHandling> }
<QuizButtons Footer={
moduleName={moduleName} <ClientOnly>
quizName={quizName} <SuspenseAndErrorHandling>
toggleHelp={() => setShowHelp((h) => !h)} <QuizButtons
/> moduleName={moduleName}
</SuspenseAndErrorHandling> quizName={quizName}
</ClientOnly> toggleHelp={() => setShowHelp((h) => !h)}
</div> />
</SuspenseAndErrorHandling>
</ClientOnly>
}
/>
); );
} }

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

@@ -11,7 +11,7 @@ export default async function CoursePage() {
<div className="h-full flex flex-col"> <div className="h-full flex flex-col">
<DragStyleContextProvider> <DragStyleContextProvider>
<DraggingContextProvider> <DraggingContextProvider>
<div className="flex sm:flex-row h-full flex-col"> <div className="flex sm:flex-row h-full flex-col max-w-[2400px] mx-auto">
<div className="flex-1 h-full flex flex-col"> <div className="flex-1 h-full flex flex-col">
<CourseNavigation /> <CourseNavigation />
<CourseCalendar /> <CourseCalendar />

6
src/app/globals.css
View File

@@ -83,6 +83,7 @@ p {
button, button,
.btn { .btn {
@apply font-bold py-1 px-3 rounded transition-all duration-200; @apply font-bold py-1 px-3 rounded transition-all duration-200;
@apply cursor-pointer;
} }
.btn-thin { .btn-thin {
@@ -91,11 +92,12 @@ button,
button:not(.unstyled):not(.btn-danger), button:not(.unstyled):not(.btn-danger),
.btn:not(.unstyled):not(.btn-danger) { .btn:not(.unstyled):not(.btn-danger) {
@apply bg-blue-900 hover:bg-blue-700 text-blue-50; @apply bg-blue-900/80 hover:bg-blue-800/80 text-blue-50;
@apply cursor-pointer;
} }
.btn-danger { .btn-danger {
@apply bg-red-800 hover:bg-red-900 text-red-100; @apply bg-red-800/60 hover:bg-red-900 text-red-100;
} }
.btn-outline { .btn-outline {

2
src/app/layout.tsx
View File

@@ -26,7 +26,7 @@ export default async function RootLayout({
<html lang="en"> <html lang="en">
<head></head> <head></head>
<body className="flex justify-center"> <body className="flex justify-center">
<div className="bg-slate-900 h-screen text-slate-300 w-screen sm:p-1"> <div className="bg-gray-950 h-screen text-slate-300 w-screen sm:p-1">
<MyToaster /> <MyToaster />
<Suspense> <Suspense>
<Providers> <Providers>

17
src/components/EditLayout.tsx Normal file
View File

@@ -0,0 +1,17 @@
import { FC, ReactNode } from "react";
export const EditLayout: FC<{
Header: ReactNode;
Body: ReactNode;
Footer: ReactNode;
}> = ({ Header, Body, Footer }) => {
return (
<div className="h-full flex flex-col align-middle px-1 max-w-[2400px] mx-auto bg-gray-900 rounded">
{Header}
<div className="min-h-0 flex flex-row w-full flex-grow">
{Body}
</div>
{Footer}
</div>
);
};

5
src/components/editor/MonacoEditor.css
View File

@@ -5,8 +5,9 @@
/* monaco editor */ /* monaco editor */
.monaco-editor-background, .monaco-editor-background,
.monaco-editor .margin { .monaco-editor .margin {
background-color: #020617 !important; /* background-color: #020617 !important; */
/* background-color: #18181b !important; */ background-color: #030712 !important;
/* background-color: #101828 !important; */
} }
.monaco-editor { .monaco-editor {
position: absolute !important; position: absolute !important;