diff --git a/src/components/IntegrationAutosuggest.js b/src/components/IntegrationAutosuggest.js index 1b2c88660a48f30c694454529e9a14acdbf22584..c53d7eb62642147cfc54b50582c72749a0dace3c 100644 --- a/src/components/IntegrationAutosuggest.js +++ b/src/components/IntegrationAutosuggest.js @@ -34,13 +34,13 @@ function renderSuggestion(suggestion, { query, isHighlighted }) { <div> {parts.map((part, index) => { return part.highlight ? ( - <span key={String(index)} style={{ fontWeight: 300 }}> - {part.text} - </span> - ) : ( <strong key={String(index)} style={{ fontWeight: 500 }}> {part.text} </strong> + ) : ( + <span key={String(index)} style={{ fontWeight: 300 }}> + {part.text} + </span> ); })} </div> @@ -66,11 +66,10 @@ const styles = theme => ({ container: { flexGrow: 1, position: 'relative', - height: 250, }, suggestionsContainerOpen: { position: 'absolute', - zIndex: 1, + zIndex: 1500, marginTop: theme.spacing.unit, left: 0, right: 0, @@ -82,6 +81,8 @@ const styles = theme => ({ margin: 0, padding: 0, listStyleType: 'none', + maxHeight: 500, + overflow: 'auto', }, }); @@ -91,7 +92,7 @@ const IntegrationAutosuggest = (props) => { const { classes } = props; - console.log('IntegrationAutosuggest', props); + // console.log('IntegrationAutosuggest', props); return ( <Autosuggest diff --git a/src/components/LeafletMapContainer.js b/src/components/LeafletMapContainer.js index 33bd7745d36196f294457277db0875686e35b2fa..663d388508fb3b56e6d3eec5d38bb8a9177d90db 100644 --- a/src/components/LeafletMapContainer.js +++ b/src/components/LeafletMapContainer.js @@ -4,7 +4,8 @@ import LeafletMap from './LeafletMap'; class LeafletMapContainer extends React.Component { updateDimensions() { - const height = window.innerWidth >= 992 ? window.innerHeight : 400; + let height = window.innerWidth >= 992 ? window.innerHeight : 400; + height = height - 64; this.setState({ height: height }); } diff --git a/src/containers/FullWidthGrid.js b/src/containers/FullWidthGrid.js index 8cf889db34c927f3ff00cc16bf74dfd8c3831f5a..a25a1914166ab5850b18952ef952c7636aef3717 100644 --- a/src/containers/FullWidthGrid.js +++ b/src/containers/FullWidthGrid.js @@ -4,7 +4,12 @@ import { connect } from 'react-redux'; import { withStyles } from 'material-ui/styles'; // import Paper from 'material-ui/Paper'; import Grid from 'material-ui/Grid'; -import ButtonAppBar from '../components/ButtonAppBar'; +import AppBar from 'material-ui/AppBar'; +import Toolbar from 'material-ui/Toolbar'; +import Typography from 'material-ui/Typography'; +import Button from 'material-ui/Button'; +import IconButton from 'material-ui/IconButton'; +import MenuIcon from '@material-ui/icons/Menu'; import IntegrationAutosuggest from '../components/IntegrationAutosuggest'; import LeafletMapContainer from '../components/LeafletMapContainer'; import { updateQuery, updateDatasets, fetchResults, clearResults } from '../actions'; @@ -12,12 +17,20 @@ import { updateQuery, updateDatasets, fetchResults, clearResults } from '../acti const styles = theme => ({ root: { flexGrow: 1, + margin: 0, + }, + flex: { + flex: 1, }, paper: { padding: theme.spacing.unit * 2, textAlign: 'center', color: theme.palette.text.secondary, }, + menuButton: { + marginLeft: -12, + marginRight: 20, + }, }); let FullWidthGrid = (props) => { @@ -26,15 +39,21 @@ let FullWidthGrid = (props) => { return ( <div className={classes.root}> - <Grid container spacing={24}> + <Grid container spacing={0}> <Grid item xs={12}> - <ButtonAppBar /> + <AppBar position="static" color="default"> + <Toolbar> + <IconButton className={classes.menuButton} color="inherit" aria-label="Menu"> + <MenuIcon /> + </IconButton> + <Grid item xs={3}> + <IntegrationAutosuggest search={props.search} updateQuery={props.updateQuery} + fetchResults={props.fetchResults} clearResults={props.clearResults} /> + </Grid> + </Toolbar> + </AppBar> </Grid> - <Grid item xs={12} sm={3}> - <IntegrationAutosuggest search={props.search} updateQuery={props.updateQuery} - fetchResults={props.fetchResults} clearResults={props.clearResults} /> - </Grid> - <Grid item xs={12} sm={9}> + <Grid item xs={12}> <LeafletMapContainer /> </Grid> </Grid> diff --git a/src/index.html b/src/index.html index cf357ac6e79d830753bc382e47d6419e683bd107..f0d1e5db2bc976ab53787fdefb831ac81d9bd19e 100644 --- a/src/index.html +++ b/src/index.html @@ -10,6 +10,9 @@ .leaflet-container { height: 100%; } + body { + margin:0; + } </style> <title><%= htmlWebpackPlugin.options.title %></title> </head> diff --git a/webpack.config.js b/webpack.config.js index 1bc77b9c4c385ad0f43fe581cc94d033e80cdf38..31280c605a841b3e24b96cb39467c48c0fac383e 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -8,7 +8,7 @@ module.exports = { entry: { app: './src/index.js', }, - devtool: 'inline-source-map', + devtool: 'eval-source-map', devServer: { contentBase: './dist', hot: true,