Skip to content

GitLab

Commit 59ea1fad authored by Andrew Hrdy's avatar Andrew Hrdy
Browse files

Continued work on new card design.

parent d1f7232e
Hide whitespace changes
Inline Side-by-side
Showing with 52 additions and 56 deletions
src/components/FacilityStatus.js
View file @ 59ea1fad
......@@ -178,7 +178,7 @@ const FacilityStatus = ({classes, facility}) => {
} else if (!isOpen && time > 15) {
return "CLOSED";
} else {
return `OPENING IN ${time}m`;
return `OPENING IN ${Math.round(time)}m`;
}
};
......@@ -198,7 +198,7 @@ const FacilityStatus = ({classes, facility}) => {
return green[500];
} else if (isOpen && time <= 60) {
return orange[500];
} else if (!isOpen && time > 60) {
} else if (!isOpen && time > 15) {
return red[500];
} else {
return blue[500];
......
src/components/FavoriteButton.js
View file @ 59ea1fad
......@@ -26,12 +26,10 @@ class FavoriteButton extends React.Component {
render() {
if (this.props.isFavorite) {
return (<FavoriteIcon onClick={this.handleClick} className={this.props.classes.heart}
style={{color: pink[400]}}/>);
return (<FavoriteIcon onClick={this.handleClick} className={this.props.classes.heart}/>);
}
return (<FavoriteBorderIcon onClick={this.handleClick} className={this.props.classes.heart}
style={{color: grey[400]}}/>);
return (<FavoriteBorderIcon onClick={this.handleClick} className={this.props.classes.heart}/>);
}
}
......@@ -52,6 +50,7 @@ const styleSheet = {
width: '24px',
padding: '5px',
cursor: 'pointer',
color: pink[500]
}
};
......
src/containers/FacilityCard.js
View file @ 59ea1fad
import React from 'react'
import {withStyles} from 'material-ui/styles';
import Card, {CardContent, CardHeader, CardMedia} from 'material-ui/Card';
import Card, {CardActions, CardContent, CardMedia} from 'material-ui/Card';
import Typography from 'material-ui/Typography';
import Grid from 'material-ui/Grid';
import Avatar from 'material-ui/Avatar';
import FavoriteButton from '../components/FavoriteButton';
import FacilityStatus from '../components/FacilityStatus';
import Chip from 'material-ui/Chip'
import {compose} from 'redux'
import {connect} from 'react-redux'
import {addFavoriteFacility, removeFavoriteFacility, setSidebar} from '../actions/ui'
import FavoriteButton from '../components/FavoriteButton';
import {compose} from 'redux';
import {connect} from 'react-redux';
import {addFavoriteFacility, removeFavoriteFacility, setSidebar} from '../actions/ui';
import RestaurantIcon from 'material-ui-icons/Restaurant';
import DirectionsWalkIcon from 'material-ui-icons/DirectionsWalk';
import LocationOnIcon from 'material-ui-icons/LocationOn';
import {removeBrackets} from '../utils/nameUtils';
import {
......@@ -110,60 +111,62 @@ const FacilityCard = ({classes, facility, favorites, addFavoriteFacility, remove
return (
<Card onClick={handleClick} className={classes.root} raised>
<CardMedia className={classes.media} image={'https://gmucampus.files.wordpress.com/2010/09/00sothside2.jpg'}/>
<CardMedia className={classes.media}
image={'https://gmucampus.files.wordpress.com/2010/09/00sothside2.jpg'}/>
<div className={classes.logoContainer}>
<CardMedia className={classes.logo} image={'https://upload.wikimedia.org/wikipedia/en/d/d3/Starbucks_Corporation_Logo_2011.svg'}/>
<CardMedia className={classes.logo}
image={'https://upload.wikimedia.org/wikipedia/en/d/d3/Starbucks_Corporation_Logo_2011.svg'}/>
</div>
{/*<FavoriteButton facility={facility} isFavorite={favorites.includes(facility.slug)}
addFavoriteFacility={addFavoriteFacility} removeFavoriteFacility={removeFavoriteFacility}/>*/}
{/*<CardHeader classes={{root: classes.header, avatar: classes.avatarContainer, title: classes.headerTitle}} avatar={
<Avatar className={classes.avatar}>
<RestaurantIcon className={classes.icon}/>
</Avatar>} title={'Dining'}/>*/}
{/*<div className={classes.mediaContainer}>
<FacilityStatus facility={facility}/>
</div>*/}
<FavoriteButton facility={facility} isFavorite={favorites.includes(facility.slug)}
addFavoriteFacility={addFavoriteFacility} removeFavoriteFacility={removeFavoriteFacility}/>
<CardContent className={classes.cardContent}>
<Grid container align={'center'} direction={'column'} className={classes.smallGridContainerSpacing}>
<Grid item className={classes.smallGridItemSpacing}>
<Typography type={'title'} align={'center'} className={classes.title}>
<Typography type={'title'} align={'center'} className={classes.nunito}>
{removeBrackets(facility.facility_name)}
</Typography>
</Grid>
<Grid item className={classes.smallGridItemSpacing}>
<FacilityStatus facility={facility} />
<FacilityStatus facility={facility}/>
</Grid>
<Grid item className={classes.smallGridItemSpacing}>
<div className={classes.categoryWrapper}>
<Avatar className={classes.avatar}>
<RestaurantIcon className={classes.categoryIcon}/>
</Avatar>
<Typography type={'body1'} className={classes.categoryName} noWrap>
<Typography type={'body1'} className={classes.nunito} noWrap>
{facility.facility_category.name}
</Typography>
</div>
</Grid>
</Grid>
</CardContent>
{/*<Grid container direction={'column'} className={classes.smallGridContainerSpacing}>
<Grid item className={classes.smallGridItemSpacing}>
<Typography type={'title'} align={'center'} className={classes.title} noWrap>
{removeBrackets(facility.facility_name)}
<CardActions>
<Grid container justify={'space-around'}>
<Grid item className={classes.extraInfoWrapper}>
<Typography type={'caption'}>
<DirectionsWalkIcon/>
</Typography>
<Typography type={'caption'} align={'center'}>
3M
</Typography>
</Grid>
<Grid item className={classes.smallGridItemSpacing}>
<Typography type={'caption'} className={classes.location} noWrap>
{removeBrackets(facility.facility_location.building)}
<Grid item className={classes.extraInfoWrapper}>
<Typography type={'caption'}>
<LocationOnIcon/>
</Typography>
<Typography type={'caption'} align={'center'}>
{facility.facility_location.building}
</Typography>
</Grid>
</Grid>*/}
</CardContent>
</Grid>
</CardActions>
</Card>
)
};
......@@ -180,18 +183,17 @@ const styleSheet = {
fontFamily: 'Nunito'
},
cardContent: {
padding: '8px 4px 16px 4px !important'
padding: '8px 4px !important'
},
smallGridContainerSpacing: {
margin: '-2px -8px !important'
},
smallGridItemSpacing: {
padding: '2px 8px !important'
padding: '3px 8px !important'
},
media: {
flex: 1,
//margin: '0 4px',
height: '100px',
height: '115px',
},
mediaContainer: {
position: 'relative'
......@@ -218,7 +220,7 @@ const styleSheet = {
width: '100px',
height: '100px',
margin: 'auto',
marginTop: '-50px',
marginTop: '-60px',
borderRadius: '90px',
border: '5px solid white',
},
......@@ -229,16 +231,14 @@ 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)',
},
categoryName: {
fontFamily: 'Nunito'
},
title: { //TODO: Should the fonts be added here or in the muitheme (index.js)?
fontFamily: 'Nunito',
fontWeight: 'Bold'
extraInfoWrapper: {
display: 'flex',
alignItems: 'center',
maxWidth: '50%'
},
location: {
nunito: {
fontFamily: 'Nunito'
},
}
};
const mapStateToProps = state => ({
......
src/index.js
View file @ 59ea1fad
......@@ -10,6 +10,7 @@ import { Provider } from 'react-redux';
import ReduxThunk from 'redux-thunk';
import reducers from './reducers/index';
import { MuiThemeProvider,createMuiTheme,createPalette } from 'material-ui/styles';
import theme from './theme';
import blue from 'material-ui/colors/blue';
// import fullWhite from 'material-ui/colors/common';
// import grey from 'material-ui/colors/grey';
......@@ -33,14 +34,10 @@ if(extension) {
const store = createStore(reducers,enhance);
const theme = createMuiTheme({
palette: {primary:blue,secondary:green,warn:amber,error:red,type:'light'}
});
ReactDOM.render(
<Provider store={store}>
<ConnectedRouter history={history}>
<MuiThemeProvider theme={theme}>
<MuiThemeProvider theme={createMuiTheme(theme)}>
<Layout />
</MuiThemeProvider>
</ConnectedRouter>
......
src/theme.js
View file @ 59ea1fad
......@@ -214,7 +214,7 @@ const theme = {
},
"title": {
"fontSize": 21,
"fontWeight": 500,
"fontWeight": 'bold',
"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