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

update: add scroll area using shadcn for left side bar

Browse Source
This commit is contained in:
abiyasa05 2024-11-18 15:37:58 +07:00
parent ca4ec0a538
commit 9bfad134cb
2 changed files with 189 additions and 181 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -626,6 +626,7 @@ export default function AssessmentPage() {
{isMobile && (
<LeftSheet open={isLeftSidebarOpen} onOpenChange={(open) => setIsLeftSidebarOpen(open)}>
<LeftSheetContent className="h-full w-75 overflow-auto">
<ScrollArea className="h-full w-75 rounded-md p-2">
<Label className="text-gray-800 p-5 text-sm font-normal">Aspek Menu</Label>
<div className="w-64">
<div className="space-y-2">
@ -674,12 +675,14 @@ export default function AssessmentPage() {
))}
</div>
</div>
</ScrollArea>
</LeftSheetContent>
</LeftSheet>
)}
{/* Sidebar for Desktop (Always Visible) */}
<div className="hidden md:block fixed h-full w-66 overflow-auto border-x">
<div className="hidden md:block fixed h-full w-62 overflow-auto border-x">
<ScrollArea className="h-full w-62 rounded-md p-2">
<Label className="text-gray-800 p-5 text-sm font-normal">Aspek Menu</Label>
<div className="w-64">
<div className="space-y-2">
@ -728,6 +731,7 @@ export default function AssessmentPage() {
))}
</div>
</div>
</ScrollArea>
</div>
{/* MIDDLE */}
@ -755,10 +759,10 @@ export default function AssessmentPage() {
>
<div className="grid grid-cols-[auto_1fr_auto] gap-2 w-full items-start">
{/* Question Number */}
<Label className="font-bold p-2 text-sm">{startIndex + index + 1}.</Label>
<Label className="font-bold pl-6 text-sm">{startIndex + index + 1}.</Label>
{/* Question Text */}
<Label className="font-bold break-words text-sm p-2">{question.questionText}</Label>
<Label className="font-bold break-words text-sm">{question.questionText}</Label>
{/* Action Button/Flag */}
<button

8
apps/frontend/src/routes/_verifyingLayout/verifying/index.lazy.tsx
View File

@ -590,6 +590,7 @@ export default function AssessmentPage() {
{isMobile && (
<LeftSheet open={isLeftSidebarOpen} onOpenChange={(open) => setIsLeftSidebarOpen(open)}>
<LeftSheetContent className="h-full w-75 overflow-auto">
<ScrollArea className="h-full w-75 rounded-md p-2">
<Label className="text-gray-800 p-5 text-sm font-normal">Aspek Menu</Label>
<div className="w-64">
<div className="space-y-2">
@ -638,12 +639,14 @@ export default function AssessmentPage() {
))}
</div>
</div>
</ScrollArea>
</LeftSheetContent>
</LeftSheet>
)}
{/* Sidebar for Desktop (Always Visible) */}
<div className="hidden md:block fixed h-full w-66 overflow-auto border-x">
<ScrollArea className="h-full w-62 rounded-md p-2">
<Label className="text-gray-800 p-5 text-sm font-normal">Aspek Menu</Label>
<div className="w-64">
<div className="space-y-2">
@ -692,6 +695,7 @@ export default function AssessmentPage() {
))}
</div>
</div>
</ScrollArea>
</div>
{/* MIDDLE */}
@ -719,10 +723,10 @@ export default function AssessmentPage() {
>
<div className="grid grid-cols-[auto_1fr_auto] gap-2 w-full items-start">
{/* Question Number */}
<Label className="font-bold p-2 text-sm">{startIndex + index + 1}.</Label>
<Label className="font-bold pl-6 text-sm">{startIndex + index + 1}.</Label>
{/* Question Text */}
<Label className="font-bold break-words text-sm p-2">{question.questionText}</Label>
<Label className="font-bold break-words text-sm">{question.questionText}</Label>
</div>
{/* Radio Button Options */}