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

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

Theme swapping
This commit is contained in:
Jacob McCloughan 2018-11-30 18:45:10 -05:00 committed by GitHub
parent c3974fe5ea be1f4585e7
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": {
"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="
},
"firebase": {

7
src/App.css
View File

@ -20,6 +20,13 @@ body {
margin: 0 auto;
}
#disqus_thread a,
.comments .nav ul li a,
.comments .nav ul li div a
{
color: #7986cb
}
.sighting-list {
height: calc(50vh - 64px);
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 Collapse from '@material-ui/core/Collapse';
import FlameLinkCollectionGallery from '../components/FlameLinkCollectionGallery';
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
import Switch from '@material-ui/core/Switch';
const drawerWidth = 240;
@ -77,6 +79,16 @@ class ResponsiveDrawer extends React.Component {
key: 'Home',
open: false,
open2: false,
theme: createMuiTheme({
typography: {
useNextVariants: true,
},
palette: {
type: 'light'
}
}),
themeName: 'light',
themeChecked: true
};
handleDrawerToggle = () => {
@ -84,11 +96,11 @@ class ResponsiveDrawer extends React.Component {
}
handleClick = () => {
this.setState(state => ({ open: !state.open }));
this.setState(state => ({ open: !state.open, open2: false }));
}
handleClick2 = () => {
this.setState(state => ({ open2: !state.open2 }));
this.setState(state => ({ open2: !state.open2, open: false }));
}
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() {
const { classes, theme } = this.props;
const { classes } = this.props;
const drawer = (
<div>
<Typography component="div">
<div className={classes.toolbar} />
<Divider />
<List>
@ -174,74 +215,82 @@ class ResponsiveDrawer extends React.Component {
</Collapse>
</List>
<Divider />
</div>
</Typography>
);
return (
<div className={classes.root}>
<CssBaseline />
<AppBar position="fixed" className={classes.appBar}>
<Toolbar>
<IconButton
color="inherit"
aria-label="Open drawer"
onClick={this.handleDrawerToggle}
className={classes.menuButton}
>
<MenuIcon />
</IconButton>
<Typography variant="title" color="inherit" noWrap>
Marten Tracker
</Typography>
</Toolbar>
</AppBar>
<nav className={classes.drawer}>
<Hidden smUp implementation="css">
<Drawer
container={this.props.container}
variant="temporary"
anchor={theme.direction === 'rtl' ? 'right' : 'left'}
open={this.state.mobileOpen}
onClose={this.handleDrawerToggle}
classes={{
paper: classes.drawerPaper,
}}
ModalProps={{
keepMounted: true, // Better open performance on mobile.
}}
>
{drawer}
</Drawer>
</Hidden>
<Hidden xsDown implementation="css">
<Drawer
classes={{
paper: classes.drawerPaper,
}}
variant="permanent"
open
>
{drawer}
</Drawer>
</Hidden>
</nav>
<main className={classes.content}>
<div className={classes.toolbar} />
{this.state.key === 'Home' && <Home />}
{this.state.key === 'Report' && <Report />}
{this.state.key === 'Map' && <ViewMap />}
{this.state.key === 'List' && <SightingList />}
{this.state.key === 'About' && <About />}
{this.state.key === 'Contact' && <Contact />}
{this.state.key === 'Easy-Quiz' && <Quiz difficulty='Easy'/>}
{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 theme={this.state.theme}>
<div className={classes.root}>
<CssBaseline />
<AppBar position="fixed" color="primary" className={classes.appBar}>
<Toolbar>
<IconButton
color="inherit"
aria-label="Open drawer"
onClick={this.handleDrawerToggle}
className={classes.menuButton}
>
<MenuIcon />
</IconButton>
<Typography variant="title" color="inherit" noWrap>
Marten Tracker
</Typography>
<Switch
checked={this.state.themeChecked}
onChange={this.handleChange('themeChecked')}
value="themeChecked"
color="default"
/>
</Toolbar>
</AppBar>
<nav className={classes.drawer}>
<Hidden smUp implementation="css">
<Drawer
container={this.props.container}
variant="temporary"
anchor={this.state.theme.direction === 'rtl' ? 'right' : 'left'}
open={this.state.mobileOpen}
onClose={this.handleDrawerToggle}
classes={{
paper: classes.drawerPaper,
}}
ModalProps={{
keepMounted: true, // Better open performance on mobile.
}}
>
{drawer}
</Drawer>
</Hidden>
<Hidden xsDown implementation="css">
<Drawer
classes={{
paper: classes.drawerPaper,
}}
variant="permanent"
open
>
{drawer}
</Drawer>
</Hidden>
</nav>
<main className={classes.content}>
<div className={classes.toolbar} />
{this.state.key === 'Home' && <Home />}
{this.state.key === 'Report' && <Report />}
{this.state.key === 'Map' && <ViewMap />}
{this.state.key === 'List' && <SightingList key={this.state.themeName} />}
{this.state.key === 'About' && <About />}
{this.state.key === 'Contact' && <Contact />}
{this.state.key === 'Easy-Quiz' && <Quiz difficulty='Easy' />}
{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 moment from 'moment';
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
* viewed in the application, value is
* what is stored in the database.
*/
const sightingTypes = [
const sightingTypes = [
{
value: 'visual',
label: 'Visual',
@ -143,18 +149,24 @@ class SightingDetail extends Component {
return (
<Fragment>
<SightingDetailMap lat={this.props.detail.lat} lng={this.props.detail.lng} />
<Typography component="div">
<div className='sighting-details-content'>
<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>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>
<hr/>
<hr />
<p>{`${this.props.detail.desc}`}</p>
</div>
<Disqus.DiscussionEmbed shortname={disqusShortname} config={disqusConfig} />
<Disqus.DiscussionEmbed shortname={disqusShortname} config={disqusConfig} />
</Typography>
</Fragment>
);
}
}
export default SightingDetail;
SightingDetail.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(SightingDetail);