diff --git a/frontend/src/components/atoms/NoticeItem/style.module.scss b/frontend/src/components/atoms/NoticeItem/style.module.scss
index 1f1b10785952acbab08e7b8b58eaa3141470563a..b1d906d142f6638d87b14b025e785dc0be1e0c63 100644
--- a/frontend/src/components/atoms/NoticeItem/style.module.scss
+++ b/frontend/src/components/atoms/NoticeItem/style.module.scss
@@ -13,11 +13,17 @@
}
.noticeHeading {
- font-size: 18px;
+ font-size: 20px;
color: $black;
font-weight: 500;
- margin-bottom: 2px;
+ margin-bottom: 4px;
line-height: 22px;
+ text-align: left;
+ overflow-wrap: break-word;
+ word-wrap: break-word;
+ -ms-word-break: break-all;
+ word-break: break-all;
+ word-break: break-word;
}
.noticeUser {
@@ -25,6 +31,13 @@
color: $gray-700;
line-height: 18px;
margin-bottom: 10px;
+ margin-right: 10px;
+ text-align: left;
+ overflow-wrap: break-word;
+ word-wrap: break-word;
+ -ms-word-break: break-all;
+ word-break: break-all;
+ word-break: break-word;
}
.noticeTime {
@@ -32,10 +45,39 @@
color: $gray-600;
line-height: 18px;
margin-bottom: 10px;
+ margin-left: 10px;
+ text-align: right;
+ overflow-wrap: break-word;
+ word-wrap: break-word;
+ -ms-word-break: break-all;
+ word-break: break-all;
+ word-break: break-word;
}
.noticeBody {
font-size: 16px;
color: $gray-800;
margin-bottom: 0px;
+ overflow: hidden;
+ position: relative;
+ line-height: 1.2em;
+ max-height: 3.6em;
+ padding-right: 1em;
+}
+
+.noticeBody:before {
+ content: '...';
+ position: absolute;
+ right: 0;
+ bottom: 0;
+}
+
+.noticeBody:after {
+ content: '';
+ position: absolute;
+ right: 0;
+ width: 1em;
+ height: 1em;
+ margin-top: 0.2em;
+ background: $gray-100;
}
diff --git a/frontend/src/components/atoms/PersonCard/index.tsx b/frontend/src/components/atoms/PersonCard/index.tsx
index 0d0b832f19642b59fb50c65c04f7bf10ac2ed149..25cfdd95baa728a65bce6529a56cf7ad6998db70 100644
--- a/frontend/src/components/atoms/PersonCard/index.tsx
+++ b/frontend/src/components/atoms/PersonCard/index.tsx
@@ -11,11 +11,9 @@ const PersonCard: React.FC = () => {
return (
<>
- <Container style={{ display: "flex", padding: 0 }}>
- <span>
- <Image className={styles.userImage} src={userImage} />
- </span>
- <span style={{ height: "180px" }}>
+ <Container className={styles.userCardContainer}>
+ <Image className={styles.userImage} src={userImage} />
+ <div className={styles.userInfoBlock}>
<p className={styles.userName}>{userInfo.name}</p>
<p className={styles.userEmail}>{userInfo.email}</p>
<p className={styles.userIdentifier}>
@@ -26,7 +24,7 @@ const PersonCard: React.FC = () => {
<p className={styles.userYear}>{userInfo.year + ','}</p>
<p className={styles.userDepartment}>{userInfo.dep}</p>
<p className={styles.userCourse}>{userInfo.course}</p>
- </span>
+ </div>
</Container>
</>
);
diff --git a/frontend/src/components/atoms/PersonCard/style.module.scss b/frontend/src/components/atoms/PersonCard/style.module.scss
index b818cc32143b639627f1b54b239faa3a890e0a59..23b3652099a2dab59672a6ff1494aeb0b5336a2d 100644
--- a/frontend/src/components/atoms/PersonCard/style.module.scss
+++ b/frontend/src/components/atoms/PersonCard/style.module.scss
@@ -9,7 +9,7 @@
.userName {
font-weight: 600;
- font-size: 24px;
+ font-size: 24px;
color: $black;
margin-bottom: 0rem;
line-height: 32px;
@@ -29,6 +29,7 @@
margin-top: 14px;
line-height: 24px;
display: flex;
+ flex-direction: row;
align-items: center;
}
@@ -61,5 +62,47 @@
display: inline-block;
margin-right: 8px;
margin-left: 8px;
+ vertical-align: middle;
+ text-align: center;
background-color: $gray-500;
}
+
+@media (max-width: 62rem) {
+ .userCardContainer {
+ padding: 0;
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
+ align-items: middle;
+ }
+
+ .userInfoBlock {
+ margin-top: 20px;
+ margin-right: auto;
+ margin-left: auto;
+ }
+
+ .userInfoBlock:not(.userIdentifier) * {
+ text-align: center;
+ }
+
+ .userImage {
+ margin-right: auto;
+ margin-left: auto;
+ }
+
+ .userIdentifier {
+ justify-content: center;
+ }
+}
+
+@media (min-width: 62rem) {
+ .userCardContainer {
+ display: flex;
+ padding: 0;
+ }
+
+ .userInfoBlock {
+ height: 180px;
+ }
+}
diff --git a/frontend/src/components/atoms/TutorCard/index.tsx b/frontend/src/components/atoms/TutorCard/index.tsx
index c047f861f161203fcd349924fedd5c3d42a0c135..4e6f04cdb64ad3afb80cb721f6e4f73c03733051 100644
--- a/frontend/src/components/atoms/TutorCard/index.tsx
+++ b/frontend/src/components/atoms/TutorCard/index.tsx
@@ -24,17 +24,16 @@ const TutorCard: React.FC<TutorCardProp> = ({
display: "flex",
padding: 0,
marginTop: "20px",
- alignItems: "center"
+ alignItems: "center",
+ width: "100%"
}}
>
- <span>
- <Image className={styles.tutorImage} src={image} />
- </span>
- <span style={{ height: "72px" }}>
+ <Image className={styles.tutorImage} src={image} />
+ <div>
<p className={styles.tutorName}>{name}</p>
<p className={styles.tutorEmail}>{email}</p>
<p className={styles.tutorAddress}>{address}</p>
- </span>
+ </div>
</Container>
</>
);
diff --git a/frontend/src/components/atoms/TutorCard/style.module.scss b/frontend/src/components/atoms/TutorCard/style.module.scss
index 583ca0e6823140fceaaef6a5dccc8bb5cf5cb85e..eb2b9a92f4312875d01888d532a4c343c55e1cee 100644
--- a/frontend/src/components/atoms/TutorCard/style.module.scss
+++ b/frontend/src/components/atoms/TutorCard/style.module.scss
@@ -11,6 +11,11 @@
font-size: 18px;
margin-bottom: 0px;
line-height: 24px !important;
+ overflow-wrap: break-word;
+ word-wrap: break-word;
+ -ms-word-break: break-all;
+ word-break: break-all;
+ word-break: break-word;
}
.tutorName {
diff --git a/frontend/src/components/molecules/DashboardButtonGroup/index.tsx b/frontend/src/components/molecules/DashboardButtonGroup/index.tsx
index 23e22c7d5dfe4034f16dcdd196d29569b3b823c9..b3d2ce1c74a59bd4a33c51a4c80e543fe3a9da11 100644
--- a/frontend/src/components/molecules/DashboardButtonGroup/index.tsx
+++ b/frontend/src/components/molecules/DashboardButtonGroup/index.tsx
@@ -20,7 +20,7 @@ const DashboardButtonGroup: React.FC = () => {
<>
<Row style={{ marginTop: "45px" }}>
{buttons.map(({ title, icon, url }, i) => (
- <Col xs={6} sm={6} md={3} key={i}>
+ <Col xs={6} sm={6} md={4} lg={4} xl={3} key={i} style={{ paddingRight: "10px", paddingLeft:"10px"}}>
<Button
className={styles.dashboardButton}
href={url}
diff --git a/frontend/src/components/organisms/NoticeBoard/index.tsx b/frontend/src/components/organisms/NoticeBoard/index.tsx
index 81a05a1be593ff79056a1e8d59374706aa6e98dd..307b667aafd3b56ce2e81fdd637c01f0e50104b3 100644
--- a/frontend/src/components/organisms/NoticeBoard/index.tsx
+++ b/frontend/src/components/organisms/NoticeBoard/index.tsx
@@ -6,7 +6,13 @@ const NoticeBoard: React.FC = () => {
<>
<h4>Notice Board</h4>
{noticeItems.map(({ heading, user, time, body }) => (
- <NoticeItem key={heading} heading={heading} user={user} time={time} body={body} />
+ <NoticeItem
+ key={heading}
+ heading={heading}
+ user={user}
+ time={time}
+ body={body}
+ />
))}
</>
);
@@ -16,24 +22,24 @@ export default NoticeBoard;
const noticeItems = [
{
- heading: "Foyer Closure Information",
- user: "Konstantinos Gkotuzis",
+ heading: "Lab Closure Information",
+ user: "Mr. Zachery Hroderich",
time: "1 Minute Ago",
body:
- "The foyer area, along with computing lab rooms 209, 208, and 210 would be closed due to unforeseen circumstances on Friday 20th of April.",
+ "Computing lab rooms 202, 206, and 219 would be closed for the year one haskell exams on Friday 20th of April."
},
{
- heading: "Dead body found in foyer area",
- user: "Orenthal James Simpson",
+ heading: "Exam Timetable Released",
+ user: "Prof. Leonardas Quinctius",
time: "1 hour Ago",
body:
- "Whoever left the dead body of Dr Rosalind Baker in the foyer area could you please cleanup after youself, thank you. Nobody needs to see that. ",
+ "The Summer Exams timetable has now been re-released, to reflect the changes for online exams due to the on-going health crisis. Information regarding the schedule and remote assessment policies can be found in the exams page"
},
{
- heading: "Autumn Fee Information",
- user: "Rosalind Baker",
+ heading: "Pass Requirements For Year Two",
+ user: "Dr. Rosalind Baker",
time: "5 hours Ago",
body:
- "We understand that a lot of you would not be on campus for the autumn term, however that does not mean that you should stop paying us. Good day. ",
- },
+ "The exams will still be considered as exams, even though they are now online, so all stated pass requirements still apply. To pass a core module, it is 40% overall, i.e. coursework + exams combined at 15% + 85%. To pass 161, it is 50% overall; the percentage breakdown is on the website."
+ }
];
diff --git a/frontend/src/components/pages/Dashboard/index.tsx b/frontend/src/components/pages/Dashboard/index.tsx
index efa19e97eb26d2facbe4430af111110cc13a8a10..c6715b35b2a78dc9454b6f655ad28ba12d5f696e 100644
--- a/frontend/src/components/pages/Dashboard/index.tsx
+++ b/frontend/src/components/pages/Dashboard/index.tsx
@@ -13,11 +13,11 @@ const Dashboard: React.FC = () => {
<MyBreadcrumbs />
<PersonCard />
<DashboardButtonGroup />
- <Row style={{ marginTop: "30px" }}>
- <Col>
+ <Row>
+ <Col xs={12} sm={12} md={12} lg={6} style={{ marginTop: "30px", paddingRight: "10px", paddingLeft: "10px"}}>
<TutorCardGroup />
</Col>
- <Col>
+ <Col xs={12} sm={12} md={12} lg={6} style={{ marginTop: "30px", paddingRight: "10px", paddingLeft: "10px"}}>
<NoticeBoard />
</Col>
</Row>