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

Updated the responsiveness of the profile page for mobile

Browse Source
This commit is contained in:
Tiago Ribeiro
2023-10-17 22:51:12 +01:00
parent 9b852bd6be
commit b00d155aa1
2 changed files with 57 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/pages/record.tsx
View File

@@ -174,17 +174,8 @@ export default function History({user}: {user: User}) {
});
};
return (
<div
key={timestamp}
className={clsx(
"flex flex-col gap-4 border border-mti-gray-platinum p-4 cursor-pointer rounded-xl transition ease-in-out duration-300",
correct / total >= 0.7 && "hover:border-mti-purple",
correct / total >= 0.3 && correct / total < 0.7 && "hover:border-mti-red",
correct / total < 0.3 && "hover:border-mti-rose",
)}
onClick={selectExam}
role="button">
const content = (
<>
<div className="w-full flex justify-between items-center">
<div className="flex gap-2 items-center">
<span className="font-medium">{formatTimestamp(timestamp)}</span>
@@ -223,7 +214,36 @@ export default function History({user}: {user: User}) {
</div>
))}
</div>
</div>
</>
);
return (
<>
<div
key={timestamp}
className={clsx(
"flex flex-col gap-4 border border-mti-gray-platinum p-4 cursor-pointer rounded-xl transition ease-in-out duration-300 -md:hidden",
correct / total >= 0.7 && "hover:border-mti-purple",
correct / total >= 0.3 && correct / total < 0.7 && "hover:border-mti-red",
correct / total < 0.3 && "hover:border-mti-rose",
)}
onClick={selectExam}
role="button">
{content}
</div>
<div
key={timestamp}
className={clsx(
"flex flex-col gap-4 border border-mti-gray-platinum p-4 cursor-pointer rounded-xl transition ease-in-out duration-300 -md:tooltip md:hidden",
correct / total >= 0.7 && "hover:border-mti-purple",
correct / total >= 0.3 && correct / total < 0.7 && "hover:border-mti-red",
correct / total < 0.3 && "hover:border-mti-rose",
)}
data-tip="Your screen size is too small to view previous exams."
role="button">
{content}
</div>
</>
);
};