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

Started work on AppBar.

parent 2432e8b7
import React from 'react';
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 Toolbar from 'material-ui/Toolbar';
import Typography from 'material-ui/Typography';
import Button from 'material-ui/Button';
import IconButton from 'material-ui/IconButton';
import MenuIcon from 'material-ui-icons/Menu';
import { compose } from 'redux';
import { withTheme } from 'material-ui/styles';
import classNames from 'classnames';
function customAppBar({ classes, handleMenuClick, isOpen}) {
return (
<div >
<AppBar position="absolute" >
import {compose} from 'redux';
import Drawer from 'material-ui/Drawer';
import List, {ListItem} from 'material-ui/List';
class customAppBar extends React.Component {
constructor(props) {
super();
this.state = {
isDrawerOpen: false
};
this.toggleDrawer = this.toggleDrawer.bind(this);
}
toggleDrawer() {
this.setState({
isDrawerOpen: !this.state.isDrawerOpen
})
};
render() {
return (<div>
<AppBar position="absolute">
<Toolbar>
{/* <IconButton onClick={handleMenuClick} color="contrast" aria-label="Menu">
<MenuIcon />
</IconButton> */}
<Typography type="title" color="inherit" className={classes.title}>
Title
<Typography type="title" color="inherit" className={this.props.classes.title}>
What's Open
</Typography>
{/* <Button color="contrast">Login</Button> */}
<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>
</div>
);
{<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 = {
......@@ -35,19 +71,25 @@ customAppBar.propTypes = {
};
const styleSheet = {
title: {
marginRight: 'auto',
'@media screen and (max-width: 600px)': {
appBarLinkButton: {
display: 'none',
},
appBarMenuButton: {
display: 'inherit !important'
}
},
drawerOpen: {
paddingLeft: 400,
transition: 'padding 195ms cubic-bezier(0.4, 0, 0.6, 1) 0ms',
height: '100%'
'@media screen and (min-width: 601px)': {
appBarLinkButton: {
color: 'rgba(255,255,255,1)'
}
},
drawerClosed: {
paddingLeft: 0,
transition: 'padding 255ms cubic-bezier(0, 0, 0.2, 1) 0ms',
height: '100%'
title: {
marginRight: 'auto',
},
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
<CardContent className={classes.cardContent}>
<Grid container align={'center'} direction={'column'} className={classes.smallGridContainerSpacing}>
<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)}
</Typography>
</Grid>
......@@ -198,6 +198,9 @@ const styleSheet = {
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)',
},
title: {
fontWeight: 'bold'
},
extraInfoWrapper: {
display: 'flex',
alignItems: 'center',
......
......@@ -216,7 +216,7 @@ const theme = createMuiTheme({
},
"title": {
"fontSize": 21,
"fontWeight": 'bold',
"fontWeight": 500,
"fontFamily": "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif",
"lineHeight": 1,
"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