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
59ea1fad
Commit
59ea1fad
authored
Oct 01, 2017
by
Andrew Hrdy
Browse files
Continued work on new card design.
parent
d1f7232e
Changes
5
Hide whitespace changes
Inline
Side-by-side
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
,
{
Card
Content
,
CardHeader
,
CardMedia
}
from
'
material-ui/Card
'
;
import
Card
,
{
Card
Actions
,
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
'
}
>
3
M
<
/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>
*/
}
<
/Card
Content
>
<
/Grid
>
<
/Card
Actions
>
<
/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
:
'
2
px 8px !important
'
padding
:
'
3
px 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
:
'
-
5
0px
'
,
marginTop
:
'
-
6
0px
'
,
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)
"
...
...
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