consoladating layouts

2026-03-26 07:38:33 -06:00 · 2025-07-15 11:43:46 -06:00
parent c33b40b55e
commit 57b7d8ac1e
10 changed files with 135 additions and 107 deletions
--- a/src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/AssignmentPreview.tsx
+++ b/src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/AssignmentPreview.tsx
@@ -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>
--- a/src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/EditAssignment.tsx
+++ b/src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/EditAssignment.tsx
@@ -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,
@@ -95,7 +96,7 @@ export default function EditAssignment({
          }
        }
        setError("");
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
      } catch (e: any) {
        setError(e.toString());
      }
@@ -120,47 +121,53 @@ export default function EditAssignment({
  ]);

  return (
-    <div className="h-full flex flex-col align-middle px-1">
-      <EditAssignmentHeader
-        moduleName={moduleName}
-        assignmentName={assignmentName}
-      />
-      <div className={"min-h-0 flex flex-row w-full flex-grow"}>
-        {showHelp && (
-          <pre className=" max-w-96">
-            <code>{getAssignmentHelpString(settings)}</code>
-          </pre>
-        )}
-        <div className="flex-1 h-full">
-          <MonacoEditor key={monacoKey} value={text} onChange={textUpdate} />
-        </div>
-        <div className="flex-1 h-full">
-          <div className="text-red-300">{error && error}</div>
-
-          <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>
+    <EditLayout
+      Header={
+        <EditAssignmentHeader
+          moduleName={moduleName}
+          assignmentName={assignmentName}
+        />
+      }
+      Body={
+        <>
+          {showHelp && (
+            <pre className=" max-w-96">
+              <code>{getAssignmentHelpString(settings)}</code>
+            </pre>
+          )}
+          <div className="flex-1 h-full">
+            <MonacoEditor key={monacoKey} value={text} onChange={textUpdate} />
          </div>
-        </div>
-      </div>
-      <ClientOnly>
-        <SuspenseAndErrorHandling>
-          <AssignmentFooterButtons
-            moduleName={moduleName}
-            assignmentName={assignmentName}
-            toggleHelp={() => setShowHelp((h) => !h)}
-          />
-        </SuspenseAndErrorHandling>
-      </ClientOnly>
-    </div>
+          <div className="flex-1 h-full">
+            <div className="text-red-300">{error && error}</div>
+
+            <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>
+        </>
+      }
+      Footer={
+        <ClientOnly>
+          <SuspenseAndErrorHandling>
+            <AssignmentFooterButtons
+              moduleName={moduleName}
+              assignmentName={assignmentName}
+              toggleHelp={() => setShowHelp((h) => !h)}
+            />
+          </SuspenseAndErrorHandling>
+        </ClientOnly>
+      }
+    />
  );
 }
--- a/src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/EditAssignmentHeader.tsx
+++ b/src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/EditAssignmentHeader.tsx
@@ -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>
  );
 }
--- a/src/app/course/[courseName]/modules/[moduleName]/page/[pageName]/EditPage.tsx
+++ b/src/app/course/[courseName]/modules/[moduleName]/page/[pageName]/EditPage.tsx
@@ -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,25 +99,31 @@ export default function EditPage({
  ]);

  return (
-    <div className="h-full flex flex-col">
-      <EditPageHeader pageName={pageName} moduleName={moduleName} />
-      <div className="columns-2 min-h-0 flex-1">
-        <div className="flex-1 h-full">
-          <MonacoEditor key={monacoKey} value={text} onChange={textUpdate} />
-        </div>
-        <div className="h-full">
-          <div className="text-red-300">{error && error}</div>
-          <div className="h-full overflow-y-auto">
-            <br />
-            <PagePreview page={page} />
+    <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} />
+          </div>
+          <div className="h-full">
+            <div className="text-red-300">{error && error}</div>
+            <div className="h-full overflow-y-auto">
+              <br />
+              <PagePreview page={page} />
+            </div>
          </div>
        </div>
-      </div>
-      {settings.canvasId && (
-        <ClientOnly>
-          <EditPageButtons pageName={pageName} moduleName={moduleName} />
-        </ClientOnly>
-      )}
-    </div>
-  );
+      }
+      Footer={
+        <>
+          {settings.canvasId && (
+            <ClientOnly>
+              <EditPageButtons pageName={pageName} moduleName={moduleName} />
+            </ClientOnly>
+          )}
+        </>
+      }
+    />
+  )
 }
--- a/src/app/course/[courseName]/modules/[moduleName]/quiz/[quizName]/EditQuiz.tsx
+++ b/src/app/course/[courseName]/modules/[moduleName]/quiz/[quizName]/EditQuiz.tsx
@@ -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,31 +149,35 @@ 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"}>
-        {showHelp && (
-          <pre className=" max-w-96">
-            <code>{helpString(settings)}</code>
-          </pre>
-        )}
-        <div className="flex-1 h-full">
-          <MonacoEditor key={monacoKey} value={text} onChange={textUpdate} />
-        </div>
-        <div className="flex-1 h-full">
-          <div className="text-red-300">{error && error}</div>
-          <QuizPreview moduleName={moduleName} quizName={quizName} />
-        </div>
-      </div>
-      <ClientOnly>
-        <SuspenseAndErrorHandling>
-          <QuizButtons
-            moduleName={moduleName}
-            quizName={quizName}
-            toggleHelp={() => setShowHelp((h) => !h)}
-          />
-        </SuspenseAndErrorHandling>
-      </ClientOnly>
-    </div>
+    <EditLayout
+      Header={<EditQuizHeader moduleName={moduleName} quizName={quizName} />}
+      Body={
+        <>
+          {showHelp && (
+            <pre className=" max-w-96">
+              <code>{helpString(settings)}</code>
+            </pre>
+          )}
+          <div className="flex-1 h-full">
+            <MonacoEditor key={monacoKey} value={text} onChange={textUpdate} />
+          </div>
+          <div className="flex-1 h-full">
+            <div className="text-red-300">{error && error}</div>
+            <QuizPreview moduleName={moduleName} quizName={quizName} />
+          </div>
+        </>
+      }
+      Footer={
+        <ClientOnly>
+          <SuspenseAndErrorHandling>
+            <QuizButtons
+              moduleName={moduleName}
+              quizName={quizName}
+              toggleHelp={() => setShowHelp((h) => !h)}
+            />
+          </SuspenseAndErrorHandling>
+        </ClientOnly>
+      }
+    />
  );
 }
--- a/src/app/course/[courseName]/page.tsx
+++ b/src/app/course/[courseName]/page.tsx
@@ -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 />