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

layout tutorial builder

Browse Source
This commit is contained in:
Delucse 2020-09-20 13:59:42 +02:00
parent fc1b898c80
commit 812c01d6bc
5 changed files with 9 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/Tutorial/Builder/BlocklyExample.js
View File

@ -82,10 +82,9 @@ class BlocklyExample extends Component {
render() {
moment.locale('de', localization);
return (
<div style={{marginBottom: '10px'}}>
<div style={{marginBottom: '10px', padding: '18.5px 14px', borderRadius: '25px', border: '1px solid lightgrey', width: 'calc(100% - 28px)'}}>
{!this.props.task ?
<FormControlLabel
style={{margin: 0}}
labelPlacement="end"
label={"Blockly Beispiel"}
control={

5
src/components/Tutorial/Builder/Builder.js
View File

@ -138,8 +138,9 @@ class Builder extends Component {
)}
{/*submit or reset*/}
<Button style={{marginRight: '10px'}} variant='contained' color='primary' onClick={() => this.submit()}>Tutorial-Vorlage erstellen</Button>
<Button variant='contained' onClick={() => this.reset()}>Zurücksetzen</Button>
<Divider variant='fullWidth' style={{margin: '30px 0 10px 0'}}/>
<Button style={{marginRight: '10px', marginTop: '10px'}} variant='contained' color='primary' onClick={() => this.submit()}>Tutorial-Vorlage erstellen</Button>
<Button style={{marginTop: '10px'}} variant='contained' onClick={() => this.reset()}>Zurücksetzen</Button>
<Backdrop className={this.props.classes.backdrop} open={this.props.isProgress}>
<CircularProgress color="inherit" />

4
src/components/Tutorial/Builder/Hardware.js
View File

@ -12,6 +12,7 @@ import GridList from '@material-ui/core/GridList';
import GridListTile from '@material-ui/core/GridListTile';
import GridListTileBar from '@material-ui/core/GridListTileBar';
import FormHelperText from '@material-ui/core/FormHelperText';
import FormLabel from '@material-ui/core/FormLabel';
const styles = theme => ({
multiGridListTile: {
@ -62,7 +63,8 @@ class Requirements extends Component {
render() {
var cols = isWidthDown('md', this.props.width) ? isWidthDown('sm', this.props.width) ? isWidthDown('xs', this.props.width) ? 2 : 3 : 4 : 6;
return (
<div>
<div style={{marginBottom: '10px', padding: '18.5px 14px', borderRadius: '25px', border: '1px solid lightgrey', width: 'calc(100% - 28px)'}}>
<FormLabel style={{color: 'black'}}>Hardware</FormLabel>
<FormHelperText style={this.props.error.steps[this.props.index].hardware ? {lineHeight: 'initial', marginTop: '5px'} : {marginTop: '5px', lineHeight: 'initial', marginBottom: '10px'}}>Beachte, dass die Reihenfolge des Auswählens maßgebend ist.</FormHelperText>
{this.props.error.steps[this.props.index].hardware ? <FormHelperText className={this.props.classes.errorColor}>Wähle mindestens eine Hardware aus.</FormHelperText> : null}
<GridList cellHeight={100} cols={cols} spacing={10}>

2
src/components/Tutorial/Builder/Requirements.js
View File

@ -28,7 +28,7 @@ class Requirements extends Component {
render() {
return (
<FormControl style={{marginBottom: '10px'}}>
<FormControl style={{marginBottom: '10px', padding: '18.5px 14px', borderRadius: '25px', border: '1px solid lightgrey', width: 'calc(100% - 28px)'}}>
<FormLabel style={{color: 'black'}}>Voraussetzungen</FormLabel>
<FormHelperText style={{marginTop: '5px'}}>Beachte, dass die Reihenfolge des Anhakens maßgebend ist.</FormHelperText>
<FormGroup>

2
src/components/Tutorial/Builder/Step.js
View File

@ -36,7 +36,7 @@ class Step extends Component {
var index = this.props.index;
var steps = this.props.steps;
return (
<div style={{borderRadius: '25px', background: 'lightgrey', padding: '10px 14px 10px 10px', marginBottom: '20px'}}>
<div style={{borderRadius: '25px', border: '1px solid lightgrey', padding: '10px 14px 10px 10px', marginBottom: '20px'}}>
<Typography variant='h6' style={{marginBottom: '10px', marginLeft: '4px'}}>Schritt {index+1}</Typography>
<div style={{display: 'flex', position: 'relative'}}>
<div style={{width: '40px', marginRight: '10px', position: 'absolute', left: '4px', bottom: '10px'}}>