schuelerlabor-cleverlab/smarti
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

tutorial stepper

Browse Source
This commit is contained in:
Delucse 2020-08-31 17:26:58 +02:00
parent 8c13a9e316
commit 5443932bf6
1 changed files with 23 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/components/Tutorial/Tutorial.js
View File

@ -1,20 +1,27 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import { withRouter } from 'react-router-dom'; import { withRouter, Link } from 'react-router-dom';
import Breadcrumbs from '../Breadcrumbs'; import Breadcrumbs from '../Breadcrumbs';
import BlocklyWindow from '../Blockly/BlocklyWindow'; import BlocklyWindow from '../Blockly/BlocklyWindow';
import CodeViewer from '../CodeViewer'; import CodeViewer from '../CodeViewer';
import tutorials from './tutorials.json';
import { withStyles } from '@material-ui/core/styles'; import { withStyles } from '@material-ui/core/styles';
import Tabs from '@material-ui/core/Tabs'; import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab'; import Tab from '@material-ui/core/Tab';
import Grid from '@material-ui/core/Grid'; import Grid from '@material-ui/core/Grid';
import Card from '@material-ui/core/Card'; import Card from '@material-ui/core/Card';
const styles = () => ({ const styles = (theme) => ({
gridHeight: { stepper: {
height: 'inherit' backgroundColor: theme.palette.primary.main,
width: 'calc(100% - 40px)',
opacity: 0.6,
borderRadius: '25px',
padding: '0 20px',
margin: '20px 0'
} }
}); });
@ -33,7 +40,17 @@ class Tutorial extends Component {
<div> <div>
<Breadcrumbs content={[{link: '/', title: 'Home'},{link: '/tutorial', title: 'Tutorial'}, {link: `/tutorial/${this.props.match.params.tutorialId}`, title: this.props.match.params.tutorialId}]}/> <Breadcrumbs content={[{link: '/', title: 'Home'},{link: '/tutorial', title: 'Tutorial'}, {link: `/tutorial/${this.props.match.params.tutorialId}`, title: this.props.match.params.tutorialId}]}/>
<h1>Tutorial {this.props.match.params.tutorialId}</h1> {/* Stepper */}
<div className={this.props.classes.stepper}>
{parseInt(this.props.match.params.tutorialId)-1 > 0 ?
<Link to={`/tutorial/${parseInt(this.props.match.params.tutorialId)-1}`} style={{display: 'inline', float: 'left', textDecoration: 'none', color: 'inherit'}}>{'<'}</Link>
: <div style={{color: '#DDDDDD', display: 'inline'}}>{'<'}</div>}
<h1 style={{display: 'inline'}}>Tutorial {this.props.match.params.tutorialId}</h1>
{parseInt(this.props.match.params.tutorialId)+1 <= tutorials.length ?
<Link to={`/tutorial/${parseInt(this.props.match.params.tutorialId)+1}`} style={{display: 'inline', float: 'right', textDecoration: 'none', color: 'inherit'}}>{'>'}</Link>
: <div style={{color: '#DDDDDD', display: 'inline', float: 'right'}}>{'>'}</div>}
</div>
<Tabs <Tabs
value={this.state.value} value={this.state.value}
indicatorColor="primary" indicatorColor="primary"
@ -69,4 +86,4 @@ class Tutorial extends Component {
}; };
} }
export default withRouter(withStyles(styles)(Tutorial)); export default withRouter(withStyles(styles, {withTheme: true})(Tutorial));