assignment layout

This commit is contained in:
2024-09-19 22:11:46 -06:00
parent 6ff7ca6469
commit dc66c704da
2 changed files with 6 additions and 6 deletions

View File

@@ -13,7 +13,7 @@ import {
} from "@/hooks/localCourse/quizHooks"; } from "@/hooks/localCourse/quizHooks";
import { IModuleItem } from "@/models/local/IModuleItem"; import { IModuleItem } from "@/models/local/IModuleItem";
import { getDateFromStringOrThrow } from "@/models/local/timeUtils"; import { getDateFromStringOrThrow } from "@/models/local/timeUtils";
import { Suspense, useEffect, useState } from "react"; import { Suspense, useEffect, useRef, useState } from "react";
import Modal from "../../../../components/Modal"; import Modal from "../../../../components/Modal";
import NewItemForm from "./NewItemForm"; import NewItemForm from "./NewItemForm";
import { useCanvasModulesQuery } from "@/hooks/canvas/canvasModuleHooks"; import { useCanvasModulesQuery } from "@/hooks/canvas/canvasModuleHooks";
@@ -70,6 +70,7 @@ export default function ExpandableModule({
"item due date in expandable module" "item due date in expandable module"
).getTime() ).getTime()
); );
const expandRef = useRef<HTMLDivElement | null>(null);
return ( return (
<div className="bg-slate-800 rounded-lg p-3 border border-slate-600 mb-3"> <div className="bg-slate-800 rounded-lg p-3 border border-slate-600 mb-3">
@@ -91,11 +92,10 @@ export default function ExpandableModule({
</div> </div>
</div> </div>
<div <div
className={ ref={expandRef}
` overflow-hidden ` + (expanded ? " max-h-[30vh]" : " max-h-0") className={` overflow-hidden transition-all `}
}
style={{ style={{
transition: "max-height 1s cubic-bezier(0, 1, 0, 1)", maxHeight: expanded ? expandRef?.current?.scrollHeight : "0",
}} }}
> >
<Modal buttonText="New Item"> <Modal buttonText="New Item">

View File

@@ -77,7 +77,7 @@ export default function EditAssignment({
return ( return (
<div className="h-full flex flex-col align-middle px-1"> <div className="h-full flex flex-col align-middle px-1">
<div className={"min-h-96 flex flex-row w-full"}> <div className={"min-h-0 flex flex-row w-full flex-grow"}>
{showHelp && ( {showHelp && (
<pre className=" max-w-96"> <pre className=" max-w-96">
<code>{getHelpString(settings)}</code> <code>{getHelpString(settings)}</code>