gitea/amati
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update : fixed position on the left and right sides, can only scroll for the middle

Browse Source
This commit is contained in:
percyfikri 2024-10-23 15:31:13 +07:00
parent d4c8e90670
commit 54e496355b
1 changed files with 138 additions and 129 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
apps/frontend/src/routes/_assessmentLayout/assessment/index.lazy.tsx
View File

@ -23,7 +23,7 @@ import {
getQuestionsAllQueryOptions, getQuestionsAllQueryOptions,
toggleFlagAnswer, toggleFlagAnswer,
} from "@/modules/assessmentManagement/queries/assessmentQueries"; } from "@/modules/assessmentManagement/queries/assessmentQueries";
import { TbFlagFilled, TbUpload, TbChevronRight, TbChevronUp } from "react-icons/tb"; import { TbFlagFilled, TbUpload, TbChevronRight, TbChevronDown } from "react-icons/tb";
import FinishAssessmentModal from "@/modules/assessmentManagement/modals/ConfirmModal"; import FinishAssessmentModal from "@/modules/assessmentManagement/modals/ConfirmModal";
import ValidationModal from "@/modules/assessmentManagement/modals/ValidationModal"; import ValidationModal from "@/modules/assessmentManagement/modals/ValidationModal";
import { useState, useRef, useEffect } from "react"; import { useState, useRef, useEffect } from "react";
@ -505,6 +505,7 @@ export default function AssessmentPage() {
{/* LEFT-SIDE */} {/* LEFT-SIDE */}
{/* Aspek dan Sub-Aspek */} {/* Aspek dan Sub-Aspek */}
<div className="fixed h-screen w-64 overflow-auto">
<Flex direction="column" gap="xs" className="w-64"> <Flex direction="column" gap="xs" className="w-64">
<div className="space-y-2"> <div className="space-y-2">
{/* Aspek */} {/* Aspek */}
@ -526,7 +527,7 @@ export default function AssessmentPage() {
<div className="text-sm font-bold px-3">{aspect.name}</div> <div className="text-sm font-bold px-3">{aspect.name}</div>
<div> <div>
{openAspects[aspect.id] ? ( {openAspects[aspect.id] ? (
<TbChevronUp size={25} /> <TbChevronDown size={25} />
) : ( ) : (
<TbChevronRight size={25} /> <TbChevronRight size={25} />
)} )}
@ -555,8 +556,12 @@ export default function AssessmentPage() {
))} ))}
</div> </div>
</Flex> </Flex>
</div>
{/* MIDDLE */}
{/* Pertanyaan */} {/* Pertanyaan */}
{/* <div className="w-full ml-64"></div> */}
<div className="ml-64 mr-72 flex-1 overflow-y-auto h-full">
<Stack gap="sm" style={{ flex: 1 }}> <Stack gap="sm" style={{ flex: 1 }}>
<Text className="text-2xl font-bold ml-6"> <Text className="text-2xl font-bold ml-6">
Harap menjawab semua pertanyaan yang tersedia Harap menjawab semua pertanyaan yang tersedia
@ -580,9 +585,9 @@ export default function AssessmentPage() {
<Stack gap="sm"> <Stack gap="sm">
<Flex justify="space-between" align="flex-start" style={{ width: "100%" }}> <Flex justify="space-between" align="flex-start" style={{ width: "100%" }}>
{/* Question */} {/* Question */}
<Text className="font-bold mx-3 p-1">{startIndex + index + 1}.</Text> <Text className="font-bold mx-3 p-1 text-sm">{startIndex + index + 1}.</Text>
<div className="flex-grow"> <div className="flex-grow">
<Text className="font-bold break-words text-sm"> <Text className="font-bold break-words text-sm p-1">
{question.questionText} {question.questionText}
</Text> </Text>
</div> </div>
@ -703,7 +708,7 @@ export default function AssessmentPage() {
)} )}
</div> </div>
<div className="ml-6"> <div className="mx-11 px-1">
{uploadedFiles[question.questionId] && ( {uploadedFiles[question.questionId] && (
<Stack gap="sm" mt="sm"> <Stack gap="sm" mt="sm">
<Text className="font-bold">File yang diunggah:</Text> <Text className="font-bold">File yang diunggah:</Text>
@ -728,8 +733,11 @@ export default function AssessmentPage() {
}) })
)} )}
</Stack> </Stack>
</div>
{/* RIGHT-SIDE */}
{/* Navigasi dan Pagination */} {/* Navigasi dan Pagination */}
<div className="fixed h-screen right-0 w-72 overflow-auto mr-4">
<Flex direction="column" gap="xs" className="mx-4"> <Flex direction="column" gap="xs" className="mx-4">
{/* Navigasi (Number of Questions) */} {/* Navigasi (Number of Questions) */}
@ -833,6 +841,7 @@ export default function AssessmentPage() {
</Card> </Card>
</div> </div>
</Flex> </Flex>
</div>
</Flex> </Flex>
</Stack> </Stack>
</div> </div>