Update layout

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

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

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>

src/index.html

@@ -10,6 +10,9 @@
     .leaflet-container {
       height: 100%;
     }
+    body {
+      margin:0;
+    }
     </style>
     <title><%= htmlWebpackPlugin.options.title %></title>
   </head>

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,