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

Merge pull request #62 from alDuncanson/feature/theme-swapping

Browse Source 
Theme swapping
This commit is contained in:
Jacob McCloughan 2018-11-30 18:45:10 -05:00 committed by GitHub
commit 85bc95cd54
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 142 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package-lock.json generated
View File

@ -5661,7 +5661,7 @@
}, },
"core-js": { "core-js": {
"version": "2.5.5", "version": "2.5.5",
"resolved": "https://registry.npmjs.org/core-js/-/core-js-2.5.5.tgz", "resolved": "http://registry.npmjs.org/core-js/-/core-js-2.5.5.tgz",
"integrity": "sha1-sU3ek2xkDAV5prUMq8wTLdYSfjs=" "integrity": "sha1-sU3ek2xkDAV5prUMq8wTLdYSfjs="
}, },
"firebase": { "firebase": {

7
src/App.css
View File

@ -20,6 +20,13 @@ body {
margin: 0 auto; margin: 0 auto;
} }
#disqus_thread a,
.comments .nav ul li a,
.comments .nav ul li div a
{
color: #7986cb
}
.sighting-list { .sighting-list {
height: calc(50vh - 64px); height: calc(50vh - 64px);
overflow-y: scroll; overflow-y: scroll;

187
src/components/Main.js
View File

@ -33,6 +33,8 @@ import ExpandLess from '@material-ui/icons/ExpandLess';
import ExpandMore from '@material-ui/icons/ExpandMore'; import ExpandMore from '@material-ui/icons/ExpandMore';
import Collapse from '@material-ui/core/Collapse'; import Collapse from '@material-ui/core/Collapse';
import FlameLinkCollectionGallery from '../components/FlameLinkCollectionGallery'; import FlameLinkCollectionGallery from '../components/FlameLinkCollectionGallery';
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
import Switch from '@material-ui/core/Switch';
const drawerWidth = 240; const drawerWidth = 240;
@ -77,6 +79,16 @@ class ResponsiveDrawer extends React.Component {
key: 'Home', key: 'Home',
open: false, open: false,
open2: false, open2: false,
theme: createMuiTheme({
typography: {
useNextVariants: true,
},
palette: {
type: 'light'
}
}),
themeName: 'light',
themeChecked: true
}; };
handleDrawerToggle = () => { handleDrawerToggle = () => {
@ -84,11 +96,11 @@ class ResponsiveDrawer extends React.Component {
} }
handleClick = () => { handleClick = () => {
this.setState(state => ({ open: !state.open })); this.setState(state => ({ open: !state.open, open2: false }));
} }
handleClick2 = () => { handleClick2 = () => {
this.setState(state => ({ open2: !state.open2 })); this.setState(state => ({ open2: !state.open2, open: false }));
} }
nav = (text) => { nav = (text) => {
@ -97,11 +109,40 @@ class ResponsiveDrawer extends React.Component {
}); });
} }
handleChange = name => event => {
this.setState({ [name]: event.target.checked });
if (this.state.themeName === 'light') {
this.setState({
themeName: 'dark',
theme: createMuiTheme({
typography: {
useNextVariants: true,
},
palette: {
type: 'dark'
}
})
})
} else {
this.setState({
themeName: 'light',
theme: createMuiTheme({
typography: {
useNextVariants: true,
},
palette: {
type: 'light'
}
})
})
}
};
render() { render() {
const { classes, theme } = this.props; const { classes } = this.props;
const drawer = ( const drawer = (
<div> <Typography component="div">
<div className={classes.toolbar} /> <div className={classes.toolbar} />
<Divider /> <Divider />
<List> <List>
@ -174,74 +215,82 @@ class ResponsiveDrawer extends React.Component {
</Collapse> </Collapse>
</List> </List>
<Divider /> <Divider />
</div> </Typography>
); );
return ( return (
<div className={classes.root}> <MuiThemeProvider theme={this.state.theme}>
<CssBaseline /> <div className={classes.root}>
<AppBar position="fixed" className={classes.appBar}> <CssBaseline />
<Toolbar> <AppBar position="fixed" color="primary" className={classes.appBar}>
<IconButton <Toolbar>
color="inherit" <IconButton
aria-label="Open drawer" color="inherit"
onClick={this.handleDrawerToggle} aria-label="Open drawer"
className={classes.menuButton} onClick={this.handleDrawerToggle}
> className={classes.menuButton}
<MenuIcon /> >
</IconButton> <MenuIcon />
<Typography variant="title" color="inherit" noWrap> </IconButton>
Marten Tracker <Typography variant="title" color="inherit" noWrap>
</Typography> Marten Tracker
</Toolbar> </Typography>
</AppBar> <Switch
<nav className={classes.drawer}> checked={this.state.themeChecked}
<Hidden smUp implementation="css"> onChange={this.handleChange('themeChecked')}
<Drawer value="themeChecked"
container={this.props.container} color="default"
variant="temporary" />
anchor={theme.direction === 'rtl' ? 'right' : 'left'} </Toolbar>
open={this.state.mobileOpen} </AppBar>
onClose={this.handleDrawerToggle} <nav className={classes.drawer}>
classes={{ <Hidden smUp implementation="css">
paper: classes.drawerPaper, <Drawer
}} container={this.props.container}
ModalProps={{ variant="temporary"
keepMounted: true, // Better open performance on mobile. anchor={this.state.theme.direction === 'rtl' ? 'right' : 'left'}
}} open={this.state.mobileOpen}
> onClose={this.handleDrawerToggle}
{drawer} classes={{
</Drawer> paper: classes.drawerPaper,
</Hidden> }}
<Hidden xsDown implementation="css"> ModalProps={{
<Drawer keepMounted: true, // Better open performance on mobile.
classes={{ }}
paper: classes.drawerPaper, >
}} {drawer}
variant="permanent" </Drawer>
open </Hidden>
> <Hidden xsDown implementation="css">
{drawer} <Drawer
</Drawer> classes={{
</Hidden> paper: classes.drawerPaper,
</nav> }}
<main className={classes.content}> variant="permanent"
<div className={classes.toolbar} /> open
{this.state.key === 'Home' && <Home />} >
{this.state.key === 'Report' && <Report />} {drawer}
{this.state.key === 'Map' && <ViewMap />} </Drawer>
{this.state.key === 'List' && <SightingList />} </Hidden>
{this.state.key === 'About' && <About />} </nav>
{this.state.key === 'Contact' && <Contact />} <main className={classes.content}>
{this.state.key === 'Easy-Quiz' && <Quiz difficulty='Easy'/>} <div className={classes.toolbar} />
{this.state.key === 'Intermediate-Quiz' && <Quiz difficulty='Intermediate'/>} {this.state.key === 'Home' && <Home />}
{this.state.key === 'Advanced-Quiz' && <Quiz difficulty='Advanced'/>} {this.state.key === 'Report' && <Report />}
{this.state.key === 'Gallery1' && <FlameLinkCollectionGallery galleryName={'martensAndKits'}/>} {this.state.key === 'Map' && <ViewMap />}
{this.state.key === 'Gallery2' && <FlameLinkCollectionGallery galleryName={'martensAtNight'}/>} {this.state.key === 'List' && <SightingList key={this.state.themeName} />}
{this.state.key === 'Gallery3' && <FlameLinkCollectionGallery galleryName={'martensBeingMartens'}/>} {this.state.key === 'About' && <About />}
{this.state.key === 'Gallery4' && <FlameLinkCollectionGallery galleryName={'similarSpecies'}/>} {this.state.key === 'Contact' && <Contact />}
</main> {this.state.key === 'Easy-Quiz' && <Quiz difficulty='Easy' />}
</div> {this.state.key === 'Intermediate-Quiz' && <Quiz difficulty='Intermediate' />}
{this.state.key === 'Advanced-Quiz' && <Quiz difficulty='Advanced' />}
{this.state.key === 'Gallery1' && <FlameLinkCollectionGallery galleryName={'martensAndKits'} />}
{this.state.key === 'Gallery2' && <FlameLinkCollectionGallery galleryName={'martensAtNight'} />}
{this.state.key === 'Gallery3' && <FlameLinkCollectionGallery galleryName={'martensBeingMartens'} />}
{this.state.key === 'Gallery4' && <FlameLinkCollectionGallery galleryName={'similarSpecies'} />}
</main>
</div>
</MuiThemeProvider>
); );
} }
} }

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);