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

improvement of tutorial stepper via material-ui

Browse Source
This commit is contained in:
Delucse 2020-09-01 13:23:56 +02:00
parent 5443932bf6
commit bcc4c35c9e
1 changed files with 35 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,20 +8,31 @@ import CodeViewer from '../CodeViewer';
import tutorials from './tutorials.json'; import tutorials from './tutorials.json';
import { fade } from '@material-ui/core/styles/colorManipulator';
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';
import Button from '@material-ui/core/Button';
import Stepper from '@material-ui/core/Stepper';
import Step from '@material-ui/core/Step';
import StepLabel from '@material-ui/core/StepLabel';
const styles = (theme) => ({ const styles = (theme) => ({
stepper: { stepper: {
backgroundColor: theme.palette.primary.main, backgroundColor: fade(theme.palette.primary.main, 0.6),
width: 'calc(100% - 40px)', width: 'calc(100% - 40px)',
opacity: 0.6, // opacity: 0.6,
borderRadius: '25px', borderRadius: '25px',
padding: '0 20px', padding: '0 20px',
margin: '20px 0' margin: '20px 0',
display: 'flex',
justifyContent: 'space-between'
},
color: {
backgroundColor: 'transparent '
} }
}); });
@ -42,15 +53,29 @@ class Tutorial extends Component {
{/* Stepper */} {/* Stepper */}
<div className={this.props.classes.stepper}> <div className={this.props.classes.stepper}>
{parseInt(this.props.match.params.tutorialId)-1 > 0 ? <Button
<Link to={`/tutorial/${parseInt(this.props.match.params.tutorialId)-1}`} style={{display: 'inline', float: 'left', textDecoration: 'none', color: 'inherit'}}>{'<'}</Link> disabled={parseInt(this.props.match.params.tutorialId)-1 === 0}
: <div style={{color: '#DDDDDD', display: 'inline'}}>{'<'}</div>} onClick={() => {this.props.history.push(`/tutorial/${parseInt(this.props.match.params.tutorialId)-1}`)}}
<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> </Button>
: <div style={{color: '#DDDDDD', display: 'inline', float: 'right'}}>{'>'}</div>} <Stepper activeStep={this.props.match.params.tutorialId} orientation="horizontal"
style={{padding: 0}} classes={{root: this.props.classes.color}}>
<Step expanded completed={false}>
<StepLabel icon={``}>
<h1 style={{margin: 0}}>Tutorial {this.props.match.params.tutorialId}</h1>
</StepLabel>
</Step>
</Stepper>
<Button
disabled={parseInt(this.props.match.params.tutorialId)+1 > tutorials.length}
onClick={() => {this.props.history.push(`/tutorial/${parseInt(this.props.match.params.tutorialId)+1}`)}}
>
{'>'}
</Button>
</div> </div>
<Tabs <Tabs
value={this.state.value} value={this.state.value}
indicatorColor="primary" indicatorColor="primary"