Commit 19601ea3 authored by Andrew Hrdy's avatar Andrew Hrdy
Browse files

Started work on AppBar.

parent 2432e8b7
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { withStyles} from 'material-ui/styles'; import {withStyles, withTheme} from 'material-ui/styles';
import AppBar from 'material-ui/AppBar'; import AppBar from 'material-ui/AppBar';
import Toolbar from 'material-ui/Toolbar'; import Toolbar from 'material-ui/Toolbar';
import Typography from 'material-ui/Typography'; import Typography from 'material-ui/Typography';
import Button from 'material-ui/Button'; import Button from 'material-ui/Button';
import IconButton from 'material-ui/IconButton'; import IconButton from 'material-ui/IconButton';
import MenuIcon from 'material-ui-icons/Menu'; import MenuIcon from 'material-ui-icons/Menu';
import { compose } from 'redux'; import {compose} from 'redux';
import { withTheme } from 'material-ui/styles'; import Drawer from 'material-ui/Drawer';
import classNames from 'classnames'; import List, {ListItem} from 'material-ui/List';
function customAppBar({ classes, handleMenuClick, isOpen}) { class customAppBar extends React.Component {
return (
<div > constructor(props) {
<AppBar position="absolute" > super();
<Toolbar> this.state = {
{/* <IconButton onClick={handleMenuClick} color="contrast" aria-label="Menu"> isDrawerOpen: false
<MenuIcon /> };
</IconButton> */}
<Typography type="title" color="inherit" className={classes.title}> this.toggleDrawer = this.toggleDrawer.bind(this);
Title }
</Typography>
{/* <Button color="contrast">Login</Button> */} toggleDrawer() {
</Toolbar> this.setState({
</AppBar> isDrawerOpen: !this.state.isDrawerOpen
</div> })
); };
render() {
return (<div>
<AppBar position="absolute">
<Toolbar>
<Typography type="title" color="inherit" className={this.props.classes.title}>
What's Open
</Typography>
<Button key={'about'} className={this.props.classes.appBarLinkButton}>
About
</Button>
<Button key={'feedback'} className={this.props.classes.appBarLinkButton}>
Feedback
</Button>
<IconButton onClick={this.toggleDrawer} color="contrast" aria-label="Menu"
className={this.props.classes.appBarMenuButton}>
<MenuIcon/>
</IconButton>
</Toolbar>
</AppBar>
{<Drawer anchor="left" open={this.state.isDrawerOpen} onRequestClose={this.toggleDrawer}>
<List>
<ListItem>
<Button key={'about'}>
About
</Button>
</ListItem>
<ListItem>
<Button key={'feedback'}>
Feedback
</Button>
</ListItem>
</List>
</Drawer>}
</div>);
};
} }
customAppBar.propTypes = { customAppBar.propTypes = {
classes: PropTypes.object.isRequired, classes: PropTypes.object.isRequired,
handleMenuClick: PropTypes.func.isRequired, handleMenuClick: PropTypes.func.isRequired,
}; };
const styleSheet = { const styleSheet = {
title: { '@media screen and (max-width: 600px)': {
marginRight: 'auto', appBarLinkButton: {
}, display: 'none',
drawerOpen: { },
paddingLeft: 400, appBarMenuButton: {
transition: 'padding 195ms cubic-bezier(0.4, 0, 0.6, 1) 0ms', display: 'inherit !important'
height: '100%' }
},
'@media screen and (min-width: 601px)': {
appBarLinkButton: {
color: 'rgba(255,255,255,1)'
}
}, },
drawerClosed: { title: {
paddingLeft: 0, marginRight: 'auto',
transition: 'padding 255ms cubic-bezier(0, 0, 0.2, 1) 0ms',
height: '100%'
}, },
appBarMenuButton: {
display: 'none'
}
}; };
export default compose(withStyles(styleSheet),withTheme)(customAppBar); export default compose(withStyles(styleSheet), withTheme)(customAppBar);
...@@ -135,7 +135,7 @@ const FacilityCard = ({classes, facility, favorites, addFavoriteFacility, remove ...@@ -135,7 +135,7 @@ const FacilityCard = ({classes, facility, favorites, addFavoriteFacility, remove
<CardContent className={classes.cardContent}> <CardContent className={classes.cardContent}>
<Grid container align={'center'} direction={'column'} className={classes.smallGridContainerSpacing}> <Grid container align={'center'} direction={'column'} className={classes.smallGridContainerSpacing}>
<Grid item className={classes.smallGridItemSpacing}> <Grid item className={classes.smallGridItemSpacing}>
<Typography type={'title'} align={'center'} className={twoLineEllipsis}> <Typography type={'title'} align={'center'} className={classnames(classes.title, twoLineEllipsis)}>
{removeBrackets(facility.facility_name)} {removeBrackets(facility.facility_name)}
</Typography> </Typography>
</Grid> </Grid>
...@@ -198,6 +198,9 @@ const styleSheet = { ...@@ -198,6 +198,9 @@ const styleSheet = {
borderRadius: '90px', borderRadius: '90px',
boxShadow: '0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)', boxShadow: '0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)',
}, },
title: {
fontWeight: 'bold'
},
extraInfoWrapper: { extraInfoWrapper: {
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
......
...@@ -216,7 +216,7 @@ const theme = createMuiTheme({ ...@@ -216,7 +216,7 @@ const theme = createMuiTheme({
}, },
"title": { "title": {
"fontSize": 21, "fontSize": 21,
"fontWeight": 'bold', "fontWeight": 500,
"fontFamily": "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif", "fontFamily": "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif",
"lineHeight": 1, "lineHeight": 1,
"color": "rgba(0, 0, 0, 0.87)" "color": "rgba(0, 0, 0, 0.87)"
......
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