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

Added Typography to SightingDetail

Browse Source
This commit is contained in:
wildscotsmen 2018-11-29 23:58:09 -05:00
parent 0dd7ce50d2
commit 7815c18dee
1 changed files with 16 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/SightingDetail.js
View File

@ -2,13 +2,19 @@ import React, { Component, Fragment } from 'react';
import Disqus from 'disqus-react'; import Disqus from 'disqus-react';
import moment from 'moment'; import moment from 'moment';
import SightingDetailMap from './SightingDetailMap'; import SightingDetailMap from './SightingDetailMap';
import Typography from '@material-ui/core/Typography';
import { withStyles } from '@material-ui/core/styles';
import PropTypes from 'prop-types';
const styles = theme => ({
});
/** /**
* Types of sightings. Label is what is * Types of sightings. Label is what is
* viewed in the application, value is * viewed in the application, value is
* what is stored in the database. * what is stored in the database.
*/ */
const sightingTypes = [ const sightingTypes = [
{ {
value: 'visual', value: 'visual',
label: 'Visual', label: 'Visual',
@ -143,18 +149,24 @@ class SightingDetail extends Component {
return ( return (
<Fragment> <Fragment>
<SightingDetailMap lat={this.props.detail.lat} lng={this.props.detail.lng} /> <SightingDetailMap lat={this.props.detail.lat} lng={this.props.detail.lng} />
<Typography component="div">
<div className='sighting-details-content'> <div className='sighting-details-content'>
<p><b>Type:</b> {this.getType(this.props.detail.type)}</p> <p><b>Type:</b> {this.getType(this.props.detail.type)}</p>
<p><b>When:</b> {this.formatDate(this.props.detail.date)}, {this.getTime(this.props.detail.time)}</p> <p><b>When:</b> {this.formatDate(this.props.detail.date)}, {this.getTime(this.props.detail.time)}</p>
<p><b>Where:</b> {this.props.detail.lat} degrees N, and {this.props.detail.lng} degrees E</p> <p><b>Where:</b> {this.props.detail.lat} degrees N, and {this.props.detail.lng} degrees E</p>
<p><b>I am confident of my sighting:</b> {this.getConfidence(this.props.detail.confidence)}</p> <p><b>I am confident of my sighting:</b> {this.getConfidence(this.props.detail.confidence)}</p>
<hr/> <hr />
<p>{`${this.props.detail.desc}`}</p> <p>{`${this.props.detail.desc}`}</p>
</div> </div>
<Disqus.DiscussionEmbed shortname={disqusShortname} config={disqusConfig} /> <Disqus.DiscussionEmbed shortname={disqusShortname} config={disqusConfig} />
</Typography>
</Fragment> </Fragment>
); );
} }
} }
export default SightingDetail; SightingDetail.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(SightingDetail);