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

Made some of the code a bit more responsive

Browse Source
This commit is contained in:
Tiago Ribeiro
2023-04-18 12:12:26 +01:00
parent 13c8fae588
commit d61592b73e
10 changed files with 52 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/exams/Finish.tsx
View File

@@ -52,10 +52,9 @@ export default function Finish({user, scores, modules, onViewResults}: Props) {
return (
<div className="w-full h-full relative">
<section className="h-full w-full flex flex-col items-center justify-center">
<section className="h-full w-full flex flex-col items-center justify-center gap-4">
<ProfileLevel user={user} className="h-1/2" />
<div className="h-2/3 w-1/2 flex flex-col items-center gap-4">
<h1>You have finished the exam!</h1>
<div className="rounded-xl p-4 items-center flex justify-center gap-4">
{modules.map((module) => (
<div
@@ -70,7 +69,7 @@ export default function Finish({user, scores, modules, onViewResults}: Props) {
</div>
))}
</div>
<div className="w-full flex justify-between mt-24">
<div className="w-full flex flex-col gap-4 lg:gap-0 md:flex-row justify-center items-center lg:justify-between">
<Link href="/">
<button className={clsx("btn btn-wide gap-4 relative text-white", errorButtonStyle)}>
<div className="absolute left-4">

21
src/exams/Reading.tsx
View File

@@ -100,27 +100,27 @@ export default function Reading({exam, showSolutions = false, onFinish}: Props)
};
const renderText = () => (
<>
<div className="flex flex-col">
<span className="text-lg font-semibold">
<div className="flex flex-col gap-4 w-full">
<div className="flex flex-col w-full gap-2">
<span className="text-base md:text-lg font-semibold">
Please read the following excerpt attentively, you will then be asked questions about the text you&apos;ve read.
</span>
<span className="self-end text-sm">You will be allowed to read the text while doing the exercises</span>
</div>
<Panel header={exam.text.title} className="overflow-scroll">
<p className="overflow-scroll">
<Panel header={exam.text.title}>
<p className="overflow-auto">
{exam.text.content.split("\\n").map((line, index) => (
<p key={index}>{line}</p>
))}
</p>
</Panel>
</>
</div>
);
return (
<>
<TextModal {...exam.text} isOpen={showTextModal} onClose={() => setShowTextModal(false)} />
<div className="w-full h-full relative flex flex-col gap-8 items-center justify-center p-8 px-16 overflow-hidden">
<div className="w-full h-full relative flex flex-col gap-8 items-center justify-center p-2 md:p-8 px-4 md:px-16 overflow-hidden">
{exerciseIndex === -1 && renderText()}
{exerciseIndex > -1 &&
exerciseIndex < exam.exercises.length &&
@@ -130,7 +130,8 @@ export default function Reading({exam, showSolutions = false, onFinish}: Props)
exerciseIndex < exam.exercises.length &&
showSolutions &&
renderSolution(exam.exercises[exerciseIndex], nextExercise, previousExercise)}
<div className={clsx("flex gap-8", exerciseIndex > -1 ? "w-full justify-between" : "self-end")}>
<div
className={clsx("flex gap-8", exerciseIndex > -1 ? "w-full justify-center md:justify-between" : "self-end w-full md:w-fit flex")}>
{exerciseIndex > -1 && (
<button
className={clsx(
@@ -145,7 +146,9 @@ export default function Reading({exam, showSolutions = false, onFinish}: Props)
</button>
)}
{exerciseIndex === -1 && (
<button className={clsx("btn btn-wide gap-4 relative text-white self-end", infoButtonStyle)} onClick={() => nextExercise()}>
<button
className={clsx("btn w-full md:btn-wide gap-4 relative text-white self-end", infoButtonStyle)}
onClick={() => nextExercise()}>
Next
<div className="absolute right-4">
<Icon path={mdiArrowRight} color="white" size={1} />

2
src/exams/Selection.tsx
View File

@@ -29,7 +29,7 @@ export default function Selection({user, onStart}: Props) {
<section className="h-full w-full flex flex-col items-center justify-center gap-8">
<ProfileLevel user={user} className="h-1/2" />
<div className="h-1/2 flex flex-col gap-8">
<div className="h-1/2 items-center flex flex-col md:flex-row gap-8">
<div className="h-1/2 items-center flex flex-col lg:flex-row gap-8">
<div
role="button"
tabIndex={0}