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

- Did a bit of refactor related to the exam/exercises page;

Browse Source 
- Improved the responsiveness of the page for mobile;
This commit is contained in:
Tiago Ribeiro
2023-10-17 08:52:41 +01:00
parent 550cdba5a7
commit 9b852bd6be
15 changed files with 491 additions and 819 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/High/Layout.tsx
View File

@@ -37,7 +37,7 @@ export default function Layout({user, children, className, navDisabled = false,
/>
<div
className={clsx(
"w-full min-h-full h-fit lg:mr-8 bg-white shadow-md rounded-2xl p-4 md:p-12 pb-8 flex flex-col gap-8 md:gap-12 relative overflow-hidden mt-2",
"w-full min-h-full h-fit md:mr-8 bg-white shadow-md rounded-2xl p-4 md:p-12 pb-8 flex flex-col gap-8 md:gap-12 relative overflow-hidden mt-2",
className,
)}>
{children}

4
src/components/MobileMenu.tsx
View File

@@ -75,10 +75,10 @@ export default function MobileMenu({isOpen, onClose, path, user}: Props) {
Exams
</Link>
<Link
href="/exercise"
href="/exercises"
className={clsx(
"transition ease-in-out duration-300 w-fit",
path === "/exercise" && "text-mti-purple-light font-semibold border-b-2 border-b-mti-purple-light ",
path === "/exercises" && "text-mti-purple-light font-semibold border-b-2 border-b-mti-purple-light ",
)}>
Exercises
</Link>

18
src/components/Navbar.tsx
View File

@@ -3,9 +3,7 @@ import Link from "next/link";
import FocusLayer from "@/components/FocusLayer";
import {preventNavigation} from "@/utils/navigation.disabled";
import {useRouter} from "next/router";
import axios from "axios";
import {RiLogoutBoxFill} from "react-icons/ri";
import {BsList, BsPower} from "react-icons/bs";
import {BsList} from "react-icons/bs";
import clsx from "clsx";
import moment from "moment";
import MobileMenu from "./MobileMenu";
@@ -47,12 +45,12 @@ export default function Navbar({user, path, navDisabled = false, focusMode = fal
return (
<>
{user && <MobileMenu path={path} isOpen={isMenuOpen} onClose={() => setIsMenuOpen(false)} user={user} />}
<header className="w-full bg-transparent py-4 -lg:justify-between lg:gap-12 flex items-center relative -lg:px-4">
<Link href={disableNavigation ? "" : "/"} className=" lg:px-8 flex gap-8 items-center">
<img src="/logo.png" alt="EnCoach's Logo" className="w-12" />
<h1 className="font-bold text-2xl w-1/6 -lg:hidden">EnCoach</h1>
<header className="w-full bg-transparent py-2 md:py-4 -md:justify-between md:gap-12 flex items-center relative -md:px-4">
<Link href={disableNavigation ? "" : "/"} className=" md:px-8 flex gap-8 items-center">
<img src="/logo.png" alt="EnCoach's Logo" className="w-8 md:w-12" />
<h1 className="font-bold text-2xl w-1/6 -md:hidden">EnCoach</h1>
</Link>
<div className="flex justify-end -md:items-center gap-4 lg:w-5/6 lg:mr-8">
<div className="flex justify-end -md:items-center gap-4 md:w-5/6 md:mr-8">
{showExpirationDate() && (
<Link
href="https://encoach.com/join"
@@ -71,10 +69,10 @@ export default function Navbar({user, path, navDisabled = false, focusMode = fal
)}
<Link href={disableNavigation ? "" : "/profile"} className="flex gap-6 items-center justify-end -md:hidden">
<img src={user.profilePicture} alt={user.name} className="w-10 h-10 rounded-full object-cover" />
<span className="text-right -lg:hidden">{user.name}</span>
<span className="text-right -md:hidden">{user.name}</span>
</Link>
<div className="cursor-pointer md:hidden" onClick={() => setIsMenuOpen(true)}>
<BsList className="text-mti-purple-light" size={32} />
<BsList className="text-mti-purple-light w-8 h-8" />
</div>
</div>
{focusMode && <FocusLayer onFocusLayerMouseEnter={onFocusLayerMouseEnter} />}

85
src/components/ProfileSummary.tsx Normal file
View File

@@ -0,0 +1,85 @@
/* eslint-disable @next/next/no-img-element */
import {User} from "@/interfaces/user";
import {calculateAverageLevel} from "@/utils/score";
import {capitalize} from "lodash";
import {ReactElement} from "react";
import ProgressBar from "./Low/ProgressBar";
interface Props {
user: User;
items: {
icon: ReactElement;
value: string | number;
label: string;
}[];
children?: ReactElement;
}
export default function ProfileSummary({user, items}: Props) {
return (
<section className="w-full flex -md:flex-col gap-4 md:gap-8">
<img
src={user.profilePicture}
alt={user.name}
className="aspect-square h-20 md:h-64 rounded-3xl drop-shadow-xl object-cover -md:hidden"
/>
<div className="flex md:flex-col gap-4 md:py-4 w-full -md:items-center">
<img src={user.profilePicture} alt={user.name} className="aspect-square h-24 md:hidden rounded-3xl drop-shadow-xl object-cover" />
<div className="flex -md:flex-col justify-between w-full gap-8">
<div className="flex flex-col gap-2 py-2">
<h1 className="font-bold text-2xl md:text-4xl">{user.name}</h1>
<h6 className="font-normal text-base text-mti-gray-taupe">{capitalize(user.type)}</h6>
</div>
<ProgressBar
label={`Level ${calculateAverageLevel(user.levels).toFixed(1)}`}
percentage={100}
color="purple"
className="max-w-xs w-32 md:self-end h-10 -md:hidden"
/>
</div>
<ProgressBar
label=""
percentage={Math.round((calculateAverageLevel(user.levels) * 100) / calculateAverageLevel(user.desiredLevels))}
color="red"
className="w-full h-3 drop-shadow-lg -md:hidden"
/>
<div className="flex justify-between w-full mt-8 -md:hidden">
{items.map((item) => (
<div className="flex gap-4 items-center" key={item.label}>
<div className="w-16 h-16 border border-mti-gray-platinum bg-mti-gray-smoke flex items-center justify-center rounded-xl">
{item.icon}
</div>
<div className="flex flex-col">
<span className="font-bold text-xl">{item.value}</span>
<span className="font-normal text-base text-mti-gray-dim">{item.label}</span>
</div>
</div>
))}
</div>
</div>
<ProgressBar
label={`Level ${calculateAverageLevel(user.levels).toFixed(1)}`}
percentage={Math.round((calculateAverageLevel(user.levels) * 100) / calculateAverageLevel(user.desiredLevels))}
color="purple"
className="w-full md:hidden h-8"
textClassName="!text-mti-black"
/>
<div className="grid grid-cols-2 gap-4 w-full mt-4 md:hidden">
{items.map((item) => (
<div className="flex gap-4 items-center" key={item.label}>
<div className="w-12 h-12 md:w-16 md:h-16 border border-mti-gray-platinum bg-mti-gray-smoke flex items-center justify-center rounded-lg md:rounded-xl">
{item.icon}
</div>
<div className="flex flex-col">
<span className="font-bold text-lg md:text-xl">{item.value}</span>
<span className="font-normal text-sm md:text-base text-mti-gray-dim">{item.label}</span>
</div>
</div>
))}
</div>
</section>
);
}