From eb560e2e5c070a025a547673217b2534999f2ab1 Mon Sep 17 00:00:00 2001
From: danieldeng2 <danieldeng223@gmail.com>
Date: Sun, 9 Aug 2020 00:23:15 +0100
Subject: [PATCH] Refactor containers into standard view
---
.../components/pages/ModuleFeedback/index.tsx | 8 +--
.../pages/ModuleFeedback/style.module.scss | 5 --
.../src/components/pages/ModuleList/index.tsx | 5 +-
.../pages/ModuleList/style.module.scss | 5 --
.../components/pages/ModuleOverview/index.tsx | 8 +--
.../pages/ModuleOverview/style.module.scss | 5 --
.../pages/ModuleResources/index.tsx | 5 +-
.../pages/ModuleResources/style.module.scss | 5 --
.../components/pages/StandardView/index.tsx | 64 ++++++++++---------
.../components/pages/StandardView/style.scss | 5 ++
.../templates/ExamplePage/index.tsx | 5 +-
11 files changed, 48 insertions(+), 72 deletions(-)
diff --git a/frontend/src/components/pages/ModuleFeedback/index.tsx b/frontend/src/components/pages/ModuleFeedback/index.tsx
index f10ac1f2c..c642e86ae 100644
--- a/frontend/src/components/pages/ModuleFeedback/index.tsx
+++ b/frontend/src/components/pages/ModuleFeedback/index.tsx
@@ -1,15 +1,11 @@
import React from "react";
-import styles from "./style.module.scss";
-import Container from "react-bootstrap/Container";
-
-import classNames from "classnames";
import Dandruff from "components/molecules/Dandruff";
const ModuleFeedback: React.FC = () => {
return (
- <Container className={classNames("p-4", styles.moduleContainer)}>
+ <>
<Dandruff heading="Feedback"/>
- </Container>
+ </>
);
};
diff --git a/frontend/src/components/pages/ModuleFeedback/style.module.scss b/frontend/src/components/pages/ModuleFeedback/style.module.scss
index c1bce2447..78be428d8 100644
--- a/frontend/src/components/pages/ModuleFeedback/style.module.scss
+++ b/frontend/src/components/pages/ModuleFeedback/style.module.scss
@@ -1,10 +1,5 @@
@import "assets/scss/custom";
-.moduleContainer {
- padding-top: 1.875rem;
- margin-bottom: 4.5rem;
-}
-
.moduleSectionHeader {
margin-top: 1.875rem;
}
diff --git a/frontend/src/components/pages/ModuleList/index.tsx b/frontend/src/components/pages/ModuleList/index.tsx
index d1e64a363..0a4fde6f4 100644
--- a/frontend/src/components/pages/ModuleList/index.tsx
+++ b/frontend/src/components/pages/ModuleList/index.tsx
@@ -1,6 +1,5 @@
import React from "react";
import styles from "./style.module.scss";
-import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import classNames from "classnames";
@@ -102,7 +101,7 @@ const ModuleList: React.FC = () => {
}
];
return (
- <Container className={classNames("p-4", styles.moduleContainer)}>
+ <>
<Dandruff heading="Modules" />
<h4 className={classNames(styles.moduleSectionHeader)}>
First Year Undergraduate
@@ -119,7 +118,7 @@ const ModuleList: React.FC = () => {
<ModuleCard module={module} key={module.code} />
))}
</Row>
- </Container>
+ </>
);
};
diff --git a/frontend/src/components/pages/ModuleList/style.module.scss b/frontend/src/components/pages/ModuleList/style.module.scss
index c1bce2447..78be428d8 100644
--- a/frontend/src/components/pages/ModuleList/style.module.scss
+++ b/frontend/src/components/pages/ModuleList/style.module.scss
@@ -1,10 +1,5 @@
@import "assets/scss/custom";
-.moduleContainer {
- padding-top: 1.875rem;
- margin-bottom: 4.5rem;
-}
-
.moduleSectionHeader {
margin-top: 1.875rem;
}
diff --git a/frontend/src/components/pages/ModuleOverview/index.tsx b/frontend/src/components/pages/ModuleOverview/index.tsx
index cd9f1408c..4f2546ed5 100644
--- a/frontend/src/components/pages/ModuleOverview/index.tsx
+++ b/frontend/src/components/pages/ModuleOverview/index.tsx
@@ -1,15 +1,11 @@
import React from "react";
-import styles from "./style.module.scss";
-import Container from "react-bootstrap/Container";
-
-import classNames from "classnames";
import Dandruff from "components/molecules/Dandruff";
const ModuleOverview: React.FC = () => {
return (
- <Container className={classNames("p-4", styles.moduleContainer)}>
+ <>
<Dandruff heading="Overview"/>
- </Container>
+ </>
);
};
diff --git a/frontend/src/components/pages/ModuleOverview/style.module.scss b/frontend/src/components/pages/ModuleOverview/style.module.scss
index c1bce2447..78be428d8 100644
--- a/frontend/src/components/pages/ModuleOverview/style.module.scss
+++ b/frontend/src/components/pages/ModuleOverview/style.module.scss
@@ -1,10 +1,5 @@
@import "assets/scss/custom";
-.moduleContainer {
- padding-top: 1.875rem;
- margin-bottom: 4.5rem;
-}
-
.moduleSectionHeader {
margin-top: 1.875rem;
}
diff --git a/frontend/src/components/pages/ModuleResources/index.tsx b/frontend/src/components/pages/ModuleResources/index.tsx
index d6775f95c..4d9e63b55 100644
--- a/frontend/src/components/pages/ModuleResources/index.tsx
+++ b/frontend/src/components/pages/ModuleResources/index.tsx
@@ -1,6 +1,5 @@
import React, { useEffect } from "react";
import styles from "./style.module.scss";
-import Container from "react-bootstrap/Container";
import classNames from "classnames";
import MyBreadcrumbs from "components/atoms/MyBreadcrumbs";
@@ -20,7 +19,7 @@ const ModuleResources: React.FC = () => {
});
return (
- <Container className={classNames("p-4", styles.moduleContainer)}>
+ <>
<MyBreadcrumbs />
<InputGroup style={{ marginTop: "3rem" }}>
<InputGroup.Prepend>
@@ -59,7 +58,7 @@ const ModuleResources: React.FC = () => {
</Col>
))}
</Row>
- </Container>
+ </>
);
};
diff --git a/frontend/src/components/pages/ModuleResources/style.module.scss b/frontend/src/components/pages/ModuleResources/style.module.scss
index c1bce2447..78be428d8 100644
--- a/frontend/src/components/pages/ModuleResources/style.module.scss
+++ b/frontend/src/components/pages/ModuleResources/style.module.scss
@@ -1,10 +1,5 @@
@import "assets/scss/custom";
-.moduleContainer {
- padding-top: 1.875rem;
- margin-bottom: 4.5rem;
-}
-
.moduleSectionHeader {
margin-top: 1.875rem;
}
diff --git a/frontend/src/components/pages/StandardView/index.tsx b/frontend/src/components/pages/StandardView/index.tsx
index cfa68f8a4..28048df1a 100644
--- a/frontend/src/components/pages/StandardView/index.tsx
+++ b/frontend/src/components/pages/StandardView/index.tsx
@@ -12,6 +12,7 @@ import ModuleFeedback from "../ModuleFeedback";
import LeftBarHome from "components/organisms/LeftBarHome";
import LeftBarModuleList from "components/organisms/LeftBarModuleList";
import LeftBarModule from "components/organisms/LeftBarModule";
+import Container from "react-bootstrap/esm/Container";
interface StandardViewProps {
pages: {
@@ -52,44 +53,45 @@ const StandardView: React.FC<StandardViewProps> = ({
</Switch>
<div id="sidenav-overlay" onClick={(e) => onOverlayClick(e)}></div>
+ <Container className={classNames("py-4", "px-5", "pageContainer")}>
+ <Switch>
+ <Route path="/home">
+ <ExamplePage name="Home" />
+ </Route>
- <Switch>
- <Route path="/home">
- <ExamplePage name="Home" />
- </Route>
+ <Route exact path="/modules">
+ <ModuleList />
+ </Route>
- <Route exact path="/modules">
- <ModuleList />
- </Route>
+ <Route path="/modules/:id/overview">
+ <ModuleOverview />
+ </Route>
- <Route path="/modules/:id/overview">
- <ModuleOverview />
- </Route>
+ <Route path="/modules/:id/resources">
+ <ModuleResources />
+ </Route>
- <Route path="/modules/:id/resources">
- <ModuleResources />
- </Route>
+ <Route path="/modules/:id/feedback">
+ <ModuleFeedback />
+ </Route>
- <Route path="/modules/:id/feedback">
- <ModuleFeedback />
- </Route>
+ <Route path="/timeline">
+ <ExamplePage name="Timeline" />
+ </Route>
- <Route path="/timeline">
- <ExamplePage name="Timeline" />
- </Route>
+ <Route path="/exams">
+ <ExamplePage name="Exams" />
+ </Route>
- <Route path="/exams">
- <ExamplePage name="Exams" />
- </Route>
-
- <Route
- path="/modules/:id"
- render={(props) => (
- <Redirect to={`/modules/${props.match.params.id}/overview`} />
- )}
- />
- <Route path="/" render={() => <Redirect to="/home" />} />
- </Switch>
+ <Route
+ path="/modules/:id"
+ render={(props) => (
+ <Redirect to={`/modules/${props.match.params.id}/overview`} />
+ )}
+ />
+ <Route path="/" render={() => <Redirect to="/home" />} />
+ </Switch>
+ </Container>
</div>
);
};
diff --git a/frontend/src/components/pages/StandardView/style.scss b/frontend/src/components/pages/StandardView/style.scss
index 5fac97fb7..6918d53d8 100644
--- a/frontend/src/components/pages/StandardView/style.scss
+++ b/frontend/src/components/pages/StandardView/style.scss
@@ -46,3 +46,8 @@
background-color: rgba(0, 0, 0, 0.3);
}
}
+
+.pageContainer {
+ padding-top: 1.875rem;
+ margin-bottom: 4.5rem;
+}
diff --git a/frontend/src/components/templates/ExamplePage/index.tsx b/frontend/src/components/templates/ExamplePage/index.tsx
index 34e4d3967..35212e2cf 100644
--- a/frontend/src/components/templates/ExamplePage/index.tsx
+++ b/frontend/src/components/templates/ExamplePage/index.tsx
@@ -1,7 +1,6 @@
import React from "react";
import Jumbotron from "react-bootstrap/Jumbotron";
-import Container from "react-bootstrap/Container";
import ButtonsShowcase from "components/templates/ExamplePage/ExampleButtons";
import ToastsShowcase from "components/templates/ExamplePage/ExampleToasts";
@@ -13,7 +12,7 @@ export interface ExamplePageProps {
const ExamplePage: React.FC<ExamplePageProps> = ({name} : ExamplePageProps) => {
return (
- <Container className="p-3" style={{overflow: "hidden"}}>
+ <>
<Jumbotron>
<h1 className="header">
Welcome To {name}
@@ -23,7 +22,7 @@ const ExamplePage: React.FC<ExamplePageProps> = ({name} : ExamplePageProps) => {
<ButtonsShowcase />
<h2>Toasts</h2>
<ToastsShowcase />
- </Container>
+ </>
);
};
--
GitLab