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

allow markdown in tutorial text

Browse Source
This commit is contained in:
Mario
2020-11-13 15:33:21 +01:00
parent 13d2d3d301
commit b60ec9136a
3 changed files with 321 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Tutorial/Instruction.js
+23 -21
View File
@@ -8,6 +8,8 @@ import BlocklyWindow from '../Blockly/BlocklyWindow';
import Grid from '@material-ui/core/Grid';
import Typography from '@material-ui/core/Typography';
import ReactMarkdown from 'react-markdown'
class Instruction extends Component {
@@ -17,37 +19,37 @@ class Instruction extends Component {
var areRequirements = step.requirements && step.requirements.length > 0;
return (
<div>
<Typography variant='h4' style={{marginBottom: '5px'}}>{step.headline}</Typography>
<Typography style={isHardware ? {} : {marginBottom: '5px'}}>{step.text}</Typography>
<Typography variant='h4' style={{ marginBottom: '5px' }}>{step.headline}</Typography>
<Typography style={isHardware ? {} : { marginBottom: '5px' }}><ReactMarkdown>{step.text}</ReactMarkdown></Typography>
{isHardware ?
<Hardware picture={step.hardware}/> : null}
<Hardware picture={step.hardware} /> : null}
{areRequirements > 0 ?
<Requirement tutorialIds={step.requirements}/> : null}
<Requirement tutorialIds={step.requirements} /> : null}
{step.media ?
step.media.picture ?
<div style={{display: 'flex', justifyContent: 'center', marginBottom: '5px'}}>
<img src={`/media/tutorial/${step.media.picture}`} alt='' style={{maxWidth: '100%'}}/>
<div style={{ display: 'flex', justifyContent: 'center', marginBottom: '5px' }}>
<img src={`/media/tutorial/${step.media.picture}`} alt='' style={{ maxWidth: '100%' }} />
</div>
: step.media.youtube ?
: step.media.youtube ?
/*16:9; width: 800px; height: width/16*9=450px*/
<div style={{maxWidth: '800px', margin: 'auto'}}>
<div style={{position: 'relative', height: 0, paddingBottom: 'calc(100% / 16 * 9)'}}>
<iframe title={step.media.youtube} style={{position: 'absolute', top: '0', left: '0', width: '100%', maxWidth: '800px', height: '100%', maxHeight: '450px'}} src={`https://www.youtube.com/embed/${step.media.youtube}`} frameBorder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />
<div style={{ maxWidth: '800px', margin: 'auto' }}>
<div style={{ position: 'relative', height: 0, paddingBottom: 'calc(100% / 16 * 9)' }}>
<iframe title={step.media.youtube} style={{ position: 'absolute', top: '0', left: '0', width: '100%', maxWidth: '800px', height: '100%', maxHeight: '450px' }} src={`https://www.youtube.com/embed/${step.media.youtube}`} frameBorder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />
</div>
</div>
: null
: null}
: null
: null}
{step.xml ?
<Grid container spacing={2} style={{marginBottom: '5px'}}>
<Grid item xs={12}>
<BlocklyWindow
svg
blockDisabled
initialXml={step.xml}
/>
<Grid container spacing={2} style={{ marginBottom: '5px' }}>
<Grid item xs={12}>
<BlocklyWindow
svg
blockDisabled
initialXml={step.xml}
/>
</Grid>
</Grid>
</Grid>
: null }
: null}
</div>
);
};