Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
SRCT
whats-open-web
Commits
d1f7232e
Commit
d1f7232e
authored
Sep 30, 2017
by
Andrew Hrdy
Browse files
Started work on the new card design (logo and image). Very WIP.
parent
2e77b8c3
Changes
2
Hide whitespace changes
Inline
Side-by-side
src/components/FacilityStatus.js
View file @
d1f7232e
...
...
@@ -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
'
,
...
...
src/containers/FacilityCard.js
View file @
d1f7232e
...
...
@@ -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
'
,
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment