rewrote structure for new nav
This commit is contained in:
Al Duncanson
parent
582b3f4a6a
commit
1c959b7a32
@ -2,15 +2,6 @@ body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* #root > div > div {
|
||||
overflow: scroll !important;
|
||||
} */
|
||||
|
||||
div[class="ResponsiveDrawer-root-1"] {
|
||||
overflow: scroll !important;
|
||||
overflow-x: hidden !important;
|
||||
}
|
||||
|
||||
@media (min-width: 960px) {
|
||||
.sighting-google-map-container > div {
|
||||
width: calc(100% - 241px) !important;
|
||||
|
||||
@ -20,58 +20,65 @@ import ListIcon from '@material-ui/icons/List';
|
||||
import SlideshowIcon from '@material-ui/icons/Slideshow';
|
||||
import Home from '../pages/Home';
|
||||
import ViewMap from '../pages/ViewMap';
|
||||
import QuizPage from '../pages/QuizPage';
|
||||
import Quiz from '../pages/QuizPage';
|
||||
import SightingList from '../pages/SightingList';
|
||||
import Report from '../pages/Report';
|
||||
import CssBaseline from '@material-ui/core/CssBaseline';
|
||||
import ExpandLess from '@material-ui/icons/ExpandLess';
|
||||
import ExpandMore from '@material-ui/icons/ExpandMore';
|
||||
import Collapse from '@material-ui/core/Collapse';
|
||||
|
||||
const drawerWidth = 240;
|
||||
|
||||
const styles = theme => ({
|
||||
root: {
|
||||
flexGrow: 1,
|
||||
height: '100vh',
|
||||
zIndex: 1,
|
||||
overflow: 'hidden',
|
||||
position: 'relative',
|
||||
display: 'flex',
|
||||
width: '100%',
|
||||
},
|
||||
drawer: {
|
||||
[theme.breakpoints.up('sm')]: {
|
||||
width: drawerWidth,
|
||||
flexShrink: 0,
|
||||
},
|
||||
},
|
||||
nested: {
|
||||
paddingLeft: theme.spacing.unit * 4,
|
||||
},
|
||||
appBar: {
|
||||
position: 'absolute',
|
||||
marginLeft: drawerWidth,
|
||||
[theme.breakpoints.up('md')]: {
|
||||
[theme.breakpoints.up('sm')]: {
|
||||
width: `calc(100% - ${drawerWidth}px)`,
|
||||
},
|
||||
},
|
||||
navIconHide: {
|
||||
[theme.breakpoints.up('md')]: {
|
||||
menuButton: {
|
||||
marginRight: 20,
|
||||
[theme.breakpoints.up('sm')]: {
|
||||
display: 'none',
|
||||
},
|
||||
},
|
||||
toolbar: theme.mixins.toolbar,
|
||||
drawerPaper: {
|
||||
width: drawerWidth,
|
||||
[theme.breakpoints.up('md')]: {
|
||||
position: 'relative',
|
||||
},
|
||||
},
|
||||
content: {
|
||||
flexGrow: 1,
|
||||
backgroundColor: theme.palette.background.default,
|
||||
padding: theme.spacing.unit * 3,
|
||||
flexGrow: 1
|
||||
},
|
||||
});
|
||||
|
||||
class ResponsiveDrawer extends React.Component {
|
||||
state = {
|
||||
mobileOpen: false,
|
||||
key: ''
|
||||
}
|
||||
key: '',
|
||||
open: false
|
||||
};
|
||||
|
||||
handleDrawerToggle = () => {
|
||||
this.setState(state => ({ mobileOpen: !state.mobileOpen }));
|
||||
}
|
||||
|
||||
handleClick = () => {
|
||||
this.setState(state => ({ open: !state.open }));
|
||||
}
|
||||
|
||||
nav = (text) => {
|
||||
this.setState({
|
||||
key: text
|
||||
@ -87,79 +94,114 @@ class ResponsiveDrawer extends React.Component {
|
||||
<Divider />
|
||||
<List>
|
||||
<ListItem button key='Home' onClick={() => this.nav('Home')}>
|
||||
<ListItemIcon><HomeIcon/></ListItemIcon>
|
||||
<ListItemIcon><HomeIcon /></ListItemIcon>
|
||||
<ListItemText primary='Home' />
|
||||
</ListItem>
|
||||
<ListItem button key='Report' onClick={() => this.nav('Report')}>
|
||||
<ListItemIcon><AssignmentIcon/></ListItemIcon>
|
||||
<ListItemIcon><AssignmentIcon /></ListItemIcon>
|
||||
<ListItemText primary='Report' />
|
||||
</ListItem>
|
||||
<ListItem button key='Map' onClick={() => this.nav('Map')}>
|
||||
<ListItemIcon><MapIcon/></ListItemIcon>
|
||||
<ListItemIcon><MapIcon /></ListItemIcon>
|
||||
<ListItemText primary='Map' />
|
||||
</ListItem>
|
||||
<ListItem button key='List' onClick={() => this.nav('List')}>
|
||||
<ListItemIcon><ListIcon/></ListItemIcon>
|
||||
<ListItemIcon><ListIcon /></ListItemIcon>
|
||||
<ListItemText primary='List' />
|
||||
</ListItem>
|
||||
<ListItem button key='Quiz' onClick={() => this.nav('Quiz')}>
|
||||
<ListItemIcon><SlideshowIcon/></ListItemIcon>
|
||||
<ListItemText primary='Quiz' />
|
||||
<ListItem button onClick={this.handleClick}>
|
||||
<ListItemIcon>
|
||||
<SlideshowIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText inset primary="Quiz" />
|
||||
{this.state.open ? <ExpandLess /> : <ExpandMore />}
|
||||
</ListItem>
|
||||
<Collapse in={this.state.open} timeout="auto" unmountOnExit>
|
||||
<List component="div" disablePadding>
|
||||
<ListItem button className={classes.nested} onClick={() => this.nav('Easy-Quiz')}>
|
||||
<ListItemIcon>
|
||||
<MapIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText inset primary="Easy" />
|
||||
</ListItem>
|
||||
<ListItem button className={classes.nested} onClick={() => this.nav('Medium-Quiz')}>
|
||||
<ListItemIcon>
|
||||
<MapIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText inset primary="Medium" />
|
||||
</ListItem>
|
||||
<ListItem button className={classes.nested} onClick={() => this.nav('Hard-Quiz')}>
|
||||
<ListItemIcon>
|
||||
<MapIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText inset primary="Hard" />
|
||||
</ListItem>
|
||||
</List>
|
||||
</Collapse>
|
||||
</List>
|
||||
<Divider />
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className={classes.root}>
|
||||
<AppBar className={classes.appBar}>
|
||||
<CssBaseline />
|
||||
<AppBar position="fixed" className={classes.appBar}>
|
||||
<Toolbar>
|
||||
<IconButton
|
||||
color="inherit"
|
||||
aria-label="Open drawer"
|
||||
onClick={this.handleDrawerToggle}
|
||||
className={classes.navIconHide}
|
||||
className={classes.menuButton}
|
||||
>
|
||||
<MenuIcon />
|
||||
</IconButton>
|
||||
<Typography variant='title' color="inherit" noWrap>
|
||||
<Typography variant="title" color="inherit" noWrap>
|
||||
The American Marten
|
||||
</Typography>
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
<Hidden mdUp>
|
||||
<Drawer
|
||||
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 smDown implementation="css">
|
||||
<Drawer
|
||||
variant="permanent"
|
||||
open
|
||||
classes={{
|
||||
paper: classes.drawerPaper,
|
||||
}}
|
||||
>
|
||||
{drawer}
|
||||
</Drawer>
|
||||
</Hidden>
|
||||
<nav className={classes.drawer}>
|
||||
{/* The implementation can be swap with js to avoid SEO duplication of links. */}
|
||||
<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 === 'Quiz' && <QuizPage />}
|
||||
{this.state.key === 'Easy-Quiz' && <Quiz difficulty='Easy'/>}
|
||||
{this.state.key === 'Medium-Quiz' && <Quiz difficulty='Medium'/>}
|
||||
{this.state.key === 'Hard-Quiz' && <Quiz difficulty='Hard'/>}
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -167,6 +209,9 @@ class ResponsiveDrawer extends React.Component {
|
||||
|
||||
ResponsiveDrawer.propTypes = {
|
||||
classes: PropTypes.object.isRequired,
|
||||
// Injected by the documentation to work in an iframe.
|
||||
// You won't need it on your project.
|
||||
container: PropTypes.object,
|
||||
theme: PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
|
||||
@ -2,10 +2,6 @@ import React, { Fragment } from 'react';
|
||||
import Grid from '@material-ui/core/Grid';
|
||||
import PropTypes from 'prop-types';
|
||||
import { withStyles } from '@material-ui/core/styles';
|
||||
import Typography from '@material-ui/core/Typography';
|
||||
import AppBar from '@material-ui/core/AppBar';
|
||||
import Tabs from '@material-ui/core/Tabs';
|
||||
import Tab from '@material-ui/core/Tab';
|
||||
import Quiz from 'react-quiz-component';
|
||||
|
||||
/**
|
||||
@ -23,42 +19,17 @@ function shuffleArray(array) {
|
||||
return array;
|
||||
}
|
||||
|
||||
function TabContainer(props) {
|
||||
return (
|
||||
<Typography component="div" variant='headline' align='center' style={{ padding: 8 }}>
|
||||
{props.children}
|
||||
</Typography>
|
||||
);
|
||||
}
|
||||
|
||||
TabContainer.propTypes = {
|
||||
children: PropTypes.node.isRequired,
|
||||
};
|
||||
|
||||
// Style for the tabs.
|
||||
const styles = theme => ({
|
||||
root: {
|
||||
flexGrow: 1,
|
||||
backgroundColor: theme.palette.background.paper,
|
||||
marginTop: '64px',
|
||||
overflow: 'scroll',
|
||||
height: '95%',
|
||||
},
|
||||
});
|
||||
|
||||
class QuizGame extends React.Component {
|
||||
// The state of the component.
|
||||
state = {
|
||||
value: 0,
|
||||
};
|
||||
|
||||
// Handles tab changes.
|
||||
handleChange = (event, value) => {
|
||||
this.setState({ value });
|
||||
};
|
||||
|
||||
// Object that contains the easy quiz material.
|
||||
easyQuiz = {
|
||||
easy = {
|
||||
"quizTitle": "Trail Cam Quiz: Easy",
|
||||
"questions": shuffleArray([
|
||||
{
|
||||
@ -117,37 +88,166 @@ class QuizGame extends React.Component {
|
||||
"correctAnswer": "3"
|
||||
},
|
||||
])
|
||||
};
|
||||
}
|
||||
|
||||
medium = {
|
||||
"quizTitle": "Trail Cam Quiz: Medium",
|
||||
"questions": shuffleArray([
|
||||
{
|
||||
"question": <Fragment>What animal is this?<br /><br /><img src="/quizimages/question1.jpg" alt=""></img></Fragment>,
|
||||
"questionType": "text",
|
||||
"answers": [
|
||||
"Black bear",
|
||||
"Common wombat",
|
||||
"Raccoon",
|
||||
"White-tailed deer"
|
||||
],
|
||||
"correctAnswer": "1"
|
||||
},
|
||||
{
|
||||
"question": <Fragment>What animal is this?<br /><br /><img src="/quizimages/question2.jpg" alt=""></img></Fragment>,
|
||||
"questionType": "text",
|
||||
"answers": [
|
||||
"American beaver",
|
||||
"Muskrat",
|
||||
"Porcupine",
|
||||
"Woodchuck"
|
||||
],
|
||||
"correctAnswer": "3"
|
||||
},
|
||||
{
|
||||
"question": <Fragment>What animal is this?<br /><br /><img src="/quizimages/question3.jpg" alt=""></img></Fragment>,
|
||||
"questionType": "text",
|
||||
"answers": [
|
||||
"American badger",
|
||||
"Raccoon",
|
||||
"Striped skunk",
|
||||
"Virginia opossum"
|
||||
],
|
||||
"correctAnswer": "2"
|
||||
},
|
||||
{
|
||||
"question": <Fragment>What animal is this?<br /><br /><img src="/quizimages/question4.jpg" alt=""></img></Fragment>,
|
||||
"questionType": "text",
|
||||
"answers": [
|
||||
"Eastern fox squirrel",
|
||||
"Eastern gray squirrel",
|
||||
"Red squirrel",
|
||||
"Southern flying squirrel"
|
||||
],
|
||||
"correctAnswer": "3"
|
||||
},
|
||||
{
|
||||
"question": <Fragment>What animal is this?<br /><br /><img src="/quizimages/question5.jpg" alt=""></img></Fragment>,
|
||||
"questionType": "text",
|
||||
"answers": [
|
||||
"American Crow",
|
||||
"Black Vulture",
|
||||
"Turkey Vulture",
|
||||
"Northern Raven"
|
||||
],
|
||||
"correctAnswer": "3"
|
||||
},
|
||||
])
|
||||
}
|
||||
|
||||
hard = {
|
||||
"quizTitle": "Trail Cam Quiz: Hard",
|
||||
"questions": shuffleArray([
|
||||
{
|
||||
"question": <Fragment>What animal is this?<br /><br /><img src="/quizimages/question1.jpg" alt=""></img></Fragment>,
|
||||
"questionType": "text",
|
||||
"answers": [
|
||||
"Black bear",
|
||||
"Common wombat",
|
||||
"Raccoon",
|
||||
"White-tailed deer"
|
||||
],
|
||||
"correctAnswer": "1"
|
||||
},
|
||||
{
|
||||
"question": <Fragment>What animal is this?<br /><br /><img src="/quizimages/question2.jpg" alt=""></img></Fragment>,
|
||||
"questionType": "text",
|
||||
"answers": [
|
||||
"American beaver",
|
||||
"Muskrat",
|
||||
"Porcupine",
|
||||
"Woodchuck"
|
||||
],
|
||||
"correctAnswer": "3"
|
||||
},
|
||||
{
|
||||
"question": <Fragment>What animal is this?<br /><br /><img src="/quizimages/question3.jpg" alt=""></img></Fragment>,
|
||||
"questionType": "text",
|
||||
"answers": [
|
||||
"American badger",
|
||||
"Raccoon",
|
||||
"Striped skunk",
|
||||
"Virginia opossum"
|
||||
],
|
||||
"correctAnswer": "2"
|
||||
},
|
||||
{
|
||||
"question": <Fragment>What animal is this?<br /><br /><img src="/quizimages/question4.jpg" alt=""></img></Fragment>,
|
||||
"questionType": "text",
|
||||
"answers": [
|
||||
"Eastern fox squirrel",
|
||||
"Eastern gray squirrel",
|
||||
"Red squirrel",
|
||||
"Southern flying squirrel"
|
||||
],
|
||||
"correctAnswer": "3"
|
||||
},
|
||||
{
|
||||
"question": <Fragment>What animal is this?<br /><br /><img src="/quizimages/question5.jpg" alt=""></img></Fragment>,
|
||||
"questionType": "text",
|
||||
"answers": [
|
||||
"American Crow",
|
||||
"Black Vulture",
|
||||
"Turkey Vulture",
|
||||
"Northern Raven"
|
||||
],
|
||||
"correctAnswer": "3"
|
||||
},
|
||||
])
|
||||
}
|
||||
|
||||
pickDifficulty = difficulty => {
|
||||
let level
|
||||
|
||||
switch (difficulty) {
|
||||
case 'Easy':
|
||||
level = this.easy
|
||||
break
|
||||
case 'Medium':
|
||||
level = this.medium
|
||||
break
|
||||
case 'Hard':
|
||||
level = this.hard
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
|
||||
return level
|
||||
}
|
||||
|
||||
// The state of the component.
|
||||
state = {
|
||||
//difficulty: pickDifficulty(this.props.difficulty)
|
||||
difficulty: this.pickDifficulty(this.props.difficulty)
|
||||
}
|
||||
|
||||
// Renders the quiz component.
|
||||
render() {
|
||||
const { classes } = this.props;
|
||||
const { value } = this.state;
|
||||
|
||||
return (
|
||||
// Tabs
|
||||
<div className={classes.root}>
|
||||
<AppBar position="static">
|
||||
<Tabs
|
||||
value={value}
|
||||
centered
|
||||
fullWidth
|
||||
onChange={this.handleChange}
|
||||
>
|
||||
<Tab label="Easy" />
|
||||
<Tab label="Medium" />
|
||||
<Tab label="Hard" />
|
||||
</Tabs>
|
||||
</AppBar>
|
||||
{value === 0 && <TabContainer>
|
||||
<Fragment>
|
||||
<Grid container justify="center">
|
||||
<Quiz quiz={this.easyQuiz} />
|
||||
</Grid>
|
||||
</Fragment>
|
||||
</TabContainer>}
|
||||
{value === 1 && <TabContainer>Medium Quiz</TabContainer>}
|
||||
{value === 2 && <TabContainer>Hard Quiz</TabContainer>}
|
||||
<Grid container justify="center">
|
||||
<Quiz quiz={this.state.difficulty} />
|
||||
</Grid>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -16,8 +16,7 @@ import GoogleMap from '../components/ReportMap';
|
||||
const styles = theme => ({
|
||||
container: {
|
||||
display: 'flex',
|
||||
flexWrap: 'wrap',
|
||||
marginTop: '64px'
|
||||
flexWrap: 'wrap'
|
||||
},
|
||||
textField: {
|
||||
marginLeft: theme.spacing.unit * 2,
|
||||
|
||||
@ -3,11 +3,11 @@ import QuizGame from '../components/QuizGame';
|
||||
|
||||
|
||||
class QuizPage extends Component {
|
||||
render() {
|
||||
return (
|
||||
<QuizGame />
|
||||
);
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<QuizGame difficulty={this.props.difficulty}/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default QuizPage;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user