added styles and sighting details
This commit is contained in:
parent
15e853640d
commit
4f064e546e
|
@ -14,3 +14,7 @@ body {
|
|||
width: calc(100% - 50% - 120px) !important;
|
||||
}
|
||||
}
|
||||
|
||||
#disqus_thread {
|
||||
width: 99% !important;
|
||||
}
|
|
@ -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 (
|
||||
<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} />
|
||||
</Fragment>
|
||||
);
|
||||
|
|
|
@ -75,13 +75,14 @@ class ViewSightings extends Component {
|
|||
<List>
|
||||
{
|
||||
this.state.sightings.map((sighting) => {
|
||||
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)}>
|
||||
<ListItemIcon><HomeIcon/></ListItemIcon>
|
||||
<ListItemText primary={`Type: ${sighting.type}`}/>
|
||||
</ListItem>
|
||||
)
|
||||
})}
|
||||
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)}>
|
||||
<ListItemIcon><HomeIcon/></ListItemIcon>
|
||||
<ListItemText primary={`Type: ${sighting.type}`}/>
|
||||
</ListItem>
|
||||
)
|
||||
})
|
||||
}
|
||||
</List>
|
||||
</Fragment>
|
||||
</Grid>
|
||||
|
|
Loading…
Reference in New Issue