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

next and back step - buttons

Browse Source
This commit is contained in:
Delucse 2020-09-11 11:00:57 +02:00
parent 6c3709fde8
commit 825075d656
4 changed files with 18 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Tutorial/Assessment.js
View File

@ -18,7 +18,7 @@ class Assessment extends Component {
return (
<div style={{width: '100%'}}>
<Typography variant='h4' style={{marginBottom: '5px'}}>{step.headline}</Typography>
<Grid container spacing={2}>
<Grid container spacing={2} style={{marginBottom: '5px'}}>
<Grid item xs={12} md={6} lg={8} style={{ position: 'relative' }}>
<SolutionCheck />
<BlocklyWindow initialXml={this.props.status[currentTutorialId].xml ? this.props.status[currentTutorialId].xml : null}/>

12
src/components/Tutorial/Instruction.js
View File

@ -11,14 +11,18 @@ class Instruction extends Component {
render() {
var step = this.props.step;
var isHardware = step.hardware && step.hardware.length > 0;
var areRequirements = step.requirements && step.requirements.length > 0;
return (
<div>
<Typography variant='h4' style={{marginBottom: '5px'}}>{step.headline}</Typography>
<Typography style={{marginBottom: '5px'}}>{step.text1}</Typography>
{step.hardware && step.hardware.length > 0 ? 'Hardware: todo' : null}
{step.requirements && step.requirements.length > 0 ? 'Voraussetzungen: todo' : null}
<Typography style={isHardware ? {} : {marginBottom: '5px'}}>{step.text1}</Typography>
{isHardware ?
<Typography style={areRequirements ? {} : {marginBottom: '5px'}}>Hardware: todo</Typography> : null}
{areRequirements > 0 ?
<Typography style={{marginBottom: '5px'}}>Voraussetzungen: todo</Typography> : null}
{step.xml ?
<Grid container spacing={2}>
<Grid container spacing={2} style={{marginBottom: '5px'}}>
<Grid item xs={12}>
<BlocklyWindow
trashcan={false}

8
src/components/Tutorial/StepperVertical.js
View File

@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { tutorialStep } from '../../actions/tutorialActions';
import { withRouter, Link } from 'react-router-dom';
import { withRouter } from 'react-router-dom';
import clsx from 'clsx';
@ -37,7 +37,7 @@ const styles = (theme) => ({
connector: {
height: '10px',
borderLeft: `3px solid ${theme.palette.primary.main}`,
margin: '5px auto'
margin: 'auto'
}
});
@ -70,7 +70,7 @@ class StepperVertical extends Component {
return (
<Step key={i}>
<Tooltip title={step.headline} placement='right' arrow >
<Link onClick={() => {this.props.tutorialStep(i)}}>
<div style={i === activeStep ? {padding: '5px 0'} : {padding: '5px 0', cursor: 'pointer'}} onClick={i === activeStep ? null : () => {this.props.tutorialStep(i)}}>
<StepLabel
StepIconComponent={'div'}
classes={{
@ -84,7 +84,7 @@ class StepperVertical extends Component {
}}
>
</StepLabel>
</Link>
</div>
</Tooltip>
</Step>
)})}

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

@ -47,17 +47,17 @@ class Tutorial extends Component {
<div style={{display: 'flex'}}>
<StepperVertical steps={steps}/>
<Card style={{padding: '10px'}}>
{/* calc(Card-padding: 10px + Button-height: 35px + Button-marginTop: 15px)*/}
<Card style={{padding: '10px 10px 60px 10px', display: 'block', position: 'relative', height: 'max-content'}}>
{step ?
step.type === 'instruction' ?
<Instruction step={step}/>
: <Assessment step={step}/> // if step.type === 'assessment'
: null}
<div style={{marginTop: '20px'}}>
<Button style={{marginRight: '10px'}} variant='contained' disabled={this.props.activeStep === 0} onClick={() => this.props.tutorialStep(this.props.activeStep-1)}>Zurück</Button>
<Button variant='contained' color='primary' disabled={this.props.activeStep === tutorial.steps.length-1} onClick={() => this.props.tutorialStep(this.props.activeStep+1)}>Weiter</Button>
<div style={{marginTop: '20px', position: 'absolute', bottom: '10px'}}>
<Button style={{marginRight: '10px', height: '35px'}} variant='contained' disabled={this.props.activeStep === 0} onClick={() => this.props.tutorialStep(this.props.activeStep-1)}>Zurück</Button>
<Button style={{height: '35px'}}variant='contained' color='primary' disabled={this.props.activeStep === tutorial.steps.length-1} onClick={() => this.props.tutorialStep(this.props.activeStep+1)}>Weiter</Button>
</div>
</Card>
</div>