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}) => {
{facilities.filter(filterCards).map(item =>{
return(
<Grid key={item.slug} item>
<FacilityCard facility={item}/>
<FacilityCard facility={item} facilities={facilities}/>
</Grid>
)
})}
......
......@@ -136,7 +136,8 @@ class FacilitiesMap extends React.Component {
}
const styleSheet = {
mapContainer: {
transition: '250ms ease-in-out'
transition: '250ms ease-in-out',
width: '100%'
}
};
......
......@@ -12,7 +12,10 @@ import {addFavoriteFacility, removeFavoriteFacility, setSelectedFacility} from '
import DirectionsWalkIcon from 'material-ui-icons/DirectionsWalk';
import LocationOnIcon from 'material-ui-icons/LocationOn';
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 {
amber,
......@@ -44,14 +47,19 @@ class FacilityCard extends React.Component {
constructor(props){
super(props);
this.state = {
isHovered:false
isHovered: false,
isMapOpen: false
}
}
handleClick = () => {
handleCardClick = () => {
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
* of the facility. Initial lengths range from 1-2.
......@@ -130,10 +138,12 @@ class FacilityCard extends React.Component {
};
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 (
<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>
<CardMedia className={'fc-media'}
image={'https://gmucampus.files.wordpress.com/2010/09/00sothside2.jpg'}/>
......@@ -162,7 +172,7 @@ class FacilityCard extends React.Component {
<CardActions>
<Grid container justify={'space-around'}>
<Grid item className={'fc-extraInfoWrapper'}>
<Grid item className={'fc-extra-info-wrapper'}>
<FacilityStatus facility={facility}/>
</Grid>
......@@ -176,6 +186,12 @@ class FacilityCard extends React.Component {
</Grid>
</Grid>
</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>
)
}
......
......@@ -60,6 +60,10 @@
overflow: hidden;
}
.fc-toggle-map-btn {
display: none !important;
}
@supports (-webkit-line-clamp: 2) {
.fc-two-line-ellipsis {
overflow: hidden;
......@@ -118,12 +122,22 @@
@media screen and (max-width: 1023px) {
.fc-root {
@include transition(150ms ease-in-out);
&.fc-selected {
.fc-one-line-ellipsis {
white-space: normal;
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