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