Improved the responsiveness of the application for tablet as well

This commit is contained in:
Tiago Ribeiro
2023-10-19 10:19:33 +01:00
parent 171f328278
commit 57f2135848
8 changed files with 48 additions and 34 deletions

View File

@@ -49,13 +49,16 @@ export default function ExamLoader() {
<div className="flex flex-col gap-4 border p-4 border-mti-gray-platinum rounded-xl">
<label className="font-normal text-base text-mti-gray-dim">Exam Loader</label>
<form className="flex flex-col gap-4 w-full" onSubmit={loadExam}>
<RadioGroup value={selectedModule} onChange={setSelectedModule} className="grid grid-cols-2 items-center gap-4 place-items-center">
<RadioGroup
value={selectedModule}
onChange={setSelectedModule}
className="grid -md:grid-cols-2 md:grid-cols-1 xl:grid-cols-2 items-center gap-4 place-items-center">
{MODULE_ARRAY.map((module) => (
<RadioGroup.Option value={module} key={module}>
{({checked}) => (
<span
className={clsx(
"px-6 py-4 w-44 md:w-48 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
"px-6 py-4 w-44 2xl:w-48 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
"hover:bg-mti-purple-light hover:border-mti-purple-dark hover:text-white",
"transition duration-300 ease-in-out",
!checked ? "bg-white border-mti-gray-platinum" : "bg-mti-purple-light border-mti-purple-dark text-white",
@@ -66,8 +69,8 @@ export default function ExamLoader() {
</RadioGroup.Option>
))}
</RadioGroup>
<Input type="text" name="examId" onChange={setExamId} placeholder="Exam ID" />
<Button disabled={!selectedModule || !examId} isLoading={isLoading}>
<Input type="text" name="examId" onChange={setExamId} placeholder="Exam ID" className="-md:!w-full md:!w-44 2xl:!w-full" />
<Button disabled={!selectedModule || !examId} isLoading={isLoading} className="-md:!w-full md:!w-44 2xl:!w-full">
Load Exam
</Button>
</form>