Merge pull request #70 from alDuncanson/icons-and-fixes

Icons and fixes

public/index.html

@@ -40,7 +40,6 @@
         You need to enable JavaScript to run this app.
     </noscript>
     <div id="root"></div>
-    <!-- Hotjar Tracking Code for https://marten-application.netlify.com/ -->
     <!-- Hotjar Tracking Code for https://marten-tracker.netlify.com/ -->
     <script>
       (function(h,o,t,j,a,r){

src/components/SightingMap.js

@@ -297,8 +297,8 @@ export class MapContainer extends Component {
                                 description={<Fragment><b>Description:</b> {sighting.desc}</Fragment>}
                                 icon={{
                                     url: pinIcon,
-                                    anchor: new google.maps.Point(32,32),
+                                    anchor: new google.maps.Point(48,48),
-                                    scaledSize: new google.maps.Size(32,32)
+                                    scaledSize: new google.maps.Size(48,48)
                                 }}
                             />
                         )

src/components/list/ViewSightings.js

@@ -85,7 +85,7 @@ class ViewSightings extends Component {
     render() {
         return (
             <Fragment>
-                <Grid container>
+                <Grid container className='sighting-container'>
                     <Grid item xs={12} md={6} className='sighting-list'>
                         <Fragment>
                             <List>

src/css/App.css

@@ -2,6 +2,10 @@ body {
     margin: 0;
 }
 
+.sighting-google-map-container > div {
+  height: calc(100% - 64px) !important;
+}
+
 @media (min-width: 600px) {
     .sighting-google-map-container > div {
         width: calc(100% - 240px) !important;
@@ -9,12 +13,6 @@ body {
     }
 }
 
-@media (min-width: 960px) {
-    .report-google-map-container > div {
-        width: calc(100% - 50% - 120px) !important;
-    }
-}
-
 #disqus_thread {
     width: 89% !important;
     margin: 0 auto;
@@ -30,18 +28,38 @@ body {
 .sighting-list {
     height: calc(50vh - 64px);
     overflow-y: scroll;
+
 }
 
 @media (min-width: 960px) {
+
+    .sighting-container {
+        height: calc(100vh - 64px);
+    }
+
     .sighting-list {
         height: calc(100vh - 64px);
         overflow-y: scroll;
     }
+
+    .sighting-details {
+        height: calc(100vh - 64px);
+        overflow-y: scroll;
+    }
+
+    .report-google-map-container > div {
+      height: calc(100% - 64px) !important;
+      width: calc(100% - 50% - 120px) !important;
+    }
+
+    .sighting-detail-google-map-container > div {
+      height: 300px !important;
+    }
 }
 
 .sighting-details-content {
     width: 89%;
-    margin: 330px auto 0 auto;
+    margin: 0 auto 0 auto;
 }
 
 .sighting-detail-google-map-container > div {
@@ -53,10 +71,3 @@ body {
     max-width: 100%;
     overflow: hidden;
 }
-
-@media (min-width: 960px) {
-    .sighting-detail-google-map-container > div {
-        width: calc(100% - 50% - 120px) !important;
-        height: 300px !important;
-    }
-}