show vertical stepper not on extrasmall displays

src/components/Tutorial/StepperVertical.js

@@ -8,12 +8,12 @@ import tutorials from './tutorials.json';
 
 import { fade } from '@material-ui/core/styles/colorManipulator';
 import { withStyles } from '@material-ui/core/styles';
+import withWidth, { isWidthUp } from '@material-ui/core/withWidth';
 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';
 import Tooltip from '@material-ui/core/Tooltip';
-import LinearProgress from '@material-ui/core/LinearProgress';
 
 const styles = (theme) => ({
   verticalStepper: {
@@ -115,71 +115,72 @@ class StepperVertical extends Component {
     var tutorialId = this.state.tutorialId;
     var verticalTutorialId = this.state.verticalTutorialId;
     return (
-      <div style={{marginRight: '10px'}}>
-          <Button
-            style={{minWidth: '30px', margin: 'auto', minHeight: '25px', padding: '0', writingMode: 'vertical-rl'}}
-            disabled={this.state.verticalTutorialId === 1}
-            onClick={() => {this.verticalStepper(-1)}}
-          >
-            {'<'}
-          </Button>
-          <div style={{display: 'flex', height: 'calc(100% - 25px - 25px)', width: 'max-content'}}>
-            <div style={{position: 'relative'}}>
-              <div
-                className={clsx(this.props.classes.progress, this.props.classes.progressForeground)}
-                style={{ zIndex: 1, borderRadius: `${verticalTutorialId/tutorials.length === 1 ? '2px' : '2px 2px 0 0'}`, height: `${(verticalTutorialId/tutorials.length)*100}%`}}>
-              </div>
-              <div
-                className={clsx(this.props.classes.progress, this.props.classes.progressBackground)}
-                style={{borderRadius: `${verticalTutorialId/tutorials.length === 1 ? '2px' : '2px 2px 0 0'}`}}>
-              </div>
-            </div>
-            <Stepper
-              activeStep={tutorialId}
-              orientation="vertical"
-              connector={<div style={{height: '10px'}}></div>}
-              classes={{root: this.props.classes.verticalStepper}}
+      isWidthUp('sm', this.props.width) ?
+        <div style={{marginRight: '10px'}}>
+            <Button
+              style={{minWidth: '30px', margin: 'auto', minHeight: '25px', padding: '0', writingMode: 'vertical-rl'}}
+              disabled={this.state.verticalTutorialId === 1}
+              onClick={() => {this.verticalStepper(-1)}}
             >
-              {this.state.tutorialArray.map((tutorial, i) => {
-                var index = this.state.tutorialArray.indexOf(tutorials[verticalTutorialId-1]);
-                return (
-                  <Step key={i}>
-                    <Tooltip title={Object.keys(tutorial).length > 0 ? tutorial.title : ''} placement='right' arrow >
-                      <Link to={`/tutorial/${i === index ? verticalTutorialId : verticalTutorialId - index + i}`}>
-                        <StepLabel
-                          StepIconComponent={'div'}
-                          classes={{
-                            root: tutorial === tutorials[verticalTutorialId-1] ?
-                                    tutorial === tutorials[tutorialId-1] ?
-                                      clsx(this.props.classes.stepIconLarge, this.props.classes.stepIconActive)
-                                    : this.props.classes.stepIconLarge
-                                  : tutorial === tutorials[verticalTutorialId-2] || tutorial === tutorials[verticalTutorialId] ?
+              {'<'}
+            </Button>
+            <div style={{display: 'flex', height: 'calc(100% - 25px - 25px)', width: 'max-content'}}>
+              <div style={{position: 'relative'}}>
+                <div
+                  className={clsx(this.props.classes.progress, this.props.classes.progressForeground)}
+                  style={{ zIndex: 1, borderRadius: `${verticalTutorialId/tutorials.length === 1 ? '2px' : '2px 2px 0 0'}`, height: `${(verticalTutorialId/tutorials.length)*100}%`}}>
+                </div>
+                <div
+                  className={clsx(this.props.classes.progress, this.props.classes.progressBackground)}
+                  style={{borderRadius: `${verticalTutorialId/tutorials.length === 1 ? '2px' : '2px 2px 0 0'}`}}>
+                </div>
+              </div>
+              <Stepper
+                activeStep={tutorialId}
+                orientation="vertical"
+                connector={<div style={{height: '10px'}}></div>}
+                classes={{root: this.props.classes.verticalStepper}}
+              >
+                {this.state.tutorialArray.map((tutorial, i) => {
+                  var index = this.state.tutorialArray.indexOf(tutorials[verticalTutorialId-1]);
+                  return (
+                    <Step key={i}>
+                      <Tooltip title={Object.keys(tutorial).length > 0 ? tutorial.title : ''} placement='right' arrow >
+                        <Link to={`/tutorial/${i === index ? verticalTutorialId : verticalTutorialId - index + i}`}>
+                          <StepLabel
+                            StepIconComponent={'div'}
+                            classes={{
+                              root: tutorial === tutorials[verticalTutorialId-1] ?
                                       tutorial === tutorials[tutorialId-1] ?
-                                        clsx(this.props.classes.stepIconMedium, this.props.classes.stepIconActive)
-                                      : this.props.classes.stepIconMedium
-                                  : tutorial === tutorials[tutorialId-1] ?
-                                      clsx(this.props.classes.stepIconSmall, this.props.classes.stepIconActive)
-                                    : this.props.classes.stepIconSmall
-                          }}
-                        >
-                        </StepLabel>
-                      </Link>
-                    </Tooltip>
-                  </Step>
-              )})}
-            </Stepper>
-          </div>
-          <Button
-            style={{minWidth: '30px', minHeight: '25px', padding: '0', writingMode: 'vertical-rl'}}
-            disabled={this.state.verticalTutorialId === tutorials.length}
-            onClick={() => {this.verticalStepper(1)}}
-          >
-            {'>'}
-          </Button>
-
-      </div>
+                                        clsx(this.props.classes.stepIconLarge, this.props.classes.stepIconActive)
+                                      : this.props.classes.stepIconLarge
+                                    : tutorial === tutorials[verticalTutorialId-2] || tutorial === tutorials[verticalTutorialId] ?
+                                        tutorial === tutorials[tutorialId-1] ?
+                                          clsx(this.props.classes.stepIconMedium, this.props.classes.stepIconActive)
+                                        : this.props.classes.stepIconMedium
+                                    : tutorial === tutorials[tutorialId-1] ?
+                                        clsx(this.props.classes.stepIconSmall, this.props.classes.stepIconActive)
+                                      : this.props.classes.stepIconSmall
+                            }}
+                          >
+                          </StepLabel>
+                        </Link>
+                      </Tooltip>
+                    </Step>
+                )})}
+              </Stepper>
+            </div>
+            <Button
+              style={{minWidth: '30px', minHeight: '25px', padding: '0', writingMode: 'vertical-rl'}}
+              disabled={this.state.verticalTutorialId === tutorials.length}
+              onClick={() => {this.verticalStepper(1)}}
+            >
+              {'>'}
+            </Button>
+        </div>
+      : null
     );
   };
 }
 
-export default withRouter(withStyles(styles, {withTheme: true})(StepperVertical));
+export default withRouter(withStyles(styles, {withTheme: true})(withWidth()(StepperVertical)));

src/components/Tutorial/Tutorial.js

@@ -9,6 +9,7 @@ import NotFound from '../NotFound';
 
 import tutorials from './tutorials.json';
 
+import withWidth, { isWidthUp } from '@material-ui/core/withWidth';
 import Tabs from '@material-ui/core/Tabs';
 import Tab from '@material-ui/core/Tab';
 import Grid from '@material-ui/core/Grid';
@@ -47,7 +48,7 @@ class Tutorial extends Component {
             <StepperVertical />
 
             {/* width of vertical stepper is 30px*/}
-            <Card style={{width: 'calc(100% - 30px)', padding: '10px'}}>
+            <Card style={{width: isWidthUp('sm', this.props.width) ? 'calc(100% - 30px)' : '100%', padding: '10px'}}>
               <Tabs
                 value={this.state.value}
                 indicatorColor="primary"
@@ -85,4 +86,4 @@ class Tutorial extends Component {
   };
 }
 
-export default Tutorial;
+export default withWidth()(Tutorial);