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

Started work on the new card design (logo and image). Very WIP.

parent 2e77b8c3
......@@ -219,11 +219,12 @@ const FacilityStatus = ({classes, facility}) => {
};
const styleSheet = {
chip: {
position: 'absolute',
left: '8px',
bottom: '4px',
opacity: .9,
height: '28px'
//position: 'absolute',
//left: '8px',
//bottom: '4px',
//opacity: .9,
height: '28px',
borderRadius: '4px',
},
isOpenText: {
color: 'white',
......
......@@ -110,23 +110,50 @@ const FacilityCard = ({classes, facility, favorites, addFavoriteFacility, remove
return (
<Card onClick={handleClick} className={classes.root} raised>
<FavoriteButton facility={facility} isFavorite={favorites.includes(facility.slug)}
addFavoriteFacility={addFavoriteFacility} removeFavoriteFacility={removeFavoriteFacility}/>
<CardMedia className={classes.media} image={'https://gmucampus.files.wordpress.com/2010/09/00sothside2.jpg'}/>
<CardHeader classes={{root: classes.header, avatar: classes.avatarContainer, title: classes.headerTitle}} avatar={
<div className={classes.logoContainer}>
<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'}/>
</Avatar>} title={'Dining'}/>*/}
{/*<div className={classes.mediaContainer}>
<div className={classes.mediaContainer}>
<CardMedia className={classes.media} image={'https://gmucampus.files.wordpress.com/2010/09/00sothside2.jpg'}/>
<FacilityStatus facility={facility}/>
</div>
</div>*/}
<CardContent className={classes.cardContent}>
<Grid container direction={'column'} className={classes.smallGridContainerSpacing}>
<Grid container align={'center'} direction={'column'} className={classes.smallGridContainerSpacing}>
<Grid item className={classes.smallGridItemSpacing}>
<Typography type={'title'} className={classes.title} noWrap>
<Typography type={'title'} align={'center'} className={classes.title}>
{removeBrackets(facility.facility_name)}
</Typography>
</Grid>
<Grid item className={classes.smallGridItemSpacing}>
<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>
{facility.facility_category.name}
</Typography>
</div>
</Grid>
</Grid>
{/*<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)}
</Typography>
</Grid>
......@@ -135,7 +162,7 @@ const FacilityCard = ({classes, facility, favorites, addFavoriteFacility, remove
{removeBrackets(facility.facility_location.building)}
</Typography>
</Grid>
</Grid>
</Grid>*/}
</CardContent>
</Card>
)
......@@ -163,7 +190,7 @@ const styleSheet = {
},
media: {
flex: 1,
margin: '0 4px',
//margin: '0 4px',
height: '100px',
},
mediaContainer: {
......@@ -175,12 +202,35 @@ const styleSheet = {
avatar: {
width: 'auto !important',
height: 'auto !important',
marginRight: '8px',
backgroundColor: red[500],
},
icon: {
width: '18px !important',
height: '18px !important',
padding: '4px !important'
categoryWrapper: {
display: 'flex',
alignItems: 'center'
},
categoryIcon: {
width: '14px !important',
height: '14px !important',
padding: '4px !important',
},
logoContainer: {
width: '100px',
height: '100px',
margin: 'auto',
marginTop: '-50px',
borderRadius: '90px',
border: '5px solid white',
},
logo: {
width: '100px',
height: '100px',
margin: 'auto',
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',
......
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