From c3a4b03eb2bfa2ec563f9850d7260a2898f2a9fe Mon Sep 17 00:00:00 2001
From: danieldeng2 <danieldeng223@gmail.com>
Date: Thu, 27 Aug 2020 14:09:58 +0100
Subject: [PATCH] Change order of module outline
---
.../organisms/LeftBarModule/index.tsx | 22 ++++---
src/components/pages/ModuleOverview/index.tsx | 36 +----------
.../pages/ModuleOverview/style.module.scss | 44 --------------
src/components/pages/ModuleProgress/index.tsx | 54 +++++++++++++++++
.../pages/ModuleProgress/style.module.scss | 59 +++++++++++++++++++
src/components/pages/StandardView/index.tsx | 5 ++
6 files changed, 135 insertions(+), 85 deletions(-)
create mode 100644 src/components/pages/ModuleProgress/index.tsx
create mode 100644 src/components/pages/ModuleProgress/style.module.scss
diff --git a/src/components/organisms/LeftBarModule/index.tsx b/src/components/organisms/LeftBarModule/index.tsx
index 8f68199db..9cab049bc 100644
--- a/src/components/organisms/LeftBarModule/index.tsx
+++ b/src/components/organisms/LeftBarModule/index.tsx
@@ -1,7 +1,7 @@
import React from "react";
import LeftBar from "components/organisms/LeftBar";
import SideBarTabGroup from "components/molecules/SideBarTabGroup";
-import { faUserFriends } from "@fortawesome/free-solid-svg-icons";
+import { faUserFriends, faList, faTasks, faSpinner, faArchive, faHighlighter } from "@fortawesome/free-solid-svg-icons";
import { useParams } from "react-router-dom";
import WorkDueGroup from "components/molecules/WorkDueGroup";
@@ -30,15 +30,23 @@ const LeftBarModule: React.FC = () => {
let outlineButtons = [
{
title: "Overview",
- activeURL: `/modules/${id}/overview`
- },
- {
- title: "Feedback",
- activeURL: `/modules/${id}/feedback`
+ activeURL: `/modules/${id}/overview`,
+ icon: faList,
+ },
+ {
+ title: "Progress",
+ activeURL: `/modules/${id}/progress`,
+ icon: faSpinner,
},
{
title: "Resources",
- activeURL: `/modules/${id}/resources`
+ activeURL: `/modules/${id}/resources`,
+ icon: faArchive,
+ },
+ {
+ title: "Feedback",
+ activeURL: `/modules/${id}/feedback`,
+ icon: faHighlighter,
},
{
title: "Piazza",
diff --git a/src/components/pages/ModuleOverview/index.tsx b/src/components/pages/ModuleOverview/index.tsx
index 41fffcfe2..1a4c6a00b 100644
--- a/src/components/pages/ModuleOverview/index.tsx
+++ b/src/components/pages/ModuleOverview/index.tsx
@@ -9,9 +9,6 @@ import PageButtonGroup from "components/molecules/PageButtonGroup";
import { request } from "../../../utils/api";
import { api, methods } from "../../../constants/routes";
-import ProgressBar from "react-bootstrap/ProgressBar";
-import Accordion from "react-bootstrap/Accordion";
-import Card from "react-bootstrap/Card";
import TutorCard from "components/atoms/TutorCard";
import tutorImage1 from "assets/images/tutor-1.png";
@@ -106,42 +103,13 @@ const ModuleOverview: React.FC = () => {
</ul>
</p>
- <h4 className={classNames(styles.moduleSectionHeader)}>Links</h4>
- <PageButtonGroup buttons={buttons} style={{ marginTop: "1.25rem" }} />
-
<h4 className={classNames(styles.moduleSectionHeader)}>Module Leaders</h4>
<Row>
-
{leaderCards}
</Row>
- <h4 className={classNames(styles.moduleSectionHeader)}>Progress</h4>
- { <ProgressBar
- now={50}
- className={styles.progress}
- /> }
- <Accordion
- defaultActiveKey="0"
- style={{ marginTop: "1.25rem", borderRadius: ".5rem" }}
- className={styles.progressAccordion}
- >
- {[...Array(9)].map((e, i) => (
- <Card className={styles.weekCard}>
- <Accordion.Toggle
- className={styles.weekCardHeader}
- as={Card.Header}
- eventKey={`${i}`}
- >
- Week {i + 1}
- </Accordion.Toggle>
- <Accordion.Collapse eventKey={`${i}`}>
- <Card.Body className={styles.weekCardBody}>
- Hello! I'm the body of week {i + 1}
- </Card.Body>
- </Accordion.Collapse>
- </Card>
- ))}
- </Accordion>
+ <h4 className={classNames(styles.moduleSectionHeader)}>Links</h4>
+ <PageButtonGroup buttons={buttons} style={{ marginTop: "1.25rem" }} />
</>
);
};
diff --git a/src/components/pages/ModuleOverview/style.module.scss b/src/components/pages/ModuleOverview/style.module.scss
index 09456cf28..0df877f84 100644
--- a/src/components/pages/ModuleOverview/style.module.scss
+++ b/src/components/pages/ModuleOverview/style.module.scss
@@ -8,50 +8,6 @@
margin-top: 1rem;
}
-.progress {
- background-color: $gray-100;
- margin-top: 1.25rem;
- border-radius: 0.5rem;
- height: 0.75rem;
-}
-
-:global(.progress-bar) {
- background-color: $teal-500;
- border-radius: 0.5rem;
-}
-
-.progressAccordion {
- border-radius: 0.5rem;
-}
-
-.weekCard {
- background: $white;
- border-width: 0rem;
- margin-bottom: 0.5rem;
- transition: 0.2s transform;
- border-radius: 0.5rem !important;
-}
-
-.weekCardHeader {
- background: $gray-100;
- transition: 0.2s background;
- -webkit-transition: 0.2s background;
- -moz-transition: 0.2s background;
- border-radius: 0.5rem !important;
- font-size: 1.125rem;
- margin-bottom: 0px !important;
- padding: 0.5rem 0.75rem;
- border-width: 0px;
-}
-
-.weekCardHeader:hover {
- background: $gray-200;
-}
-
-.weekCardBody {
- border-radius: 0.5rem;
-}
-
@media (max-width: 62rem) {
}
diff --git a/src/components/pages/ModuleProgress/index.tsx b/src/components/pages/ModuleProgress/index.tsx
new file mode 100644
index 000000000..feb3157f4
--- /dev/null
+++ b/src/components/pages/ModuleProgress/index.tsx
@@ -0,0 +1,54 @@
+import React, { useEffect, useState } from "react";
+import Dandruff from "components/molecules/Dandruff";
+import { useParams } from "react-router-dom";
+import styles from "./style.module.scss";
+import classNames from "classnames";
+
+import { request } from "../../../utils/api";
+import { api, methods } from "../../../constants/routes";
+
+import ProgressBar from "react-bootstrap/ProgressBar";
+import Accordion from "react-bootstrap/Accordion";
+import Card from "react-bootstrap/Card";
+import MyBreadcrumbs from "components/atoms/MyBreadcrumbs";
+
+const ModuleProgress: React.FC = () => {
+ let { id } = useParams();
+ let moduleCode = id.startsWith("CO") ? id.slice(2) : id;
+
+ return (
+ <>
+ <MyBreadcrumbs />
+ <h3>Progress</h3>
+
+ <ProgressBar
+ now={50}
+ className={styles.progress}
+ />
+ <Accordion
+ defaultActiveKey="0"
+ style={{ marginTop: "1.25rem", borderRadius: ".5rem" }}
+ className={styles.progressAccordion}
+ >
+ {[...Array(9)].map((e, i) => (
+ <Card className={styles.weekCard}>
+ <Accordion.Toggle
+ className={styles.weekCardHeader}
+ as={Card.Header}
+ eventKey={`${i}`}
+ >
+ Week {i + 1}
+ </Accordion.Toggle>
+ <Accordion.Collapse eventKey={`${i}`}>
+ <Card.Body className={styles.weekCardBody}>
+ Hello! I'm the body of week {i + 1}
+ </Card.Body>
+ </Accordion.Collapse>
+ </Card>
+ ))}
+ </Accordion>
+ </>
+ );
+};
+
+export default ModuleProgress;
\ No newline at end of file
diff --git a/src/components/pages/ModuleProgress/style.module.scss b/src/components/pages/ModuleProgress/style.module.scss
new file mode 100644
index 000000000..09456cf28
--- /dev/null
+++ b/src/components/pages/ModuleProgress/style.module.scss
@@ -0,0 +1,59 @@
+@import "assets/scss/custom";
+
+.moduleSectionHeader {
+ margin-top: 1.875rem;
+}
+
+.moduleParagraph {
+ margin-top: 1rem;
+}
+
+.progress {
+ background-color: $gray-100;
+ margin-top: 1.25rem;
+ border-radius: 0.5rem;
+ height: 0.75rem;
+}
+
+:global(.progress-bar) {
+ background-color: $teal-500;
+ border-radius: 0.5rem;
+}
+
+.progressAccordion {
+ border-radius: 0.5rem;
+}
+
+.weekCard {
+ background: $white;
+ border-width: 0rem;
+ margin-bottom: 0.5rem;
+ transition: 0.2s transform;
+ border-radius: 0.5rem !important;
+}
+
+.weekCardHeader {
+ background: $gray-100;
+ transition: 0.2s background;
+ -webkit-transition: 0.2s background;
+ -moz-transition: 0.2s background;
+ border-radius: 0.5rem !important;
+ font-size: 1.125rem;
+ margin-bottom: 0px !important;
+ padding: 0.5rem 0.75rem;
+ border-width: 0px;
+}
+
+.weekCardHeader:hover {
+ background: $gray-200;
+}
+
+.weekCardBody {
+ border-radius: 0.5rem;
+}
+
+@media (max-width: 62rem) {
+}
+
+@media (min-width: 62rem) {
+}
diff --git a/src/components/pages/StandardView/index.tsx b/src/components/pages/StandardView/index.tsx
index dbc6e9c71..793c8f60b 100644
--- a/src/components/pages/StandardView/index.tsx
+++ b/src/components/pages/StandardView/index.tsx
@@ -20,6 +20,7 @@ import Container from "react-bootstrap/esm/Container";
import ExamRubrics from "../Exams/Rubrics";
import ExamGrading from "../Exams/Grading";
import ExamPastPapers from "../Exams/PastPapers";
+import ModuleProgress from "../ModuleProgress";
interface StandardViewProps {
toggledLeft: boolean;
@@ -82,6 +83,10 @@ const StandardView: React.FC<StandardViewProps> = ({
<ModuleOverview />
</Route>
+ <Route path="/modules/:id/progress">
+ <ModuleProgress />
+ </Route>
+
<Route
path="/modules/:id/resources/:scope?"
render={props => (
--
GitLab