From 7f96dd19ccfa27d3876809b7ef3da6084f3c7be6 Mon Sep 17 00:00:00 2001
From: danieldeng2 <danieldeng223@gmail.com>
Date: Thu, 6 Aug 2020 23:47:59 +0100
Subject: [PATCH] Add rough layout for module page
---
frontend/public/index.html | 17 ++++----
.../molecules/CalendarGroup/index.tsx | 15 +++++--
.../src/components/pages/ModulePage/index.tsx | 40 +++++++++++++++++++
.../pages/ModulePage/style.module.scss | 10 +++++
.../components/pages/StandardView/index.tsx | 24 +++++++----
node_modules/.yarn-integrity | 12 ++++++
package.json | 3 ++
yarn.lock | 4 ++
8 files changed, 107 insertions(+), 18 deletions(-)
create mode 100644 frontend/src/components/pages/ModulePage/index.tsx
create mode 100644 frontend/src/components/pages/ModulePage/style.module.scss
create mode 100644 node_modules/.yarn-integrity
create mode 100644 package.json
create mode 100644 yarn.lock
diff --git a/frontend/public/index.html b/frontend/public/index.html
index 675ee0158..d6ce40f06 100644
--- a/frontend/public/index.html
+++ b/frontend/public/index.html
@@ -5,14 +5,11 @@
<link rel="icon" href="%PUBLIC_URL%/scientia-logo-black.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
- <meta
- name="description"
- content="A central dock for EdTech services"
- />
+ <meta name="description" content="A central dock for EdTech services" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/scientia-logo-black.svg" />
- <link
+ <link
rel="stylesheet"
- href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap"
+ href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap"
/>
<!--
manifest.json provides metadata used when your web app is installed on a
@@ -42,6 +39,12 @@
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
- -->
+ -->
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/holder/2.9.7/holder.js"></script>
+ <script>
+ function holder() {
+ Holder.run();
+ }
+ </script>
</body>
</html>
diff --git a/frontend/src/components/molecules/CalendarGroup/index.tsx b/frontend/src/components/molecules/CalendarGroup/index.tsx
index 68cf12d7a..dd8adcc39 100644
--- a/frontend/src/components/molecules/CalendarGroup/index.tsx
+++ b/frontend/src/components/molecules/CalendarGroup/index.tsx
@@ -1,10 +1,19 @@
import React from "react";
import styles from "./style.module.scss";
import classNames from "classnames";
-import CalendarCard, { eventTypes, CalendarCardProps } from "components/atoms/CalendarCard";
+import CalendarCard, {
+ eventTypes,
+ CalendarCardProps,
+} from "components/atoms/CalendarCard";
const CalendarGroup: React.FC = () => {
let events: CalendarCardProps[] = [
+ {
+ type: eventTypes.Lecture,
+ title: "CO142",
+ subtitle: "09:00 - 11:00",
+ content: "308, Huxley Building, South Kensington Campus",
+ },
{
type: eventTypes.Lecture,
title: "CO145",
@@ -37,8 +46,8 @@ const CalendarGroup: React.FC = () => {
title={title}
type={type}
subtitle={subtitle}
- content={content}
- key={title + type + subtitle}
+ content={content}
+ key={title + type + subtitle}
/>
))}
</div>
diff --git a/frontend/src/components/pages/ModulePage/index.tsx b/frontend/src/components/pages/ModulePage/index.tsx
new file mode 100644
index 000000000..f7fab90b3
--- /dev/null
+++ b/frontend/src/components/pages/ModulePage/index.tsx
@@ -0,0 +1,40 @@
+import React, { useEffect } from "react";
+// import styles from "./style.module.scss";
+// import classNames from "classnames";
+import Breadcrumb from "react-bootstrap/Breadcrumb";
+import Container from "react-bootstrap/Container";
+import Card from "react-bootstrap/Card";
+
+const ModulePage: React.FC = () => {
+ // only needed for using holder images, delete when done
+ // @ts-ignore
+ useEffect(window.holder);
+
+ return (
+ <Container className="p-4">
+ <Breadcrumb>
+ <Breadcrumb.Item></Breadcrumb.Item>
+ <Breadcrumb.Item active>Modules</Breadcrumb.Item>
+ </Breadcrumb>
+ <h1 className="header">Modules</h1>
+ <hr />
+ <h3>First Year Undergraduate</h3>
+ <p>
+ There are eight core modules, each with their own coursework and written
+ examination: Introduction to Computer Systems, Introduction to Computer
+ Architecture, Logic, Reasoning about Programs, Mathematics I, Discrete
+ Structures, Graphs and Algorithms, Introduction to Databases.
+ </p>
+
+ <Card style={{ width: "200px", marginTop: "50px" }}>
+ <Card.Img variant="top" src="holder.js/200x100" />
+ <Card.Body>
+ <Card.Title>Card Title</Card.Title>
+ <Card.Text>Some quick example text</Card.Text>
+ </Card.Body>
+ </Card>
+ </Container>
+ );
+};
+
+export default ModulePage;
diff --git a/frontend/src/components/pages/ModulePage/style.module.scss b/frontend/src/components/pages/ModulePage/style.module.scss
new file mode 100644
index 000000000..138459fa9
--- /dev/null
+++ b/frontend/src/components/pages/ModulePage/style.module.scss
@@ -0,0 +1,10 @@
+@import "assets/scss/custom";
+
+
+@media (max-width: 992px) {
+
+}
+
+@media (min-width: 992px) {
+
+}
diff --git a/frontend/src/components/pages/StandardView/index.tsx b/frontend/src/components/pages/StandardView/index.tsx
index 50c613de5..f5f9ad388 100644
--- a/frontend/src/components/pages/StandardView/index.tsx
+++ b/frontend/src/components/pages/StandardView/index.tsx
@@ -5,6 +5,7 @@ import LeftBar from "components/organisms/LeftBar";
import "./style.scss";
import RightBar from "components/organisms/RightBar";
import classNames from "classnames";
+import ModulePage from "../ModulePage";
interface StandardViewProps {
pages: {
@@ -17,17 +18,10 @@ interface StandardViewProps {
}
const StandardView: React.FC<StandardViewProps> = ({
- pages,
toggledLeft,
toggledRight,
onOverlayClick,
}: StandardViewProps) => {
- const topBarRoutes = pages.map(({ name, path }) => (
- <Route path={path} key={name}>
- <ExamplePage name={name} />
- </Route>
- ));
-
return (
<div
id="wrapper"
@@ -41,7 +35,21 @@ const StandardView: React.FC<StandardViewProps> = ({
<div id="sidenav-overlay" onClick={(e) => onOverlayClick(e)}></div>
<Switch>
<Route exact path="/" render={() => <Redirect to="/home" />} />
- {topBarRoutes}
+ <Route path="/home" key="Home">
+ <ExamplePage name="Home" />
+ </Route>
+
+ <Route path="/modules" key="Modules">
+ <ModulePage />
+ </Route>
+
+ <Route path="/timetable" key="Timetable">
+ <ExamplePage name="Timetable" />
+ </Route>
+
+ <Route path="/exams" key="Exams">
+ <ExamplePage name="Exams" />
+ </Route>
</Switch>
</div>
);
diff --git a/node_modules/.yarn-integrity b/node_modules/.yarn-integrity
new file mode 100644
index 000000000..e00d42a58
--- /dev/null
+++ b/node_modules/.yarn-integrity
@@ -0,0 +1,12 @@
+{
+ "systemParams": "linux-x64-72",
+ "modulesFolders": [
+ "node_modules"
+ ],
+ "flags": [],
+ "linkedModules": [],
+ "topLevelPatterns": [],
+ "lockfileEntries": {},
+ "files": [],
+ "artifacts": {}
+}
\ No newline at end of file
diff --git a/package.json b/package.json
new file mode 100644
index 000000000..18a1e415e
--- /dev/null
+++ b/package.json
@@ -0,0 +1,3 @@
+{
+ "dependencies": {}
+}
diff --git a/yarn.lock b/yarn.lock
new file mode 100644
index 000000000..fb57ccd13
--- /dev/null
+++ b/yarn.lock
@@ -0,0 +1,4 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
--
GitLab