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

12
src/components/Exercises/FillBlanks.tsx
View File

@@ -44,20 +44,20 @@ function WordsPopout({words, isOpen, onCancel, onAnswer}: WordsPopoutProps) {
<Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-900">
List of words
</Dialog.Title>
<div className="mt-4 grid grid-cols-3 gap-4">
<div className="mt-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
{words.map((word) => (
<button
key={word.word}
onClick={() => onAnswer(word.word)}
disabled={word.isDisabled}
className={clsx("btn btn-wide gap-4 relative text-white", infoButtonStyle)}>
className={clsx("btn sm:btn-wide gap-4 relative text-white", infoButtonStyle)}>
{word.word}
</button>
))}
</div>
<div className="mt-4 self-end">
<button onClick={onCancel} className={clsx("btn btn-wide gap-4 relative text-white", errorButtonStyle)}>
<button onClick={onCancel} className={clsx("btn md:btn-wide gap-4 relative text-white", errorButtonStyle)}>
Close
</button>
</div>
@@ -100,7 +100,7 @@ export default function FillBlanks({id, allowRepetition, prompt, solutions, text
return (
<>
<div className="flex flex-col">
<div className="flex flex-col gap-4">
<WordsPopout
words={words.map((word) => ({word, isDisabled: allowRepetition ? false : userSolutions.map((x) => x.solution).includes(word)}))}
isOpen={!!currentBlankId}
@@ -110,7 +110,7 @@ export default function FillBlanks({id, allowRepetition, prompt, solutions, text
setCurrentBlankId(undefined);
}}
/>
<span className="text-lg font-medium text-center px-48">
<span className="text-base md:text-lg font-medium text-center px-2 md:px-4 lg:px-48">
{prompt.split("\\n").map((line, index) => (
<Fragment key={index}>
{line}
@@ -128,7 +128,7 @@ export default function FillBlanks({id, allowRepetition, prompt, solutions, text
</span>
</div>
<div className="self-end flex gap-8">
<div className="self-end flex flex-col items-center md:items-start md:flex-row gap-8">
<button className={clsx("btn btn-wide gap-4 relative text-white", errorButtonStyle)} onClick={onBack}>
<div className="absolute left-4">
<Icon path={mdiArrowLeft} color="white" size={1} />

2
src/components/LevelLabel.tsx
View File

@@ -8,5 +8,5 @@ interface Props {
export default function LevelLabel({experience, className}: Props) {
const {label} = levelCalculator(experience);
return <span className={clsx("text-xl font-semibold text-success", className)}>{label}</span>;
return <span className={clsx("text-base md:text-xl font-semibold text-success", className)}>{label}</span>;
}

2
src/components/LevelProgressBar.tsx
View File

@@ -12,7 +12,7 @@ export default function LevelProgressBar({experience, className, progressBarWidt
return (
<div className={clsx("flex flex-col items-center", className)}>
<div className="flex gap-3 items-center">
<div className="flex gap-3 items-center text-sm md:text-base">
<span>Lvl. {levelResult.currentLevel}</span>
<progress className={clsx("progress progress-success", progressBarWidth)} value={levelResult.percentage} max="100" />
<span>Lvl. {levelResult.nextLevel}</span>

14
src/components/Navbar.tsx
View File

@@ -1,16 +1,18 @@
import axios from "axios";
import Link from "next/link";
import {useRouter} from "next/router";
import {Button} from "primereact/button";
import {Menubar} from "primereact/menubar";
import {MenuItem} from "primereact/menuitem";
interface Props {
profilePicture: string;
timer?: number;
showExamEnd?: boolean;
}
/* eslint-disable @next/next/no-img-element */
export default function Navbar({profilePicture, timer}: Props) {
export default function Navbar({profilePicture, timer, showExamEnd = false}: Props) {
const router = useRouter();
const logout = async () => {
@@ -50,7 +52,7 @@ export default function Navbar({profilePicture, timer}: Props) {
},
];
const end = timer && (
const endTimer = timer && (
<span className="pr-2 font-semibold">
{Math.floor(timer / 60) < 10 ? "0" : ""}
{Math.floor(timer / 60)}:{timer % 60 < 10 ? "0" : ""}
@@ -58,9 +60,15 @@ export default function Navbar({profilePicture, timer}: Props) {
</span>
);
const endNewExam = (
<Link href="/exam" className="pr-2">
<Button text label="Exam" severity="secondary" size="small" />
</Link>
);
return (
<div className="bg-neutral-100 z-10 w-full p-2">
<Menubar model={items} end={end} />
<Menubar model={items} end={showExamEnd ? endNewExam : endTimer} />
</div>
);
}

8
src/components/ProfileCard.tsx
View File

@@ -11,17 +11,17 @@ interface Props {
export default function ProfileCard({user, className}: Props) {
return (
<div className={clsx("bg-white drop-shadow-xl p-8 rounded-xl w-full flex flex-col gap-6", className)}>
<div className={clsx("bg-white drop-shadow-xl p-4 md:p-8 rounded-xl w-full flex flex-col gap-6", className)}>
<div className="flex w-full items-center gap-8">
<div className="w-24 rounded-full border-4 border-white drop-shadow-xl">
<div className="w-16 md:w-24 rounded-full border-2 md:border-4 border-white drop-shadow-md md:drop-shadow-xl">
<img src={user.profilePicture} alt="Profile picture" className="rounded-full" />
</div>
<div className="flex flex-col justify-center">
<span className="text-neutral-600 font-bold text-2xl">{user.name}</span>
<span className="text-neutral-600 font-bold text-xl lg:text-2xl">{user.name}</span>
<LevelLabel experience={user.experience} />
</div>
</div>
<LevelProgressBar experience={user.experience} progressBarWidth="w-96" />
<LevelProgressBar experience={user.experience} progressBarWidth="w-32 md:w-96" />
</div>
);
}