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

Started working on maps on mobile, WIP.

parent ed84dd70
...@@ -13,7 +13,7 @@ const CardContainer = ({searchTerm, facilities}) => { ...@@ -13,7 +13,7 @@ const CardContainer = ({searchTerm, facilities}) => {
{facilities.filter(filterCards).map(item =>{ {facilities.filter(filterCards).map(item =>{
return( return(
<Grid key={item.slug} item> <Grid key={item.slug} item>
<FacilityCard facility={item}/> <FacilityCard facility={item} facilities={facilities}/>
</Grid> </Grid>
) )
})} })}
......
...@@ -136,7 +136,8 @@ class FacilitiesMap extends React.Component { ...@@ -136,7 +136,8 @@ class FacilitiesMap extends React.Component {
} }
const styleSheet = { const styleSheet = {
mapContainer: { mapContainer: {
transition: '250ms ease-in-out' transition: '250ms ease-in-out',
width: '100%'
} }
}; };
......
...@@ -12,7 +12,10 @@ import {addFavoriteFacility, removeFavoriteFacility, setSelectedFacility} from ' ...@@ -12,7 +12,10 @@ import {addFavoriteFacility, removeFavoriteFacility, setSelectedFacility} from '
import DirectionsWalkIcon from 'material-ui-icons/DirectionsWalk'; import DirectionsWalkIcon from 'material-ui-icons/DirectionsWalk';
import LocationOnIcon from 'material-ui-icons/LocationOn'; import LocationOnIcon from 'material-ui-icons/LocationOn';
import {removeBrackets} from '../utils/nameUtils'; import {removeBrackets} from '../utils/nameUtils';
import classnames from 'classnames' import classnames from 'classnames';
import FacilitiesMap from '../components/FacilitiesMap';
import Dialog, {DialogTitle, DialogContent, DialogActions} from 'material-ui/Dialog';
import Button from 'material-ui/Button';
import { import {
amber, amber,
...@@ -44,14 +47,19 @@ class FacilityCard extends React.Component { ...@@ -44,14 +47,19 @@ class FacilityCard extends React.Component {
constructor(props){ constructor(props){
super(props); super(props);
this.state = { this.state = {
isHovered:false isHovered: false,
isMapOpen: false
} }
} }
handleClick = () => { handleCardClick = () => {
this.props.setSelectedFacility(this.props.facility); this.props.setSelectedFacility(this.props.facility);
}; };
toggleMap = () => {
this.setState({isMapOpen: !this.state.isMapOpen});
};
/** /**
* Gets the the initials for a facility name. The initials will be the first character of the first and last word * Gets the the initials for a facility name. The initials will be the first character of the first and last word
* of the facility. Initial lengths range from 1-2. * of the facility. Initial lengths range from 1-2.
...@@ -130,10 +138,12 @@ class FacilityCard extends React.Component { ...@@ -130,10 +138,12 @@ class FacilityCard extends React.Component {
}; };
render() { render() {
const {facility, favorites, selectedFacility, addFavoriteFacility, removeFavoriteFacility} = this.props; const {facility, facilities, favorites, selectedFacility, addFavoriteFacility, removeFavoriteFacility} = this.props;
const isSelected = selectedFacility.slug === facility.slug;
return ( return (
<Card onClick={this.handleClick} className={classnames('fc-root', selectedFacility.slug === facility.slug && 'fc-selected')} <Card onClick={this.handleCardClick} className={classnames('fc-root', isSelected && 'fc-selected')}
onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} raised> onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} raised>
<CardMedia className={'fc-media'} <CardMedia className={'fc-media'}
image={'https://gmucampus.files.wordpress.com/2010/09/00sothside2.jpg'}/> image={'https://gmucampus.files.wordpress.com/2010/09/00sothside2.jpg'}/>
...@@ -162,7 +172,7 @@ class FacilityCard extends React.Component { ...@@ -162,7 +172,7 @@ class FacilityCard extends React.Component {
<CardActions> <CardActions>
<Grid container justify={'space-around'}> <Grid container justify={'space-around'}>
<Grid item className={'fc-extraInfoWrapper'}> <Grid item className={'fc-extra-info-wrapper'}>
<FacilityStatus facility={facility}/> <FacilityStatus facility={facility}/>
</Grid> </Grid>
...@@ -176,6 +186,12 @@ class FacilityCard extends React.Component { ...@@ -176,6 +186,12 @@ class FacilityCard extends React.Component {
</Grid> </Grid>
</Grid> </Grid>
</CardActions> </CardActions>
<Button className={'fc-toggle-map-btn'} onClick={this.toggleMap}>Open Map</Button>
<Dialog open={this.state.isMapOpen} onRequestClose={this.toggleMap} classes={{paper: 'fc-map-dialog'}}>
<FacilitiesMap facilities={facilities} facility={facility} isMapOpen={true}/>
</Dialog>
</Card> </Card>
) )
} }
......
...@@ -60,6 +60,10 @@ ...@@ -60,6 +60,10 @@
overflow: hidden; overflow: hidden;
} }
.fc-toggle-map-btn {
display: none !important;
}
@supports (-webkit-line-clamp: 2) { @supports (-webkit-line-clamp: 2) {
.fc-two-line-ellipsis { .fc-two-line-ellipsis {
overflow: hidden; overflow: hidden;
...@@ -118,12 +122,22 @@ ...@@ -118,12 +122,22 @@
@media screen and (max-width: 1023px) { @media screen and (max-width: 1023px) {
.fc-root { .fc-root {
@include transition(150ms ease-in-out);
&.fc-selected { &.fc-selected {
.fc-one-line-ellipsis { .fc-one-line-ellipsis {
white-space: normal; white-space: normal;
overflow: inherit; overflow: inherit;
} }
.fc-toggle-map-btn {
display: block !important;
width: 100% !important;
}
} }
} }
.fc-map-dialog {
width: 100% !important;
}
} }
\ No newline at end of file
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