Started working on maps on mobile, WIP.

src/components/CardContainer.js

@@ -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>
                 )
             })}

src/components/FacilitiesMap.js

@@ -136,7 +136,8 @@ class FacilitiesMap extends React.Component {
 }
 const styleSheet  = {
     mapContainer: {
-        transition: '250ms ease-in-out'
+        transition: '250ms ease-in-out',
+        width: '100%'
     }
 };
 

src/containers/FacilityCard.js

@@ -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>
     )
     }

src/styles/containers/facilityCard.scss

@@ -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