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

update variable names

Browse Source
This commit is contained in:
Mario Pesch
2021-03-29 15:07:39 +02:00
parent 687ac32166
commit 255b1619b8
8 changed files with 932 additions and 688 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Tutorial/Instruction.js
+77 -39
View File
@@ -1,57 +1,95 @@
import React, { Component } from 'react';
import React, { Component } from "react";
import Hardware from './Hardware';
import Requirement from './Requirement';
import BlocklyWindow from '../Blockly/BlocklyWindow';
import Grid from '@material-ui/core/Grid';
import Typography from '@material-ui/core/Typography';
import ReactMarkdown from 'react-markdown'
import Hardware from "./Hardware";
import Requirement from "./Requirement";
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 {
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={isHardware ? {} : { marginBottom: '5px' }}><ReactMarkdown className={'tutorial'} linkTarget={'_blank'} skipHtml={false}>{step.text}</ReactMarkdown></Typography>
{isHardware ?
<Hardware picture={step.hardware} /> : null}
{areRequirements > 0 ?
<Requirement requirements={step.requirements} /> : null}
{step.media ?
step.media.picture ?
<div style={{ display: 'flex', justifyContent: 'center', marginBottom: '5px' }}>
<img src={`${process.env.REACT_APP_BLOCKLY_API}/media/${step.media.picture.path}`} alt='' style={{ maxHeight: '40vH', maxWidth: '100%' }} />
</div>
: 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>
</div>
: null
: null}
{step.xml ?
<Grid container spacing={2} style={{ marginBottom: '5px' }}>
<Grid item xs={12} style={{display: 'flex', justifyContent: 'center'}}>
<BlocklyWindow
svg
blockDisabled
initialXml={step.xml}
<Typography variant="h4" style={{ marginBottom: "5px" }}>
{step.headline}
</Typography>
<Typography style={isHardware ? {} : { marginBottom: "5px" }}>
<ReactMarkdown
className={"tutorial"}
linkTarget={"_blank"}
skipHtml={false}
>
{step.text}
</ReactMarkdown>
</Typography>
{isHardware ? <Hardware picture={step.hardware} /> : null}
{areRequirements > 0 ? (
<Requirement requirements={step.requirements} />
) : null}
{step.media ? (
step.media.picture ? (
<div
style={{
display: "flex",
justifyContent: "center",
marginBottom: "5px",
}}
>
<img
src={`${process.env.REACT_APP_BLOCKLY_API}/media/${step.media.picture.path}`}
alt=""
style={{ maxHeight: "40vH", maxWidth: "100%" }}
/>
</div>
) : 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>
</div>
) : null
) : null}
{step.xml ? (
<Grid container spacing={2} style={{ marginBottom: "5px" }}>
<Grid
item
xs={12}
style={{ display: "flex", justifyContent: "center" }}
>
<BlocklyWindow svg blockDisabled initialXml={step.xml} />
</Grid>
</Grid>
: null}
) : null}
</div>
);
};
}
}
export default Instruction;