From 825075d65620bf450ea930b1988e17460c813be5 Mon Sep 17 00:00:00 2001
From: Delucse <46593742+Delucse@users.noreply.github.com>
Date: Fri, 11 Sep 2020 11:00:57 +0200
Subject: [PATCH] next and back step - buttons

---
 src/components/Tutorial/Assessment.js      |  2 +-
 src/components/Tutorial/Instruction.js     | 12 ++++++++----
 src/components/Tutorial/StepperVertical.js |  8 ++++----
 src/components/Tutorial/Tutorial.js        | 10 +++++-----
 4 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/src/components/Tutorial/Assessment.js b/src/components/Tutorial/Assessment.js
index be6fe8b..88c3cc9 100644
--- a/src/components/Tutorial/Assessment.js
+++ b/src/components/Tutorial/Assessment.js
@@ -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}/>
diff --git a/src/components/Tutorial/Instruction.js b/src/components/Tutorial/Instruction.js
index 83c192a..2b0c8d8 100644
--- a/src/components/Tutorial/Instruction.js
+++ b/src/components/Tutorial/Instruction.js
@@ -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}
diff --git a/src/components/Tutorial/StepperVertical.js b/src/components/Tutorial/StepperVertical.js
index e46041a..2c2c952 100644
--- a/src/components/Tutorial/StepperVertical.js
+++ b/src/components/Tutorial/StepperVertical.js
@@ -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>
           )})}
diff --git a/src/components/Tutorial/Tutorial.js b/src/components/Tutorial/Tutorial.js
index 621d221..41a560a 100644
--- a/src/components/Tutorial/Tutorial.js
+++ b/src/components/Tutorial/Tutorial.js
@@ -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>