PR comments; Footer touch up

spatialdev · Apr 11, 2019 · a8e8182 · a8e8182
1 parent ac1b6bc
commit a8e8182
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 28 deletions.
diff --git a/src/App.css b/src/App.css
@@ -1,7 +1,9 @@
 .App {
     text-align: center;
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
 }
-
 /*
 Desktop Header
  */
@@ -48,13 +50,19 @@ Desktop Header
     left: 27%;
 }
 
-@media (min-width: 960px) {
+@media (min-width: 768px) {
     .headerTitle {
-        left: 24%;
+        left: 26%;
     }
 }
 
-@media (min-width: 1440px) {
+@media (min-width: 1024px) {
+   .headerTitle {
+       left: 23%;
+   }
+}
+
+@media (min-width: 1280px) {
     .headerTitle {
         left: 20%;
     }
@@ -138,16 +146,16 @@ 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 {
@@ -160,8 +168,4 @@ Footer Styles
     color: gray;
 }
 
-.App {
-    display: flex;
-    flex-direction: column;
-    height: 100vh;
-}
+
diff --git a/src/components/DesktopHeader.js b/src/components/DesktopHeader.js
@@ -23,9 +23,6 @@ const styles = {
 
 };
 
-const iOS = process.browser && /iPad|iPhone|iPod/.test(navigator.userAgent);
-
-
 class DesktopHeader extends Component {
   state = {
     right: false,
@@ -49,8 +46,6 @@ class DesktopHeader extends Component {
           </h1>
           <Button className={classes.moreIcon} onClick={this.toggleDrawer('right', true)}><Menu/></Button>
           <SwipeableDrawer
-            disableBackdropTransition={!iOS}
-            disableDiscovery={iOS}
             anchor="right"
             open={this.state.right}
             onClose={this.toggleDrawer('right', false)}

diff --git a/src/components/ListCard.js b/src/components/ListCard.js
@@ -66,7 +66,7 @@ const ListCard = props => {
   return <Card className={classes.card}>
     <CardContent className={classes.allContent}>
       <CardMedia className={classes.picture}
-        image={data.image_url ? data.image_url : DEFAULT_IMAGE_URL}
+                 image={data.image_url ? data.image_url : DEFAULT_IMAGE_URL}
       />
       <CardContent className={classes.info}>
         <Typography variant={'h3'}>{data.species.toUpperCase()}</Typography>

diff --git a/src/components/ListView.js b/src/components/ListView.js
@@ -1,4 +1,4 @@
-import React, {Component} from 'react';
+import React, { Component } from 'react';
 import axios from 'axios';
 import { withStyles } from '@material-ui/core/styles';
 import CircularProgress from '@material-ui/core/CircularProgress';
@@ -19,27 +19,28 @@ const getReports = 'https://us-central1-seattlecarnivores-edca2.cloudfunctions.n
 
 class ListView extends Component {
 
-  state = {reports: null};
+  state = { reports: null };
 
   componentDidMount() {
     axios.get(getReports)
       .then(reports => {
-        this.setState({reports: reports.data});
+        this.setState({ reports: reports.data });
       })
       .catch(error => error);
   }
 
   render() {
-    const {reports} = this.state;
-    const {classes} = this.props;
+    const { reports } = this.state;
+    const { classes } = this.props;
     if (!reports) {
-      return <CircularProgress />;
+      return <CircularProgress/>;
     }
     return (
-    <div className={classes.container}>
-      {reports.map((report) => <ListCard data={report.data} key={report.id}/>)}
-    </div>
-  )}
+      <div className={classes.container}>
+        {reports.map((report) => <ListCard data={report.data} key={report.id}/>)}
+      </div>
+    )
+  }
 }
 
 export default withStyles(styles)(ListView);