Skip to content

Commit 852cdc5

Browse files
njxuenjxue
committed
Fix containers from overflowing
1 parent 016db3e commit 852cdc5

File tree

4 files changed

+115
-45
lines changed

4 files changed

+115
-45
lines changed

‎frontend/src/presentation/components/ProfileContainer.module.css‎

Lines changed: 56 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,19 @@
11
.container {
22
display: flex;
33
flex-direction: row;
4-
justify-content: center;
4+
justify-content: space-between;
5+
align-items: end;
6+
gap: 2em;
7+
padding: 8px 0;
8+
}
9+
10+
.profileContainer {
11+
display: flex;
12+
flex-direction: row;
13+
justify-content: start;
514
align-items: center;
6-
column-gap: calc(1.5rem + 1.5vw);
7-
margin-bottom: 2em;
15+
gap: 2em;
16+
height: 100%;
817
}
918

1019
.profilePicture {
@@ -16,56 +25,86 @@
1625

1726
.profileDetailsContainer {
1827
display: flex;
19-
flex-direction: row;
20-
justify-content: center;
21-
align-items: center;
22-
column-gap: calc(1.5rem + 1.5vw);
23-
padding: 0 2em;
28+
flex-direction: column;
29+
justify-content: start;
30+
align-items: start;
31+
gap: 8px;
2432
}
2533

2634
.nameRow {
2735
display: flex;
2836
flex-direction: row;
2937
align-items: center;
30-
column-gap: 1em;
31-
margin-bottom: 0;
38+
gap: 8px;
3239
}
3340

3441
.name {
3542
font-size: 3em;
3643
font-weight: 300;
3744
margin: 0;
38-
max-width: 350px;
45+
max-width: 500px;
3946
text-overflow: ellipsis;
4047
white-space: nowrap;
4148
overflow: hidden;
4249
}
4350

4451
.editIcon {
45-
font-size: 1.5em;
52+
font-size: 1.2em;
4653
cursor: pointer;
54+
transition: opacity 0.2s ease;
55+
opacity: 50%;
56+
}
57+
.editIcon:hover {
58+
opacity: 100%;
4759
}
4860

49-
.linksContainer {
61+
.deactivateAndadminLinksContainer {
5062
display: flex;
51-
flex-direction: row;
52-
column-gap: 2em;
63+
gap: 12px;
5364
}
5465

55-
.emailAndDeactivate {
66+
.adminLinkItem {
5667
display: flex;
5768
align-items: center;
58-
gap: 8px;
69+
gap: 4px;
70+
font-weight: bold;
71+
}
72+
.adminLinkItem span[role="img"],
73+
.adminLinkItem a {
74+
color: black;
75+
transition: all 0.5s ease;
76+
}
77+
78+
.adminLinkItem:hover a,
79+
.adminLinkItem:hover span[role="img"] {
80+
color: #ffa500;
81+
transform: translateY(-5px);
82+
}
83+
84+
.emailAndDeactivate {
85+
display: flex;
86+
flex-direction: column;
87+
align-items: start;
88+
gap: 4px;
5989
}
6090

6191
.deactivate {
6292
color: #007bff;
6393
cursor: pointer;
94+
transition: color 0.2s ease;
95+
margin-right: 12px;
96+
}
97+
98+
.deactivate:hover {
99+
color: red;
64100
}
65101

66102
.email {
67103
max-width: 250px;
68104
text-overflow: ellipsis;
69105
white-space: nowrap;
70106
overflow: hidden;
107+
display: flex;
108+
align-items: flex-end;
109+
gap: 8px;
71110
}

‎frontend/src/presentation/components/ProfileContainer.tsx‎

Lines changed: 30 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import styles from "./ProfileContainer.module.css";
22
import React, { useState } from "react";
33
import SampleProfilePicture from "../../assets/images/sample-profile-picture.jpg";
4-
import { EditOutlined } from "@ant-design/icons";
4+
import { EditOutlined, MailOutlined, UnorderedListOutlined, UserOutlined } from "@ant-design/icons";
55
import { useAuth } from "domain/context/AuthContext";
6-
import { Button, Modal } from "antd";
6+
import { Modal } from "antd";
77
import { UpdateProfileForm } from "./UpdateProfileForm/UpdateProfileForm";
88
import { Link } from "react-router-dom";
99
import { DeleteUserForm } from "./DeleteUserForm/DeleteUserForm";
@@ -20,22 +20,35 @@ export const ProfileContainer: React.FC = () => {
2020
return (
2121
<>
2222
<div className={styles.container}>
23-
<img className={styles.profilePicture} src={SampleProfilePicture} />
24-
<div className={styles.profileDetailsContainer}>
25-
<div className={styles.nameRow}>
26-
<h2 className={styles.name}>{user?.username}</h2>
27-
<EditOutlined className={styles.editIcon} onClick={() => setIsEditingProfile(true)} />
28-
</div>
29-
<div className={styles.emailAndDeactivate}>
30-
<p className={styles.email}> {user?.email}</p>
31-
<p onClick={() => setIsDeletingAccount(true)} className={styles.deactivate}>
32-
Deactivate account
33-
</p>
34-
</div>
23+
<div className={styles.profileContainer}>
24+
<img className={styles.profilePicture} src={SampleProfilePicture} />
25+
<div className={styles.profileDetailsContainer}>
26+
<div className={styles.nameRow}>
27+
<h2 className={styles.name}>{user?.username}</h2>
28+
<EditOutlined className={styles.editIcon} onClick={() => setIsEditingProfile(true)} />
29+
</div>
30+
<div className={styles.email}>
31+
<MailOutlined />
32+
<span className={styles.email}>{user?.email}</span>
33+
</div>
3534

36-
<div className={styles.linksContainer}>
37-
{isUserAdmin && <Link to="/question-management">Manage questions</Link>}
38-
{isUserAdmin && <Link to="/user-management">Manage users</Link>}
35+
<div className={styles.deactivateAndadminLinksContainer}>
36+
<span onClick={() => setIsDeletingAccount(true)} className={styles.deactivate}>
37+
Deactivate account
38+
</span>
39+
{isUserAdmin && (
40+
<div className={styles.adminLinkItem}>
41+
<UnorderedListOutlined />
42+
<Link to="/question-management">Manage questions</Link>
43+
</div>
44+
)}
45+
{isUserAdmin && (
46+
<div className={styles.adminLinkItem}>
47+
<UserOutlined />
48+
<Link to="/user-management">Manage users</Link>
49+
</div>
50+
)}
51+
</div>
3952
</div>
4053
</div>
4154
</div>

‎frontend/src/presentation/pages/HomePage.module.css‎

Lines changed: 22 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,26 +3,43 @@
33
flex-direction: row;
44
width: 100%;
55
height: 100%;
6+
box-sizing: border-box;
67
}
78

8-
.leftContainer, .rightContainer {
9+
.leftContainer,
10+
.rightContainer {
911
display: flex;
1012
flex-direction: column;
1113
width: 30%;
14+
position: relative;
1215
}
1316

1417
.leftContainer {
1518
position: relative;
1619
align-items: center;
17-
padding: 0 5%;
20+
padding: 0 12px;
1821
background-color: #f1f1f1;
1922
row-gap: 5%;
2023
}
2124

2225
.rightContainer {
2326
width: 70%;
24-
row-gap: 10%;
25-
padding: 3% 3%;
27+
height: 100%;
28+
position: relative;
29+
padding: 24px 32px;
30+
display: flex;
31+
flex-direction: column;
32+
gap: 2em;
33+
box-sizing: border-box;
34+
}
35+
36+
.profileContainer {
37+
position: absolute;
38+
}
39+
.recentAttempsContainer {
40+
margin-top: 160px;
41+
overflow-y: auto;
42+
width: 100%;
2643
}
2744

2845
.headline {
@@ -42,4 +59,4 @@
4259
position: absolute;
4360
bottom: 2em;
4461
right: 2em;
45-
}
62+
}

‎frontend/src/presentation/pages/HomePage.tsx‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -40,10 +40,7 @@ const HomePage: React.FC = () => {
4040
selectedCategories: filters.selectedCategories,
4141
selectedDifficulty: filters.selectedDifficulty
4242
});
43-
startMatching(
44-
correctedInput.selectedCategories[0].name,
45-
correctedInput.selectedDifficulty
46-
);
43+
startMatching(correctedInput.selectedCategories[0].name, correctedInput.selectedDifficulty);
4744
} catch (error) {
4845
if (error instanceof ValidationError) {
4946
message.error(error.message);
@@ -86,8 +83,12 @@ const HomePage: React.FC = () => {
8683
</Tooltip>
8784
</div>
8885
<div className={styles.rightContainer}>
89-
<ProfileContainer />
90-
<RecentAttemptsTable />
86+
<div className={styles.profileContainer}>
87+
<ProfileContainer />
88+
</div>
89+
<div className={styles.recentAttempsContainer}>
90+
<RecentAttemptsTable />
91+
</div>
9192
</div>
9293
<MatchingModal onRetry={handleRetry} />
9394
</div>

0 commit comments

Comments
 (0)