Desktop Header Component

src/App.css

@@ -1,5 +1,13 @@
 .App {
     text-align: center;
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+}
+
+.Main {
+    background-color: lightgray;
+    padding-bottom: 120px;
 }
 
 /*
@@ -53,18 +61,96 @@ Header
     display: table-cell;
     vertical-align: middle;
     font-weight: bold;
+    color: white;
 }
 
 .filterButton {
     height: 70px;
     float: right;
-    display: table-cell;
+}
+
+.filterButton > span {
+    margin-right: 15px;
 }
 
 .toolbar {
     display: table !important;
     background-color: white;
-    height: 70px;
+}
+
+/*
+Desktop Header
+ */
+.categories {
+    display: inline-block;
+    text-transform: uppercase;
+    color: black;
+    height: 37px !important;
+
+}
+
+.categories > h4 {
+    margin: 10px 5px;
+    font-size: 12px;
+    cursor: pointer;
+}
+
+.nav {
+    display: inline-block;
+    float: right;
+}
+
+.appBar {
+    background-color: black !important;
+    display: table !important;
+}
+
+#explore {
+    background-color: #8acc25;
+}
+
+#report {
+    background-color: #ffd700;
+}
+
+#resources {
+    background-color: #39c9bb;
+}
+
+.headerTitle {
+    display: inline;
+    font-size: 14px;
+    color: white;
+    position: absolute;
+    left: 27%;
+}
+
+@media (min-width: 768px) {
+    .headerTitle {
+        left: 26%;
+    }
+}
+
+@media (min-width: 1024px) {
+    .headerTitle {
+        left: 23%;
+    }
+}
+
+@media (min-width: 1280px) {
+    .headerTitle {
+        left: 20%;
+    }
+}
+
+.logo {
+    height: 120px;
+    width: 120px;
+    background: url('assets/logo.png') no-repeat;
+    background-size: contain;
+    position: absolute;
+    left: 10%;
+    box-shadow: 1px 1px 1px grey;
 }
 
 /*
@@ -129,23 +215,72 @@ input {
     background-color: transparent;
 }
 
+/*
+List + Card
+ */
+
+.cardContainer {
+    margin-top: 30px;
+    margin-bottom: 80px;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    height: 100%;
+    justify-content: center;
+}
+
+
+.card {
+    margin: 16px;
+    height: 150px;
+    width: 400px;
+}
+
+.cardPicture {
+    height: 150px;
+    width: 150px;
+}
+
+@media (min-width: 600px) {
+    .card {
+        width: 550px;
+    }
+}
+
+@media (min-width: 768px) {
+
+    .cardContainer {
+        margin-top: 80px;
+        margin-bottom: 0;
+    }
+
+    .card {
+        width: 650px;
+        height: 200px;
+    }
+
+    .cardPicture {
+        height: 200px;
+        width: 200px;
+    }
+}
 
 /*
 Footer Styles
  */
 
 .plusButton {
     position: relative;
-    top: -40px;
+    top: -50px;
 }
 
 .footerIconDiv {
     width: 100%;
-    position: sticky;
     bottom: 0;
     left: 0;
-    padding-bottom: 25px;
+    padding: 25px 0;
     background-color: white;
+    position: sticky;
 }
 
 .footerIcons span {
@@ -158,8 +293,4 @@ Footer Styles
     color: gray;
 }
 
-.App {
-    display: flex;
-    flex-direction: column;
-    height: 100vh;
-}
+

src/App.js

@@ -1,7 +1,8 @@
 import React, { Component } from 'react';
 import { withRouter } from 'react-router-dom';
 
-import Header from './components/Header';
+import DesktopHeader from "./components/DesktopHeader";
+import Header from './components/MobileHeader';
 import Footer from './components/Footer';
 import Main from './components/Main';
 
@@ -22,14 +23,14 @@ class App extends Component {
   }
 
   checkIfMobile = () => {
-    this.setState({ isMobile: window.innerWidth < 600 });
+    this.setState({ isMobile: window.innerWidth < 768 });
   };
 
   render() {
     const { isMobile } = this.state;
     return (
       <div className="App">
-        {isMobile ? <Header/> : null}
+        {isMobile ? <Header/> : <DesktopHeader/>}
         <Main/>
         {isMobile ? <Footer/> : null}
       </div>

src/components/DesktopHeader.js

@@ -0,0 +1,89 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { withRouter } from 'react-router-dom';
+
+import withStyles from '@material-ui/core/styles/withStyles';
+import AppBar from '@material-ui/core/AppBar';
+import Button from '@material-ui/core/Button';
+import List from '@material-ui/core/List/List';
+import ListItem from '@material-ui/core/ListItem/ListItem';
+import Menu from '@material-ui/icons/Menu';
+import SwipeableDrawer from '@material-ui/core/SwipeableDrawer/SwipeableDrawer';
+
+import '../App.css';
+
+
+const styles = {
+  moreIcon: {
+    float: 'right',
+    display: 'inline',
+    color: 'white',
+    paddingBottom: 0,
+  },
+
+};
+
+class DesktopHeader extends Component {
+  state = {
+    right: false,
+  };
+
+  toggleDrawer = (side, open) => () => {
+    this.setState({
+      [side]: open,
+    });
+  };
+
+  render() {
+    const { classes, history } = this.props;
+
+    return (
+      <div style={{ position: 'fixed', width: '100%' }}>
+        <AppBar position="static" className="appBar">
+          <div className="logo"/>
+          <h1 className="headerTitle" onClick={() => history.push('/')} style={{ cursor: 'pointer' }}>
+            Urban Carnivore Sightings
+          </h1>
+          <Button className={classes.moreIcon} onClick={this.toggleDrawer('right', true)}><Menu/></Button>
+          <SwipeableDrawer
+            anchor="right"
+            open={this.state.right}
+            onClose={this.toggleDrawer('right', false)}
+            onOpen={this.toggleDrawer('right', true)}
+          >
+            <div
+              tabIndex={0}
+              role="button"
+              onClick={this.toggleDrawer('right', false)}
+              onKeyDown={this.toggleDrawer('right', false)}
+              style={{ width: '250px' }}
+            >
+              <List>
+                <ListItem className="drawerItem"><h3>Stub</h3>
+                </ListItem>
+                <ListItem className="drawerItem"><h3>Stub</h3>
+                </ListItem>
+                <ListItem className="drawerItem"><h3>Stub</h3>
+                </ListItem>
+              </List>
+            </div>
+          </SwipeableDrawer>
+          <div className="nav">
+            <div id="explore" className="categories" onClick={() => history.push('/map')}><h4>Explore</h4></div>
+            <div id="resources" className="categories" onClick={() => history.push('/resources')}><h4>Resources</h4>
+            </div>
+            <div id="report" className="categories" onClick={() => history.push('/reports/create')}><h4>Report
+              Sightings</h4></div>
+          </div>
+
+        </AppBar>
+      </div>
+    );
+  }
+}
+
+DesktopHeader.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withRouter(withStyles(styles)(DesktopHeader));

src/components/ListCard.js

@@ -9,25 +9,12 @@ import { withStyles } from '@material-ui/core/styles';
 const DEFAULT_IMAGE_URL = "https://upload.wikimedia.org/wikipedia/commons/thumb/7/79/2010-brown-bear.jpg/200px-2010-brown-bear.jpg";
 
 const styles = theme => ({
-  picture: {
-    width: 150,
-    height: 150
-  },
   info: {
     flexDirection: 'column',
     flexGrow: 1,
     flex: 1,
     textAlign: 'left'
   },
-  card: {
-    marginBottom: 16,
-    marginLeft: 16,
-    marginRight: 16,
-    marginTop: 16,
-    height: 150,
-    maxWidth: 500,
-    minWidth: 500
-  },
   allContent: {
     display: 'flex',
     padding: 0
@@ -56,22 +43,22 @@ const locationToString = location => {
     return "No location provided";
   }
   if (location._longitude && location._latitude) {
-    return `${location._longitude} ${location._longitude}`;
+    return `${location._longitude.toFixed(6)}, ${location._longitude.toFixed(6)}`;
   }
   return location.toString();
 }
 
 const ListCard = props => {
   const { classes, data } = props;
-  return <Card className={classes.card}>
+  return <Card className="card">
     <CardContent className={classes.allContent}>
-      <CardMedia className={classes.picture}
-        image={data.image_url ? data.image_url : DEFAULT_IMAGE_URL}
+      <CardMedia className="cardPicture"
+                 image={data.image_url ? data.image_url : DEFAULT_IMAGE_URL}
       />
       <CardContent className={classes.info}>
         <Typography variant={'h3'}>{data.species.toUpperCase()}</Typography>
         <Typography variant={'subtitle1'}>{timeToString(data.time_seen)}</Typography>
-        <Typography variant={'subtitle1'}>{locationToString(data.location)}</Typography>
+        <Typography style={{ color: 'grey' }}>{locationToString(data.location)}</Typography>
       </CardContent>
     </CardContent>
   </Card>