Skip to content

GitLab

S
scratch-www
Commit b604b196 authored by Connor Hudson's avatar Connor Hudson Committed by Eric Rosenbaum
Browse files
Options

Refactor Extension Landing Pages (#2006) 

* Add extension-landing generalized styles, install scratch link component

* Make EV3 page use generalized stuff

* Use OS_ENUM file instead of class variable

* use extension-landing/os-enum in os chooser

* Use extension-landing class in extension-landing.scss

* Use extension-landing styles and components on microbit page

* Add view-specific styles

* Move install scratch link l10n strings to src/l10n.json

* Start moving steps display to its own components

* Finish initial pass at Step, Steps components for extension landing pages

* Create ProjectCard component

* Use new components on InstallScratchLInk component

* Use new components on EV3 page

* allow className prop in Steps component

* Use new components on micro:bit landing page

* imageUrl -> imageSrc in ProjectCard

* Create ExtensionHeader component and use it on micro:bit and EV3 pages

* Fix a spacing issue in the InstallScratchLink component

* Add ExtensionRequirements component

* Use ExtensionRequirements component on landing pages

* Remove requirements l10n string for ev3 page

* Move project card styles out of things-to-try section

* Don't render the number row in a step if compact and number props are not set

* Add ExtensionSection component

* Use ExtensionSection on ev3 and microbit pages

* Move state configuration to ExtensionLanding class

* Move tip box, screenshot styles outside of specific section

* Add TipBox component and use it on the EV3 page

* Use hr element instead of section-separator div

* Remove refactor TODO comments :)
parent 078feca0
Hide whitespace changes
Inline Side-by-side
Showing with 971 additions and 1244 deletions
src/components/extension-landing/extension-header.jsx 0 → 100644
View file @ b604b196
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;
src/components/extension-landing/extension-landing.jsx 0 → 100644
View file @ b604b196
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'
]);
this.state = {
OS: OS_ENUM.WINDOWS
};
}
onSetOS (os) {
this.setState({
OS: os
});
}
}
module.exports = ExtensionLanding;
src/components/extension-landing/extension-landing.scss 0 → 100644
View file @ b604b196
@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-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;
}
}
src/components/extension-landing/extension-requirements.jsx 0 → 100644
View file @ b604b196
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;
src/components/extension-landing/extension-section.jsx 0 → 100644
View file @ b604b196
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;
src/components/extension-landing/install-scratch-link.jsx 0 → 100644
View file @ b604b196
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;
src/components/extension-landing/os-enum.js 0 → 100644
View file @ b604b196
const OS_ENUM = {
WINDOWS: 'Windows',
MACOS: 'macOS'
};
module.exports = OS_ENUM;
src/components/extension-landing/project-card.jsx 0 → 100644
View file @ b604b196
const PropTypes = require('prop-types');
const React = require('react');
const ProjectCard = props => (
<a
download
className="project-card"
href={props.cardUrl}
>
<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;
src/components/extension-landing/tip-box.jsx 0 → 100644
View file @ b604b196
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;
src/components/os-chooser/os-chooser.jsx
View file @ b604b196
......@@ -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">
......
src/components/steps/step.jsx 0 → 100644
View file @ b604b196
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;
src/components/steps/steps.jsx 0 → 100644
View file @ b604b196
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;
src/components/steps/steps.scss 0 → 100644
View file @ b604b196
@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%;
}
}
}
}
src/l10n.json
View file @ b604b196
......@@ -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?",
......
src/views/ev3/ev3.jsx
View file @ b604b196
/*
* 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,201 @@ 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');
require('./ev3.scss');
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');
class EV3 extends React.Component {
constructor (props) {
super(props);
bindAll(this, [
'onSetOS'
]);
const Steps = require('../../components/steps/steps.jsx');
const Step = require('../../components/steps/step.jsx');
this.OS_ENUM = {
WINDOWS: 'Windows',
MACOS: 'macOS'
};
const OS_ENUM = require('../../components/extension-landing/os-enum.js');
this.state = {
OS: this.OS_ENUM.WINDOWS
};
}
onSetOS (os) {
this.setState({
OS: os
});
}
require('../../components/extension-landing/extension-landing.scss');
require('./ev3.scss');
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"
>
<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://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" />
</a>
)
}}
/>
</FlexRow>
<ExtensionRequirements>
<span>
<img src="/svgs/extensions/windows.svg" />
Windows 10+
</span>
<span>
<img src="/svgs/extensions/mac.svg" />
</span>
<span>
<img src="/svgs/extensions/mac.svg" />
macOS 10.13+
</span>
<span>
<img src="/svgs/extensions/bluetooth.svg" />
</span>
<span>
<img src="/svgs/extensions/bluetooth.svg" />
Bluetooth
</span>
<span>
<img src="/svgs/extensions/scratch-link.svg" />
</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>
</FlexRow>
</div>
</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 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>
</div>
</a>
)
}}
/>
</p>
</Step>
<Step number={3}>
<div className="step-image">
<img src="/images/ev3/ev3-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/ev3/ev3-connect-3.png" />
</div>
<p><FormattedMessage id="ev3.addExtension" /></p>
<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>
</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.acceptConnection" /></p>
</Step>
<Step>
<div className="step-image">
<img src="/images/ev3/ev3-pin.png" />
</div>
<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>Make a motor move</h3>
<Steps>
<Step
compact
number={1}
>
<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>
<div className="step">
<FlexRow className="step-number-row">
<div className="step-number">2</div>
<FlexRow className="step-content">
<span className="step-description">
</Step>
<Step
compact
number={2}
>
<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>
</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>Starter Projects</h3>
<Steps>
<ProjectCard
cardUrl="https://downloads.scratch.mit.edu/ev3/ev3-wave-hello.sb3"
description="Make a puppet robot and have a friendly chat."
imageSrc="/images/ev3/starter-wave-hello.png"
title="Wave Hello"
/>
<ProjectCard
cardUrl="https://downloads.scratch.mit.edu/ev3/ev3-distance-instrument.sb3"
description="Move your body in front of the sensor to make music."
imageSrc="/images/ev3/starter-distance-instrument.png"
title="Distance Instrument"
/>
<ProjectCard
cardUrl="https://downloads.scratch.mit.edu/ev3/ev3-space-tacos.sb3"
description="Build your own controller to catch tacos in space."
imageSrc="/images/ev3/starter-flying-game.png"
title="Space Tacos"
/>
</Steps>
</ExtensionSection>
<ExtensionSection className="faq">
<h2><FormattedMessage id="ev3.troubleshootingTitle" /></h2>
<h3 className="faq-title"><FormattedMessage id="ev3.makeSurePairedTitle" /></h3>
<p>
......@@ -378,12 +246,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'));
src/views/ev3/ev3.scss
View file @ b604b196
// 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-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%;
}
}
}
}
src/views/ev3/l10n.json
View file @ b604b196
{
"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.",
......
src/views/microbit/l10n.json
View file @ b604b196
{
"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",
......
src/views/microbit/microbit.jsx
View file @ b604b196
/*
* 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,219 @@ 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');
require('./microbit.scss');
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');
class MicroBit extends React.Component {
constructor (props) {
super(props);
bindAll(this, [
'onSetOS'
]);
const Steps = require('../../components/steps/steps.jsx');
const Step = require('../../components/steps/step.jsx');
this.OS_ENUM = {
WINDOWS: 'Windows',
MACOS: 'macOS'
};
const OS_ENUM = require('../../components/extension-landing/os-enum.js');
this.state = {
OS: this.OS_ENUM.WINDOWS
};
}
require('../../components/extension-landing/extension-landing.scss');
require('./microbit.scss');
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" />
</a>
)
}}
/>
</FlexRow>
<ExtensionRequirements>
<span>
<img src="/svgs/extensions/windows.svg" />
Windows 10+
</span>
<span>
<img src="/svgs/extensions/mac.svg" />
</span>
<span>
<img src="/svgs/extensions/mac.svg" />
macOS 10.13+
</span>
<span>
<img src="/svgs/extensions/bluetooth.svg" />
</span>
<span>
<img src="/svgs/extensions/bluetooth.svg" />
Bluetooth 4.0
</span>
<span>
<img src="/svgs/extensions/scratch-link.svg" />
</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>
</FlexRow>
</div>
</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>
</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>
<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>
<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.connectUSB" />
</p>
</Step>
<Step number={2}>
<div className="step-image">
<img src="/images/microbit/mbit-hex-download.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>
<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>
</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>
<p>
<FormattedMessage id="microbit.dragDropHex" />
</p>
</Step>
</Steps>
</FlexRow>
<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-connect-2.png" />
</div>
<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>
<p><FormattedMessage id="microbit.powerMicrobit" /></p>
</Step>
<Step number={2}>
<div className="step-image">
<img 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/mbit-connect-3.png" />
</div>
<p><FormattedMessage id="microbit.addExtension" /></p>
</div>
<p>
<FormattedMessage
id="microbit.useScratch3"
values={{
scratch3Link: (
<a
href="https://beta.scratch.mit.edu/"
rel="noopener noreferrer"
target="_blank"
>
Scratch 3.0
</a>
)
}}
/>
</p>
</Step>
<Step number={3}>
<div className="step-image">
<img src="/images/microbit/mbit-connect-3.png" />
</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://downloads.scratch.mit.edu/microbit/microbit-heartbeat.sb3"
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://downloads.scratch.mit.edu/microbit/microbit-guitar.sb3"
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://downloads.scratch.mit.edu/microbit/microbit-fish.sb3"
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 +234,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'));
src/views/microbit/microbit.scss
View file @ b604b196
// 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-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%;
}
}
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment