Commit c2afe33f authored by Mattias J Duffy's avatar Mattias J Duffy
Browse files

merging in scss change

parents f220ef74 c5043f69
......@@ -25,3 +25,4 @@ yarn-error.log*
/.storybook
/src/stories
/src/styles/whatsOpen.css
/src/styles/build
......@@ -32,7 +32,7 @@
},
"proxy": "http://localhost:3001",
"scripts": {
"build-css": "node-sass-chokidar src/styles/ -o src/styles/",
"build-css": "node-sass-chokidar src/styles/ -o src/styles/build",
"watch-css": "npm run build-css --watch --recursive",
"start-js": "react-scripts start",
"start": "npm-run-all -p watch-css start-js",
......
......@@ -3,7 +3,7 @@ import ReactMapboxGl, { Layer, Feature,Marker,Source,GeoJSONLayer } from "react-
import MapboxClient from 'mapbox'
import mapboxgl from 'mapbox-gl'
import {withStyles} from 'material-ui/styles';
import {addRoute,getGeoLine} from '../utils/mapboxUtils';
import {addRoute,getGeoLine, getMaxBounds} from '../utils/mapboxUtils';
import MapDialog from './MapDialog';
const token = "pk.eyJ1IjoibWR1ZmZ5OCIsImEiOiJjaXk2a2lxODQwMDdyMnZzYTdyb3M4ZTloIn0.mSocl7zUnZBO6-CV9cvmnA";
......@@ -43,10 +43,7 @@ class FacilitiesMap extends React.Component {
[ -77.321649,38.823919], // Southwest coordinates
[ -77.295213,38.835720] // Northeast coordinates
],
maxBounds:[
[ -77.321649,38.823919], // Southwest coordinates
[ -77.295213,38.835720] // Northeast coordinates
],
maxBounds: getMaxBounds(),
fitBoundsOptions:{
},
mapDialogOpen:false
......
......@@ -13,9 +13,9 @@ import DirectionsWalkIcon from 'material-ui-icons/DirectionsWalk';
import LocationOnIcon from 'material-ui-icons/LocationOn';
import {removeBrackets} from '../utils/nameUtils';
import classnames from 'classnames';
import FacilitiesMap from '../components/FacilitiesMap';
import Dialog, {DialogTitle, DialogContent, DialogActions} from 'material-ui/Dialog';
import MapDialog from '../components/MapDialog';
import Button from 'material-ui/Button';
import {getMaxBounds} from '../utils/mapboxUtils';
import {
amber,
......@@ -48,8 +48,9 @@ class FacilityCard extends React.Component {
super(props);
this.state = {
isHovered: false,
isMapOpen: false
}
isMapOpen: false,
maxBounds: getMaxBounds()
};
}
handleCardClick = () => {
......@@ -57,7 +58,8 @@ class FacilityCard extends React.Component {
this.props.setSelectedFacility(isSelected ? null : this.props.facility);
};
toggleMap = () => {
toggleMap = e => {
e.stopPropagation();
this.setState({isMapOpen: !this.state.isMapOpen});
};
......@@ -140,9 +142,19 @@ class FacilityCard extends React.Component {
render() {
const {facility, facilities, favorites, selectedFacility, addFavoriteFacility, removeFavoriteFacility} = this.props;
const {isMapOpen, maxBounds} = this.state;
const isSelected = selectedFacility.slug === facility.slug;
let mapCenter, mapZoom;
try {
mapCenter = facility.facility_location.coordinate_location.coordinates;
mapZoom = [17];
} catch(e) {
mapCenter = [(maxBounds[0][0]+maxBounds[1][0])/2,(maxBounds[0][1]+maxBounds[1][1])/2];
mapZoom=[13];
}
return (
<Card onClick={this.handleCardClick} className={classnames('fc-root', isSelected && 'fc-selected')}
onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} raised>
......@@ -190,9 +202,15 @@ class FacilityCard extends React.Component {
</Grid>
</CardContent>
<Dialog open={this.state.isMapOpen} onRequestClose={this.toggleMap} classes={{paper: 'fc-map-dialog'}}>
<FacilitiesMap facilities={facilities} facility={facility} isMapOpen={true}/>
</Dialog>
<MapDialog
open={isMapOpen}
facilities={facilities}
facility={facility}
maxBounds={maxBounds}
zoom={mapZoom}
center={mapCenter}
onRequestClose={this.toggleMap}
/>
</Card>
)
}
......
......@@ -11,7 +11,7 @@ import ReduxThunk from 'redux-thunk';
import reducers from './reducers/index';
import {MuiThemeProvider} from 'material-ui/styles';
import theme from './theme';
import './styles/whatsOpen.css';
import './styles/build/whatsOpen.css';
// Create a history of your choosing (we're using a browser history in this case)
const history = createHistory();
......
@import '../_variables.scss';
.favorite-button-heart {
position: absolute;
top: 0;
......
@import '../_variables.scss';
@import '../_mixins.scss';
.sidebar-label-row {
display: flex;
}
......@@ -58,7 +61,7 @@
width: 100%;
}
@media screen and (max-width: 960px) {
@media screen and (max-width: map-get($breakpoints, lg)) {
.sidebar-root {
display: none !important;
}
......
@import '../_variables.scss';
.fc-root {
width: 250px;
border-radius: 5px !important;
......
......@@ -19,7 +19,7 @@ const addRoute = (map,geometry) =>{
"line-width": 5
}
});
}
};
const getGeoLine = (mapboxClient,start,end,callback) =>{
......@@ -36,5 +36,13 @@ const getGeoLine = (mapboxClient,start,end,callback) =>{
}
);
});
}
export {addRoute,getGeoLine};
\ No newline at end of file
};
const getMaxBounds = () => {
return [
[ -77.321649,38.823919], // Southwest coordinates
[ -77.295213,38.835720] // Northeast coordinates
];
};
export {addRoute, getGeoLine, getMaxBounds};
\ 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