diff --git a/src/App.css b/src/App.css index 9494272..439e3fd 100644 --- a/src/App.css +++ b/src/App.css @@ -13,4 +13,8 @@ body { .report-google-map-container > div { width: calc(100% - 50% - 120px) !important; } +} + +#disqus_thread { + width: 99% !important; } \ No newline at end of file diff --git a/src/components/SightingDetail.js b/src/components/SightingDetail.js index f0e47ef..47dee0b 100644 --- a/src/components/SightingDetail.js +++ b/src/components/SightingDetail.js @@ -1,5 +1,6 @@ import React, { Component, Fragment } from 'react'; import Disqus from 'disqus-react'; +import Divider from '@material-ui/core/Divider'; class SightingDetail extends Component { @@ -13,7 +14,14 @@ class SightingDetail extends Component { return ( -

{this.props.detail.type}

+

{`Sighting ${this.props.detail.id}`}

+ +

{`Type: ${this.props.detail.type}`}

+

{`Confidence: ${this.props.detail.confidence}`}

+

{`When: ${this.props.detail.date}, ${this.props.detail.time}`}

+

{`Where: ${this.props.detail.lat} degrees N, and ${this.props.detail.lng} degrees E`}

+

{`${this.props.detail.desc}`}

+
); diff --git a/src/components/ViewSightings.js b/src/components/ViewSightings.js index 57a81f3..0da8e16 100644 --- a/src/components/ViewSightings.js +++ b/src/components/ViewSightings.js @@ -75,13 +75,14 @@ class ViewSightings extends Component { { this.state.sightings.map((sighting) => { - return ( - this.getDetail(sighting.id, sighting.lat, sighting.lng, sighting.desc, sighting.type, sighting.confidence, sighting.date, sighting.time)}> - - - - ) - })} + return ( + this.getDetail(sighting.id, sighting.lat, sighting.lng, sighting.desc, sighting.type, sighting.confidence, sighting.date, sighting.time)}> + + + + ) + }) + }