Skip to content
Snippets Groups Projects
Commit 03633d95 authored by danieldeng2's avatar danieldeng2
Browse files

Add empty page for course overview

parent a4f0e279
No related branches found
No related tags found
No related merge requests found
......@@ -3,6 +3,7 @@ import Card from "react-bootstrap/Card";
import styles from "./style.module.scss";
import classNames from "classnames";
import Col from "react-bootstrap/Col";
import { Link } from "react-router-dom";
export interface ModuleCardProps {
module: {title: string;
......@@ -22,7 +23,7 @@ const ModuleCard: React.FC<ModuleCardProps> = ({
</Card.Header>
<Card.Img style={{ borderRadius: 0 }} variant="top" src={module.image} />
<Card.Body>
<Card.Title>{module.title}</Card.Title>
<Card.Title ><Link to={`modules/${module.code}`} style={{color: "black"}}>{module.title}</Link></Card.Title>
</Card.Body>
<Card.Footer>
<small className={classNames(styles.moduleCardProgressText)}>
......
......@@ -6,8 +6,8 @@ import classNames from "classnames";
import withBreadcrumbs from "react-router-breadcrumbs-hoc";
import { Link } from "react-router-dom";
// delete [{ path: "/", breadcrumb: null }] to enable Home in front of breadcrumbs
const MyBreadcrumbs = withBreadcrumbs([{ path: "/", breadcrumb: null }])(
// delete [{ path: "/", breadcrumb: "" }] to enable Home in front of breadcrumbs
const MyBreadcrumbs = withBreadcrumbs([{ path: "/", breadcrumb: "" }])(
({ breadcrumbs }: { breadcrumbs: any }) => (
<Breadcrumb className={styles.breadcrumb}>
{breadcrumbs.map(
......
......@@ -9,15 +9,33 @@ export interface SideBarTabGroupProp {
title: string;
buttons: {
title: string;
icon: IconDefinition;
icon?: IconDefinition;
active?: boolean;
}[];
}
const SideBarTabGroup: React.FC<SideBarTabGroupProp> = ({
title,
title,
buttons,
}: SideBarTabGroupProp) => {
let displayButtons = buttons.map(({ title, icon, active }) => {
let FAicon;
if (icon) {
FAicon = (
<FontAwesomeIcon className={styles.tabGroupButtonSvg} icon={icon} />
);
}
return (
<Button
className={classNames({ active: active }, styles.tabGroupButton)}
key={title}
>
{title}
{FAicon}
</Button>
);
});
return (
<>
<h1 className={styles.tabGroupHeading}>{title}</h1>
......@@ -25,18 +43,7 @@ const SideBarTabGroup: React.FC<SideBarTabGroupProp> = ({
className={"btn-group-vertical " + styles.tabGroupButtonGroup}
role="group"
>
{buttons.map(({ title, icon, active }) => (
<Button
className={classNames({ active: active }, styles.tabGroupButton)}
key={title}
>
{title}
<FontAwesomeIcon
className={styles.tabGroupButtonSvg}
icon={icon}
/>
</Button>
))}
{displayButtons}
</div>
</>
);
......
import React from "react";
import SideBarTabGroup from "components/molecules/SideBarTabGroup";
import styles from "./style.module.scss";
import { faSpinner, faSortNumericDown, faSortAlphaDown, faSnowflake } from "@fortawesome/free-solid-svg-icons";
import { Route , Switch} from "react-router-dom";
const LeftBar: React.FC = () => {
let buttons = [
let sortButtons = [
{
title: "Progress",
icon: faSpinner,
},
{
title: "Module Title",
icon: faSortAlphaDown,
active: true,
},
{
title: "Module Code",
icon: faSortNumericDown,
},
{
icon: faSnowflake,
title: "Term",
},
];
let outlineButtons = [
{
title: "Overview",
active: true,
},
{
title: "Coursework",
},
{
title: "Materials",
},
{
title: "Piazza",
},
{
title: "Policies",
},
{
title: "FAQs",
},
];
return (
<div id={styles.leftbarWrapper}>
<p className={styles.leftbarStatus}>1 UPDATE</p>
<SideBarTabGroup title="Sort" buttons={buttons}/>
<Switch>
<Route path="/modules/:id">
<SideBarTabGroup title="Outline" buttons={outlineButtons}/>
</Route>
<Route path="/">
<SideBarTabGroup title="Sort" buttons={sortButtons}/>
</Route>
</Switch>
</div>
);
};
......
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>
);
};
export default ModuleOverview;
@import "assets/scss/custom";
.moduleContainer {
padding-top: 30px;
margin-bottom: 72px;
}
.moduleSectionHeader {
margin-top: 30px;
}
.moduleParagraph {
margin-top: 15px;
}
@media (max-width: 992px) {
}
@media (min-width: 992px) {
}
import React from "react";
import { Route, Switch, Redirect } from "react-router-dom";
import ExamplePage from "components/templates/ExamplePage";
import ModuleOverview from "components/pages/ModuleOverview";
import LeftBar from "components/organisms/LeftBar";
import "./style.scss";
import RightBar from "components/organisms/RightBar";
import classNames from "classnames";
......@@ -34,22 +36,28 @@ const StandardView: React.FC<StandardViewProps> = ({
<RightBar />
<div id="sidenav-overlay" onClick={(e) => onOverlayClick(e)}></div>
<Switch>
<Route exact path="/" render={() => <Redirect to="/home" />} />
<Route path="/home" key="Home">
<Route path="/home">
<ExamplePage name="Home" />
</Route>
<Route path="/modules" key="Modules">
<Route exact path="/modules">
<ModuleList />
</Route>
<Route path="/timetable" key="Timetable">
<Route path="/modules/:id/overview">
<ModuleOverview />
</Route>
<Route path="/modules/:id" render={props => <Redirect to={`/modules/${props.match.params.id}/overview`} />} />
<Route path="/timetable">
<ExamplePage name="Timetable" />
</Route>
<Route path="/exams" key="Exams">
<Route path="/exams">
<ExamplePage name="Exams" />
</Route>
<Route path="/" render={() => <Redirect to="/home" />} />
</Switch>
</div>
);
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment