Update dashboard view to behave responsively

Note: The dasboard view now works on mobile devices!

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

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

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;
+  }
+}

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

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 {

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}

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."
+  }
 ];

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>