From 28f8cddfe24854c371ba13b77656ec052b945fd5 Mon Sep 17 00:00:00 2001
From: Sudarshan Sreeram <sudarshan.sreeram19@imperial.ac.uk>
Date: Thu, 13 Aug 2020 18:32:42 +0530
Subject: [PATCH] Add tutor information and notice board cards
---
.../src/components/pages/Dashboard/index.tsx | 126 ++++++++++++++++--
.../pages/Dashboard/style.module.scss | 63 +++++++++
2 files changed, 181 insertions(+), 8 deletions(-)
diff --git a/frontend/src/components/pages/Dashboard/index.tsx b/frontend/src/components/pages/Dashboard/index.tsx
index 3116136c1..08b39701f 100644
--- a/frontend/src/components/pages/Dashboard/index.tsx
+++ b/frontend/src/components/pages/Dashboard/index.tsx
@@ -15,6 +15,9 @@ const ModuleOverview: React.FC = () => {
return (
<>
<MyBreadcrumbs />
+
+ {/* User Card */}
+
<Container style={{ display: "flex", padding: 0 }}>
<span>
<Image className={styles.dashboardImage} src="holder.js/180x180" />
@@ -32,26 +35,133 @@ const ModuleOverview: React.FC = () => {
<p className={styles.userCourse}>MEng Computing (IP)</p>
</span>
</Container>
+
+ {/* User Buttons */}
+
<Row style={{ marginTop: "30px" }}>
{[...Array(8)].map((e, i) => (
<Col xs={6} sm={6} md={3} key={i}>
<Button className={styles.dashboardButton}>
Button {i}
- <FontAwesomeIcon
- style={{ fontSize: "1.125rem" }}
- icon={faFile}
- className={styles.dashboardButtonSvg}
- />
+ <FontAwesomeIcon
+ style={{ fontSize: "1.125rem" }}
+ icon={faFile}
+ className={styles.dashboardButtonSvg}
+ />
</Button>
</Col>
))}
</Row>
- <Row style={{marginTop: "30px"}}>
- <Col>
- <h4>Tutors</h4>
+
+ {/* Tutors and Notice Board */}
+
+ <Row style={{ marginTop: "30px" }}>
+ <Col>
+ <h4>Tutors</h4>
+
+ {/* Tutor 1 */}
+
+ <Container
+ style={{
+ display: "flex",
+ padding: 0,
+ marginTop: "20px",
+ alignItems: "center"
+ }}
+ >
+ <span>
+ <Image className={styles.tutorImage} src="holder.js/60x60" />
+ </span>
+ <span style={{ height: "72px" }}>
+ <p className={styles.tutorName}>Dr. Nicolas Wu</p>
+ <p className={styles.tutorEmail}>n.wu@imperial.ac.uk</p>
+ <p className={styles.tutorAddress}>374, Huxley Building</p>
+ </span>
+ </Container>
+
+ {/* Tutor 2 */}
+
+ <Container
+ style={{
+ display: "flex",
+ padding: 0,
+ marginTop: "15px",
+ alignItems: "center"
+ }}
+ >
+ <span>
+ <Image className={styles.tutorImage} src="holder.js/60x60" />
+ </span>
+ <span style={{ height: "72px" }}>
+ <p className={styles.tutorName}>Dr. Sophia Drossopoulou</p>
+ <p className={styles.tutorEmail}>s.drossopoulou@imperial.ac.uk</p>
+ <p className={styles.tutorAddress}>559, Huxley Building</p>
+ </span>
+ </Container>
+
+ {/* Tutor 3 */}
+
+ <Container
+ style={{
+ display: "flex",
+ padding: 0,
+ marginTop: "15px",
+ alignItems: "center"
+ }}
+ >
+ <span>
+ <Image className={styles.tutorImage} src="holder.js/60x60" />
+ </span>
+ <span style={{ height: "72px" }}>
+ <p className={styles.tutorName}>Mr. Evangelos Ververas</p>
+ <p className={styles.tutorEmail}>e.ververas16@imperial.ac.uk</p>
+ <p className={styles.tutorAddress}>Huxley Building</p>
+ </span>
+ </Container>
</Col>
<Col>
<h4>Notice Board</h4>
+
+ {/* Notice 1 */}
+ <div style={{ marginTop: "20px" }} className={styles.noticeContainer}>
+ <p className={styles.noticeHeading}>Lab Closure Information</p>
+ <span style={{ display: "flex", justifyContent: "space-between" }}>
+ <p className={styles.noticeUser}>Konstantinos Gkotuzis</p>
+ <p className={styles.noticeTime}>1 Minute Ago</p>
+ </span>
+ <p className={styles.noticeBody}>
+ Computing lab rooms 209, 208, and 210 would be closed for the year
+ one haskell exams on Friday 20th of April.
+ </p>
+ </div>
+
+ {/* Notice 2 */}
+
+ <div style={{ marginTop: "15px" }} className={styles.noticeContainer}>
+ <p className={styles.noticeHeading}>Lab Closure Information</p>
+ <span style={{ display: "flex", justifyContent: "space-between" }}>
+ <p className={styles.noticeUser}>Konstantinos Gkotuzis</p>
+ <p className={styles.noticeTime}>1 Minute Ago</p>
+ </span>
+ <p className={styles.noticeBody}>
+ Computing lab rooms 209, 208, and 210 would be closed for the year
+ one haskell exams on Friday 20th of April.
+ </p>
+ </div>
+
+ {/* Notice 3 */}
+
+ <div style={{ marginTop: "15px" }} className={styles.noticeContainer}>
+ <p className={styles.noticeHeading}>Lab Closure Information</p>
+ <span style={{ display: "flex", justifyContent: "space-between" }}>
+ <p className={styles.noticeUser}>Konstantinos Gkotuzis</p>
+ <p className={styles.noticeTime}>1 Minute Ago</p>
+ </span>
+ <p className={styles.noticeBody}>
+ Computing lab rooms 209, 208, and 210 would be closed for the year
+ one haskell exams on Friday 20th of April.
+ </p>
+ </div>
</Col>
</Row>
</>
diff --git a/frontend/src/components/pages/Dashboard/style.module.scss b/frontend/src/components/pages/Dashboard/style.module.scss
index 893c45167..0e81b0a21 100644
--- a/frontend/src/components/pages/Dashboard/style.module.scss
+++ b/frontend/src/components/pages/Dashboard/style.module.scss
@@ -99,3 +99,66 @@
border-color: #fff;
color: #000;
}
+
+.tutorImage {
+ border-radius: 50%;
+ margin-right: 20px;
+}
+
+.tutorName, .tutorEmail, .tutorAddress {
+ font-size: 18px;
+ margin-bottom: 0px;
+ line-height: 24px !important;
+}
+
+.tutorName {
+ color: $blue-500;
+}
+
+.tutorEmail {
+ color: $gray-700;
+}
+
+.tutorAddress {
+ color: $gray-600;
+}
+
+.noticeContainer {
+ background-color: $gray-100;
+ border-radius: 8px;
+ padding: 10px;
+ transition: transform 0.2s, box-shadow 0.2s;
+}
+
+.noticeContainer:hover {
+ transform: scale(1.03);
+ box-shadow: 0 0.125rem 0.625rem 0 rgba(0, 0, 0, 0.1);
+}
+
+.noticeHeading {
+ font-size: 18px;
+ color: $black;
+ font-weight: 500;
+ margin-bottom: 2px;
+ line-height: 22px;
+}
+
+.noticeUser {
+ font-size: 16px;
+ color: $gray-700;
+ line-height: 18px;
+ margin-bottom: 10px;
+}
+
+.noticeTime {
+ font-size: 16px;
+ color: $gray-600;
+ line-height: 18px;
+ margin-bottom: 10px;
+}
+
+.noticeBody {
+ font-size: 16px;
+ color: $gray-800;
+ margin-bottom: 0px;
+}
--
GitLab