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

show vertical stepper not on extrasmall displays

Browse Source
This commit is contained in:
Delucse 2020-09-04 15:26:59 +02:00
parent 7148d66d19
commit c11ff8fc6c
2 changed files with 67 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,12 +8,12 @@ import tutorials from './tutorials.json';
import { fade } from '@material-ui/core/styles/colorManipulator'; import { fade } from '@material-ui/core/styles/colorManipulator';
import { withStyles } from '@material-ui/core/styles'; import { withStyles } from '@material-ui/core/styles';
import withWidth, { isWidthUp } from '@material-ui/core/withWidth';
import Button from '@material-ui/core/Button'; import Button from '@material-ui/core/Button';
import Stepper from '@material-ui/core/Stepper'; import Stepper from '@material-ui/core/Stepper';
import Step from '@material-ui/core/Step'; import Step from '@material-ui/core/Step';
import StepLabel from '@material-ui/core/StepLabel'; import StepLabel from '@material-ui/core/StepLabel';
import Tooltip from '@material-ui/core/Tooltip'; import Tooltip from '@material-ui/core/Tooltip';
import LinearProgress from '@material-ui/core/LinearProgress';
const styles = (theme) => ({ const styles = (theme) => ({
verticalStepper: { verticalStepper: {
@ -115,6 +115,7 @@ class StepperVertical extends Component {
var tutorialId = this.state.tutorialId; var tutorialId = this.state.tutorialId;
var verticalTutorialId = this.state.verticalTutorialId; var verticalTutorialId = this.state.verticalTutorialId;
return ( return (
isWidthUp('sm', this.props.width) ?
<div style={{marginRight: '10px'}}> <div style={{marginRight: '10px'}}>
<Button <Button
style={{minWidth: '30px', margin: 'auto', minHeight: '25px', padding: '0', writingMode: 'vertical-rl'}} style={{minWidth: '30px', margin: 'auto', minHeight: '25px', padding: '0', writingMode: 'vertical-rl'}}
@ -176,10 +177,10 @@ class StepperVertical extends Component {
> >
{'>'} {'>'}
</Button> </Button>
</div> </div>
: null
); );
}; };
} }
export default withRouter(withStyles(styles, {withTheme: true})(StepperVertical)); export default withRouter(withStyles(styles, {withTheme: true})(withWidth()(StepperVertical)));

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

@ -9,6 +9,7 @@ import NotFound from '../NotFound';
import tutorials from './tutorials.json'; import tutorials from './tutorials.json';
import withWidth, { isWidthUp } from '@material-ui/core/withWidth';
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';
@ -47,7 +48,7 @@ class Tutorial extends Component {
<StepperVertical /> <StepperVertical />
{/* width of vertical stepper is 30px*/} {/* 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 <Tabs
value={this.state.value} value={this.state.value}
indicatorColor="primary" indicatorColor="primary"
@ -85,4 +86,4 @@ class Tutorial extends Component {
}; };
} }
export default Tutorial; export default withWidth()(Tutorial);