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

41
src/pages/profile.tsx
View File

@@ -17,6 +17,7 @@ import {EmploymentStatus, EMPLOYMENT_STATUS, Gender, User} from "@/interfaces/us
import CountrySelect from "@/components/Low/CountrySelect";
import {shouldRedirectHome} from "@/utils/navigation.disabled";
import moment from "moment";
import {BsCamera, BsCameraFill} from "react-icons/bs";
export const getServerSideProps = withIronSessionSsr(({req, res}) => {
const user = req.session.user;
@@ -162,12 +163,13 @@ export default function Home() {
<ToastContainer />
{user && (
<Layout user={user}>
<section className="w-full flex flex-col gap-8 px-4 py-8">
<div className="flex w-full justify-between">
<div className="flex flex-col gap-8 w-2/3">
<h1 className="text-4xl font-bold mb-6">Edit Profile</h1>
<section className="w-full flex flex-col gap-4 md:gap-8 px-4 py-8">
<h1 className="text-4xl font-bold mb-6 md:hidden">Edit Profile</h1>
<div className="flex -md:flex-col-reverse -md:items-center w-full justify-between">
<div className="flex flex-col gap-8 w-full md:w-2/3">
<h1 className="text-4xl font-bold mb-6 -md:hidden">Edit Profile</h1>
<form className="flex flex-col items-center gap-6 w-full">
<div className="flex flex-row gap-8 w-full">
<div className="flex flex-col md:flex-row gap-8 w-full">
<Input
label="Name"
type="text"
@@ -187,7 +189,7 @@ export default function Home() {
required
/>
</div>
<div className="flex flex-row gap-8 w-full">
<div className="flex flex-col md:flex-row gap-8 w-full">
<Input
label="Old Password"
type="password"
@@ -205,7 +207,7 @@ export default function Home() {
/>
</div>
<div className="flex flex-row gap-8 w-full">
<div className="flex flex-col md:flex-row gap-8 w-full">
<div className="flex flex-col gap-3 w-full">
<label className="font-normal text-base text-mti-gray-dim">Country *</label>
<CountrySelect value={country} onChange={setCountry} />
@@ -220,7 +222,7 @@ export default function Home() {
required
/>
</div>
<div className="flex flex-row gap-8 w-full">
<div className="flex flex-col md:flex-row gap-8 w-full">
<div className="relative flex flex-col gap-3 w-full">
<label className="font-normal text-base text-mti-gray-dim">Employment Status *</label>
<RadioGroup
@@ -232,7 +234,7 @@ export default function Home() {
{({checked}) => (
<span
className={clsx(
"px-6 py-4 w-48 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
"px-6 py-4 w-40 md:w-48 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
"transition duration-300 ease-in-out",
!checked
? "bg-white border-mti-gray-platinum"
@@ -301,7 +303,7 @@ export default function Home() {
"p-6 w-full flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
"transition duration-300 ease-in-out",
!user.subscriptionExpirationDate
? "bg-mti-green-ultralight border-mti-green-light"
? "!bg-mti-green-ultralight !border-mti-green-light"
: expirationDateColor(user.subscriptionExpirationDate),
"bg-white border-mti-gray-platinum",
)}>
@@ -313,12 +315,19 @@ export default function Home() {
</div>
</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 object-cover"
/>
<div
className="flex flex-col gap-3 items-center w-48 h-fit cursor-pointer group"
onClick={() => (profilePictureInput.current as any)?.click()}>
<div className="relative overflow-hidden h-48 w-48 rounded-full">
<div
className={clsx(
"absolute top-0 left-0 bg-mti-purple-light/60 w-full h-full z-20 flex items-center justify-center opacity-0 group-hover:opacity-100",
"transition ease-in-out duration-300",
)}>
<BsCamera className="text-6xl text-mti-purple-ultralight/80" />
</div>
<img src={profilePicture} alt={user.name} className="aspect-square drop-shadow-xl self-end object-cover" />
</div>
<input type="file" className="hidden" onChange={uploadProfilePicture} accept="image/*" ref={profilePictureInput} />
<span
onClick={() => (profilePictureInput.current as any)?.click()}

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>
</>
);
};