Commit e532b2ac authored by Andrew Hrdy's avatar Andrew Hrdy
Browse files

Started working on new card design (WIP).

parent 0dc17849
...@@ -141,24 +141,34 @@ const FacilityStatus = ({classes, facility}) => { ...@@ -141,24 +141,34 @@ const FacilityStatus = ({classes, facility}) => {
}; };
/** /**
* Calculates and formats the time until the facility open or closes. * Generates the chip label
* *
* @param facility The facility to determine the message for. * @param facility The facility to determine the label for.
* @returns {string} The formatted message of how long until a facility open or closes. * @returns {string} The label for the chip
*/ */
const timeTillMessage = facility => { const chipLabel = facility => {
const schedule = facility.main_schedule; const schedule = facility.main_schedule;
//TODO: Logic for "Special Schedule". I have no idea what this is. //TODO: Logic for "Special Schedule". I have no idea what this is.
//Facility is open 24/7 //Facility is open 24/7
if (schedule.twenty_four_hours) { if (schedule.twenty_four_hours) {
return "24/7" return "OPEN 24/7";
} }
let time = facility.isOpen ? calcTimeTillClose(schedule) : calcTimeTillOpen(schedule); let time = facility.isOpen ? calcTimeTillClose(schedule) : calcTimeTillOpen(schedule);
//TODO: May want to use Math.ceil instead of Math.round if (facility.isOpen && time > 60) {
return "OPEN";
} else if (facility.isOpen && time <= 60) {
return "CLOSING SOON";
} else if (!facility.isOpen && time > 60) {
return "CLOSED";
} else {
return "OPENING SOON";
}
/*/TODO: May want to use Math.ceil instead of Math.round
if (time < 60) { //Under one hour if (time < 60) { //Under one hour
const roundedMins = Math.round(time); const roundedMins = Math.round(time);
return `${roundedMins} ${roundedMins === 1 ? "min" : "mins"}`; return `${roundedMins} ${roundedMins === 1 ? "min" : "mins"}`;
...@@ -168,17 +178,14 @@ const FacilityStatus = ({classes, facility}) => { ...@@ -168,17 +178,14 @@ const FacilityStatus = ({classes, facility}) => {
} else { //Over a day } else { //Over a day
const roundedDays = Math.round(time / 1440); const roundedDays = Math.round(time / 1440);
return `${roundedDays} ${roundedDays === 1 ? "day" : "days"}`; return `${roundedDays} ${roundedDays === 1 ? "day" : "days"}`;
} }*/
}; };
return ( return (
<Chip label={ <Chip label={
<div> <div>
<Typography type={'caption'} className={classes.isOpenText}> <Typography type={'caption'} className={classes.isOpenText}>
{facility.isOpen ? "OPEN" : "CLOSED"} {chipLabel(facility)}
</Typography>
<Typography type={'caption'} className={classes.timeText}>
{timeTillMessage(facility)}
</Typography> </Typography>
</div> </div>
} className={classes.chip} style={{backgroundColor: facility.isOpen ? green[500] : red[500]}}/> } className={classes.chip} style={{backgroundColor: facility.isOpen ? green[500] : red[500]}}/>
...@@ -186,22 +193,17 @@ const FacilityStatus = ({classes, facility}) => { ...@@ -186,22 +193,17 @@ const FacilityStatus = ({classes, facility}) => {
}; };
const styleSheet = { const styleSheet = {
chip: { chip: {
margin: 'auto', position: 'absolute',
height: '24px', left: '8px',
borderRadius: '5px', bottom: '4px',
opacity: .9,
height: '28px'
}, },
isOpenText: { isOpenText: {
borderRight: '1px solid white',
paddingRight: '5px',
color: 'white',
fontFamily: 'Nunito',
display: 'inline'
},
timeText: {
paddingLeft: '5px',
color: 'white', color: 'white',
fontFamily: 'Nunito', fontFamily: 'Nunito',
display: 'inline' fontWeight: 'bold',
display: 'inline',
} }
}; };
......
...@@ -46,8 +46,9 @@ const styleSheet = { ...@@ -46,8 +46,9 @@ const styleSheet = {
top: '0px', top: '0px',
right: '0px', right: '0px',
color: yellow[600], color: yellow[600],
height: '20px', height: '26px',
width: '20px', width: '26px',
padding: '4px',
cursor: 'pointer', cursor: 'pointer',
} }
}; };
......
import React from 'react' import React from 'react'
import {withStyles} from 'material-ui/styles'; import {withStyles} from 'material-ui/styles';
import Card, {CardContent} from 'material-ui/Card'; import Card, {CardContent, CardHeader, CardMedia} from 'material-ui/Card';
import Typography from 'material-ui/Typography'; import Typography from 'material-ui/Typography';
import Grid from 'material-ui/Grid'; import Grid from 'material-ui/Grid';
import Avatar from 'material-ui/Avatar'; 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 {compose} from 'redux'
import {connect} from 'react-redux' import {connect} from 'react-redux'
import {addFavoriteFacility, removeFavoriteFacility, setSidebar} from '../actions/ui' import {addFavoriteFacility, removeFavoriteFacility, setSidebar} from '../actions/ui'
import FacilityStatus from '../components/FacilityStatus'; import RestaurantIcon from 'material-ui-icons/Restaurant';
import FavoriteButton from '../components/FavoriteButton';
import {removeBrackets} from '../utils/nameUtils'; import {removeBrackets} from '../utils/nameUtils';
import { import {
...@@ -108,34 +110,32 @@ const FacilityCard = ({classes, facility, favorites, addFavoriteFacility, remove ...@@ -108,34 +110,32 @@ const FacilityCard = ({classes, facility, favorites, addFavoriteFacility, remove
return ( return (
<Card onClick={handleClick} className={classes.root} raised> <Card onClick={handleClick} className={classes.root} raised>
{/*<CardMedia className={classes.media} image={require('../images/chipotleLogo.png')}/>*/}
<FavoriteButton facility={facility} isFavorite={favorites.includes(facility.slug)} <FavoriteButton facility={facility} isFavorite={favorites.includes(facility.slug)}
addFavoriteFacility={addFavoriteFacility} removeFavoriteFacility={removeFavoriteFacility}/> addFavoriteFacility={addFavoriteFacility} removeFavoriteFacility={removeFavoriteFacility}/>
<CardContent className={classes.cardContent}>
<Grid container>
<Grid item xs={4} className={classes.avatarContainer}>
<Avatar className={classes.avatar}
style={{backgroundColor: materialColorFromSlug(facility.slug)}}>{getInitials(facility.facility_name)}</Avatar>
</Grid>
<Grid item xs={8}> <CardHeader classes={{root: classes.header, avatar: classes.avatarContainer, title: classes.headerTitle}} avatar={
<Grid container direction={'column'}> <Avatar className={classes.avatar}>
<RestaurantIcon className={classes.icon}/>
</Avatar>} title={'Dining'}/>
<div className={classes.mediaContainer}>
<CardMedia className={classes.media} image={'https://gmucampus.files.wordpress.com/2010/09/00sothside2.jpg'}/>
<FacilityStatus facility={facility}/>
</div>
<CardContent className={classes.cardContent}>
<Grid container direction={'column'} className={classes.smallGridContainerSpacing}>
<Grid item className={classes.smallGridItemSpacing}> <Grid item className={classes.smallGridItemSpacing}>
<Typography type={'title'} align={'center'} className={classes.title} noWrap> <Typography type={'title'} className={classes.title} noWrap>
{removeBrackets(facility.facility_name)} {removeBrackets(facility.facility_name)}
</Typography> </Typography>
</Grid> </Grid>
<Grid item className={classes.smallGridItemSpacing}> <Grid item className={classes.smallGridItemSpacing}>
<FacilityStatus facility={facility}/> <Typography type={'caption'} className={classes.location} noWrap>
</Grid>
<Grid item className={classes.smallGridItemSpacing}>
<Typography type={'caption'} align={'center'} className={classes.location} noWrap>
{removeBrackets(facility.facility_location.building)} {removeBrackets(facility.facility_location.building)}
</Typography> </Typography>
</Grid> </Grid>
</Grid> </Grid>
</Grid>
</Grid>
</CardContent> </CardContent>
</Card> </Card>
) )
...@@ -146,25 +146,41 @@ const styleSheet = { ...@@ -146,25 +146,41 @@ const styleSheet = {
borderRadius: '5px', borderRadius: '5px',
position: 'relative' position: 'relative'
}, },
header: {
padding: '4px'
},
headerTitle: {
fontFamily: 'Nunito'
},
cardContent: { cardContent: {
paddingBottom: '16px !important' padding: '8px 4px 16px 4px !important'
},
smallGridContainerSpacing: {
margin: '-2px -8px !important'
}, },
smallGridItemSpacing: { smallGridItemSpacing: {
padding: '2px !important' padding: '2px 8px !important'
}, },
/**media: { media: {
flex: 1, flex: 1,
width: 200, margin: '0 4px',
height: 100, height: '100px',
resizeMode: 'cover', },
},**/ mediaContainer: {
position: 'relative'
},
avatarContainer: { avatarContainer: {
display: 'flex', marginRight: '8px'
}, },
avatar: { avatar: {
margin: 'auto', width: 'auto !important',
width: '50px', height: 'auto !important',
height: '50px' backgroundColor: red[500],
},
icon: {
width: '18px !important',
height: '18px !important',
padding: '4px !important'
}, },
title: { //TODO: Should the fonts be added here or in the muitheme (index.js)? title: { //TODO: Should the fonts be added here or in the muitheme (index.js)?
fontFamily: 'Nunito', fontFamily: 'Nunito',
......
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