devops/encoach_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improved the responsiveness of the application for tablet as well

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

12
src/pages/(admin)/BatchCodeGenerator.tsx
View File

@@ -85,7 +85,7 @@ export default function BatchCodeGenerator({user}: {user: User}) {
</Button>
{user && (user.type === "developer" || user.type === "owner") && (
<>
<div className="flex items-center justify-between">
<div className="flex -md:flex-row md:flex-col -md:items-center 2xl:flex-row 2xl:items-center justify-between gap-2">
<label className="font-normal text-base text-mti-gray-dim">Expiry Date</label>
<Checkbox isChecked={isExpiryDateEnabled} onChange={setIsExpiryDateEnabled}>
Enabled
@@ -108,30 +108,30 @@ export default function BatchCodeGenerator({user}: {user: User}) {
)}
<label className="font-normal text-base text-mti-gray-dim">Select the type of user they should be</label>
{user && (
<div className="grid grid-cols-2 gap-4">
<div className="grid -md:grid-cols-2 md:grid-cols-1 xl:grid-cols-2 gap-4 place-items-center">
<Button
className="w-44 md:w-48"
className="w-44 2xl:w-48"
variant="outline"
onClick={() => generateCode("student")}
disabled={emails.length === 0 || isLoading || !PERMISSIONS.generateCode.student.includes(user.type)}>
Student
</Button>
<Button
className="w-44 md:w-48"
className="w-44 2xl:w-48"
variant="outline"
onClick={() => generateCode("teacher")}
disabled={emails.length === 0 || isLoading || !PERMISSIONS.generateCode.teacher.includes(user.type)}>
Teacher
</Button>
<Button
className="w-44 md:w-48"
className="w-44 2xl:w-48"
variant="outline"
onClick={() => generateCode("admin")}
disabled={emails.length === 0 || isLoading || !PERMISSIONS.generateCode.admin.includes(user.type)}>
Admin
</Button>
<Button
className="w-44 md:w-48"
className="w-44 2xl:w-48"
variant="outline"
onClick={() => generateCode("owner")}
disabled={emails.length === 0 || isLoading || !PERMISSIONS.generateCode.owner.includes(user.type)}>

12
src/pages/(admin)/CodeGenerator.tsx
View File

@@ -57,30 +57,30 @@ export default function CodeGenerator({user}: {user: User}) {
<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">User Code Generator</label>
{user && (
<div className="grid grid-cols-2 gap-4">
<div className="grid -md:grid-cols-2 md:grid-cols-1 place-items-center 2xl:grid-cols-2 gap-4">
<Button
className="w-44 md:w-48"
className="w-44 2xl:w-48"
variant="outline"
onClick={() => generateCode("student")}
disabled={!PERMISSIONS.generateCode.student.includes(user.type) || (isExpiryDateEnabled && expiryDate === null)}>
Student
</Button>
<Button
className="w-44 md:w-48"
className="w-44 2xl:w-48"
variant="outline"
onClick={() => generateCode("teacher")}
disabled={!PERMISSIONS.generateCode.teacher.includes(user.type) || (isExpiryDateEnabled && expiryDate === null)}>
Teacher
</Button>
<Button
className="w-44 md:w-48"
className="w-44 2xl:w-48"
variant="outline"
onClick={() => generateCode("admin")}
disabled={!PERMISSIONS.generateCode.admin.includes(user.type) || (isExpiryDateEnabled && expiryDate === null)}>
Admin
</Button>
<Button
className="w-44 md:w-48"
className="w-44 2xl:w-48"
variant="outline"
onClick={() => generateCode("owner")}
disabled={!PERMISSIONS.generateCode.owner.includes(user.type) || (isExpiryDateEnabled && expiryDate === null)}>
@@ -90,7 +90,7 @@ export default function CodeGenerator({user}: {user: User}) {
)}
{user && (user.type === "developer" || user.type === "owner") && (
<>
<div className="flex items-center justify-between">
<div className="flex -md:flex-row md:flex-col -md:items-center 2xl:flex-row 2xl:items-center justify-between gap-2">
<label className="font-normal text-base text-mti-gray-dim">Expiry Date</label>
<Checkbox isChecked={isExpiryDateEnabled} onChange={setIsExpiryDateEnabled}>
Enabled

11
src/pages/(admin)/ExamLoader.tsx
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>

2
src/pages/admin.tsx
View File

@@ -60,7 +60,7 @@ export default function Admin() {
<ToastContainer />
{user && (
<Layout user={user} className="gap-6">
<section className="w-full flex -md:flex-col gap-8 justify-between">
<section className="w-full flex -md:flex-col -xl:gap-2 gap-8 justify-between">
<ExamLoader />
<CodeGenerator user={user} />
<BatchCodeGenerator user={user} />

19
src/pages/record.tsx
View File

@@ -176,12 +176,13 @@ export default function History({user}: {user: User}) {
const content = (
<>
<div className="w-full flex justify-between items-center">
<div className="flex gap-2 items-center">
<div className="w-full flex justify-between -md:items-center 2xl:items-center">
<div className="flex md:flex-col 2xl:flex-row md:gap-1 -md:gap-2 2xl:gap-2 -md:items-center 2xl:items-center">
<span className="font-medium">{formatTimestamp(timestamp)}</span>
{timeSpent && (
<>
• <span className="text-sm">{Math.floor(timeSpent / 60)} minutes</span>
<span className="md:hidden 2xl:flex">• </span>
<span className="text-sm">{Math.floor(timeSpent / 60)} minutes</span>
</>
)}
</div>
@@ -195,12 +196,12 @@ export default function History({user}: {user: User}) {
{(aggregatedLevels.reduce((accumulator, current) => accumulator + current.level, 0) / aggregatedLevels.length).toFixed(1)}
</span>
</div>
<div className="grid grid-cols-4 gap-4 place-items-center w-full">
<div className="grid grid-cols-4 gap-2 place-items-start w-full -md:mt-2">
{aggregatedLevels.map(({module, level}) => (
<div
key={module}
className={clsx(
"flex gap-2 items-center w-fit text-white px-4 py-2 rounded-xl",
"flex gap-2 items-center w-fit text-white -md:px-4 xl:px-4 md:px-2 py-2 rounded-xl",
module === "reading" && "bg-ielts-reading",
module === "listening" && "bg-ielts-listening",
module === "writing" && "bg-ielts-writing",
@@ -261,8 +262,8 @@ export default function History({user}: {user: User}) {
<ToastContainer />
{user && (
<Layout user={user}>
<div className="w-full flex -md:flex-col -md:gap-4 justify-between items-center">
<div className="md:w-3/4">
<div className="w-full flex -xl:flex-col -xl:gap-4 justify-between items-center">
<div className="xl:w-3/4">
{(user.type === "developer" || user.type === "owner") && (
<Select
options={users.map((x) => ({value: x.id, label: `${x.name} - ${x.email}`}))}
@@ -294,7 +295,7 @@ export default function History({user}: {user: User}) {
/>
)}
</div>
<div className="flex gap-4 w-full -md:justify-center md:justify-end">
<div className="flex gap-4 w-full justify-center xl:justify-end">
<button
className={clsx(
"bg-mti-purple-ultralight text-mti-purple px-4 py-2 rounded-full hover:text-white hover:bg-mti-purple-light",
@@ -325,7 +326,7 @@ export default function History({user}: {user: User}) {
</div>
</div>
{groupedStats && Object.keys(groupedStats).length > 0 && !isStatsLoading && (
<div className="grid grid-cols-1 md:grid-cols-3 w-full gap-4 md:gap-6">
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 w-full gap-4 xl:gap-6">
{Object.keys(filterStatsByDate(groupedStats))
.sort((a, b) => parseInt(b) - parseInt(a))
.map(customContent)}