mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2024-11-23 15:47:53 -05:00
Merge pull request #2034 from LLK/hotfix/extension-landing-pages
[Master] Extension landing pages update
This commit is contained in:
Eric Rosenbaum
GitHub
commit
1c9fb8e3c9
53 changed files with 1751 additions and 1652 deletions
|
|
@ -30,6 +30,8 @@ $ui-white-15percent: hsla(0, 100%, 100%, .15); //#FFF
|
|||
|
||||
$ui-border: hsla(0, 0, 85, 1); //#D9D9D9
|
||||
|
||||
$ui-mint-green: hsl(163, 69, 44);
|
||||
|
||||
/* Overlay UI Gray Colors */
|
||||
$active-gray: hsla(0, 0, 0, .1);
|
||||
$active-dark-gray: hsla(0, 0, 0, .2);
|
||||
|
|
|
|||
30
src/components/extension-landing/extension-header.jsx
Normal file
30
src/components/extension-landing/extension-header.jsx
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
const PropTypes = require('prop-types');
|
||||
const React = require('react');
|
||||
|
||||
const FlexRow = require('../../components/flex-row/flex-row.jsx');
|
||||
|
||||
require('./extension-landing.scss');
|
||||
|
||||
const ExtensionHeader = props => (
|
||||
<div className="extension-header">
|
||||
<FlexRow className="inner">
|
||||
<FlexRow className="column extension-info">
|
||||
{props.children}
|
||||
</FlexRow>
|
||||
<div className="extension-image">
|
||||
<img
|
||||
alt={props.imageAlt}
|
||||
src={props.imageSrc}
|
||||
/>
|
||||
</div>
|
||||
</FlexRow>
|
||||
</div>
|
||||
);
|
||||
|
||||
ExtensionHeader.propTypes = {
|
||||
children: PropTypes.node,
|
||||
imageAlt: PropTypes.string,
|
||||
imageSrc: PropTypes.string
|
||||
};
|
||||
|
||||
module.exports = ExtensionHeader;
|
||||
33
src/components/extension-landing/extension-landing.jsx
Normal file
33
src/components/extension-landing/extension-landing.jsx
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
const bindAll = require('lodash.bindall');
|
||||
const React = require('react');
|
||||
|
||||
const OS_ENUM = require('./os-enum.js');
|
||||
|
||||
class ExtensionLanding extends React.Component {
|
||||
constructor (props) {
|
||||
super(props);
|
||||
bindAll(this, [
|
||||
'onSetOS'
|
||||
]);
|
||||
|
||||
// @todo use bowser for browser detection
|
||||
let detectedOS = OS_ENUM.WINDOWS;
|
||||
if (window.navigator && window.navigator.platform) {
|
||||
if (window.navigator.platform === 'MacIntel') {
|
||||
detectedOS = OS_ENUM.MACOS;
|
||||
}
|
||||
}
|
||||
|
||||
this.state = {
|
||||
OS: detectedOS
|
||||
};
|
||||
}
|
||||
|
||||
onSetOS (os) {
|
||||
this.setState({
|
||||
OS: os
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = ExtensionLanding;
|
||||
262
src/components/extension-landing/extension-landing.scss
Normal file
262
src/components/extension-landing/extension-landing.scss
Normal file
|
|
@ -0,0 +1,262 @@
|
|||
@import "../../colors";
|
||||
@import "../../frameless";
|
||||
|
||||
#view {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.extension-landing {
|
||||
&>div {
|
||||
padding: 4rem 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
span {
|
||||
line-height: 1.7rem;
|
||||
}
|
||||
|
||||
hr {
|
||||
margin: 4rem 0;
|
||||
border-width: 1px 0 0 0;
|
||||
border-style: solid;
|
||||
border-color: $ui-border;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.download {
|
||||
display: inline-block;
|
||||
|
||||
&::after {
|
||||
display: inline-block;
|
||||
margin-left: .5rem;
|
||||
background-image: url("/svgs/extensions/download.svg");
|
||||
background-repeat: no-repeat;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
vertical-align: text-top;
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
|
||||
.screenshot {
|
||||
border: 1px solid $ui-border;
|
||||
border-radius: .5rem;
|
||||
}
|
||||
|
||||
.tip-box {
|
||||
margin-top: 4rem;
|
||||
border: 1px solid $ui-blue-25percent;
|
||||
border-radius: 1rem;
|
||||
background-color: $ui-blue-10percent;
|
||||
padding: 2rem 3rem;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
.tip-content {
|
||||
align-items: flex-start;
|
||||
|
||||
p {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.extension-header {
|
||||
background-size: cover;
|
||||
color: $ui-white;
|
||||
|
||||
.inner {
|
||||
justify-content: space-between;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.extension-info {
|
||||
max-width: $cols7;
|
||||
align-items: flex-start;
|
||||
|
||||
.extension-copy {
|
||||
margin-bottom: 5rem;
|
||||
align-items: flex-start;
|
||||
|
||||
h2 {
|
||||
display: flex;
|
||||
margin-bottom: 2rem;
|
||||
color: $ui-white;
|
||||
}
|
||||
|
||||
h2 img {
|
||||
padding-right: .5rem;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
a {
|
||||
border-bottom: 1px solid $ui-white;
|
||||
color: $ui-white;
|
||||
}
|
||||
}
|
||||
|
||||
.extension-requirements-container {
|
||||
font-weight: 500;
|
||||
align-items: flex-start;
|
||||
|
||||
.requirements-header {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.extension-requirements {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.extension-requirements span {
|
||||
display: flex;
|
||||
margin-right: 1rem;
|
||||
font-size: 15px; // TODO: change to rem later
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.extension-requirements span img {
|
||||
padding-right: .5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.extension-image {
|
||||
width: 100%;
|
||||
max-width: $cols5;
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.os-chooser {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.install-scratch-link {
|
||||
padding: 2rem 0;
|
||||
|
||||
.inner {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.step-image.badge {
|
||||
height: initial;
|
||||
}
|
||||
|
||||
.download-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
margin-left: .5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.extension-section {
|
||||
.inner {
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
.getting-started {
|
||||
.getting-started-section {
|
||||
width: 100%;
|
||||
align-items: flex-start;
|
||||
|
||||
a {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.things-to-try .inner {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.project-card {
|
||||
margin: 0 1.5rem;
|
||||
border: 1px solid $ui-border;
|
||||
border-radius: .5rem;
|
||||
background-color: $ui-white;
|
||||
overflow: hidden;
|
||||
flex-basis: 0;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.project-card-image {
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.project-card-info {
|
||||
padding: 1rem;
|
||||
|
||||
p {
|
||||
margin: .2rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
.faq {
|
||||
p {
|
||||
margin-bottom: 1.25rem;
|
||||
margin-left: 0;
|
||||
max-width: $cols8;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.faq-title {
|
||||
margin-bottom: 0;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
ul {
|
||||
max-width: $cols8;
|
||||
}
|
||||
|
||||
section {
|
||||
ul {
|
||||
max-width: $cols8;
|
||||
}
|
||||
|
||||
.nav-spacer {
|
||||
display: block;
|
||||
visibility: hidden;
|
||||
margin-top: -50px; // height of nav bar
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
&.indented {
|
||||
padding-left: $cols1 + (20px / $em);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: $ui-blue-10percent;
|
||||
}
|
||||
|
||||
.inner {
|
||||
max-width: $cols12;
|
||||
}
|
||||
}
|
||||
24
src/components/extension-landing/extension-requirements.jsx
Normal file
24
src/components/extension-landing/extension-requirements.jsx
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
const PropTypes = require('prop-types');
|
||||
const FormattedMessage = require('react-intl').FormattedMessage;
|
||||
const React = require('react');
|
||||
|
||||
const FlexRow = require('../../components/flex-row/flex-row.jsx');
|
||||
|
||||
require('./extension-landing.scss');
|
||||
|
||||
const ExtensionRequirements = props => (
|
||||
<FlexRow className="column extension-requirements-container">
|
||||
<span className="requirements-header">
|
||||
<FormattedMessage id="extensionHeader.requirements" />
|
||||
</span>
|
||||
<FlexRow className="extension-requirements">
|
||||
{props.children}
|
||||
</FlexRow>
|
||||
</FlexRow>
|
||||
);
|
||||
|
||||
ExtensionRequirements.propTypes = {
|
||||
children: PropTypes.node
|
||||
};
|
||||
|
||||
module.exports = ExtensionRequirements;
|
||||
22
src/components/extension-landing/extension-section.jsx
Normal file
22
src/components/extension-landing/extension-section.jsx
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
const PropTypes = require('prop-types');
|
||||
const classNames = require('classnames');
|
||||
const React = require('react');
|
||||
|
||||
const FlexRow = require('../../components/flex-row/flex-row.jsx');
|
||||
|
||||
require('./extension-landing.scss');
|
||||
|
||||
const ExtensionSection = props => (
|
||||
<div className={classNames('extension-section', props.className)}>
|
||||
<FlexRow className="inner column">
|
||||
{props.children}
|
||||
</FlexRow>
|
||||
</div>
|
||||
);
|
||||
|
||||
ExtensionSection.propTypes = {
|
||||
children: PropTypes.node,
|
||||
className: PropTypes.string
|
||||
};
|
||||
|
||||
module.exports = ExtensionSection;
|
||||
69
src/components/extension-landing/install-scratch-link.jsx
Normal file
69
src/components/extension-landing/install-scratch-link.jsx
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
const PropTypes = require('prop-types');
|
||||
const FormattedMessage = require('react-intl').FormattedMessage;
|
||||
const React = require('react');
|
||||
|
||||
const OS_ENUM = require('./os-enum.js');
|
||||
const FlexRow = require('../../components/flex-row/flex-row.jsx');
|
||||
const Steps = require('../../components/steps/steps.jsx');
|
||||
const Step = require('../../components/steps/step.jsx');
|
||||
|
||||
require('./extension-landing.scss');
|
||||
|
||||
const InstallScratchLink = ({
|
||||
currentOS
|
||||
}) => (
|
||||
<div className="blue install-scratch-link">
|
||||
<FlexRow className="inner column">
|
||||
<h2><FormattedMessage id="installScratchLink.installHeaderTitle" /></h2>
|
||||
<Steps>
|
||||
<div className="step">
|
||||
<Step
|
||||
compact
|
||||
number={1}
|
||||
>
|
||||
<span className="step-description">
|
||||
<FormattedMessage id="installScratchLink.downloadAndInstall" />
|
||||
</span>
|
||||
<a
|
||||
className="step-image badge"
|
||||
href={`https://downloads.scratch.mit.edu/link/${
|
||||
currentOS === OS_ENUM.WINDOWS ? 'windows' : 'mac'
|
||||
}.zip`}
|
||||
>
|
||||
<button className="button download-button">
|
||||
{currentOS === OS_ENUM.WINDOWS ?
|
||||
<FormattedMessage id="installScratchLink.windowsDownload" /> :
|
||||
<FormattedMessage id="installScratchLink.macosDownload" />
|
||||
}
|
||||
<img src="/svgs/extensions/download-white.svg" />
|
||||
</button>
|
||||
</a>
|
||||
</Step>
|
||||
|
||||
</div>
|
||||
<Step
|
||||
compact
|
||||
number={2}
|
||||
>
|
||||
<span className="step-description">
|
||||
<FormattedMessage id="installScratchLink.startScratchLink" />
|
||||
</span>
|
||||
<div className="step-image">
|
||||
<img
|
||||
className="screenshot"
|
||||
src={`/images/scratchlink/${
|
||||
currentOS === OS_ENUM.WINDOWS ? 'windows' : 'mac'
|
||||
}-toolbar.png`}
|
||||
/>
|
||||
</div>
|
||||
</Step>
|
||||
</Steps>
|
||||
</FlexRow>
|
||||
</div>
|
||||
);
|
||||
|
||||
InstallScratchLink.propTypes = {
|
||||
currentOS: PropTypes.string
|
||||
};
|
||||
|
||||
module.exports = InstallScratchLink;
|
||||
6
src/components/extension-landing/os-enum.js
Normal file
6
src/components/extension-landing/os-enum.js
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
const OS_ENUM = {
|
||||
WINDOWS: 'Windows',
|
||||
MACOS: 'macOS'
|
||||
};
|
||||
|
||||
module.exports = OS_ENUM;
|
||||
27
src/components/extension-landing/project-card.jsx
Normal file
27
src/components/extension-landing/project-card.jsx
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
const PropTypes = require('prop-types');
|
||||
const React = require('react');
|
||||
|
||||
const ProjectCard = props => (
|
||||
<a
|
||||
className="project-card"
|
||||
href={props.cardUrl}
|
||||
target="_blank"
|
||||
>
|
||||
<div className="project-card-image">
|
||||
<img src={props.imageSrc} />
|
||||
</div>
|
||||
<div className="project-card-info">
|
||||
<h4>{props.title}</h4>
|
||||
<p>{props.description}</p>
|
||||
</div>
|
||||
</a>
|
||||
);
|
||||
|
||||
ProjectCard.propTypes = {
|
||||
cardUrl: PropTypes.string,
|
||||
description: PropTypes.string,
|
||||
imageSrc: PropTypes.string,
|
||||
title: PropTypes.string
|
||||
};
|
||||
|
||||
module.exports = ProjectCard;
|
||||
20
src/components/extension-landing/tip-box.jsx
Normal file
20
src/components/extension-landing/tip-box.jsx
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
const PropTypes = require('prop-types');
|
||||
const React = require('react');
|
||||
const FlexRow = require('../../components/flex-row/flex-row.jsx');
|
||||
|
||||
|
||||
const TipBox = props => (
|
||||
<div className="tip-box">
|
||||
<h4>{props.title}</h4>
|
||||
<FlexRow className="column tip-content">
|
||||
{props.children}
|
||||
</FlexRow>
|
||||
</div>
|
||||
);
|
||||
|
||||
TipBox.propTypes = {
|
||||
children: PropTypes.node,
|
||||
title: PropTypes.string
|
||||
};
|
||||
|
||||
module.exports = TipBox;
|
||||
|
|
@ -8,12 +8,9 @@ const React = require('react');
|
|||
const FlexRow = require('../../components/flex-row/flex-row.jsx');
|
||||
const Button = require('../../components/forms/button.jsx');
|
||||
|
||||
require('./os-chooser.scss');
|
||||
const OS_ENUM = require('../../components/extension-landing/os-enum.js');
|
||||
|
||||
const OS_ENUM = {
|
||||
WINDOWS: 'Windows',
|
||||
MACOS: 'macOS'
|
||||
};
|
||||
require('./os-chooser.scss');
|
||||
|
||||
const OSChooser = props => (
|
||||
<div className="os-chooser">
|
||||
|
|
|
|||
30
src/components/steps/step.jsx
Normal file
30
src/components/steps/step.jsx
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
const PropTypes = require('prop-types');
|
||||
const React = require('react');
|
||||
|
||||
const FlexRow = require('../../components/flex-row/flex-row.jsx');
|
||||
|
||||
require('./steps.scss');
|
||||
|
||||
const Step = props => (
|
||||
<div className="step">
|
||||
{(props.compact || props.number) &&
|
||||
<FlexRow className="step-number-row">
|
||||
{props.number && <div className="step-number">{props.number}</div>}
|
||||
{props.compact && <FlexRow className="step-content">{props.children}</FlexRow>}
|
||||
</FlexRow>
|
||||
}
|
||||
{!props.compact &&
|
||||
<div className="step-content">
|
||||
{props.children}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
);
|
||||
|
||||
Step.propTypes = {
|
||||
children: PropTypes.node,
|
||||
compact: PropTypes.bool,
|
||||
number: PropTypes.number
|
||||
};
|
||||
|
||||
module.exports = Step;
|
||||
21
src/components/steps/steps.jsx
Normal file
21
src/components/steps/steps.jsx
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
const PropTypes = require('prop-types');
|
||||
const React = require('react');
|
||||
const classNames = require('classnames');
|
||||
|
||||
const FlexRow = require('../../components/flex-row/flex-row.jsx');
|
||||
|
||||
require('./steps.scss');
|
||||
|
||||
const Steps = props => (
|
||||
<FlexRow className={classNames('steps', props.className)}>
|
||||
{/* TODO: Should this component do something with automatically numbering individual steps? */}
|
||||
{props.children}
|
||||
</FlexRow>
|
||||
);
|
||||
|
||||
Steps.propTypes = {
|
||||
children: PropTypes.node,
|
||||
className: PropTypes.string
|
||||
};
|
||||
|
||||
module.exports = Steps;
|
||||
59
src/components/steps/steps.scss
Normal file
59
src/components/steps/steps.scss
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
@import "../../colors";
|
||||
|
||||
.steps {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.step {
|
||||
flex-basis: 0;
|
||||
flex-grow: 1;
|
||||
|
||||
.step-number-row {
|
||||
padding-bottom: 1.5rem;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
|
||||
.step-content {
|
||||
text-align: left;
|
||||
align-items: flex-start;
|
||||
|
||||
.step-description {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.step-number {
|
||||
display: inline-flex;
|
||||
border-radius: 2rem;
|
||||
background-color: $ui-blue;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
color: $ui-white;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.step-content {
|
||||
display: flex;
|
||||
padding: 0 2rem;
|
||||
text-align: center;
|
||||
flex-flow: column;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
|
||||
.step-image {
|
||||
height: 10rem;
|
||||
|
||||
img {
|
||||
width: auto;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -103,8 +103,16 @@
|
|||
|
||||
"navigation.signOut": "Sign out",
|
||||
|
||||
"extensionHeader.requirements": "Requirements",
|
||||
|
||||
"oschooser.choose": "Choose your OS:",
|
||||
|
||||
"installScratchLink.installHeaderTitle": "Install Scratch Link",
|
||||
"installScratchLink.downloadAndInstall": "Download and install Scratch Link.",
|
||||
"installScratchLink.windowsDownload": "Download for Windows",
|
||||
"installScratchLink.macosDownload": "Download for macOS",
|
||||
"installScratchLink.startScratchLink": "Start Scratch Link and make sure it is running. It should appear in your toolbar.",
|
||||
|
||||
"parents.FaqAgeRangeA": "While Scratch is primarily designed for 8 to 16 year olds, it is also used by people of all ages, including younger children with their parents.",
|
||||
"parents.FaqAgeRangeQ": "What is the age range for Scratch?",
|
||||
"parents.FaqResourcesQ": "What resources are available for learning Scratch?",
|
||||
|
|
|
|||
|
|
@ -301,6 +301,13 @@
|
|||
"view": "wedo2/wedo2",
|
||||
"title": "LEGO WeDo 2.0"
|
||||
},
|
||||
{
|
||||
"name": "wedo-legacy",
|
||||
"pattern": "^/wedo-legacy/?$",
|
||||
"routeAlias": "/wedo-legacy/?$",
|
||||
"view": "wedo2-legacy/wedo2",
|
||||
"title": "LEGO WeDo"
|
||||
},
|
||||
{
|
||||
"name": "ev3",
|
||||
"pattern": "^/ev3/?$",
|
||||
|
|
|
|||
|
|
@ -1,10 +1,5 @@
|
|||
/*
|
||||
* TODO: Refactor this file and views/microbit/microbit.jsx
|
||||
* into something that can be used in both places (scratch-www#1982)
|
||||
*/
|
||||
|
||||
const bindAll = require('lodash.bindall');
|
||||
const injectIntl = require('react-intl').injectIntl;
|
||||
const intlShape = require('react-intl').intlShape;
|
||||
const FormattedMessage = require('react-intl').FormattedMessage;
|
||||
const React = require('react');
|
||||
|
||||
|
|
@ -13,39 +8,30 @@ const Page = require('../../components/page/www/page.jsx');
|
|||
const render = require('../../lib/render.jsx');
|
||||
|
||||
const FlexRow = require('../../components/flex-row/flex-row.jsx');
|
||||
|
||||
const OSChooser = require('../../components/os-chooser/os-chooser.jsx');
|
||||
|
||||
const ExtensionLanding = require('../../components/extension-landing/extension-landing.jsx');
|
||||
const ExtensionHeader = require('../../components/extension-landing/extension-header.jsx');
|
||||
const ExtensionRequirements = require('../../components/extension-landing/extension-requirements.jsx');
|
||||
const ExtensionSection = require('../../components/extension-landing/extension-section.jsx');
|
||||
const InstallScratchLink = require('../../components/extension-landing/install-scratch-link.jsx');
|
||||
const TipBox = require('../../components/extension-landing/tip-box.jsx');
|
||||
const ProjectCard = require('../../components/extension-landing/project-card.jsx');
|
||||
|
||||
const Steps = require('../../components/steps/steps.jsx');
|
||||
const Step = require('../../components/steps/step.jsx');
|
||||
|
||||
const OS_ENUM = require('../../components/extension-landing/os-enum.js');
|
||||
|
||||
require('../../components/extension-landing/extension-landing.scss');
|
||||
require('./ev3.scss');
|
||||
|
||||
class EV3 extends React.Component {
|
||||
constructor (props) {
|
||||
super(props);
|
||||
bindAll(this, [
|
||||
'onSetOS'
|
||||
]);
|
||||
|
||||
this.OS_ENUM = {
|
||||
WINDOWS: 'Windows',
|
||||
MACOS: 'macOS'
|
||||
};
|
||||
|
||||
this.state = {
|
||||
OS: this.OS_ENUM.WINDOWS
|
||||
};
|
||||
}
|
||||
|
||||
onSetOS (os) {
|
||||
this.setState({
|
||||
OS: os
|
||||
});
|
||||
}
|
||||
|
||||
class EV3 extends ExtensionLanding {
|
||||
render () {
|
||||
return (
|
||||
<div className="ev3">
|
||||
<div className="extension-header">
|
||||
<FlexRow className="inner">
|
||||
<FlexRow className="column extension-info">
|
||||
<div className="extension-landing ev3">
|
||||
<ExtensionHeader imageSrc="/images/ev3/ev3-illustration.png">
|
||||
<FlexRow className="column extension-copy">
|
||||
<h2><img src="/images/ev3/ev3.svg" />LEGO MINDSTORMS EV3</h2>
|
||||
<FormattedMessage
|
||||
|
|
@ -53,22 +39,17 @@ class EV3 extends React.Component {
|
|||
values={{
|
||||
ev3Link: (
|
||||
<a
|
||||
href="https://shop.lego.com/en-US/LEGO-MINDSTORMS-EV3-31313"
|
||||
href="https://education.lego.com/en-us/middle-school/intro/mindstorms-ev3"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
LEGO MINDSTORMS EV3
|
||||
LEGO MINDSTORMS Education EV3
|
||||
</a>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
<span />
|
||||
</FlexRow>
|
||||
<FlexRow className="column extension-requirements-container">
|
||||
<span className="requirements-header">
|
||||
<FormattedMessage id="ev3.requirements" />
|
||||
</span>
|
||||
<FlexRow className="extension-requirements">
|
||||
<ExtensionRequirements>
|
||||
<span>
|
||||
<img src="/svgs/extensions/windows.svg" />
|
||||
Windows 10+
|
||||
|
|
@ -85,92 +66,32 @@ class EV3 extends React.Component {
|
|||
<img src="/svgs/extensions/scratch-link.svg" />
|
||||
Scratch Link
|
||||
</span>
|
||||
</FlexRow>
|
||||
</FlexRow>
|
||||
</FlexRow>
|
||||
<div className="extension-image">
|
||||
<img src="/images/ev3/ev3-illustration.png" />
|
||||
</div>
|
||||
</FlexRow>
|
||||
</div>
|
||||
</ExtensionRequirements>
|
||||
</ExtensionHeader>
|
||||
<OSChooser
|
||||
currentOS={this.state.OS}
|
||||
handleSetOS={this.onSetOS}
|
||||
/>
|
||||
<div className="blue install-scratch-link">
|
||||
<FlexRow className="inner column">
|
||||
<h2><FormattedMessage id="ev3.installScratchLink" /></h2>
|
||||
<FlexRow className="steps">
|
||||
<div className="step">
|
||||
<FlexRow className="step-number-row">
|
||||
<div className="step-number">1</div>
|
||||
<FlexRow className="step-content">
|
||||
<span className="step-description">
|
||||
<FormattedMessage id="ev3.installScratchLinkStep" />
|
||||
</span>
|
||||
<a
|
||||
className="step-image badge"
|
||||
href={`https://downloads.scratch.mit.edu/link/${
|
||||
this.state.OS === this.OS_ENUM.WINDOWS ? 'windows' : 'mac'
|
||||
}.zip`}
|
||||
>
|
||||
<button className="button download-button">
|
||||
{this.state.OS === this.OS_ENUM.WINDOWS ?
|
||||
<FormattedMessage id="ev3.windowsDownload" /> :
|
||||
<FormattedMessage id="ev3.macosDownload" />
|
||||
}
|
||||
<img src="/svgs/extensions/download-white.svg" />
|
||||
</button>
|
||||
</a>
|
||||
</FlexRow>
|
||||
</FlexRow>
|
||||
|
||||
</div>
|
||||
<div className="step">
|
||||
<FlexRow className="step-number-row">
|
||||
<div className="step-number">2</div>
|
||||
<FlexRow className="step-content">
|
||||
<span className="step-description">
|
||||
<FormattedMessage id="ev3.startScratchLink" />
|
||||
</span>
|
||||
<div className="step-image">
|
||||
<img
|
||||
className="screenshot"
|
||||
src={`/images/scratchlink/${
|
||||
this.state.OS === this.OS_ENUM.WINDOWS ? 'windows' : 'mac'
|
||||
}-toolbar.png`}
|
||||
<InstallScratchLink
|
||||
currentOS={this.state.OS}
|
||||
/>
|
||||
</div>
|
||||
</FlexRow>
|
||||
</FlexRow>
|
||||
</div>
|
||||
</FlexRow>
|
||||
</FlexRow>
|
||||
</div>
|
||||
<div className="getting-started">
|
||||
<FlexRow className="inner column">
|
||||
<ExtensionSection className="getting-started">
|
||||
<h2><FormattedMessage id="ev3.gettingStarted" /></h2>
|
||||
<FlexRow className="column connecting-ev3">
|
||||
<FlexRow className="column getting-started-section">
|
||||
<h3><FormattedMessage id="ev3.connectingEV3" /></h3>
|
||||
<FlexRow className="steps">
|
||||
<div className="step">
|
||||
<FlexRow className="step-number-row">
|
||||
<div className="step-number">1</div>
|
||||
</FlexRow>
|
||||
<div className="step-content">
|
||||
<Steps>
|
||||
<Step number={1}>
|
||||
<div className="step-image">
|
||||
<img src="/images/ev3/ev3-connect-1.png" />
|
||||
</div>
|
||||
<p><FormattedMessage id="ev3.turnOnEV3" /></p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="step">
|
||||
<FlexRow className="step-number-row">
|
||||
<div className="step-number">2</div>
|
||||
</FlexRow>
|
||||
<div className="step-content">
|
||||
</Step>
|
||||
<Step number={2}>
|
||||
<div className="step-image">
|
||||
<img src="/images/ev3/ev3-connect-2.png" />
|
||||
<img
|
||||
className="screenshot"
|
||||
src="/images/ev3/ev3-connect-2.png"
|
||||
/>
|
||||
</div>
|
||||
<p>
|
||||
<FormattedMessage
|
||||
|
|
@ -188,153 +109,119 @@ class EV3 extends React.Component {
|
|||
}}
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="step">
|
||||
<FlexRow className="step-number-row">
|
||||
<div className="step-number">3</div>
|
||||
</FlexRow>
|
||||
<div className="step-content">
|
||||
</Step>
|
||||
<Step number={3}>
|
||||
<div className="step-image">
|
||||
<img src="/images/ev3/ev3-connect-3.png" />
|
||||
<img
|
||||
className="screenshot"
|
||||
src="/images/ev3/ev3-connect-3.png"
|
||||
/>
|
||||
</div>
|
||||
<p><FormattedMessage id="ev3.addExtension" /></p>
|
||||
</div>
|
||||
</div>
|
||||
</FlexRow>
|
||||
<div className="tip-box">
|
||||
<h4><FormattedMessage id="ev3.firstTimeConnecting" /></h4>
|
||||
<FlexRow className="column tip-content">
|
||||
</Step>
|
||||
</Steps>
|
||||
<TipBox title={this.props.intl.formatMessage({id: 'ev3.firstTimeConnecting'})}>
|
||||
<p><FormattedMessage id="ev3.pairingDescription" /></p>
|
||||
<FlexRow className="steps">
|
||||
<div className="step">
|
||||
<div className="step-content">
|
||||
<Steps>
|
||||
<Step>
|
||||
<div className="step-image">
|
||||
<img src="/images/ev3/ev3-accept-connection.png" />
|
||||
</div>
|
||||
<p><FormattedMessage id="ev3.acceptConnection" /></p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="step">
|
||||
<div className="step-content">
|
||||
</Step>
|
||||
<Step>
|
||||
<div className="step-image">
|
||||
<img src="/images/ev3/ev3-pin.png" />
|
||||
</div>
|
||||
<p><FormattedMessage id="ev3.acceptPasscode" /></p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="step">
|
||||
<div className="step-content">
|
||||
|
||||
</Step>
|
||||
<Step>
|
||||
<div className="step-image">
|
||||
<img
|
||||
className="screenshot"
|
||||
src={`/images/ev3/${
|
||||
this.state.OS === this.OS_ENUM.WINDOWS ?
|
||||
this.state.OS === OS_ENUM.WINDOWS ?
|
||||
'win-device-ready.png' :
|
||||
'mac-enter-passcode.png'
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
<p>
|
||||
{this.state.OS === this.OS_ENUM.WINDOWS ?
|
||||
{this.state.OS === OS_ENUM.WINDOWS ?
|
||||
<FormattedMessage id="ev3.windowsFinalizePairing" /> :
|
||||
<FormattedMessage id="ev3.macosFinalizePairing" />
|
||||
}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Step>
|
||||
</Steps>
|
||||
</TipBox>
|
||||
</FlexRow>
|
||||
</FlexRow>
|
||||
</div>
|
||||
</FlexRow>
|
||||
</FlexRow>
|
||||
</div>
|
||||
<div className="blue things-to-try">
|
||||
<FlexRow className="inner column">
|
||||
</ExtensionSection>
|
||||
<ExtensionSection className="blue things-to-try">
|
||||
<h2><FormattedMessage id="ev3.thingsToTry" /></h2>
|
||||
<h3>Make a motor move</h3>
|
||||
<FlexRow className="steps">
|
||||
<div className="step">
|
||||
<FlexRow className="step-number-row">
|
||||
<div className="step-number">1</div>
|
||||
<FlexRow className="step-content">
|
||||
<h3><FormattedMessage id="ev3.makeMotorMove" /></h3>
|
||||
<Steps>
|
||||
<Step
|
||||
compact
|
||||
number={1}
|
||||
>
|
||||
<span className="step-description">
|
||||
Plug a motor into <strong>port A</strong> on the EV3 hub
|
||||
<FormattedMessage
|
||||
id="ev3.plugMotorIn"
|
||||
values={{
|
||||
portA: (
|
||||
<strong><FormattedMessage id="ev3.portA" /></strong>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
</span>
|
||||
<div className="step-image">
|
||||
<img src="/images/ev3/ev3-motor-port-a.png" />
|
||||
</div>
|
||||
</FlexRow>
|
||||
</FlexRow>
|
||||
</div>
|
||||
<div className="step">
|
||||
<FlexRow className="step-number-row">
|
||||
<div className="step-number">2</div>
|
||||
<FlexRow className="step-content">
|
||||
</Step>
|
||||
<Step
|
||||
compact
|
||||
number={2}
|
||||
>
|
||||
<span className="step-description">
|
||||
Find the <strong>“motor A turn this way”</strong> block
|
||||
and click on it.
|
||||
<FormattedMessage
|
||||
id="ev3.clickMotorBlock"
|
||||
values={{
|
||||
motorBlockText: (
|
||||
<strong><FormattedMessage id="ev3.motorBlockText" /></strong>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
</span>
|
||||
<div className="step-image">
|
||||
<img src="/images/ev3/motor-turn-block.png" />
|
||||
</div>
|
||||
</FlexRow>
|
||||
</FlexRow>
|
||||
</div>
|
||||
</FlexRow>
|
||||
<div className="section-separator" />
|
||||
<h3>Starter Projects</h3>
|
||||
<FlexRow className="steps">
|
||||
<a
|
||||
download
|
||||
className="project-card"
|
||||
href="https://downloads.scratch.mit.edu/ev3/ev3-wave-hello.sb3"
|
||||
>
|
||||
<div className="project-card-image">
|
||||
<img src="/images/ev3/starter-wave-hello.png" />
|
||||
</div>
|
||||
<div className="project-card-info">
|
||||
<h4>Wave Hello</h4>
|
||||
<p>
|
||||
Make a puppet robot and have a friendly chat.
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
<a
|
||||
download
|
||||
className="project-card"
|
||||
href="https://downloads.scratch.mit.edu/ev3/ev3-distance-instrument.sb3"
|
||||
>
|
||||
<div className="project-card-image">
|
||||
<img src="/images/ev3/starter-distance-instrument.png" />
|
||||
</div>
|
||||
<div className="project-card-info">
|
||||
<h4>Distance Instrument</h4>
|
||||
<p>
|
||||
Move your body in front of the sensor to make music.
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
<a
|
||||
download
|
||||
className="project-card"
|
||||
href="https://downloads.scratch.mit.edu/ev3/ev3-space-tacos.sb3"
|
||||
>
|
||||
<div className="project-card-image">
|
||||
<img src="/images/ev3/starter-flying-game.png" />
|
||||
</div>
|
||||
<div className="project-card-info">
|
||||
<h4>Space Tacos</h4>
|
||||
<p>
|
||||
Build your own controller to catch tacos in space.
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
</FlexRow>
|
||||
</FlexRow>
|
||||
</div>
|
||||
<div className="faq inner">
|
||||
</Step>
|
||||
</Steps>
|
||||
<hr />
|
||||
<h3><FormattedMessage id="ev3.starterProjects" /></h3>
|
||||
<Steps>
|
||||
<ProjectCard
|
||||
cardUrl="https://beta.scratch.mit.edu/#239075992"
|
||||
description={this.props.intl.formatMessage({id: 'ev3.waveHelloDescription'})}
|
||||
imageSrc="/images/ev3/starter-wave-hello.png"
|
||||
title={this.props.intl.formatMessage({id: 'ev3.waveHelloTitle'})}
|
||||
/>
|
||||
<ProjectCard
|
||||
cardUrl="https://beta.scratch.mit.edu/#239076020"
|
||||
description={this.props.intl.formatMessage({id: 'ev3.distanceInstrumentDescription'})}
|
||||
imageSrc="/images/ev3/starter-distance-instrument.png"
|
||||
title={this.props.intl.formatMessage({id: 'ev3.distanceInstrumentTitle'})}
|
||||
/>
|
||||
<ProjectCard
|
||||
cardUrl="https://beta.scratch.mit.edu/#239076044"
|
||||
description={this.props.intl.formatMessage({id: 'ev3.spaceTacosDescription'})}
|
||||
imageSrc="/images/ev3/starter-flying-game.png"
|
||||
title={this.props.intl.formatMessage({id: 'ev3.spaceTacosTitle'})}
|
||||
/>
|
||||
</Steps>
|
||||
</ExtensionSection>
|
||||
<ExtensionSection className="faq">
|
||||
<h2><FormattedMessage id="ev3.troubleshootingTitle" /></h2>
|
||||
<h3 className="faq-title"><FormattedMessage id="ev3.makeSurePairedTitle" /></h3>
|
||||
<p>
|
||||
|
|
@ -378,12 +265,16 @@ class EV3 extends React.Component {
|
|||
}}
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
</ExtensionSection>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
EV3.propTypes = {
|
||||
intl: intlShape.isRequired
|
||||
};
|
||||
|
||||
const WrappedEV3 = injectIntl(EV3);
|
||||
|
||||
render(<Page><WrappedEV3 /></Page>, document.getElementById('app'));
|
||||
|
|
|
|||
|
|
@ -1,313 +1,8 @@
|
|||
// TODO: Refactor this file and views/microbit/microbit.scss into something that can be used in both places (scratch-www#1982)
|
||||
|
||||
@import "../../colors";
|
||||
@import "../../frameless";
|
||||
|
||||
#view {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.ev3 {
|
||||
&>div {
|
||||
padding: 4rem 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
span {
|
||||
line-height: 1.7rem;
|
||||
}
|
||||
|
||||
.download {
|
||||
display: inline-block;
|
||||
|
||||
&::after {
|
||||
display: inline-block;
|
||||
margin-left: .5rem;
|
||||
background-image: url("/svgs/extensions/download.svg");
|
||||
background-repeat: no-repeat;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
vertical-align: text-top;
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
|
||||
.extension-header {
|
||||
background-color: $ui-aqua;
|
||||
background-color: $ui-orange;
|
||||
background-image: url("/images/ev3/ev3-pattern.svg");
|
||||
background-size: cover;
|
||||
color: $ui-white;
|
||||
|
||||
.inner {
|
||||
justify-content: space-between;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.extension-info {
|
||||
max-width: $cols7;
|
||||
align-items: flex-start;
|
||||
|
||||
.extension-copy {
|
||||
margin-bottom: 5rem;
|
||||
align-items: flex-start;
|
||||
|
||||
h2 {
|
||||
display: flex;
|
||||
margin-bottom: 2rem;
|
||||
color: $ui-white;
|
||||
}
|
||||
|
||||
h2 img {
|
||||
padding-right: .5rem;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
a {
|
||||
border-bottom: 1px solid $ui-white;
|
||||
color: $ui-white;
|
||||
}
|
||||
}
|
||||
|
||||
.extension-requirements-container {
|
||||
font-weight: 500;
|
||||
align-items: flex-start;
|
||||
|
||||
.requirements-header {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.extension-requirements {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.extension-requirements span {
|
||||
display: flex;
|
||||
margin-right: 1rem;
|
||||
font-size: 15px; // TODO: change to rem later
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.extension-requirements span img {
|
||||
padding-right: .5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.extension-image {
|
||||
width: 100%;
|
||||
max-width: $cols5;
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.os-chooser {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.install-scratch-link,
|
||||
.getting-started,
|
||||
.faq {
|
||||
.inner {
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
.install-scratch-link {
|
||||
padding: 2rem 0;
|
||||
|
||||
.step-image.badge {
|
||||
height: initial;
|
||||
}
|
||||
|
||||
.download-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
margin-left: .5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.screenshot {
|
||||
border-radius: .5rem;
|
||||
}
|
||||
|
||||
.getting-started {
|
||||
.connecting-ev3 {
|
||||
width: 100%;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.tip-box {
|
||||
margin-top: 4rem;
|
||||
border: 1px solid $ui-blue-25percent;
|
||||
border-radius: 1rem;
|
||||
background-color: $ui-blue-10percent;
|
||||
padding: 2rem 3rem;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
.tip-content {
|
||||
align-items: flex-start;
|
||||
|
||||
p {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.things-to-try {
|
||||
.project-card {
|
||||
margin: 0 1.5rem;
|
||||
border: 1px solid $ui-border;
|
||||
border-radius: .5rem;
|
||||
background-color: $ui-white;
|
||||
overflow: hidden;
|
||||
flex-basis: 0;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.project-card-image {
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.project-card-info {
|
||||
padding: 1rem;
|
||||
|
||||
p {
|
||||
margin: .2rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
.section-separator {
|
||||
margin: 4rem 0;
|
||||
border-top: 1px solid $ui-border;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.faq {
|
||||
p {
|
||||
margin-bottom: 1.25rem;
|
||||
margin-left: 0;
|
||||
max-width: $cols8;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.faq-title {
|
||||
margin-bottom: 1rem;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
ul {
|
||||
max-width: $cols8;
|
||||
}
|
||||
|
||||
section {
|
||||
ul {
|
||||
max-width: $cols8;
|
||||
}
|
||||
|
||||
.nav-spacer {
|
||||
display: block;
|
||||
visibility: hidden;
|
||||
margin-top: -50px; // height of nav bar
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
&.indented {
|
||||
padding-left: $cols1 + (20px / $em);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: $ui-blue-10percent;
|
||||
}
|
||||
|
||||
.inner {
|
||||
max-width: $cols12;
|
||||
}
|
||||
}
|
||||
|
||||
.steps {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.step {
|
||||
flex-basis: 0;
|
||||
flex-grow: 1;
|
||||
|
||||
.step-number-row {
|
||||
padding-bottom: 1.5rem;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
|
||||
.step-content {
|
||||
text-align: left;
|
||||
align-items: flex-start;
|
||||
|
||||
.step-description {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.step-number {
|
||||
display: inline-flex;
|
||||
border-radius: 2rem;
|
||||
background-color: $ui-blue;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
color: $ui-white;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.step-content {
|
||||
display: flex;
|
||||
padding: 0 2rem;
|
||||
text-align: center;
|
||||
flex-flow: column;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
|
||||
.step-image {
|
||||
height: 10rem;
|
||||
|
||||
img {
|
||||
width: auto;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,5 @@
|
|||
{
|
||||
"ev3.headerText": "{ev3Link} is an invention kit with motors and sensors you can use to build interactive robotic creations. Connecting it to Scratch expands the possibilities: build a robotic puppet and tell stories, make your own musical instruments and game controllers, or whatever else you can imagine.",
|
||||
"ev3.requirements": "Requirements",
|
||||
"ev3.installScratchLink": "Install Scratch Link",
|
||||
"ev3.installScratchLinkStep": "Download and install Scratch Link.",
|
||||
"ev3.windowsDownload": "Download for Windows",
|
||||
"ev3.macosDownload": "Download for macOS",
|
||||
"ev3.startScratchLink": "Start Scratch Link and make sure it is running. It should appear in your toolbar.",
|
||||
"ev3.gettingStarted": "Getting Started",
|
||||
"ev3.connectingEV3": "Connecting EV3 to Scratch",
|
||||
"ev3.turnOnEV3": "Turn on your EV3 by holding down the center button.",
|
||||
|
|
@ -18,6 +12,18 @@
|
|||
"ev3.windowsFinalizePairing": "Wait for your device to be ready.",
|
||||
"ev3.macosFinalizePairing": "Enter the passcode on your computer.",
|
||||
"ev3.thingsToTry": "Things to Try",
|
||||
"ev3.makeMotorMove": "Make a motor move",
|
||||
"ev3.plugMotorIn": "Plug a motor into {portA} on the EV3 hub",
|
||||
"ev3.portA": "port A",
|
||||
"ev3.clickMotorBlock": "Find the {motorBlockText} block and click on it.",
|
||||
"ev3.motorBlockText": "\"motor A turn this way\"",
|
||||
"ev3.starterProjects": "Starter Projects",
|
||||
"ev3.waveHelloTitle": "Wave Hello",
|
||||
"ev3.waveHelloDescription": "Make a puppet robot and have a friendly chat.",
|
||||
"ev3.distanceInstrumentTitle": "Distance Instrument",
|
||||
"ev3.distanceInstrumentDescription": "Move your body in front of the sensor to make music.",
|
||||
"ev3.spaceTacosTitle": "Space Tacos",
|
||||
"ev3.spaceTacosDescription": "Build your own controller to catch tacos in space.",
|
||||
"ev3.troubleshootingTitle": "Troubleshooting",
|
||||
"ev3.makeSurePairedTitle": "Make sure your computer is paired with your EV3",
|
||||
"ev3.makeSurePairedText": "Your computer needs to be paired with your EV3 before it can connect to Scratch. We try to do this automatically the first time you add the EV3 extension, but if it isn't working you can try these {pairingInstructionLink}.",
|
||||
|
|
@ -27,6 +33,6 @@
|
|||
"ev3.otherComputerConnectedTitle": "Make sure no other computer is connected to your EV3",
|
||||
"ev3.otherComputerConnectedText": "Only one computer can be connected to an EV3 at a time. If you have another computer connected to your EV3, disconnect the EV3 or close Scratch on that computer and try again.",
|
||||
"ev3.updateFirmwareTitle": "Try updating your EV3 firmware",
|
||||
"ev3.updateFirmwareText": "We recommend updating to EV3 firmware version 1.10E or above. See {firmwareUpdateLink}. We recommend following the instructions for \"Manual Firmware Update\".",
|
||||
"ev3.updateFirmwareText": "We recommend updating to EV3 firmware version 1.10E or above. See {firmwareUpdateLink}.",
|
||||
"ev3.firmwareUpdateText": "firmware update instructions from LEGO"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,5 @@
|
|||
{
|
||||
"microbit.headerText": "{microbitLink} is a tiny circuit board designed to help kids learn to code and create with technology. It has many features including an LED display, buttons, and a motion sensor. You can connect it to Scratch and build creative projects that combine the magic of the digital and physical worlds.",
|
||||
"microbit.requirements": "Requirements",
|
||||
"microbit.installScratchLink": "Install Scratch Link",
|
||||
"microbit.installScratchLinkStep": "Download and install Scratch Link.",
|
||||
"microbit.windowsDownload": "Download for Windows",
|
||||
"microbit.macosDownload": "Download for macOS",
|
||||
"microbit.startScratchLink": "Start Scratch Link and make sure it is running. It should appear in your toolbar.",
|
||||
"microbit.gettingStarted": "Getting Started",
|
||||
"microbit.installMicrobitHex": "Install Scratch micro:bit HEX",
|
||||
"microbit.connectUSB": "Connect a micro:bit to your computer with a USB cable",
|
||||
|
|
|
|||
|
|
@ -1,10 +1,5 @@
|
|||
/*
|
||||
* TODO: Refactor this file and views/ev3/ev3.jsx
|
||||
* into something that can be used in both places (scratch-www#1982)
|
||||
*/
|
||||
|
||||
const bindAll = require('lodash.bindall');
|
||||
const injectIntl = require('react-intl').injectIntl;
|
||||
const intlShape = require('react-intl').intlShape;
|
||||
const FormattedMessage = require('react-intl').FormattedMessage;
|
||||
const React = require('react');
|
||||
|
||||
|
|
@ -13,39 +8,30 @@ const Page = require('../../components/page/www/page.jsx');
|
|||
const render = require('../../lib/render.jsx');
|
||||
|
||||
const FlexRow = require('../../components/flex-row/flex-row.jsx');
|
||||
|
||||
const OSChooser = require('../../components/os-chooser/os-chooser.jsx');
|
||||
|
||||
const ExtensionLanding = require('../../components/extension-landing/extension-landing.jsx');
|
||||
const ExtensionHeader = require('../../components/extension-landing/extension-header.jsx');
|
||||
const ExtensionRequirements = require('../../components/extension-landing/extension-requirements.jsx');
|
||||
const ExtensionSection = require('../../components/extension-landing/extension-section.jsx');
|
||||
const InstallScratchLink = require('../../components/extension-landing/install-scratch-link.jsx');
|
||||
const ProjectCard = require('../../components/extension-landing/project-card.jsx');
|
||||
|
||||
const Steps = require('../../components/steps/steps.jsx');
|
||||
const Step = require('../../components/steps/step.jsx');
|
||||
|
||||
const OS_ENUM = require('../../components/extension-landing/os-enum.js');
|
||||
|
||||
require('../../components/extension-landing/extension-landing.scss');
|
||||
require('./microbit.scss');
|
||||
|
||||
class MicroBit extends React.Component {
|
||||
constructor (props) {
|
||||
super(props);
|
||||
bindAll(this, [
|
||||
'onSetOS'
|
||||
]);
|
||||
|
||||
this.OS_ENUM = {
|
||||
WINDOWS: 'Windows',
|
||||
MACOS: 'macOS'
|
||||
};
|
||||
|
||||
this.state = {
|
||||
OS: this.OS_ENUM.WINDOWS
|
||||
};
|
||||
}
|
||||
|
||||
onSetOS (os) {
|
||||
this.setState({
|
||||
OS: os
|
||||
});
|
||||
}
|
||||
class MicroBit extends ExtensionLanding {
|
||||
|
||||
render () {
|
||||
return (
|
||||
<div className="microbit">
|
||||
<div className="extension-header">
|
||||
<FlexRow className="inner">
|
||||
<FlexRow className="column extension-info">
|
||||
<div className="extension-landing microbit">
|
||||
<ExtensionHeader imageSrc="/images/microbit/microbit-heart.png">
|
||||
<FlexRow className="column extension-copy">
|
||||
<h2><img src="/images/microbit/microbit.svg" />micro:bit</h2>
|
||||
<FormattedMessage
|
||||
|
|
@ -63,11 +49,7 @@ class MicroBit extends React.Component {
|
|||
}}
|
||||
/>
|
||||
</FlexRow>
|
||||
<FlexRow className="column extension-requirements-container">
|
||||
<span className="requirements-header">
|
||||
<FormattedMessage id="microbit.requirements" />
|
||||
</span>
|
||||
<FlexRow className="extension-requirements">
|
||||
<ExtensionRequirements>
|
||||
<span>
|
||||
<img src="/svgs/extensions/windows.svg" />
|
||||
Windows 10+
|
||||
|
|
@ -84,92 +66,29 @@ class MicroBit extends React.Component {
|
|||
<img src="/svgs/extensions/scratch-link.svg" />
|
||||
Scratch Link
|
||||
</span>
|
||||
</FlexRow>
|
||||
</FlexRow>
|
||||
</FlexRow>
|
||||
<div className="extension-image">
|
||||
<img src="/images/microbit/microbit-heart.png" />
|
||||
</div>
|
||||
</FlexRow>
|
||||
</div>
|
||||
</ExtensionRequirements>
|
||||
</ExtensionHeader>
|
||||
<OSChooser
|
||||
currentOS={this.state.OS}
|
||||
handleSetOS={this.onSetOS}
|
||||
/>
|
||||
<div className="blue install-scratch-link">
|
||||
<FlexRow className="inner column">
|
||||
<h2><FormattedMessage id="microbit.installScratchLink" /></h2>
|
||||
<FlexRow className="steps">
|
||||
<div className="step">
|
||||
<FlexRow className="step-number-row">
|
||||
<div className="step-number">1</div>
|
||||
<FlexRow className="step-content">
|
||||
<span className="step-description">
|
||||
<FormattedMessage id="microbit.installScratchLinkStep" />
|
||||
</span>
|
||||
<a
|
||||
className="step-image badge"
|
||||
href={`https://downloads.scratch.mit.edu/link/${
|
||||
this.state.OS === this.OS_ENUM.WINDOWS ? 'windows' : 'mac'
|
||||
}.zip`}
|
||||
>
|
||||
<button className="button download-button">
|
||||
{this.state.OS === this.OS_ENUM.WINDOWS ?
|
||||
<FormattedMessage id="microbit.windowsDownload" /> :
|
||||
<FormattedMessage id="microbit.macosDownload" />
|
||||
}
|
||||
<img src="/svgs/extensions/download-white.svg" />
|
||||
</button>
|
||||
</a>
|
||||
</FlexRow>
|
||||
</FlexRow>
|
||||
|
||||
</div>
|
||||
<div className="step">
|
||||
<FlexRow className="step-number-row">
|
||||
<div className="step-number">2</div>
|
||||
<FlexRow className="step-content">
|
||||
<span className="step-description">
|
||||
<FormattedMessage id="microbit.startScratchLink" />
|
||||
</span>
|
||||
<div className="step-image">
|
||||
<img
|
||||
className="screenshot"
|
||||
src={`/images/scratchlink/${
|
||||
this.state.OS === this.OS_ENUM.WINDOWS ? 'windows' : 'mac'
|
||||
}-toolbar.png`}
|
||||
<InstallScratchLink
|
||||
currentOS={this.state.OS}
|
||||
/>
|
||||
</div>
|
||||
</FlexRow>
|
||||
</FlexRow>
|
||||
</div>
|
||||
</FlexRow>
|
||||
</FlexRow>
|
||||
</div>
|
||||
<div className="getting-started">
|
||||
<FlexRow className="inner column">
|
||||
<ExtensionSection className="getting-started">
|
||||
<h2><FormattedMessage id="microbit.gettingStarted" /></h2>
|
||||
<FlexRow className="column install-hex">
|
||||
<FlexRow className="column getting-started-section">
|
||||
<h3><FormattedMessage id="microbit.installMicrobitHex" /></h3>
|
||||
<FlexRow className="steps">
|
||||
<div className="step">
|
||||
<FlexRow className="step-number-row">
|
||||
<div className="step-number">1</div>
|
||||
</FlexRow>
|
||||
<div className="step-content">
|
||||
<Steps>
|
||||
<Step number={1}>
|
||||
<div className="step-image">
|
||||
<img src="/images/microbit/mbit-usb.png" />
|
||||
</div>
|
||||
<p>
|
||||
<FormattedMessage id="microbit.connectUSB" />
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="step">
|
||||
<FlexRow className="step-number-row">
|
||||
<div className="step-number">2</div>
|
||||
</FlexRow>
|
||||
<div className="step-content">
|
||||
</Step>
|
||||
<Step number={2}>
|
||||
<div className="step-image">
|
||||
<img src="/images/microbit/mbit-hex-download.png" />
|
||||
</div>
|
||||
|
|
@ -180,49 +99,37 @@ class MicroBit extends React.Component {
|
|||
>
|
||||
<FormattedMessage id="microbit.downloadHex" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="step">
|
||||
<FlexRow className="step-number-row">
|
||||
<div className="step-number">3</div>
|
||||
</FlexRow>
|
||||
<div className="step-content">
|
||||
</Step>
|
||||
<Step number={3}>
|
||||
<div className="step-image">
|
||||
<img
|
||||
src={`/images/microbit/${
|
||||
this.state.OS === this.OS_ENUM.WINDOWS ? 'win' : 'mac'
|
||||
this.state.OS === OS_ENUM.WINDOWS ? 'win' : 'mac'
|
||||
}-copy-hex.png`}
|
||||
/>
|
||||
</div>
|
||||
<p>
|
||||
<FormattedMessage id="microbit.dragDropHex" />
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Step>
|
||||
</Steps>
|
||||
</FlexRow>
|
||||
</FlexRow>
|
||||
<div className="section-separator" />
|
||||
<FlexRow className="column connecting">
|
||||
<hr />
|
||||
<FlexRow className="column getting-started-section">
|
||||
<h3><FormattedMessage id="microbit.connectingMicrobit" /></h3>
|
||||
<FlexRow className="steps">
|
||||
<div className="step">
|
||||
<FlexRow className="step-number-row">
|
||||
<div className="step-number">1</div>
|
||||
</FlexRow>
|
||||
<div className="step-content">
|
||||
<Steps>
|
||||
<Step number={1}>
|
||||
<div className="step-image">
|
||||
<img src="/images/microbit/mbit-connect-1.png" />
|
||||
</div>
|
||||
<p><FormattedMessage id="microbit.powerMicrobit" /></p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="step">
|
||||
<FlexRow className="step-number-row">
|
||||
<div className="step-number">2</div>
|
||||
</FlexRow>
|
||||
<div className="step-content">
|
||||
</Step>
|
||||
<Step number={2}>
|
||||
<div className="step-image">
|
||||
<img src="/images/microbit/mbit-connect-2.png" />
|
||||
<img
|
||||
className="screenshot"
|
||||
src="/images/microbit/mbit-connect-2.png"
|
||||
/>
|
||||
</div>
|
||||
<p>
|
||||
<FormattedMessage
|
||||
|
|
@ -240,32 +147,27 @@ class MicroBit extends React.Component {
|
|||
}}
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="step">
|
||||
<FlexRow className="step-number-row">
|
||||
<div className="step-number">3</div>
|
||||
</FlexRow>
|
||||
<div className="step-content">
|
||||
</Step>
|
||||
<Step number={3}>
|
||||
<div className="step-image">
|
||||
<img src="/images/microbit/mbit-connect-3.png" />
|
||||
<img
|
||||
className="screenshot"
|
||||
src="/images/microbit/mbit-connect-3.png"
|
||||
/>
|
||||
</div>
|
||||
<p><FormattedMessage id="microbit.addExtension" /></p>
|
||||
</div>
|
||||
</div>
|
||||
</Step>
|
||||
</Steps>
|
||||
</FlexRow>
|
||||
</FlexRow>
|
||||
</FlexRow>
|
||||
</div>
|
||||
<div className="blue things-to-try">
|
||||
<FlexRow className="inner column">
|
||||
</ExtensionSection>
|
||||
<ExtensionSection className="blue things-to-try">
|
||||
<h2><FormattedMessage id="microbit.thingsToTry" /></h2>
|
||||
<h3><FormattedMessage id="microbit.displayHelloTitle" /></h3>
|
||||
<FlexRow className="steps display-hello">
|
||||
<div className="step">
|
||||
<FlexRow className="step-number-row">
|
||||
<div className="step-number">1</div>
|
||||
<FlexRow className="step-content">
|
||||
<Steps className="display-hello">
|
||||
<Step
|
||||
compact
|
||||
number={1}
|
||||
>
|
||||
<span className="step-description">
|
||||
<FormattedMessage
|
||||
id="microbit.displayHelloBlock"
|
||||
|
|
@ -281,13 +183,11 @@ class MicroBit extends React.Component {
|
|||
<div className="step-image">
|
||||
<img src="/images/microbit/display-hello-block.png" />
|
||||
</div>
|
||||
</FlexRow>
|
||||
</FlexRow>
|
||||
</div>
|
||||
<div className="step">
|
||||
<FlexRow className="step-number-row">
|
||||
<div className="step-number">2</div>
|
||||
<FlexRow className="step-content">
|
||||
</Step>
|
||||
<Step
|
||||
compact
|
||||
number={2}
|
||||
>
|
||||
<span className="step-description">
|
||||
<FormattedMessage
|
||||
id="microbit.helloScroll"
|
||||
|
|
@ -296,67 +196,37 @@ class MicroBit extends React.Component {
|
|||
<strong><FormattedMessage id="microbit.helloText" /></strong>
|
||||
)
|
||||
}}
|
||||
/> </span>
|
||||
/>
|
||||
</span>
|
||||
<div className="step-image">
|
||||
<img src="/images/microbit/mbit-display-h.png" />
|
||||
</div>
|
||||
</FlexRow>
|
||||
</FlexRow>
|
||||
</div>
|
||||
</FlexRow>
|
||||
<div className="section-separator" />
|
||||
</Step>
|
||||
</Steps>
|
||||
<hr />
|
||||
<h3><FormattedMessage id="microbit.starterProjects" /></h3>
|
||||
<FlexRow className="steps">
|
||||
<a
|
||||
download
|
||||
className="project-card"
|
||||
href="https://downloads.scratch.mit.edu/microbit/microbit-heartbeat.sb3"
|
||||
>
|
||||
<div className="project-card-image">
|
||||
<img src="/images/microbit/starter-heart.png" />
|
||||
</div>
|
||||
<div className="project-card-info">
|
||||
<h4><FormattedMessage id="microbit.heartBeat" /></h4>
|
||||
<p>
|
||||
<FormattedMessage id="microbit.heartBeatDescription" />
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
<a
|
||||
download
|
||||
className="project-card"
|
||||
href="https://downloads.scratch.mit.edu/microbit/microbit-guitar.sb3"
|
||||
>
|
||||
<div className="project-card-image">
|
||||
<img src="/images/microbit/starter-guitar.png" />
|
||||
</div>
|
||||
<div className="project-card-info">
|
||||
<h4><FormattedMessage id="microbit.tiltGuitar" /></h4>
|
||||
<p>
|
||||
<FormattedMessage id="microbit.tiltGuitarDescription" />
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
<a
|
||||
download
|
||||
className="project-card"
|
||||
href="https://downloads.scratch.mit.edu/microbit/microbit-fish.sb3"
|
||||
>
|
||||
|
||||
<div className="project-card-image">
|
||||
<img src="/images/microbit/starter-fish.png" />
|
||||
</div>
|
||||
<div className="project-card-info">
|
||||
<h4><FormattedMessage id="microbit.oceanAdventure" /></h4>
|
||||
<p>
|
||||
<FormattedMessage id="microbit.oceanAdventureDescription" />
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
</FlexRow>
|
||||
</FlexRow>
|
||||
</div>
|
||||
<div className="faq inner">
|
||||
<Steps>
|
||||
<ProjectCard
|
||||
cardUrl="https://beta.scratch.mit.edu/#239075756"
|
||||
description={this.props.intl.formatMessage({id: 'microbit.heartBeatDescription'})}
|
||||
imageSrc="/images/microbit/starter-heart.png"
|
||||
title={this.props.intl.formatMessage({id: 'microbit.heartBeat'})}
|
||||
/>
|
||||
<ProjectCard
|
||||
cardUrl="https://beta.scratch.mit.edu/#239075950"
|
||||
description={this.props.intl.formatMessage({id: 'microbit.tiltGuitarDescription'})}
|
||||
imageSrc="/images/microbit/starter-guitar.png"
|
||||
title={this.props.intl.formatMessage({id: 'microbit.tiltGuitar'})}
|
||||
/>
|
||||
<ProjectCard
|
||||
cardUrl="https://beta.scratch.mit.edu/#239075973"
|
||||
description={this.props.intl.formatMessage({id: 'microbit.oceanAdventureDescription'})}
|
||||
imageSrc="/images/microbit/starter-fish.png"
|
||||
title={this.props.intl.formatMessage({id: 'microbit.oceanAdventure'})}
|
||||
/>
|
||||
</Steps>
|
||||
</ExtensionSection>
|
||||
<ExtensionSection className="faq">
|
||||
<h2><FormattedMessage id="microbit.troubleshootingTitle" /></h2>
|
||||
<h3 className="faq-title"><FormattedMessage id="microbit.closeScratchCopiesTitle" /></h3>
|
||||
<p>
|
||||
|
|
@ -370,12 +240,16 @@ class MicroBit extends React.Component {
|
|||
<p>
|
||||
<FormattedMessage id="microbit.resetButtonText" />
|
||||
</p>
|
||||
</div>
|
||||
</ExtensionSection>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
MicroBit.propTypes = {
|
||||
intl: intlShape.isRequired
|
||||
};
|
||||
|
||||
const WrappedMicroBit = injectIntl(MicroBit);
|
||||
|
||||
render(<Page><WrappedMicroBit /></Page>, document.getElementById('app'));
|
||||
|
|
|
|||
|
|
@ -1,178 +1,18 @@
|
|||
// TODO: Refactor this file and views/ev3/ev3.scss into something that can be used in both places (scratch-www#1982)
|
||||
|
||||
@import "../../colors";
|
||||
@import "../../frameless";
|
||||
|
||||
#view {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.microbit {
|
||||
&>div {
|
||||
padding: 4rem 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
span {
|
||||
line-height: 1.7rem;
|
||||
}
|
||||
|
||||
.download {
|
||||
display: inline-block;
|
||||
|
||||
&::after {
|
||||
display: inline-block;
|
||||
margin-left: .5rem;
|
||||
background-image: url("/svgs/extensions/download.svg");
|
||||
background-repeat: no-repeat;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
vertical-align: text-top;
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
|
||||
.extension-header {
|
||||
background-color: $ui-purple;
|
||||
background-color: $ui-mint-green;
|
||||
background-image: url("/images/microbit/mbit-pattern.svg");
|
||||
background-size: cover;
|
||||
color: $ui-white;
|
||||
|
||||
.inner {
|
||||
justify-content: space-between;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.extension-info {
|
||||
padding-right: $cols1;
|
||||
max-width: $cols7 + ($gutter / $em);
|
||||
align-items: flex-start;
|
||||
|
||||
.extension-copy {
|
||||
margin-bottom: 5rem;
|
||||
align-items: flex-start;
|
||||
|
||||
h2 {
|
||||
display: flex;
|
||||
margin-bottom: 2rem;
|
||||
color: $ui-white;
|
||||
}
|
||||
|
||||
h2 img {
|
||||
padding-right: .5rem;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
a {
|
||||
border-bottom: 1px solid $ui-white;
|
||||
color: $ui-white;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.extension-requirements-container {
|
||||
font-weight: 500;
|
||||
align-items: flex-start;
|
||||
|
||||
.requirements-header {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.extension-requirements {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.extension-requirements span {
|
||||
display: flex;
|
||||
margin-right: 1rem;
|
||||
font-size: 15px; // TODO: change to rem later
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.extension-requirements span img {
|
||||
padding-right: .5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.extension-image {
|
||||
width: 100%;
|
||||
max-width: $cols4;
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.os-chooser {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.install-scratch-link,
|
||||
.getting-started,
|
||||
.faq {
|
||||
.inner {
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
.install-scratch-link {
|
||||
padding: 2rem 0;
|
||||
|
||||
.step-image.badge {
|
||||
height: initial;
|
||||
}
|
||||
|
||||
.download-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
margin-left: .5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.screenshot {
|
||||
border-radius: .5rem;
|
||||
}
|
||||
|
||||
.getting-started {
|
||||
.install-hex,
|
||||
.connecting {
|
||||
width: 100%;
|
||||
align-items: flex-start;
|
||||
|
||||
a {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
.tip-box {
|
||||
margin-top: 4rem;
|
||||
border: 1px solid $ui-blue-25percent;
|
||||
border-radius: 1rem;
|
||||
background-color: $ui-blue-10percent;
|
||||
padding: 0 2rem;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
.tip-content {
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -182,140 +22,5 @@
|
|||
align-self: center;
|
||||
}
|
||||
}
|
||||
|
||||
.project-card {
|
||||
margin: 0 1.5rem;
|
||||
border: 1px solid $ui-border;
|
||||
border-radius: .5rem;
|
||||
background-color: $ui-white;
|
||||
overflow: hidden;
|
||||
flex-basis: 0;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.project-card-image {
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.project-card-info {
|
||||
padding: 1rem;
|
||||
|
||||
p {
|
||||
margin: .2rem 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.faq {
|
||||
p {
|
||||
margin-bottom: 1.25rem;
|
||||
margin-left: 0;
|
||||
max-width: $cols8;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.faq-title {
|
||||
margin-bottom: 1rem;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
ul {
|
||||
max-width: $cols8;
|
||||
}
|
||||
|
||||
section {
|
||||
ul {
|
||||
max-width: $cols8;
|
||||
}
|
||||
|
||||
.nav-spacer {
|
||||
display: block;
|
||||
visibility: hidden;
|
||||
margin-top: -50px; // height of nav bar
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
&.indented {
|
||||
padding-left: $cols1 + (20px / $em);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: $ui-blue-10percent;
|
||||
}
|
||||
|
||||
.inner {
|
||||
max-width: $cols12;
|
||||
}
|
||||
|
||||
.section-separator {
|
||||
margin: 4rem 0;
|
||||
border-top: 1px solid $ui-border;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.steps {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.step {
|
||||
flex-basis: 0;
|
||||
flex-grow: 1;
|
||||
|
||||
.step-number-row {
|
||||
padding-bottom: 1.5rem;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
|
||||
.step-content {
|
||||
text-align: left;
|
||||
align-items: flex-start;
|
||||
|
||||
.step-description {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.step-number {
|
||||
display: inline-flex;
|
||||
border-radius: 2rem;
|
||||
background-color: $ui-blue;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
color: $ui-white;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.step-content {
|
||||
display: flex;
|
||||
padding: 0 2rem;
|
||||
text-align: center;
|
||||
flex-flow: column;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
|
||||
.step-image {
|
||||
height: 10rem;
|
||||
|
||||
img {
|
||||
width: auto;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
21
src/views/wedo2-legacy/l10n.json
Normal file
21
src/views/wedo2-legacy/l10n.json
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
{
|
||||
"wedoLegacy.intro": "The LEGO® Education WeDo 2.0 is an introductory invention kit you can use to build your own interactive machines. You can snap together Scratch programming blocks to interact with your LEGO WeDo creations and add animations on the screen.",
|
||||
"wedoLegacy.requirement": "The LEGO WeDo 2.0 extension is available for Mac OSX and Windows 10+.",
|
||||
"wedoLegacy.getStarted": "Getting Started with LEGO WeDo 2.0",
|
||||
"wedoLegacy.installTitle": "1. Install Device Manager",
|
||||
"wedoLegacy.installText": "The Device Manager lets you connect WeDo 2.0 to Scratch using Bluetooth",
|
||||
"wedoLegacy.downloadMac": "Download for Mac OSX",
|
||||
"wedoLegacy.downloadWin": "Download for Windows 10+",
|
||||
"wedoLegacy.setupTitle": "2. Setup & Help",
|
||||
"wedoLegacy.setupText": "Connect your WeDo 2.0 by following the steps in the <a href=\"/projects/editor/?tip_bar=ext2\">Tips Window</a>",
|
||||
"wedoLegacy.createTitle": "3. Create",
|
||||
"wedoLegacy.createText": "Use the WeDo extension blocks to turn on lights, control motors, and make your project interactive",
|
||||
"wedoLegacy.wedo2SetupInstructions": "WeDo 2.0 Setup Instructions",
|
||||
"wedoLegacy.wedo1SetupInstructions": "WeDo 1.0 Setup Instructions",
|
||||
"wedoLegacy.starterProjects": "WeDo 2.0 Starter Projects",
|
||||
"wedoLegacy.starterMotor": "Motor",
|
||||
"wedoLegacy.starterDistance": "Distance Sensor",
|
||||
"wedoLegacy.starterTilt": "Tilt Sensor",
|
||||
"wedoLegacy.versionTitle": "Which version do you have?",
|
||||
"wedoLegacy.versionText": "You can also use Scratch to program the original LEGO WeDo (LEGO WeDo 1.0)."
|
||||
}
|
||||
155
src/views/wedo2-legacy/wedo2.jsx
Normal file
155
src/views/wedo2-legacy/wedo2.jsx
Normal file
|
|
@ -0,0 +1,155 @@
|
|||
const FormattedHTMLMessage = require('react-intl').FormattedHTMLMessage;
|
||||
const FormattedMessage = require('react-intl').FormattedMessage;
|
||||
const React = require('react');
|
||||
|
||||
const Page = require('../../components/page/www/page.jsx');
|
||||
const render = require('../../lib/render.jsx');
|
||||
|
||||
require('./wedo2.scss');
|
||||
|
||||
const Wedo2 = () => (
|
||||
<div className="wedo">
|
||||
<div className="top-banner">
|
||||
<div className="inner">
|
||||
<div className="columns2">
|
||||
<div className="banner-text">
|
||||
<h2>LEGO WeDo 2.0 & Scratch</h2>
|
||||
<p className="intro">
|
||||
<FormattedMessage id="wedoLegacy.intro" />
|
||||
</p>
|
||||
</div>
|
||||
<div className="banner-photo">
|
||||
<img src="/images/wedo-legacy/wedo-milo.png" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="inner">
|
||||
<section id="getting-started">
|
||||
<h3>
|
||||
<FormattedMessage id="wedoLegacy.getStarted" />
|
||||
</h3>
|
||||
<p className="callout">
|
||||
<FormattedMessage id="wedoLegacy.requirement" />
|
||||
</p>
|
||||
<div className="columns3">
|
||||
<div className="column">
|
||||
<img src="/images/wedo-legacy/download-device-manager.png" />
|
||||
<h4>
|
||||
<FormattedMessage id="wedoLegacy.installTitle" />
|
||||
</h4>
|
||||
<p>
|
||||
<FormattedHTMLMessage id="wedoLegacy.installText" />
|
||||
<br />
|
||||
<a href="https://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=1084869222&mt=12">
|
||||
<FormattedMessage id="wedoLegacy.downloadMac" />
|
||||
</a>
|
||||
<br />
|
||||
<a href="https://downloads.scratch.mit.edu/device-manager/ScratchDeviceManager-1.1.0.exe">
|
||||
<FormattedMessage id="wedoLegacy.downloadWin" />
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
<div className="column">
|
||||
<img src="/images/wedo-legacy/set-up.png" />
|
||||
<h4>
|
||||
<FormattedMessage id="wedoLegacy.setupTitle" />
|
||||
</h4>
|
||||
<p>
|
||||
<FormattedHTMLMessage id="wedoLegacy.setupText" />
|
||||
</p>
|
||||
</div>
|
||||
<div className="column">
|
||||
<img src="/images/wedo-legacy/create-and-share.png" />
|
||||
<h4>
|
||||
<FormattedMessage id="wedoLegacy.createTitle" />
|
||||
</h4>
|
||||
<p>
|
||||
<FormattedMessage id="wedoLegacy.createText" />
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div className="banner">
|
||||
<div
|
||||
className="inner"
|
||||
id="starter-projects"
|
||||
>
|
||||
<h3>
|
||||
<FormattedMessage id="wedoLegacy.starterProjects" />
|
||||
</h3>
|
||||
<div className="project-list">
|
||||
<a href="/projects/101037564/?tip_bar=ext2#editor">
|
||||
<div className="project-card">
|
||||
<img
|
||||
alt=""
|
||||
src="/images/wedo-legacy/motor.png"
|
||||
/>
|
||||
<p>
|
||||
<FormattedMessage id="wedoLegacy.starterMotor" />
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="/projects/101038249/?tip_bar=ext2#editor">
|
||||
<div className="project-card">
|
||||
<img
|
||||
alt=""
|
||||
src="/images/wedo-legacy/distance.png"
|
||||
/>
|
||||
<p>
|
||||
<FormattedMessage id="wedoLegacy.starterDistance" />
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="/projects/101033190/?tip_bar=ext2#editor">
|
||||
<div className="project-card">
|
||||
<img
|
||||
alt=""
|
||||
src="/images/wedo-legacy/tilt.png"
|
||||
/>
|
||||
<p>
|
||||
<FormattedMessage id="wedoLegacy.starterTilt" />
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="inner">
|
||||
<section>
|
||||
<h3>
|
||||
<FormattedMessage id="wedoLegacy.versionTitle" />
|
||||
</h3>
|
||||
<p>
|
||||
<FormattedMessage id="wedoLegacy.versionText" />
|
||||
</p>
|
||||
<div className="device-card">
|
||||
<h4>LEGO WeDo 1.0 Hub</h4>
|
||||
<img
|
||||
alt="LEGO WeDo 1.0 Hub"
|
||||
src="/images/wedo-legacy/wedo1.png"
|
||||
/>
|
||||
<a href="/projects/editor/?tip_bar=ext1">
|
||||
<FormattedMessage id="wedoLegacy.wedo1SetupInstructions" />
|
||||
</a>
|
||||
</div>
|
||||
<div className="device-card">
|
||||
<h4>LEGO WeDo 2.0 Hub</h4>
|
||||
<img
|
||||
alt="LEGO WeDo 2.0 Hub"
|
||||
src="/images/wedo-legacy/wedo2.png"
|
||||
/>
|
||||
<a href="/projects/editor/?tip_bar=ext2">
|
||||
<FormattedMessage id="wedoLegacy.wedo2SetupInstructions" />
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
render(<Page><Wedo2 /></Page>, document.getElementById('app'));
|
||||
232
src/views/wedo2-legacy/wedo2.scss
Normal file
232
src/views/wedo2-legacy/wedo2.scss
Normal file
|
|
@ -0,0 +1,232 @@
|
|||
@import "../../colors";
|
||||
@import "../../frameless";
|
||||
|
||||
#view {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.wedo {
|
||||
h3,
|
||||
h4 {
|
||||
margin: 1.5em 0 .3em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: .75em 0 .3em;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: .25em 0 1em;
|
||||
|
||||
&.intro {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
&.callout {
|
||||
padding: .75em 1em;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.top-banner {
|
||||
margin-bottom: 50px;
|
||||
background-color: $ui-blue;
|
||||
padding: 50px 0;
|
||||
width: 100%;
|
||||
|
||||
h2 {
|
||||
color: $ui-white;
|
||||
}
|
||||
|
||||
p {
|
||||
color: $ui-white;
|
||||
}
|
||||
|
||||
.columns2 {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.banner-text {
|
||||
max-width: $cols7;
|
||||
}
|
||||
|
||||
.banner-photo {
|
||||
max-width: $cols4;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
section {
|
||||
margin-bottom: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
// Getting Started Section
|
||||
|
||||
.columns3 {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.column {
|
||||
margin: 15px;
|
||||
max-width: $cols4;
|
||||
|
||||
img {
|
||||
margin: 0 auto;
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Project Highlight Section
|
||||
|
||||
#starter-projects {
|
||||
h3,
|
||||
p {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.banner {
|
||||
background-color: $ui-gray;
|
||||
padding: 10px 0 50px;
|
||||
|
||||
h3 {
|
||||
margin-top: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.project-list {
|
||||
display: flex;
|
||||
margin: 0 auto;
|
||||
max-width: $cols9;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.project-card {
|
||||
transition: transform .25s ease;
|
||||
margin: 10px;
|
||||
border-radius: 7px;
|
||||
background-color: $ui-white;
|
||||
max-width: $cols3;
|
||||
overflow: hidden;
|
||||
|
||||
|
||||
img {
|
||||
border-bottom: 2px solid $ui-white;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
p {
|
||||
display: block;
|
||||
margin: 15px 15px 20px;
|
||||
color: $ui-blue;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.1, 1.1);
|
||||
transition: transform .25s ease;
|
||||
cursor: pointer;
|
||||
|
||||
p {
|
||||
color: $ui-blue-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Device Cards
|
||||
|
||||
.device-card {
|
||||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
max-width: $cols3;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive Behavior
|
||||
|
||||
//4 columns
|
||||
@media only screen and (max-width: $mobile - 1) {
|
||||
.wedo {
|
||||
.inner {
|
||||
margin: 0 auto;
|
||||
width: calc(100% - 40px);
|
||||
}
|
||||
|
||||
.top-banner {
|
||||
text-align: center;
|
||||
|
||||
.banner-photo {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.project-list,
|
||||
.columns3 {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.project-card,
|
||||
.columns3 .column {
|
||||
display: block;
|
||||
margin: 20px auto;
|
||||
width: $cols6;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//6 columns
|
||||
@media only screen and (min-width: $mobile) and (max-width: $tablet - 1) {
|
||||
.wedo {
|
||||
.project-list,
|
||||
.columns3 {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.top-banner {
|
||||
text-align: center;
|
||||
|
||||
.banner-photo {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.project-card,
|
||||
.columns3 .column {
|
||||
display: inline-block;
|
||||
width: $cols6;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//8 columns
|
||||
@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
|
||||
#view {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.wedo {
|
||||
.top-banner {
|
||||
text-align: left;
|
||||
|
||||
.banner-photo {
|
||||
max-width: $cols3;
|
||||
}
|
||||
}
|
||||
|
||||
.inner {
|
||||
margin: 0 auto;
|
||||
width: $tablet;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,21 +1,27 @@
|
|||
{
|
||||
"wedo2.intro": "The LEGO® Education WeDo 2.0 is an introductory invention kit you can use to build your own interactive machines. You can snap together Scratch programming blocks to interact with your LEGO WeDo creations and add animations on the screen.",
|
||||
"wedo2.requirement": "The LEGO WeDo 2.0 extension is available for Mac OSX and Windows 10+.",
|
||||
"wedo2.getStarted": "Getting Started with LEGO WeDo 2.0",
|
||||
"wedo2.installTitle": "1. Install Device Manager",
|
||||
"wedo2.installText": "The Device Manager lets you connect WeDo 2.0 to Scratch using Bluetooth",
|
||||
"wedo2.downloadMac": "Download for Mac OSX",
|
||||
"wedo2.downloadWin": "Download for Windows 10+",
|
||||
"wedo2.setupTitle": "2. Setup & Help",
|
||||
"wedo2.setupText": "Connect your WeDo 2.0 by following the steps in the <a href=\"/projects/editor/?tip_bar=ext2\">Tips Window</a>",
|
||||
"wedo2.createTitle": "3. Create",
|
||||
"wedo2.createText": "Use the WeDo extension blocks to turn on lights, control motors, and make your project interactive",
|
||||
"wedo2.wedo2SetupInstructions": "WeDo 2.0 Setup Instructions",
|
||||
"wedo2.wedo1SetupInstructions": "WeDo 1.0 Setup Instructions",
|
||||
"wedo2.starterProjects": "WeDo 2.0 Starter Projects",
|
||||
"wedo2.starterMotor": "Motor",
|
||||
"wedo2.starterDistance": "Distance Sensor",
|
||||
"wedo2.starterTilt": "Tilt Sensor",
|
||||
"wedo2.versionTitle": "Which version do you have?",
|
||||
"wedo2.versionText": "You can also use Scratch to program the original LEGO WeDo (LEGO WeDo 1.0)."
|
||||
"wedo2.headerText": "{wedo2Link} is an introductory invention kit you can use to build interactive robots and other creations. You can snap together Scratch programming blocks to interact with your LEGO WeDo creations and add animations and sounds.",
|
||||
"wedo2.gettingStarted": "Getting Started",
|
||||
"wedo2.connectingWedo2": "Connecting WeDo 2.0 to Scratch",
|
||||
"wedo2.useScratch3": "Use the {scratch3Link} editor.",
|
||||
"wedo2.addExtension": "Add the WeDo 2.0 extension.",
|
||||
"wedo2.thingsToTry": "Things to Try",
|
||||
"wedo2.makeMotorMove": "Make a motor move",
|
||||
"wedo2.plugMotorIn": "Plug a motor into the WeDo.",
|
||||
"wedo2.clickMotorBlock": "Find the {motorBlockText} block and click on it.",
|
||||
"wedo2.motorBlockText": "\"turn motor on for 1 seconds\"",
|
||||
"wedo2.starterProjects": "Starter Projects",
|
||||
"wedo2.starter1Title": "Wagging Dog",
|
||||
"wedo2.starter1Description": "Use a motor to make a spinning tail for your virtual pet.",
|
||||
"wedo2.starter2Title": "Tilting Toad",
|
||||
"wedo2.starter2Description": "Use the tilt sensor to make music with a toad.",
|
||||
"wedo2.starter3Title": "Distance Dino",
|
||||
"wedo2.starter3Description": "Use the distance sensor to move the dinosaur.",
|
||||
"wedo2.troubleshootingTitle": "Troubleshooting",
|
||||
"wedo2.closeScratchCopiesTitle": "Close other copies of Scratch",
|
||||
"wedo2.closeScratchCopiesText": "Only one copy of Scratch can connect with the WeDo 2.0 at a time. If you have Scratch open in other browser tabs, close it and try again.",
|
||||
"wedo2.otherComputerConnectedTitle": "Make sure no other computer is connected to your WeDo 2.0",
|
||||
"wedo2.otherComputerConnectedText": "Only one computer can be connected to an WeDo 2.0 at a time. If you have another computer connected to your WeDo 2.0, disconnect the WeDo 2.0 or close Scratch on that computer and try again.",
|
||||
"wedo2.legacyInfoTitle": "Using Scratch 2.0?",
|
||||
"wedo2.legacyInfoText": "Visit our page about {wedoLegacyLink}.",
|
||||
"wedo2.legacyLinkText": "using LEGO WeDo with Scratch 2.0"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,155 +1,212 @@
|
|||
const FormattedHTMLMessage = require('react-intl').FormattedHTMLMessage;
|
||||
const injectIntl = require('react-intl').injectIntl;
|
||||
const intlShape = require('react-intl').intlShape;
|
||||
const FormattedMessage = require('react-intl').FormattedMessage;
|
||||
const React = require('react');
|
||||
|
||||
|
||||
const Page = require('../../components/page/www/page.jsx');
|
||||
const render = require('../../lib/render.jsx');
|
||||
|
||||
const FlexRow = require('../../components/flex-row/flex-row.jsx');
|
||||
|
||||
const OSChooser = require('../../components/os-chooser/os-chooser.jsx');
|
||||
|
||||
const ExtensionLanding = require('../../components/extension-landing/extension-landing.jsx');
|
||||
const ExtensionHeader = require('../../components/extension-landing/extension-header.jsx');
|
||||
const ExtensionRequirements = require('../../components/extension-landing/extension-requirements.jsx');
|
||||
const ExtensionSection = require('../../components/extension-landing/extension-section.jsx');
|
||||
const InstallScratchLink = require('../../components/extension-landing/install-scratch-link.jsx');
|
||||
const ProjectCard = require('../../components/extension-landing/project-card.jsx');
|
||||
|
||||
const Steps = require('../../components/steps/steps.jsx');
|
||||
const Step = require('../../components/steps/step.jsx');
|
||||
|
||||
require('../../components/extension-landing/extension-landing.scss');
|
||||
require('./wedo2.scss');
|
||||
|
||||
const Wedo2 = () => (
|
||||
<div className="wedo">
|
||||
<div className="top-banner">
|
||||
<div className="inner">
|
||||
<div className="columns2">
|
||||
<div className="banner-text">
|
||||
<h2>LEGO WeDo 2.0 & Scratch</h2>
|
||||
<p className="intro">
|
||||
<FormattedMessage id="wedo2.intro" />
|
||||
</p>
|
||||
</div>
|
||||
<div className="banner-photo">
|
||||
<img src="/images/wedo/wedo-milo.png" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="inner">
|
||||
<section id="getting-started">
|
||||
<h3>
|
||||
<FormattedMessage id="wedo2.getStarted" />
|
||||
</h3>
|
||||
<p className="callout">
|
||||
<FormattedMessage id="wedo2.requirement" />
|
||||
</p>
|
||||
<div className="columns3">
|
||||
<div className="column">
|
||||
<img src="/images/wedo/download-device-manager.png" />
|
||||
<h4>
|
||||
<FormattedMessage id="wedo2.installTitle" />
|
||||
</h4>
|
||||
<p>
|
||||
<FormattedHTMLMessage id="wedo2.installText" />
|
||||
<br />
|
||||
<a href="https://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=1084869222&mt=12">
|
||||
<FormattedMessage id="wedo2.downloadMac" />
|
||||
</a>
|
||||
<br />
|
||||
<a href="https://downloads.scratch.mit.edu/device-manager/ScratchDeviceManager-1.1.0.exe">
|
||||
<FormattedMessage id="wedo2.downloadWin" />
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
<div className="column">
|
||||
<img src="/images/wedo/set-up.png" />
|
||||
<h4>
|
||||
<FormattedMessage id="wedo2.setupTitle" />
|
||||
</h4>
|
||||
<p>
|
||||
<FormattedHTMLMessage id="wedo2.setupText" />
|
||||
</p>
|
||||
</div>
|
||||
<div className="column">
|
||||
<img src="/images/wedo/create-and-share.png" />
|
||||
<h4>
|
||||
<FormattedMessage id="wedo2.createTitle" />
|
||||
</h4>
|
||||
<p>
|
||||
<FormattedMessage id="wedo2.createText" />
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div className="banner">
|
||||
<div
|
||||
className="inner"
|
||||
id="starter-projects"
|
||||
class Wedo2 extends ExtensionLanding {
|
||||
render () {
|
||||
return (
|
||||
<div className="extension-landing wedo2">
|
||||
<ExtensionHeader imageSrc="/images/wedo2/wedo2-illustration.png">
|
||||
<FlexRow className="column extension-copy">
|
||||
<h2><img src="/images/wedo2/wedo2.svg" />LEGO WeDo 2.0</h2>
|
||||
<FormattedMessage
|
||||
id="wedo2.headerText"
|
||||
values={{
|
||||
wedo2Link: (
|
||||
<a
|
||||
href="https://education.lego.com/en-us/elementary/intro/wedo2"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<h3>
|
||||
<FormattedMessage id="wedo2.starterProjects" />
|
||||
</h3>
|
||||
<div className="project-list">
|
||||
<a href="/projects/101037564/?tip_bar=ext2#editor">
|
||||
<div className="project-card">
|
||||
<img
|
||||
alt=""
|
||||
src="/images/wedo/motor.png"
|
||||
LEGO Education WeDo 2.0
|
||||
</a>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
</FlexRow>
|
||||
<ExtensionRequirements>
|
||||
<span>
|
||||
<img src="/svgs/extensions/windows.svg" />
|
||||
Windows 10+
|
||||
</span>
|
||||
<span>
|
||||
<img src="/svgs/extensions/mac.svg" />
|
||||
macOS 10.13+
|
||||
</span>
|
||||
<span>
|
||||
<img src="/svgs/extensions/bluetooth.svg" />
|
||||
Bluetooth
|
||||
</span>
|
||||
<span>
|
||||
<img src="/svgs/extensions/scratch-link.svg" />
|
||||
Scratch Link
|
||||
</span>
|
||||
</ExtensionRequirements>
|
||||
</ExtensionHeader>
|
||||
<OSChooser
|
||||
currentOS={this.state.OS}
|
||||
handleSetOS={this.onSetOS}
|
||||
/>
|
||||
<InstallScratchLink
|
||||
currentOS={this.state.OS}
|
||||
/>
|
||||
<ExtensionSection className="getting-started">
|
||||
<h2><FormattedMessage id="wedo2.gettingStarted" /></h2>
|
||||
<FlexRow className="column getting-started-section">
|
||||
<h3><FormattedMessage id="wedo2.connectingWedo2" /></h3>
|
||||
<Steps>
|
||||
<Step number={1}>
|
||||
<div className="step-image">
|
||||
<img
|
||||
className="screenshot"
|
||||
src="/images/wedo2/wedo2-connect-1.png"
|
||||
/>
|
||||
</div>
|
||||
<p>
|
||||
<FormattedMessage id="wedo2.starterMotor" />
|
||||
</p>
|
||||
</div>
|
||||
<FormattedMessage
|
||||
id="wedo2.useScratch3"
|
||||
values={{
|
||||
scratch3Link: (
|
||||
<a
|
||||
href="https://beta.scratch.mit.edu/"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
Scratch 3.0
|
||||
</a>
|
||||
<a href="/projects/101038249/?tip_bar=ext2#editor">
|
||||
<div className="project-card">
|
||||
<img
|
||||
alt=""
|
||||
src="/images/wedo/distance.png"
|
||||
)
|
||||
}}
|
||||
/>
|
||||
</p>
|
||||
</Step>
|
||||
<Step number={2}>
|
||||
<div className="step-image">
|
||||
<img
|
||||
className="screenshot"
|
||||
src="/images/wedo2/wedo2-connect-2.png"
|
||||
/>
|
||||
</div>
|
||||
<p><FormattedMessage id="wedo2.addExtension" /></p>
|
||||
</Step>
|
||||
</Steps>
|
||||
</FlexRow>
|
||||
</ExtensionSection>
|
||||
<ExtensionSection className="blue things-to-try">
|
||||
<h2><FormattedMessage id="wedo2.thingsToTry" /></h2>
|
||||
<h3><FormattedMessage id="wedo2.makeMotorMove" /></h3>
|
||||
<Steps>
|
||||
<Step
|
||||
compact
|
||||
number={1}
|
||||
>
|
||||
<span className="step-description">
|
||||
<FormattedMessage id="wedo2.plugMotorIn" />
|
||||
</span>
|
||||
<div className="step-image">
|
||||
<img src="/images/wedo2/wedo2-motor.png" />
|
||||
</div>
|
||||
</Step>
|
||||
<Step
|
||||
compact
|
||||
number={2}
|
||||
>
|
||||
<span className="step-description">
|
||||
<FormattedMessage
|
||||
id="wedo2.clickMotorBlock"
|
||||
values={{
|
||||
motorBlockText: (
|
||||
<strong><FormattedMessage id="wedo2.motorBlockText" /></strong>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
</span>
|
||||
<div className="step-image">
|
||||
<img src="/images/wedo2/wedo2-motor-turn-block.png" />
|
||||
</div>
|
||||
</Step>
|
||||
</Steps>
|
||||
<hr />
|
||||
<h3><FormattedMessage id="wedo2.starterProjects" /></h3>
|
||||
<Steps>
|
||||
<ProjectCard
|
||||
cardUrl="https://beta.scratch.mit.edu/#239284992"
|
||||
description={this.props.intl.formatMessage({id: 'wedo2.starter1Description'})}
|
||||
imageSrc="/images/wedo2/wedo2-starter1.png"
|
||||
title={this.props.intl.formatMessage({id: 'wedo2.starter1Title'})}
|
||||
/>
|
||||
<ProjectCard
|
||||
cardUrl="https://beta.scratch.mit.edu/#239284997"
|
||||
description={this.props.intl.formatMessage({id: 'wedo2.starter2Description'})}
|
||||
imageSrc="/images/wedo2/wedo2-starter2.png"
|
||||
title={this.props.intl.formatMessage({id: 'wedo2.starter2Title'})}
|
||||
/>
|
||||
<ProjectCard
|
||||
cardUrl="https://beta.scratch.mit.edu/#239285001"
|
||||
description={this.props.intl.formatMessage({id: 'wedo2.starter3Description'})}
|
||||
imageSrc="/images/wedo2/wedo2-starter3.png"
|
||||
title={this.props.intl.formatMessage({id: 'wedo2.starter3Title'})}
|
||||
/>
|
||||
</Steps>
|
||||
</ExtensionSection>
|
||||
<ExtensionSection className="faq">
|
||||
<h2><FormattedMessage id="wedo2.troubleshootingTitle" /></h2>
|
||||
<h3 className="faq-title"><FormattedMessage id="wedo2.closeScratchCopiesTitle" /></h3>
|
||||
<p>
|
||||
<FormattedMessage id="wedo2.starterDistance" />
|
||||
<FormattedMessage id="wedo2.closeScratchCopiesText" />
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="/projects/101033190/?tip_bar=ext2#editor">
|
||||
<div className="project-card">
|
||||
<img
|
||||
alt=""
|
||||
src="/images/wedo/tilt.png"
|
||||
/>
|
||||
<h3 className="faq-title"><FormattedMessage id="wedo2.otherComputerConnectedTitle" /></h3>
|
||||
<p>
|
||||
<FormattedMessage id="wedo2.starterTilt" />
|
||||
<FormattedMessage id="wedo2.otherComputerConnectedText" />
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="inner">
|
||||
<section>
|
||||
<h3>
|
||||
<FormattedMessage id="wedo2.versionTitle" />
|
||||
</h3>
|
||||
<h3 className="faq-title"><FormattedMessage id="wedo2.legacyInfoTitle" /></h3>
|
||||
<p>
|
||||
<FormattedMessage id="wedo2.versionText" />
|
||||
<FormattedMessage
|
||||
id="wedo2.legacyInfoText"
|
||||
values={{
|
||||
wedoLegacyLink: (
|
||||
<a
|
||||
href="/wedo-legacy"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<FormattedMessage id="wedo2.legacyLinkText" />
|
||||
</a>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
</p>
|
||||
<div className="device-card">
|
||||
<h4>LEGO WeDo 1.0 Hub</h4>
|
||||
<img
|
||||
alt="LEGO WeDo 1.0 Hub"
|
||||
src="/images/wedo/wedo1.png"
|
||||
/>
|
||||
<a href="/projects/editor/?tip_bar=ext1">
|
||||
<FormattedMessage id="wedo2.wedo1SetupInstructions" />
|
||||
</a>
|
||||
</div>
|
||||
<div className="device-card">
|
||||
<h4>LEGO WeDo 2.0 Hub</h4>
|
||||
<img
|
||||
alt="LEGO WeDo 2.0 Hub"
|
||||
src="/images/wedo/wedo2.png"
|
||||
/>
|
||||
<a href="/projects/editor/?tip_bar=ext2">
|
||||
<FormattedMessage id="wedo2.wedo2SetupInstructions" />
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</ExtensionSection>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
render(<Page><Wedo2 /></Page>, document.getElementById('app'));
|
||||
Wedo2.propTypes = {
|
||||
intl: intlShape.isRequired
|
||||
};
|
||||
|
||||
const WrappedWedo2 = injectIntl(Wedo2);
|
||||
|
||||
render(<Page><WrappedWedo2 /></Page>, document.getElementById('app'));
|
||||
|
|
|
|||
|
|
@ -1,232 +1,8 @@
|
|||
@import "../../colors";
|
||||
@import "../../frameless";
|
||||
|
||||
#view {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.wedo {
|
||||
h3,
|
||||
h4 {
|
||||
margin: 1.5em 0 .3em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: .75em 0 .3em;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: .25em 0 1em;
|
||||
|
||||
&.intro {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
&.callout {
|
||||
padding: .75em 1em;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.top-banner {
|
||||
margin-bottom: 50px;
|
||||
background-color: $ui-blue;
|
||||
padding: 50px 0;
|
||||
width: 100%;
|
||||
|
||||
h2 {
|
||||
color: $ui-white;
|
||||
}
|
||||
|
||||
p {
|
||||
color: $ui-white;
|
||||
}
|
||||
|
||||
.columns2 {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.banner-text {
|
||||
max-width: $cols7;
|
||||
}
|
||||
|
||||
.banner-photo {
|
||||
max-width: $cols4;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
section {
|
||||
margin-bottom: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
// Getting Started Section
|
||||
|
||||
.columns3 {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.column {
|
||||
margin: 15px;
|
||||
max-width: $cols4;
|
||||
|
||||
img {
|
||||
margin: 0 auto;
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Project Highlight Section
|
||||
|
||||
#starter-projects {
|
||||
h3,
|
||||
p {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.banner {
|
||||
background-color: $ui-gray;
|
||||
padding: 10px 0 50px;
|
||||
|
||||
h3 {
|
||||
margin-top: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.project-list {
|
||||
display: flex;
|
||||
margin: 0 auto;
|
||||
max-width: $cols9;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.project-card {
|
||||
transition: transform .25s ease;
|
||||
margin: 10px;
|
||||
border-radius: 7px;
|
||||
background-color: $ui-white;
|
||||
max-width: $cols3;
|
||||
overflow: hidden;
|
||||
|
||||
|
||||
img {
|
||||
border-bottom: 2px solid $ui-white;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
p {
|
||||
display: block;
|
||||
margin: 15px 15px 20px;
|
||||
color: $ui-blue;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.1, 1.1);
|
||||
transition: transform .25s ease;
|
||||
cursor: pointer;
|
||||
|
||||
p {
|
||||
color: $ui-blue-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Device Cards
|
||||
|
||||
.device-card {
|
||||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
max-width: $cols3;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive Behavior
|
||||
|
||||
//4 columns
|
||||
@media only screen and (max-width: $mobile - 1) {
|
||||
.wedo {
|
||||
.inner {
|
||||
margin: 0 auto;
|
||||
width: calc(100% - 40px);
|
||||
}
|
||||
|
||||
.top-banner {
|
||||
text-align: center;
|
||||
|
||||
.banner-photo {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.project-list,
|
||||
.columns3 {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.project-card,
|
||||
.columns3 .column {
|
||||
display: block;
|
||||
margin: 20px auto;
|
||||
width: $cols6;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//6 columns
|
||||
@media only screen and (min-width: $mobile) and (max-width: $tablet - 1) {
|
||||
.wedo {
|
||||
.project-list,
|
||||
.columns3 {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.top-banner {
|
||||
text-align: center;
|
||||
|
||||
.banner-photo {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.project-card,
|
||||
.columns3 .column {
|
||||
display: inline-block;
|
||||
width: $cols6;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//8 columns
|
||||
@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
|
||||
#view {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.wedo {
|
||||
.top-banner {
|
||||
text-align: left;
|
||||
|
||||
.banner-photo {
|
||||
max-width: $cols3;
|
||||
}
|
||||
}
|
||||
|
||||
.inner {
|
||||
margin: 0 auto;
|
||||
width: $tablet;
|
||||
}
|
||||
.wedo2 {
|
||||
.extension-header {
|
||||
background-color: $ui-coral;
|
||||
background-image: url("/images/wedo2/wedo2-pattern.svg");
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 41 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 41 KiB |
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
|
Before Width: | Height: | Size: 50 KiB After Width: | Height: | Size: 50 KiB |
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
|
Before Width: | Height: | Size: 27 KiB After Width: | Height: | Size: 27 KiB |
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 27 KiB After Width: | Height: | Size: 27 KiB |
|
Before Width: | Height: | Size: 315 KiB After Width: | Height: | Size: 315 KiB |
|
Before Width: | Height: | Size: 62 KiB After Width: | Height: | Size: 62 KiB |
|
Before Width: | Height: | Size: 89 KiB After Width: | Height: | Size: 89 KiB |
BIN
static/images/wedo2/wedo2-connect-1.png
Normal file
BIN
static/images/wedo2/wedo2-connect-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
static/images/wedo2/wedo2-connect-2.png
Normal file
BIN
static/images/wedo2/wedo2-connect-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
BIN
static/images/wedo2/wedo2-illustration.png
Normal file
BIN
static/images/wedo2/wedo2-illustration.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 57 KiB |
BIN
static/images/wedo2/wedo2-motor-turn-block.png
Normal file
BIN
static/images/wedo2/wedo2-motor-turn-block.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
BIN
static/images/wedo2/wedo2-motor.png
Normal file
BIN
static/images/wedo2/wedo2-motor.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
12
static/images/wedo2/wedo2-pattern.svg
Normal file
12
static/images/wedo2/wedo2-pattern.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 7.6 KiB |
BIN
static/images/wedo2/wedo2-starter1.png
Normal file
BIN
static/images/wedo2/wedo2-starter1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
BIN
static/images/wedo2/wedo2-starter2.png
Normal file
BIN
static/images/wedo2/wedo2-starter2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 97 KiB |
BIN
static/images/wedo2/wedo2-starter3.png
Normal file
BIN
static/images/wedo2/wedo2-starter3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
58
static/images/wedo2/wedo2.svg
Normal file
58
static/images/wedo2/wedo2.svg
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 51.2 (57519) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>wedo2-block-icon</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs>
|
||||
<polygon id="path-1" points="0 18.9025641 31.0588235 18.9025641 31.0588235 0.424182751 0 0.424182751"></polygon>
|
||||
</defs>
|
||||
<g id="wedo2-block-icon" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="WeDo" transform="translate(4.000000, 10.000000)">
|
||||
<path d="M19.5128913,1.16923077 L18.7825384,1.16923077 C18.4644208,1.16923077 18.2065384,1.38281026 18.2065384,1.6478359 L18.2065384,2.72820513 L20.0888913,2.72820513 L20.0888913,1.6478359 C20.0888913,1.38281026 19.831009,1.16923077 19.5128913,1.16923077" id="Fill-1" fill="#7C87A5"></path>
|
||||
<path d="M20.9099405,1.16923077 L20.1795875,1.16923077 C19.8614699,1.16923077 19.6035875,1.38281026 19.6035875,1.6478359 L19.6035875,2.72820513 L21.4859405,2.72820513 L21.4859405,1.6478359 C21.4859405,1.38281026 21.2280581,1.16923077 20.9099405,1.16923077 Z" id="Stroke-3"></path>
|
||||
<path d="M5.54051765,1.16923077 L4.81204706,1.16923077 C4.49204706,1.16923077 4.23604706,1.38281026 4.23604706,1.6478359 L4.23604706,2.72820513 L6.1184,2.72820513 L6.1184,1.6478359 C6.1184,1.38281026 5.86051765,1.16923077 5.54051765,1.16923077" id="Fill-5" fill="#7C87A5"></path>
|
||||
<path d="M6.93756678,1.16923077 L6.20909619,1.16923077 C5.88909619,1.16923077 5.63309619,1.38281026 5.63309619,1.6478359 L5.63309619,2.72820513 L7.51544913,2.72820513 L7.51544913,1.6478359 C7.51544913,1.38281026 7.25756678,1.16923077 6.93756678,1.16923077 Z" id="Stroke-7"></path>
|
||||
<path d="M22.3051073,1.16923077 L21.5747543,1.16923077 C21.2566367,1.16923077 21.0006367,1.38281026 21.0006367,1.6478359 L21.0006367,2.72820513 L22.8829896,2.72820513 L22.8829896,1.6478359 C22.8829896,1.38281026 22.6232249,1.16923077 22.3051073,1.16923077" id="Fill-9" fill="#7C87A5"></path>
|
||||
<path d="M23.7021564,1.16923077 L22.9718035,1.16923077 C22.6536858,1.16923077 22.3976858,1.38281026 22.3976858,1.6478359 L22.3976858,2.72820513 L24.2800388,2.72820513 L24.2800388,1.6478359 C24.2800388,1.38281026 24.020274,1.16923077 23.7021564,1.16923077 Z" id="Stroke-11"></path>
|
||||
<path d="M25.1010879,1.16923077 L24.3707349,1.16923077 C24.0526173,1.16923077 23.7947349,1.38281026 23.7947349,1.6478359 L23.7947349,2.72820513 L25.6770879,2.72820513 L25.6770879,1.6478359 C25.6770879,1.38281026 25.4192055,1.16923077 25.1010879,1.16923077" id="Fill-13" fill="#7C87A5"></path>
|
||||
<path d="M26.498137,1.16923077 L25.7677841,1.16923077 C25.4496664,1.16923077 25.1917841,1.38281026 25.1917841,1.6478359 L25.1917841,2.72820513 L27.074137,2.72820513 L27.074137,1.6478359 C27.074137,1.38281026 26.8162547,1.16923077 26.498137,1.16923077 Z" id="Stroke-15"></path>
|
||||
<path d="M13.9246948,1.16923077 L13.1943419,1.16923077 C12.8762242,1.16923077 12.6183419,1.38281026 12.6183419,1.6478359 L12.6183419,2.72820513 L14.5006948,2.72820513 L14.5006948,1.6478359 C14.5006948,1.38281026 14.2428125,1.16923077 13.9246948,1.16923077" id="Fill-17" fill="#7C87A5"></path>
|
||||
<path d="M15.3217439,1.16923077 L14.591391,1.16923077 C14.2732734,1.16923077 14.015391,1.38281026 14.015391,1.6478359 L14.015391,2.72820513 L15.8977439,2.72820513 L15.8977439,1.6478359 C15.8977439,1.38281026 15.6398616,1.16923077 15.3217439,1.16923077 Z" id="Stroke-19"></path>
|
||||
<path d="M16.7169107,1.16923077 L15.9865578,1.16923077 C15.6684401,1.16923077 15.4124401,1.38281026 15.4124401,1.6478359 L15.4124401,2.72820513 L17.2947931,2.72820513 L17.2947931,1.6478359 C17.2947931,1.38281026 17.0350284,1.16923077 16.7169107,1.16923077" id="Fill-21" fill="#7C87A5"></path>
|
||||
<path d="M18.1139599,1.16923077 L17.3836069,1.16923077 C17.0654893,1.16923077 16.8094893,1.38281026 16.8094893,1.6478359 L16.8094893,2.72820513 L18.6918422,2.72820513 L18.6918422,1.6478359 C18.6918422,1.38281026 18.4320775,1.16923077 18.1139599,1.16923077 Z" id="Stroke-23"></path>
|
||||
<path d="M11.1287142,1.16923077 L10.4002436,1.16923077 C10.0802436,1.16923077 9.8242436,1.38281026 9.8242436,1.6478359 L9.8242436,2.72820513 L11.7065965,2.72820513 L11.7065965,1.6478359 C11.7065965,1.38281026 11.4487142,1.16923077 11.1287142,1.16923077" id="Fill-25" fill="#7C87A5"></path>
|
||||
<path d="M12.5257633,1.16923077 L11.7972927,1.16923077 C11.4772927,1.16923077 11.2212927,1.38281026 11.2212927,1.6478359 L11.2212927,2.72820513 L13.1036457,2.72820513 L13.1036457,1.6478359 C13.1036457,1.38281026 12.8457633,1.16923077 12.5257633,1.16923077 Z" id="Stroke-27"></path>
|
||||
<path d="M8.33461592,1.16923077 L7.60426298,1.16923077 C7.28614533,1.16923077 7.03014533,1.38281026 7.03014533,1.6478359 L7.03014533,2.72820513 L8.91249827,2.72820513 L8.91249827,1.6478359 C8.91249827,1.38281026 8.65273356,1.16923077 8.33461592,1.16923077" id="Fill-29" fill="#7C87A5"></path>
|
||||
<path d="M9.73166505,1.16923077 L9.00131211,1.16923077 C8.68319446,1.16923077 8.42719446,1.38281026 8.42719446,1.6478359 L8.42719446,2.72820513 L10.3095474,2.72820513 L10.3095474,1.6478359 C10.3095474,1.38281026 10.0497827,1.16923077 9.73166505,1.16923077 Z" id="Stroke-31"></path>
|
||||
<path d="M27.8933038,1.16923077 L27.1629509,1.16923077 C26.8448332,1.16923077 26.5888332,1.38281026 26.5888332,1.6478359 L26.5888332,2.72820513 L28.4711862,2.72820513 L28.4711862,1.6478359 C28.4711862,1.38281026 28.2114215,1.16923077 27.8933038,1.16923077" id="Fill-33" fill="#7C87A5"></path>
|
||||
<path d="M29.2903529,1.16923077 L28.56,1.16923077 C28.2418824,1.16923077 27.9858824,1.38281026 27.9858824,1.6478359 L27.9858824,2.72820513 L29.8682353,2.72820513 L29.8682353,1.6478359 C29.8682353,1.38281026 29.6084706,1.16923077 29.2903529,1.16923077 Z" id="Stroke-35"></path>
|
||||
<path d="M29.6470588,18.4065268 L11.7647059,18.4065268 L11.7647059,2.53333333 L29.6470588,2.53333333 C30.1665882,2.53333333 30.5882353,2.97778275 30.5882353,3.52540793 L30.5882353,17.4144522 C30.5882353,17.9620774 30.1665882,18.4065268 29.6470588,18.4065268" id="Fill-37" fill="#FFFFFF"></path>
|
||||
<path d="M29.6470588,18.4065268 L11.7647059,18.4065268 L11.7647059,2.53333333 L29.6470588,2.53333333 C30.1665882,2.53333333 30.5882353,2.97778275 30.5882353,3.52540793 L30.5882353,17.4144522 C30.5882353,17.9620774 30.1665882,18.4065268 29.6470588,18.4065268 Z" id="Stroke-39" stroke="#7C87A5" stroke-width="0.892857143" stroke-linecap="round" stroke-linejoin="round"></path>
|
||||
<path d="M11.7647059,18.4065268 L1.41176471,18.4065268 C0.892235294,18.4065268 0.470588235,17.9620774 0.470588235,17.4144522 L0.470588235,6.5016317 C0.470588235,4.311131 2.15717647,2.53333333 4.23529412,2.53333333 L19.2941176,2.53333333 L15.5294118,2.53333333 C13.4512941,2.53333333 11.7647059,4.311131 11.7647059,6.5016317 L11.7647059,18.4065268 Z" id="Fill-41" fill="#FFFFFF"></path>
|
||||
<path d="M11.7647059,18.4065268 L1.41176471,18.4065268 C0.892235294,18.4065268 0.470588235,17.9620774 0.470588235,17.4144522 L0.470588235,6.5016317 C0.470588235,4.311131 2.15717647,2.53333333 4.23529412,2.53333333 L19.2941176,2.53333333 L15.5294118,2.53333333 C13.4512941,2.53333333 11.7647059,4.311131 11.7647059,6.5016317 L11.7647059,18.4065268 Z" id="Stroke-43" stroke="#7C87A5" stroke-width="0.892857143" stroke-linecap="round" stroke-linejoin="round"></path>
|
||||
<path d="M8.94117647,2.53333333 L7.05882353,2.53333333 C5.50023529,2.53333333 4.23529412,3.86668159 4.23529412,5.50955711 L4.23529412,7.49569044 C4.23529412,8.04331562 4.65694118,8.48776503 5.17647059,8.48776503 L8,8.48776503 C8.51952941,8.48776503 8.94117647,8.04331562 8.94117647,7.49569044 L8.94117647,5.50955711 C8.94117647,3.86668159 10.2061176,2.53333333 11.7647059,2.53333333 L12.7058824,2.53333333 L8.94117647,2.53333333 Z" id="Fill-45" fill="#4C97FF"></path>
|
||||
<path d="M8.94117647,2.53333333 L7.05882353,2.53333333 C5.50023529,2.53333333 4.23529412,3.86668159 4.23529412,5.50955711 L4.23529412,7.49569044 C4.23529412,8.04331562 4.65694118,8.48776503 5.17647059,8.48776503 L8,8.48776503 C8.51952941,8.48776503 8.94117647,8.04331562 8.94117647,7.49569044 L8.94117647,5.50955711 C8.94117647,3.86668159 10.2061176,2.53333333 11.7647059,2.53333333 L12.7058824,2.53333333 L8.94117647,2.53333333 Z" id="Stroke-47" stroke="#3D79CC" stroke-width="0.892857143" stroke-linecap="round" stroke-linejoin="round"></path>
|
||||
<polyline id="Stroke-50" stroke="#7C87A5" stroke-width="0.892857143" stroke-linecap="round" stroke-linejoin="round" points="0.470588235 10.4738984 28.4310588 10.4738984 30.5882353 13.448138"></polyline>
|
||||
<path d="M11.7647059,18.4065268 L1.41176471,18.4065268 C0.892235294,18.4065268 0.470588235,17.9620774 0.470588235,17.4144522 L0.470588235,6.5016317 C0.470588235,4.311131 2.15717647,2.53333333 4.23529412,2.53333333 L19.2941176,2.53333333 L15.5294118,2.53333333 C13.4512941,2.53333333 11.7647059,4.311131 11.7647059,6.5016317 L11.7647059,18.4065268 Z" id="Stroke-52" stroke="#7C87A5" stroke-width="0.892857143" stroke-linecap="round" stroke-linejoin="round"></path>
|
||||
<path d="M17.3069176,8.96410256 L16.5765647,8.96410256 C16.2584471,8.96410256 16.0005647,9.17768205 16.0005647,9.44270769 L16.0005647,10.5230769 L17.8829176,10.5230769 L17.8829176,9.44270769 C17.8829176,9.17768205 17.6250353,8.96410256 17.3069176,8.96410256" id="Fill-54" fill="#7C87A5"></path>
|
||||
<path d="M17.3069176,8.96410256 L16.5765647,8.96410256 C16.2584471,8.96410256 16.0005647,9.17768205 16.0005647,9.44270769 L16.0005647,10.5230769 L17.8829176,10.5230769 L17.8829176,9.44270769 C17.8829176,9.17768205 17.6250353,8.96410256 17.3069176,8.96410256 Z" id="Stroke-56"></path>
|
||||
<path d="M20.1782588,8.96410256 L19.4497882,8.96410256 C19.1297882,8.96410256 18.8737882,9.17768205 18.8737882,9.44270769 L18.8737882,10.5230769 L20.7561412,10.5230769 L20.7561412,9.44270769 C20.7561412,9.17768205 20.4982588,8.96410256 20.1782588,8.96410256" id="Fill-58" fill="#7C87A5"></path>
|
||||
<path d="M20.1782588,8.96410256 L19.4497882,8.96410256 C19.1297882,8.96410256 18.8737882,9.17768205 18.8737882,9.44270769 L18.8737882,10.5230769 L20.7561412,10.5230769 L20.7561412,9.44270769 C20.7561412,9.17768205 20.4982588,8.96410256 20.1782588,8.96410256 Z" id="Stroke-60"></path>
|
||||
<path d="M23.0514824,8.96410256 L22.3211294,8.96410256 C22.0030118,8.96410256 21.7451294,9.17768205 21.7451294,9.44270769 L21.7451294,10.5230769 L23.6274824,10.5230769 L23.6274824,9.44270769 C23.6274824,9.17768205 23.3696,8.96410256 23.0514824,8.96410256" id="Fill-62" fill="#7C87A5"></path>
|
||||
<path d="M23.0514824,8.96410256 L22.3211294,8.96410256 C22.0030118,8.96410256 21.7451294,9.17768205 21.7451294,9.44270769 L21.7451294,10.5230769 L23.6274824,10.5230769 L23.6274824,9.44270769 C23.6274824,9.17768205 23.3696,8.96410256 23.0514824,8.96410256 Z" id="Stroke-64"></path>
|
||||
<path d="M25.9228235,8.96410256 L25.1943529,8.96410256 C24.8743529,8.96410256 24.6183529,9.17768205 24.6183529,9.44270769 L24.6183529,10.5230769 L26.5007059,10.5230769 L26.5007059,9.44270769 C26.5007059,9.17768205 26.2428235,8.96410256 25.9228235,8.96410256" id="Fill-66" fill="#7C87A5"></path>
|
||||
<path d="M25.9228235,8.96410256 L25.1943529,8.96410256 C24.8743529,8.96410256 24.6183529,9.17768205 24.6183529,9.44270769 L24.6183529,10.5230769 L26.5007059,10.5230769 L26.5007059,9.44270769 C26.5007059,9.17768205 26.2428235,8.96410256 25.9228235,8.96410256 Z" id="Stroke-68"></path>
|
||||
<path d="M29.6470588,18.4065268 L11.7647059,18.4065268 L11.7647059,10.4699301 L28.4310588,10.4699301 L30.5882353,13.448138 L30.5882353,17.4144522 C30.5882353,17.9620774 30.1665882,18.4065268 29.6470588,18.4065268" id="Fill-70" fill="#E6E7E8"></path>
|
||||
<path d="M29.6470588,18.4065268 L11.7647059,18.4065268 L11.7647059,10.4699301 L28.4310588,10.4699301 L30.5882353,13.448138 L30.5882353,17.4144522 C30.5882353,17.9620774 30.1665882,18.4065268 29.6470588,18.4065268 Z" id="Stroke-72" stroke="#7C87A5" stroke-width="0.892857143" stroke-linecap="round" stroke-linejoin="round"></path>
|
||||
<path d="M11.7647059,18.4065268 L1.41176471,18.4065268 C0.892235294,18.4065268 0.470588235,17.9620774 0.470588235,17.4144522 L0.470588235,10.4699301 L11.7647059,10.4699301 L11.7647059,18.4065268 Z" id="Fill-74" fill="#E6E7E8"></path>
|
||||
<path d="M11.7647059,18.4065268 L1.41176471,18.4065268 C0.892235294,18.4065268 0.470588235,17.9620774 0.470588235,17.4144522 L0.470588235,10.4699301 L11.7647059,10.4699301 L11.7647059,18.4065268 Z" id="Stroke-76" stroke="#7C87A5" stroke-width="0.892857143" stroke-linecap="round" stroke-linejoin="round"></path>
|
||||
<mask id="mask-2" fill="white">
|
||||
<use xlink:href="#path-1"></use>
|
||||
</mask>
|
||||
<g id="Clip-79"></g>
|
||||
<polygon id="Fill-78" fill="#E6E7E8" mask="url(#mask-2)" points="15.5294118 14.4382284 26.8235294 14.4382284 26.8235294 10.4699301 15.5294118 10.4699301"></polygon>
|
||||
<polygon id="Stroke-80" stroke="#7C87A5" stroke-width="0.892857143" stroke-linecap="round" stroke-linejoin="round" mask="url(#mask-2)" points="15.5294118 14.4382284 26.8235294 14.4382284 26.8235294 10.4699301 15.5294118 10.4699301"></polygon>
|
||||
<path d="M28.432,10.4738984 L30.5891765,7.68021632" id="Stroke-81" stroke="#7C87A5" stroke-width="0.892857143" stroke-linecap="round" stroke-linejoin="round" mask="url(#mask-2)"></path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 13 KiB |
Loading…
Reference in a new issue