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
);
return (
<div className="h-full overflow-y-auto">
<div className="h-full overflow-y-auto ">
<section>
<div className="flex">
<div className="flex-1 text-end pe-3">Due Date</div>

17
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 { Spinner } from "@/components/Spinner";
import { getAssignmentHelpString } from "./getAssignmentHelpString";
import { EditLayout } from "@/components/EditLayout";
export default function EditAssignment({
moduleName,
@@ -120,12 +121,15 @@ export default function EditAssignment({
]);
return (
<div className="h-full flex flex-col align-middle px-1">
<EditLayout
Header={
<EditAssignmentHeader
moduleName={moduleName}
assignmentName={assignmentName}
/>
<div className={"min-h-0 flex flex-row w-full flex-grow"}>
}
Body={
<>
{showHelp && (
<pre className=" max-w-96">
<code>{getAssignmentHelpString(settings)}</code>
@@ -137,7 +141,7 @@ export default function EditAssignment({
<div className="flex-1 h-full">
<div className="text-red-300">{error && error}</div>
<div className="px-3 h-full">
<div className="px-3 h-full ">
<ClientOnly>
<SuspenseAndErrorHandling showToast={false}>
{imageUpdateIsPending && (
@@ -151,7 +155,9 @@ export default function EditAssignment({
</ClientOnly>
</div>
</div>
</div>
</>
}
Footer={
<ClientOnly>
<SuspenseAndErrorHandling>
<AssignmentFooterButtons
@@ -161,6 +167,7 @@ export default function EditAssignment({
/>
</SuspenseAndErrorHandling>
</ClientOnly>
</div>
}
/>
);
}

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

@@ -13,14 +13,14 @@ export default function EditAssignmentHeader({
const { courseName } = useCourseContext();
return (
<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}
</Link>
<UpdateAssignmentName
assignmentName={assignmentName}
moduleName={moduleName}
/>
<div>{assignmentName}</div>
<div className="my-auto">{assignmentName}</div>
</div>
);
}

26
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 { useAuthoritativeUpdates } from "@/app/course/[courseName]/utils/useAuthoritativeUpdates";
import EditPageHeader from "./EditPageHeader";
import { EditLayout } from "@/components/EditLayout";
export default function EditPage({
moduleName,
@@ -67,17 +68,6 @@ export default function EditPage({
previousPageName: pageName,
courseName,
});
// .then(() => {
// if (updatedPage.name !== pageName)
// router.replace(
// getModuleItemUrl(
// courseName,
// moduleName,
// "page",
// updatedPage.name
// )
// );
// });
} else {
console.log(
"client not authoritative, updating client with server page"
@@ -109,8 +99,9 @@ export default function EditPage({
]);
return (
<div className="h-full flex flex-col">
<EditPageHeader pageName={pageName} moduleName={moduleName} />
<EditLayout
Header={<EditPageHeader pageName={pageName} moduleName={moduleName} />}
Body={
<div className="columns-2 min-h-0 flex-1">
<div className="flex-1 h-full">
<MonacoEditor key={monacoKey} value={text} onChange={textUpdate} />
@@ -123,11 +114,16 @@ export default function EditPage({
</div>
</div>
</div>
}
Footer={
<>
{settings.canvasId && (
<ClientOnly>
<EditPageButtons pageName={pageName} moduleName={moduleName} />
</ClientOnly>
)}
</div>
);
</>
}
/>
)
}

15
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 { LocalCourseSettings } from "@/models/local/localCourseSettings";
import { useLocalCourseSettingsQuery } from "@/hooks/localCourse/localCoursesHooks";
import { EditLayout } from "@/components/EditLayout";
const helpString = (settings: LocalCourseSettings) => {
const groupNames = settings.assignmentGroups.map((g) => g.name).join("\n- ");
@@ -148,9 +149,10 @@ export default function EditQuiz({
]);
return (
<div className="h-full flex flex-col align-middle px-1">
<EditQuizHeader moduleName={moduleName} quizName={quizName} />
<div className={"min-h-96 h-full flex flex-row w-full"}>
<EditLayout
Header={<EditQuizHeader moduleName={moduleName} quizName={quizName} />}
Body={
<>
{showHelp && (
<pre className=" max-w-96">
<code>{helpString(settings)}</code>
@@ -163,7 +165,9 @@ export default function EditQuiz({
<div className="text-red-300">{error && error}</div>
<QuizPreview moduleName={moduleName} quizName={quizName} />
</div>
</div>
</>
}
Footer={
<ClientOnly>
<SuspenseAndErrorHandling>
<QuizButtons
@@ -173,6 +177,7 @@ export default function EditQuiz({
/>
</SuspenseAndErrorHandling>
</ClientOnly>
</div>
}
/>
);
}

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">
<DragStyleContextProvider>
<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">
<CourseNavigation />
<CourseCalendar />

6
src/app/globals.css
View File

@@ -83,6 +83,7 @@ p {
button,
.btn {
@apply font-bold py-1 px-3 rounded transition-all duration-200;
@apply cursor-pointer;
}
.btn-thin {
@@ -91,11 +92,12 @@ button,
button: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 {
@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 {

2
src/app/layout.tsx
View File

@@ -26,7 +26,7 @@ export default async function RootLayout({
<html lang="en">
<head></head>
<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 />
<Suspense>
<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-background,
.monaco-editor .margin {
background-color: #020617 !important;
/* background-color: #18181b !important; */
/* background-color: #020617 !important; */
background-color: #030712 !important;
/* background-color: #101828 !important; */
}
.monaco-editor {
position: absolute !important;