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

Solved some more bugs and styling

Browse Source
This commit is contained in:
Tiago Ribeiro
2023-07-25 00:09:25 +01:00
parent 581adbb56e
commit 02260d496c
16 changed files with 36 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -151,7 +151,7 @@ export default function FillBlanks({
<div className="self-end flex justify-between w-full gap-8 absolute bottom-8 left-0 px-8">
<Button
color="green"
color="purple"
variant="outline"
onClick={() => onBack({exercise: id, solutions: answers, score: calculateScore(), type})}
className="max-w-[200px] w-full">
@@ -159,7 +159,7 @@ export default function FillBlanks({
</Button>
<Button
color="green"
color="purple"
onClick={() => onNext({exercise: id, solutions: answers, score: calculateScore(), type})}
className="max-w-[200px] self-end w-full">
Next

4
src/components/Exercises/MatchSentences.tsx
View File

@@ -86,7 +86,7 @@ export default function MatchSentences({id, options, type, prompt, sentences, us
<div className="self-end flex justify-between w-full gap-8 absolute bottom-8 left-0 px-8">
<Button
color="green"
color="purple"
variant="outline"
onClick={() => onBack({exercise: id, solutions: answers, score: calculateScore(), type})}
className="max-w-[200px] w-full">
@@ -94,7 +94,7 @@ export default function MatchSentences({id, options, type, prompt, sentences, us
</Button>
<Button
color="green"
color="purple"
onClick={() => onNext({exercise: id, solutions: answers, score: calculateScore(), type})}
className="max-w-[200px] self-end w-full">
Next

4
src/components/Exercises/Speaking.tsx
View File

@@ -173,7 +173,7 @@ export default function Speaking({id, title, text, type, prompts, onNext, onBack
<div className="self-end flex justify-between w-full gap-8">
<Button
color="green"
color="purple"
variant="outline"
onClick={() =>
onBack({
@@ -187,7 +187,7 @@ export default function Speaking({id, title, text, type, prompts, onNext, onBack
Back
</Button>
<Button
color="green"
color="purple"
disabled={!mediaBlob}
onClick={() =>
onNext({

4
src/components/Exercises/WriteBlanks.tsx
View File

@@ -101,7 +101,7 @@ export default function WriteBlanks({id, prompt, type, maxWords, solutions, user
<div className="self-end flex justify-between w-full gap-8 absolute bottom-8 left-0 px-8">
<Button
color="green"
color="purple"
variant="outline"
onClick={() => onBack({exercise: id, solutions: answers, score: calculateScore(), type})}
className="max-w-[200px] w-full">
@@ -109,7 +109,7 @@ export default function WriteBlanks({id, prompt, type, maxWords, solutions, user
</Button>
<Button
color="green"
color="purple"
onClick={() => onNext({exercise: id, solutions: answers, score: calculateScore(), type})}
className="max-w-[200px] self-end w-full">
Next

4
src/components/Exercises/Writing.tsx
View File

@@ -98,14 +98,14 @@ export default function Writing({id, prompt, info, type, wordCounter, attachment
<div className="self-end flex justify-between w-full gap-8 absolute bottom-8 left-0 px-8">
<Button
color="green"
color="purple"
variant="outline"
onClick={() => onBack({exercise: id, solutions: [{id, solution: inputText}], score: {correct: 1, total: 1, missing: 0}, type})}
className="max-w-[200px] self-end w-full">
Back
</Button>
<Button
color="green"
color="purple"
disabled={!isSubmitEnabled}
onClick={() => onNext({exercise: id, solutions: [{id, solution: inputText}], score: {correct: 1, total: 1, missing: 0}, type})}
className="max-w-[200px] self-end w-full">

2
src/components/Navbar.tsx
View File

@@ -14,7 +14,7 @@ export default function Navbar({user}: Props) {
<div className="flex justify-between w-5/6 mr-8">
<input type="text" placeholder="Search..." className="rounded-full py-4 px-6 border border-mti-gray-platinum outline-none" />
<Link href="/profile" className="flex gap-3 items-center justify-end">
<img src={user.profilePicture} alt={user.name} className="w-10 h-10 rounded-full" />
<img src={user.profilePicture} alt={user.name} className="w-10 h-10 rounded-full object-cover" />
<span className="text-right">{user.name}</span>
</Link>
</div>

2
src/components/ProfileCard.tsx
View File

@@ -15,7 +15,7 @@ export default function ProfileCard({user, className}: Props) {
<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-16 md:w-24 h-16 md:h-24 rounded-full border-2 md:border-4 border-white drop-shadow-md md:drop-shadow-xl">
{user.profilePicture.length > 0 && <img src={user.profilePicture} alt="Profile picture" className="rounded-full" />}
{user.profilePicture.length > 0 && <img src={user.profilePicture} alt="Profile picture" className="rounded-full object-cover" />}
{user.profilePicture.length === 0 && (
<Avatar size="xlarge" style={{width: "100%", height: "100%"}} label={user.name.slice(0, 1)} shape="circle" />
)}

2
src/components/ProfileLevel.tsx
View File

@@ -17,7 +17,7 @@ export default function ProfileLevel({user, className}: Props) {
return (
<div className={clsx("flex flex-col items-center justify-center gap-4", className)}>
<div className="w-16 md:w-24 h-16 md:h-24 rounded-full">
{user.profilePicture.length > 0 && <img src={user.profilePicture} alt="Profile picture" className="rounded-full" />}
{user.profilePicture.length > 0 && <img src={user.profilePicture} alt="Profile picture" className="rounded-full object-cover" />}
{user.profilePicture.length === 0 && (
<Avatar size="xlarge" style={{width: "100%", height: "100%"}} label={user.name.slice(0, 1)} shape="circle" />
)}

2
src/components/Sidebar.tsx
View File

@@ -37,7 +37,7 @@ export default function Sidebar({path}: Props) {
const logout = async () => {
axios.post("/api/logout").finally(() => {
router.push("/login");
setTimeout(() => router.reload(), 500);
});
};

2
src/exams/Reading.tsx
View File

@@ -176,7 +176,7 @@ export default function Reading({exam, showSolutions = false, onFinish}: Props)
renderSolution(exam.exercises[exerciseIndex], nextExercise, previousExercise)}
{exerciseIndex > -1 && exerciseIndex < exam.exercises.length && (
<Button
color="green"
color="purple"
variant="outline"
onClick={() => setShowTextModal(true)}
className="max-w-[200px] self-end w-full absolute bottom-[31px] right-64">

4
src/exams/Selection.tsx
View File

@@ -30,7 +30,7 @@ export default function Selection({user, onStart, disableSelection = false}: Pro
<>
<div className="w-full h-full relative flex flex-col gap-16">
<section className="w-full flex gap-8">
<img src={user.profilePicture} alt={user.name} className="aspect-square h-64 rounded-3xl drop-shadow-xl" />
<img src={user.profilePicture} alt={user.name} className="aspect-square h-64 rounded-3xl drop-shadow-xl object-cover" />
<div className="flex flex-col gap-4 py-4 w-full">
<div className="flex justify-between w-full gap-8">
<div className="flex flex-col gap-2 py-2">
@@ -185,7 +185,7 @@ export default function Selection({user, onStart, disableSelection = false}: Pro
onClick={() =>
onStart(!disableSelection ? selectedModules.sort(sortByModuleName) : ["reading", "listening", "writing", "speaking"])
}
color="green"
color="purple"
className="px-12 w-full max-w-xs self-end"
disabled={selectedModules.length === 0 && !disableSelection}>
Start Exam

10
src/pages/api/users/update.ts
View File

@@ -28,7 +28,7 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
const profilePictureFiletype = updatedUser.profilePicture.split(";")[0].split("/")[1];
const profilePictureRef = ref(storage, `profile_pictures/${req.session.user.id}.${profilePictureFiletype}`);
const pictureBytes = Buffer.from(updatedUser.profilePicture, "base64url");
const pictureBytes = Buffer.from(updatedUser.profilePicture.split(";base64,")[1], "base64url");
const pictureSnapshot = await uploadBytes(profilePictureRef, pictureBytes);
const pictureReference = ref(storage, pictureSnapshot.metadata.fullPath);
@@ -64,3 +64,11 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
res.status(200).json({ok: true});
}
export const config = {
api: {
bodyParser: {
sizeLimit: "20mb",
},
},
};

2
src/pages/index.tsx
View File

@@ -80,7 +80,7 @@ export default function Home() {
{user && (
<Layout user={user}>
<section className="w-full flex gap-8">
<img src={user.profilePicture} alt={user.name} className="aspect-square h-64 rounded-3xl drop-shadow-xl" />
<img src={user.profilePicture} alt={user.name} className="aspect-square h-64 rounded-3xl drop-shadow-xl object-cover" />
<div className="flex flex-col gap-4 py-4 w-full">
<div className="flex justify-between w-full gap-8">
<div className="flex flex-col gap-2 py-2">

8
src/pages/profile.tsx
View File

@@ -100,7 +100,7 @@ export default function Home() {
return;
}
const request = await axios.post("/api/users/update", {bio, name, email, password, newPassword});
const request = await axios.post("/api/users/update", {bio, name, email, password, newPassword, profilePicture});
if (request.status === 200) {
toast.success("Your profile has been updated!");
setTimeout(() => router.reload(), 800);
@@ -166,7 +166,11 @@ export default function Home() {
</form>
</div>
<div className="flex flex-col gap-3 items-center w-48">
<img src={profilePicture} alt={user.name} className="aspect-square h-48 w-48 rounded-full drop-shadow-xl self-end" />
<img
src={profilePicture}
alt={user.name}
className="aspect-square h-48 w-48 rounded-full drop-shadow-xl self-end object-cover"
/>
<input type="file" className="hidden" onChange={uploadProfilePicture} accept="image/*" ref={profilePictureInput} />
<span
onClick={() => (profilePictureInput.current as any)?.click()}

2
src/pages/register.tsx
View File

@@ -47,7 +47,7 @@ export default function Register() {
placeholder="Confirm your password"
required
/>
<Button className="mt-8 w-full" color="green" disabled={isLoading}>
<Button className="mt-8 w-full" color="purple" disabled={isLoading}>
{!isLoading && "Create account"}
{isLoading && (
<div className="flex items-center justify-center">

4
src/pages/stats.tsx
View File

@@ -69,7 +69,7 @@ export default function Stats() {
{user && (
<Layout user={user}>
<section className="w-full flex gap-8">
<img src={user.profilePicture} alt={user.name} className="aspect-square h-64 rounded-3xl drop-shadow-xl" />
<img src={user.profilePicture} alt={user.name} className="aspect-square h-64 rounded-3xl drop-shadow-xl object-cover" />
<div className="flex flex-col gap-4 py-4 w-full">
<div className="flex justify-between w-full gap-8">
<div className="flex flex-col gap-2 py-2">
@@ -79,7 +79,7 @@ export default function Stats() {
<ProgressBar
label={`Level ${calculateAverageLevel(user.levels).toFixed(1)}`}
percentage={100}
color="red"
color="purple"
className="max-w-xs w-32 self-end h-10"
/>
</div>