scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-23 15:47:53 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Merge pull request #2034 from LLK/hotfix/extension-landing-pages

Browse source 
[Master] Extension landing pages update
This commit is contained in:
Eric Rosenbaum 2018-08-22 12:06:59 -04:00 committed by GitHub
commit 1c9fb8e3c9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
53 changed files with 1751 additions and 1652 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/_colors.scss
View file

@ -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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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;

7
src/components/os-chooser/os-chooser.jsx
View file

@ -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
View 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
View 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
View 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%;
}
}
}
}

8
src/l10n.json
View file

@ -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?",

7
src/routes.json
View file

@ -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/?$",

513
src/views/ev3/ev3.jsx
View file

@ -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,328 +8,220 @@ 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">
<FlexRow className="column extension-copy">
<h2><img src="/images/ev3/ev3.svg" />LEGO MINDSTORMS EV3</h2>
<FormattedMessage
id="ev3.headerText"
values={{
ev3Link: (
<a
href="https://shop.lego.com/en-US/LEGO-MINDSTORMS-EV3-31313"
rel="noopener noreferrer"
target="_blank"
>
LEGO MINDSTORMS EV3
</a>
)
}}
/>
<span />
</FlexRow>
<FlexRow className="column extension-requirements-container">
<span className="requirements-header">
<FormattedMessage id="ev3.requirements" />
</span>
<FlexRow className="extension-requirements">
<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>
</FlexRow>
</FlexRow>
</FlexRow>
<div className="extension-image">
<img src="/images/ev3/ev3-illustration.png" />
</div>
<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
id="ev3.headerText"
values={{
ev3Link: (
<a
href="https://education.lego.com/en-us/middle-school/intro/mindstorms-ev3"
rel="noopener noreferrer"
target="_blank"
>
LEGO MINDSTORMS Education EV3
</a>
)
}}
/>
</FlexRow>
</div>
<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}
/>
<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`}
/>
</div>
</FlexRow>
</FlexRow>
</div>
</FlexRow>
</FlexRow>
</div>
<div className="getting-started">
<FlexRow className="inner column">
<h2><FormattedMessage id="ev3.gettingStarted" /></h2>
<FlexRow className="column connecting-ev3">
<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">
<div className="step-image">
<img src="/images/ev3/ev3-connect-1.png" />
</div>
<p><FormattedMessage id="ev3.turnOnEV3" /></p>
</div>
<InstallScratchLink
currentOS={this.state.OS}
/>
<ExtensionSection className="getting-started">
<h2><FormattedMessage id="ev3.gettingStarted" /></h2>
<FlexRow className="column getting-started-section">
<h3><FormattedMessage id="ev3.connectingEV3" /></h3>
<Steps>
<Step number={1}>
<div className="step-image">
<img src="/images/ev3/ev3-connect-1.png" />
</div>
<div className="step">
<FlexRow className="step-number-row">
<div className="step-number">2</div>
</FlexRow>
<div className="step-content">
<div className="step-image">
<img src="/images/ev3/ev3-connect-2.png" />
</div>
<p>
<FormattedMessage
id="ev3.useScratch3"
values={{
scratch3Link: (
<a
href="https://beta.scratch.mit.edu/"
rel="noopener noreferrer"
target="_blank"
>
<p><FormattedMessage id="ev3.turnOnEV3" /></p>
</Step>
<Step number={2}>
<div className="step-image">
<img
className="screenshot"
src="/images/ev3/ev3-connect-2.png"
/>
</div>
<p>
<FormattedMessage
id="ev3.useScratch3"
values={{
scratch3Link: (
<a
href="https://beta.scratch.mit.edu/"
rel="noopener noreferrer"
target="_blank"
>
Scratch 3.0
</a>
)
}}
/>
</p>
</a>
)
}}
/>
</p>
</Step>
<Step number={3}>
<div className="step-image">
<img
className="screenshot"
src="/images/ev3/ev3-connect-3.png"
/>
</div>
<p><FormattedMessage id="ev3.addExtension" /></p>
</Step>
</Steps>
<TipBox title={this.props.intl.formatMessage({id: 'ev3.firstTimeConnecting'})}>
<p><FormattedMessage id="ev3.pairingDescription" /></p>
<Steps>
<Step>
<div className="step-image">
<img src="/images/ev3/ev3-accept-connection.png" />
</div>
</div>
<div className="step">
<FlexRow className="step-number-row">
<div className="step-number">3</div>
</FlexRow>
<div className="step-content">
<div className="step-image">
<img src="/images/ev3/ev3-connect-3.png" />
</div>
<p><FormattedMessage id="ev3.addExtension" /></p>
<p><FormattedMessage id="ev3.acceptConnection" /></p>
</Step>
<Step>
<div className="step-image">
<img src="/images/ev3/ev3-pin.png" />
</div>
</div>
</FlexRow>
<div className="tip-box">
<h4><FormattedMessage id="ev3.firstTimeConnecting" /></h4>
<FlexRow className="column tip-content">
<p><FormattedMessage id="ev3.pairingDescription" /></p>
<FlexRow className="steps">
<div className="step">
<div className="step-content">
<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">
<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">
<div className="step-image">
<img
className="screenshot"
src={`/images/ev3/${
this.state.OS === this.OS_ENUM.WINDOWS ?
'win-device-ready.png' :
'mac-enter-passcode.png'
}`}
/>
</div>
<p>
{this.state.OS === this.OS_ENUM.WINDOWS ?
<FormattedMessage id="ev3.windowsFinalizePairing" /> :
<FormattedMessage id="ev3.macosFinalizePairing" />
}
</p>
</div>
</div>
</FlexRow>
</FlexRow>
</div>
</FlexRow>
<p><FormattedMessage id="ev3.acceptPasscode" /></p>
</Step>
<Step>
<div className="step-image">
<img
className="screenshot"
src={`/images/ev3/${
this.state.OS === OS_ENUM.WINDOWS ?
'win-device-ready.png' :
'mac-enter-passcode.png'
}`}
/>
</div>
<p>
{this.state.OS === OS_ENUM.WINDOWS ?
<FormattedMessage id="ev3.windowsFinalizePairing" /> :
<FormattedMessage id="ev3.macosFinalizePairing" />
}
</p>
</Step>
</Steps>
</TipBox>
</FlexRow>
</div>
<div className="blue things-to-try">
<FlexRow className="inner column">
<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">
<span className="step-description">
Plug a motor into <strong>port A</strong> on the EV3 hub
</span>
<div className="step-image">
<img src="/images/ev3/ev3-motor-port-a.png" />
</div>
</FlexRow>
</FlexRow>
</ExtensionSection>
<ExtensionSection className="blue things-to-try">
<h2><FormattedMessage id="ev3.thingsToTry" /></h2>
<h3><FormattedMessage id="ev3.makeMotorMove" /></h3>
<Steps>
<Step
compact
number={1}
>
<span className="step-description">
<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>
<div className="step">
<FlexRow className="step-number-row">
<div className="step-number">2</div>
<FlexRow className="step-content">
<span className="step-description">
Find the <strong>&ldquo;motor A turn this way&rdquo;</strong> block
and click on it.
</span>
<div className="step-image">
<img src="/images/ev3/motor-turn-block.png" />
</div>
</FlexRow>
</FlexRow>
</Step>
<Step
compact
number={2}
>
<span className="step-description">
<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>
<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'));

307
src/views/ev3/ev3.scss
View file

@ -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%;
}
}
}
}

20
src/views/ev3/l10n.json
View file

@ -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"
}

6
src/views/microbit/l10n.json
View file

@ -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",

534
src/views/microbit/microbit.jsx
View file

@ -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,350 +8,225 @@ 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">
<FlexRow className="column extension-copy">
<h2><img src="/images/microbit/microbit.svg" />micro:bit</h2>
<FormattedMessage
id="microbit.headerText"
values={{
microbitLink: (
<a
href="http://microbit.org/"
rel="noopener noreferrer"
target="_blank"
>
<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
id="microbit.headerText"
values={{
microbitLink: (
<a
href="http://microbit.org/"
rel="noopener noreferrer"
target="_blank"
>
micro:bit
</a>
)
}}
/>
</FlexRow>
<FlexRow className="column extension-requirements-container">
<span className="requirements-header">
<FormattedMessage id="microbit.requirements" />
</span>
<FlexRow className="extension-requirements">
<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 4.0
</span>
<span>
<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>
</a>
)
}}
/>
</FlexRow>
</div>
<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 4.0
</span>
<span>
<img src="/svgs/extensions/scratch-link.svg" />
Scratch Link
</span>
</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`}
/>
</div>
</FlexRow>
</FlexRow>
</div>
</FlexRow>
<InstallScratchLink
currentOS={this.state.OS}
/>
<ExtensionSection className="getting-started">
<h2><FormattedMessage id="microbit.gettingStarted" /></h2>
<FlexRow className="column getting-started-section">
<h3><FormattedMessage id="microbit.installMicrobitHex" /></h3>
<Steps>
<Step number={1}>
<div className="step-image">
<img src="/images/microbit/mbit-usb.png" />
</div>
<p>
<FormattedMessage id="microbit.connectUSB" />
</p>
</Step>
<Step number={2}>
<div className="step-image">
<img src="/images/microbit/mbit-hex-download.png" />
</div>
<a
download
className="download"
href="https://downloads.scratch.mit.edu/microbit/scratch-microbit-1.0.hex.zip"
>
<FormattedMessage id="microbit.downloadHex" />
</a>
</Step>
<Step number={3}>
<div className="step-image">
<img
src={`/images/microbit/${
this.state.OS === OS_ENUM.WINDOWS ? 'win' : 'mac'
}-copy-hex.png`}
/>
</div>
<p>
<FormattedMessage id="microbit.dragDropHex" />
</p>
</Step>
</Steps>
</FlexRow>
</div>
<div className="getting-started">
<FlexRow className="inner column">
<h2><FormattedMessage id="microbit.gettingStarted" /></h2>
<FlexRow className="column install-hex">
<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">
<div className="step-image">
<img src="/images/microbit/mbit-usb.png" />
</div>
<p>
<FormattedMessage id="microbit.connectUSB" />
</p>
</div>
<hr />
<FlexRow className="column getting-started-section">
<h3><FormattedMessage id="microbit.connectingMicrobit" /></h3>
<Steps>
<Step number={1}>
<div className="step-image">
<img src="/images/microbit/mbit-connect-1.png" />
</div>
<div className="step">
<FlexRow className="step-number-row">
<div className="step-number">2</div>
</FlexRow>
<div className="step-content">
<div className="step-image">
<img src="/images/microbit/mbit-hex-download.png" />
</div>
<a
download
className="download"
href="https://downloads.scratch.mit.edu/microbit/scratch-microbit-1.0.hex.zip"
>
<FormattedMessage id="microbit.downloadHex" />
</a>
</div>
<p><FormattedMessage id="microbit.powerMicrobit" /></p>
</Step>
<Step number={2}>
<div className="step-image">
<img
className="screenshot"
src="/images/microbit/mbit-connect-2.png"
/>
</div>
<div className="step">
<FlexRow className="step-number-row">
<div className="step-number">3</div>
</FlexRow>
<div className="step-content">
<div className="step-image">
<img
src={`/images/microbit/${
this.state.OS === this.OS_ENUM.WINDOWS ? 'win' : 'mac'
}-copy-hex.png`}
/>
</div>
<p>
<FormattedMessage id="microbit.dragDropHex" />
</p>
</div>
</div>
</FlexRow>
</FlexRow>
<div className="section-separator" />
<FlexRow className="column connecting">
<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">
<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">
<div className="step-image">
<img src="/images/microbit/mbit-connect-2.png" />
</div>
<p>
<FormattedMessage
id="microbit.useScratch3"
values={{
scratch3Link: (
<a
href="https://beta.scratch.mit.edu/"
rel="noopener noreferrer"
target="_blank"
>
<p>
<FormattedMessage
id="microbit.useScratch3"
values={{
scratch3Link: (
<a
href="https://beta.scratch.mit.edu/"
rel="noopener noreferrer"
target="_blank"
>
Scratch 3.0
</a>
)
}}
/>
</p>
</div>
</a>
)
}}
/>
</p>
</Step>
<Step number={3}>
<div className="step-image">
<img
className="screenshot"
src="/images/microbit/mbit-connect-3.png"
/>
</div>
<div className="step">
<FlexRow className="step-number-row">
<div className="step-number">3</div>
</FlexRow>
<div className="step-content">
<div className="step-image">
<img src="/images/microbit/mbit-connect-3.png" />
</div>
<p><FormattedMessage id="microbit.addExtension" /></p>
</div>
</div>
</FlexRow>
</FlexRow>
<p><FormattedMessage id="microbit.addExtension" /></p>
</Step>
</Steps>
</FlexRow>
</div>
<div className="blue things-to-try">
<FlexRow className="inner column">
<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">
<span className="step-description">
<FormattedMessage
id="microbit.displayHelloBlock"
values={{
displayHelloText: (
<strong>
<FormattedMessage id="microbit.displayHelloText" />
</strong>
)
}}
/>
</span>
<div className="step-image">
<img src="/images/microbit/display-hello-block.png" />
</div>
</FlexRow>
</FlexRow>
</ExtensionSection>
<ExtensionSection className="blue things-to-try">
<h2><FormattedMessage id="microbit.thingsToTry" /></h2>
<h3><FormattedMessage id="microbit.displayHelloTitle" /></h3>
<Steps className="display-hello">
<Step
compact
number={1}
>
<span className="step-description">
<FormattedMessage
id="microbit.displayHelloBlock"
values={{
displayHelloText: (
<strong>
<FormattedMessage id="microbit.displayHelloText" />
</strong>
)
}}
/>
</span>
<div className="step-image">
<img src="/images/microbit/display-hello-block.png" />
</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.helloScroll"
values={{
helloText: (
<strong><FormattedMessage id="microbit.helloText" /></strong>
)
}}
/> </span>
<div className="step-image">
<img src="/images/microbit/mbit-display-h.png" />
</div>
</FlexRow>
</FlexRow>
</Step>
<Step
compact
number={2}
>
<span className="step-description">
<FormattedMessage
id="microbit.helloScroll"
values={{
helloText: (
<strong><FormattedMessage id="microbit.helloText" /></strong>
)
}}
/>
</span>
<div className="step-image">
<img src="/images/microbit/mbit-display-h.png" />
</div>
</FlexRow>
<div className="section-separator" />
<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">
</Step>
</Steps>
<hr />
<h3><FormattedMessage id="microbit.starterProjects" /></h3>
<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'));

297
src/views/microbit/microbit.scss
View file

@ -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
View 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
View 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 &amp; 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
View 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;
}
}
}

46
src/views/wedo2/l10n.json
View file

@ -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"
}

343
src/views/wedo2/wedo2.jsx
View file

@ -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 &amp; Scratch</h2>
<p className="intro">
<FormattedMessage id="wedo2.intro" />
</p>
</div>
<div className="banner-photo">
<img src="/images/wedo/wedo-milo.png" />
</div>
</div>
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"
>
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.useScratch3"
values={{
scratch3Link: (
<a
href="https://beta.scratch.mit.edu/"
rel="noopener noreferrer"
target="_blank"
>
Scratch 3.0
</a>
)
}}
/>
</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.closeScratchCopiesText" />
</p>
<h3 className="faq-title"><FormattedMessage id="wedo2.otherComputerConnectedTitle" /></h3>
<p>
<FormattedMessage id="wedo2.otherComputerConnectedText" />
</p>
<h3 className="faq-title"><FormattedMessage id="wedo2.legacyInfoTitle" /></h3>
<p>
<FormattedMessage
id="wedo2.legacyInfoText"
values={{
wedoLegacyLink: (
<a
href="/wedo-legacy"
rel="noopener noreferrer"
target="_blank"
>
<FormattedMessage id="wedo2.legacyLinkText" />
</a>
)
}}
/>
</p>
</ExtensionSection>
</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>
Wedo2.propTypes = {
intl: intlShape.isRequired
};
<div className="banner">
<div
className="inner"
id="starter-projects"
>
<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"
/>
<p>
<FormattedMessage id="wedo2.starterMotor" />
</p>
</div>
</a>
<a href="/projects/101038249/?tip_bar=ext2#editor">
<div className="project-card">
<img
alt=""
src="/images/wedo/distance.png"
/>
<p>
<FormattedMessage id="wedo2.starterDistance" />
</p>
</div>
</a>
<a href="/projects/101033190/?tip_bar=ext2#editor">
<div className="project-card">
<img
alt=""
src="/images/wedo/tilt.png"
/>
<p>
<FormattedMessage id="wedo2.starterTilt" />
</p>
</div>
</a>
</div>
</div>
</div>
const WrappedWedo2 = injectIntl(Wedo2);
<div className="inner">
<section>
<h3>
<FormattedMessage id="wedo2.versionTitle" />
</h3>
<p>
<FormattedMessage id="wedo2.versionText" />
</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>
</div>
);
render(<Page><Wedo2 /></Page>, document.getElementById('app'));
render(<Page><WrappedWedo2 /></Page>, document.getElementById('app'));

232
src/views/wedo2/wedo2.scss
View file

@ -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");
}
}

BIN
static/images/ev3/ev3-connect-3.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 41 KiB

BIN
static/images/microbit/mbit-connect-3.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 41 KiB

0
static/images/wedo/create-and-share.png → static/images/wedo-legacy/create-and-share.png
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 14 KiB

0
static/images/wedo/distance.jpg → static/images/wedo-legacy/distance.jpg
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 13 KiB

0
static/images/wedo/distance.png → static/images/wedo-legacy/distance.png
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 50 KiB

After

Width:  |  Height:  |  Size: 50 KiB

0
static/images/wedo/download-device-manager.png → static/images/wedo-legacy/download-device-manager.png
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 14 KiB

0
static/images/wedo/light-and-music.jpg → static/images/wedo-legacy/light-and-music.jpg
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

0
static/images/wedo/motor.jpg → static/images/wedo-legacy/motor.jpg
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 13 KiB

0
static/images/wedo/motor.png → static/images/wedo-legacy/motor.png
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 27 KiB

After

Width:  |  Height:  |  Size: 27 KiB

0
static/images/wedo/set-up.png → static/images/wedo-legacy/set-up.png
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

0
static/images/wedo/tilt.jpg → static/images/wedo-legacy/tilt.jpg
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

0
static/images/wedo/tilt.png → static/images/wedo-legacy/tilt.png
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 27 KiB

After

Width:  |  Height:  |  Size: 27 KiB

0
static/images/wedo/wedo-milo.png → static/images/wedo-legacy/wedo-milo.png
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 315 KiB

After

Width:  |  Height:  |  Size: 315 KiB

0
static/images/wedo/wedo1.png → static/images/wedo-legacy/wedo1.png
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 62 KiB

After

Width:  |  Height:  |  Size: 62 KiB

0
static/images/wedo/wedo2.png → static/images/wedo-legacy/wedo2.png
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 89 KiB

After

Width:  |  Height:  |  Size: 89 KiB

BIN
static/images/wedo2/wedo2-connect-1.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
static/images/wedo2/wedo2-connect-2.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 41 KiB

BIN
static/images/wedo2/wedo2-illustration.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 57 KiB

BIN
static/images/wedo2/wedo2-motor-turn-block.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 21 KiB

BIN
static/images/wedo2/wedo2-motor.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 20 KiB

12
static/images/wedo2/wedo2-pattern.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 7.6 KiB

BIN
static/images/wedo2/wedo2-starter1.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 46 KiB

BIN
static/images/wedo2/wedo2-starter2.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 97 KiB

BIN
static/images/wedo2/wedo2-starter3.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 41 KiB

58
static/images/wedo2/wedo2.svg Normal file
View 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>
Side by side

After

Width:  |  Height:  |  Size: 13 KiB