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

Update : font size

Browse Source
This commit is contained in:
percyfikri 2024-10-23 13:16:39 +07:00
parent 0c5e777273
commit 666ef86756
1 changed files with 19 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -447,7 +447,7 @@ export default function AssessmentPage() {
{/* LEFT-SIDE */} {/* LEFT-SIDE */}
{/* Aspek dan Sub-Aspek */} {/* Aspek dan Sub-Aspek */}
<Flex direction="column" gap="xs" className="w-52"> <Flex direction="column" gap="xs" className="w-64">
<div className="space-y-2"> <div className="space-y-2">
{/* Aspek */} {/* Aspek */}
{aspectsQuery.data?.data {aspectsQuery.data?.data
@ -465,7 +465,7 @@ export default function AssessmentPage() {
className="flex justify-between cursor-pointer" className="flex justify-between cursor-pointer"
onClick={() => toggleAspect(aspect.id)} onClick={() => toggleAspect(aspect.id)}
> >
<div className="text-lg 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} /> <TbChevronUp size={25} />
@ -488,7 +488,7 @@ export default function AssessmentPage() {
className={`flex justify-between cursor-pointer p-2 px-6 rounded-sm transition-colors duration-150 ${selectedSubAspectId === subAspect.id ? 'text-black font-medium bg-gray-200' : 'text-gray-500'}`} className={`flex justify-between cursor-pointer p-2 px-6 rounded-sm transition-colors duration-150 ${selectedSubAspectId === subAspect.id ? 'text-black font-medium bg-gray-200' : 'text-gray-500'}`}
onClick={() => setSelectedSubAspectId(subAspect.id)} onClick={() => setSelectedSubAspectId(subAspect.id)}
> >
<div>{subAspect.name}</div> <div className="text-xs">{subAspect.name}</div>
</div> </div>
))} ))}
</div> </div>
@ -503,9 +503,9 @@ export default function AssessmentPage() {
<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
</Text> </Text>
<Text className="text-gray-400 ml-6">Semua jawaban Anda akan ditinjau</Text> <Text className="text-gray-400 ml-6 mb-7">Semua jawaban Anda akan ditinjau</Text>
{filteredQuestions.length === 0 ? ( {filteredQuestions.length === 0 ? (
<Text color="black" className="text-center p-3"> <Text className="text-center p-3">
Pertanyaan tidak ada untuk sub-aspek yang dipilih. Pertanyaan tidak ada untuk sub-aspek yang dipilih.
</Text> </Text>
) : ( ) : (
@ -524,7 +524,7 @@ export default function AssessmentPage() {
{/* Question */} {/* Question */}
<Text className="font-bold mx-3 p-1">{startIndex + index + 1}.</Text> <Text className="font-bold mx-3 p-1">{startIndex + index + 1}.</Text>
<div className="flex-grow"> <div className="flex-grow">
<Text className="font-bold break-words"> <Text className="font-bold break-words text-sm">
{question.questionText} {question.questionText}
</Text> </Text>
</div> </div>
@ -565,13 +565,13 @@ export default function AssessmentPage() {
{/* Opsi Radio Button */} {/* Opsi Radio Button */}
{question.options?.length > 0 ? ( {question.options?.length > 0 ? (
<div className="mx-12"> <div className="mx-11">
<Radio.Group value={answers[question.questionId] || ""}> <Radio.Group value={answers[question.questionId] || ""}>
<div className="flex flex-col gap-4"> <div className="flex flex-col gap-2">
{question.options.map((option: any) => ( {question.options.map((option: any) => (
<label <label
key={option.optionId} key={option.optionId}
className={`cursor-pointer transition-transform transform hover:scale-105 shadow-md hover:shadow-lg flex items-center border rounded-lg p-4 ${ className={`cursor-pointer transition-transform transform hover:scale-105 shadow-md hover:shadow-lg flex items-center border rounded-lg p-3 text-sm ${
answers[question.questionId] === option.optionId answers[question.questionId] === option.optionId
? "bg-blue-500 text-white" ? "bg-blue-500 text-white"
: "bg-gray-200 text-black" : "bg-gray-200 text-black"
@ -583,7 +583,7 @@ export default function AssessmentPage() {
className="font-bold" className="font-bold"
value={option.optionId} value={option.optionId}
label={option.optionText} label={option.optionText}
size="md" size="xs"
radius="xl" radius="xl"
style={{ pointerEvents: "none" }} style={{ pointerEvents: "none" }}
checked={answers[question.questionId] === option.optionId} // Untuk menampilkan jawaban yang sudah dipilih checked={answers[question.questionId] === option.optionId} // Untuk menampilkan jawaban yang sudah dipilih
@ -599,7 +599,7 @@ export default function AssessmentPage() {
)} )}
{/* Textarea */} {/* Textarea */}
<div className="mx-12"> <div className="mx-11">
<Textarea <Textarea
placeholder="Berikan keterangan terkait jawaban di atas" placeholder="Berikan keterangan terkait jawaban di atas"
value={validationInformation[question.questionId] || ""} value={validationInformation[question.questionId] || ""}
@ -609,7 +609,7 @@ export default function AssessmentPage() {
</div> </div>
{/* File Upload */} {/* File Upload */}
<div className="mx-12"> <div className="mx-11">
{question.needFile === true && ( {question.needFile === true && (
<div <div
className={`pt-5 pb-5 pr-5 pl-5 border-2 rounded-lg border-dashed ${dragActive ? "bg-gray-100" : "bg-transparent" className={`pt-5 pb-5 pr-5 pl-5 border-2 rounded-lg border-dashed ${dragActive ? "bg-gray-100" : "bg-transparent"
@ -662,7 +662,7 @@ export default function AssessmentPage() {
{/* Garis pembatas setiap soal */} {/* Garis pembatas setiap soal */}
<div> <div>
<hr className="border-t-2 border-gray-300 mx-12 mt-6 mb-6" /> <hr className="border-t-2 border-gray-300 mx-11 mt-6 mb-6" />
</div> </div>
</Stack> </Stack>
</div> </div>
@ -686,7 +686,7 @@ export default function AssessmentPage() {
return ( return (
<div key={questionId} className="flex justify-center relative"> <div key={questionId} className="flex justify-center relative">
<button <button
className={`w-10 h-10 border rounded-lg flex items-center justify-center relative className={`w-9 h-9 border rounded-sm flex items-center justify-center relative text-md
${flaggedQuestions[questionId] ? "text-black" : "bg-transparent text-black"}`} ${flaggedQuestions[questionId] ? "text-black" : "bg-transparent text-black"}`}
onClick={() => scrollToQuestion(questionId)} onClick={() => scrollToQuestion(questionId)}
> >
@ -718,8 +718,8 @@ export default function AssessmentPage() {
{filteredAspects.length > 0 ? ( {filteredAspects.length > 0 ? (
filteredAspects.map((aspect) => ( filteredAspects.map((aspect) => (
<div key={aspect.aspectId} className="flex justify-between items-center"> <div key={aspect.aspectId} className="flex justify-between items-center">
<Text className="text-xl text-gray-400">{aspect.aspectName}</Text> <Text className="text-base text-gray-400">{aspect.aspectName}</Text>
<Text className="text-xl font-bold"> <Text className="text-base font-bold">
{parseFloat(aspect.averageScore).toFixed(2)} {parseFloat(aspect.averageScore).toFixed(2)}
</Text> </Text>
</div> </div>
@ -739,8 +739,8 @@ export default function AssessmentPage() {
{filteredSubAspects.length > 0 ? ( {filteredSubAspects.length > 0 ? (
filteredSubAspects.map((subAspect) => ( filteredSubAspects.map((subAspect) => (
<div key={subAspect.subAspectId} className="flex justify-between items-center"> {/* Change key to 'id' */} <div key={subAspect.subAspectId} className="flex justify-between items-center"> {/* Change key to 'id' */}
<Text className="text-lg text-gray-400">{subAspect.subAspectName}</Text> {/* Change to 'name' */} <Text className="text-sm text-gray-400">{subAspect.subAspectName}</Text> {/* Change to 'name' */}
<Text className="text-lg font-bold"> <Text className="text-sm font-bold">
{parseFloat(subAspect.averageScore).toFixed(2)} {parseFloat(subAspect.averageScore).toFixed(2)}
</Text> </Text>
</div> </div>
@ -753,7 +753,7 @@ export default function AssessmentPage() {
{/* Tombol Selesai */} {/* Tombol Selesai */}
<div className="mt-6"> <div className="mt-6">
<button onClick={handleFinishClick} className="bg-blue-500 text-white font-bold rounded-md py-2 w-full"> <button onClick={handleFinishClick} className="bg-blue-500 text-white font-bold rounded-md py-2 w-full text-sm">
Selesai Selesai
</button> </button>
</div> </div>