GVSU/marten-application
GVSU
/
marten-application
1
0
Fork 0
Code Pull Requests Releases Activity

added styles and sighting details

This commit is contained in:
Al Duncanson 2018-10-26 11:04:44 -04:00
parent 15e853640d
commit 4f064e546e
3 changed files with 21 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/App.css
View File

@ -13,4 +13,8 @@ body {
.report-google-map-container > div { .report-google-map-container > div {
width: calc(100% - 50% - 120px) !important; width: calc(100% - 50% - 120px) !important;
} }
}
#disqus_thread {
width: 99% !important;
} }

10
src/components/SightingDetail.js
View File

@ -1,5 +1,6 @@
import React, { Component, Fragment } from 'react'; import React, { Component, Fragment } from 'react';
import Disqus from 'disqus-react'; import Disqus from 'disqus-react';
import Divider from '@material-ui/core/Divider';
class SightingDetail extends Component { class SightingDetail extends Component {
@ -13,7 +14,14 @@ class SightingDetail extends Component {
return ( return (
<Fragment> <Fragment>
<p>{this.props.detail.type}</p> <h1>{`Sighting ${this.props.detail.id}`}</h1>
<Divider/>
<p>{`Type: ${this.props.detail.type}`}</p>
<p>{`Confidence: ${this.props.detail.confidence}`}</p>
<p>{`When: ${this.props.detail.date}, ${this.props.detail.time}`}</p>
<p>{`Where: ${this.props.detail.lat} degrees N, and ${this.props.detail.lng} degrees E`}</p>
<p>{`${this.props.detail.desc}`}</p>
<Disqus.DiscussionEmbed shortname={disqusShortname} config={disqusConfig} /> <Disqus.DiscussionEmbed shortname={disqusShortname} config={disqusConfig} />
</Fragment> </Fragment>
); );

15
src/components/ViewSightings.js
View File

@ -75,13 +75,14 @@ class ViewSightings extends Component {
<List> <List>
{ {
this.state.sightings.map((sighting) => { this.state.sightings.map((sighting) => {
return ( return (
<ListItem button key={ sighting.id } onClick={() => this.getDetail(sighting.id, sighting.lat, sighting.lng, sighting.desc, sighting.type, sighting.confidence, sighting.date, sighting.time)}> <ListItem button key={ sighting.id } onClick={() => this.getDetail(sighting.id, sighting.lat, sighting.lng, sighting.desc, sighting.type, sighting.confidence, sighting.date, sighting.time)}>
<ListItemIcon><HomeIcon/></ListItemIcon> <ListItemIcon><HomeIcon/></ListItemIcon>
<ListItemText primary={`Type: ${sighting.type}`}/> <ListItemText primary={`Type: ${sighting.type}`}/>
</ListItem> </ListItem>
) )
})} })
}
</List> </List>
</Fragment> </Fragment>
</Grid> </Grid>