Commit 11b0ef51 authored by David Haynes's avatar David Haynes 🙆
Browse files

Collapse for "your schedule" works

- the close and generate buttons look like trash, need to spend time
making that great again
- progress is good otherwise
parent 2f6f110a
......@@ -4,7 +4,7 @@ import { Button, Card, CardBody, CardTitle, Col, Row } from 'reactstrap';
require('../css/button-text-override.css');
const CourseSectionCard = () => (
<Row className="justify-content-center my-5">
<Row className="justify-content-center">
<Col md="9">
<Card>
<CardBody>
......
import * as React from 'react';
import { Col, Row } from 'reactstrap';
require('../css/icon-badge.css');
const Header = () => (
<div>
<Row className="justify-content-center my-5">
......
import * as React from 'react';
import { Row } from 'reactstrap';
import { Button, Card, CardBody, CardTitle, Collapse, Row } from 'reactstrap';
import CourseSection from '../util/CourseSection';
import CourseSectionCard from './CourseSectionCard';
interface ScheduleBadgeProps {
schedule: CourseSection[];
}
const ScheduleBadge = ({ schedule }: ScheduleBadgeProps) => (
<Row className="justify-content-end my-5 px-3">
<span className="fa-stack fa-3x has-badge" data-count={schedule.length}>
<i className="fa fas fa-shopping-bag fa-stack-1x" />
</span>
</Row>
);
interface State {
collapse: boolean;
}
require('../css/icon-badge.css');
class ScheduleBadge extends React.Component<ScheduleBadgeProps, State> {
constructor(props: ScheduleBadgeProps) {
super(props);
this.toggle = this.toggle.bind(this);
this.state = { collapse: false };
}
toggle() {
this.setState({ collapse: !this.state.collapse });
}
render() {
return (
<div>
<Row className="justify-content-end">
<Button
children={
<span className="fa-stack fa-3x has-badge" data-count={this.props.schedule.length}>
<i className="fa fas fa-shopping-bag fa-stack-1x" />
</span>
}
onClick={this.toggle}
id="cart"
/>
</Row>
<Collapse isOpen={this.state.collapse}>
<Card>
<CardTitle className="mt-3">
<Row className="justify-content-center">
<Button size="sm" outline color="danger" className="ml-5" onClick={this.toggle}>
Close
</Button>
<h1 className="pl-5">Your Schedule</h1>
<Button size="sm" outline color="primary" className="mr-5">
Generate Schedule
</Button>
</Row>
</CardTitle>
<legend />
<CardBody>
<CourseSectionCard />
<CourseSectionCard />
<CourseSectionCard />
<CourseSectionCard />
<CourseSectionCard />
</CardBody>
</Card>
</Collapse>
</div>
);
}
}
export default ScheduleBadge;
......@@ -4,12 +4,19 @@
top: 1%;
content: attr(data-count);
font-size: 30%;
padding: .6em;
padding: 0.6em;
border-radius: 999px;
line-height: .75em;
line-height: 0.75em;
color: black;
background: rgba(164, 164, 164, 0.85);
text-align: center;
min-width: 2em;
font-weight: bold;
}
#cart {
color: black;
background: initial;
border-color: #e4e4e4;
box-shadow: initial;
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment