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