Skip to content

GitLab

S
scratch-www
Unverified Commit 824764bc authored by Eric Rosenbaum's avatar Eric Rosenbaum Committed by GitHub
Browse files
Options

Merge pull request #2380 from ericrosenbaum/feature/update-win-version-req 

Update Windows version requirement on hardware extension landing pages
parents 4a57d361 87fd7336
Hide whitespace changes
Inline Side-by-side
Showing with 305 additions and 203 deletions
src/components/extension-landing/extension-header.jsx
View file @ 824764bc
......@@ -8,23 +8,21 @@ require('./extension-landing.scss');
const ExtensionHeader = props => (
<div className="extension-header">
<FlexRow className="inner">
<FlexRow className="column extension-info">
{props.children}
<FlexRow className="extension-info">
{props.renderCopy}
<div className="extension-image">
{props.renderImage}
</div>
</FlexRow>
<div className="extension-image">
<img
alt={props.imageAlt}
src={props.imageSrc}
/>
</div>
{props.renderRequirements}
</FlexRow>
</div>
);
ExtensionHeader.propTypes = {
children: PropTypes.node,
imageAlt: PropTypes.string,
imageSrc: PropTypes.string
renderCopy: PropTypes.node,
renderImage: PropTypes.node,
renderRequirements: PropTypes.node
};
module.exports = ExtensionHeader;
src/components/extension-landing/extension-landing.scss
View file @ 824764bc
......@@ -79,15 +79,20 @@
.inner {
justify-content: space-between;
flex-wrap: nowrap;
flex-direction: column;
align-items: flex-start;
}
.extension-info {
max-width: $cols7;
align-items: flex-start;
margin-bottom: 3rem;
flex-wrap: nowrap;
flex-direction: row;
.extension-copy {
margin-bottom: 5rem;
padding-right: 3.75em;
max-width: $cols7;
align-items: flex-start;
justify-content: start;
h1, h2 {
display: flex;
......@@ -109,41 +114,39 @@
color: $ui-white;
}
}
}
.extension-requirements-container {
font-weight: 500;
align-items: flex-start;
.requirements-header {
margin-bottom: 1.5rem;
}
.extension-image {
margin-top: auto;
.extension-requirements {
justify-content: space-between;
}
img {
max-width: $cols5;
max-height: $cols3;
}
}
.extension-requirements span {
display: flex;
margin-right: 1rem;
font-size: 15px; // TODO: change to rem later
align-items: center;
}
.extension-requirements-container {
font-weight: 500;
align-items: flex-start;
.extension-requirements span img {
padding-right: .5rem;
}
.requirements-header {
margin-bottom: 1.5rem;
}
}
.extension-image {
width: 100%;
max-width: $cols5;
.extension-requirements {
justify-content: space-between;
}
img {
max-width: 100%;
max-height: 100%;
.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;
}
}
}
......
src/views/ev3/ev3.jsx
View file @ 824764bc
......@@ -32,57 +32,62 @@ class EV3 extends ExtensionLanding {
return (
<div className="extension-landing ev3">
<ExtensionHeader
imageAlt={this.props.intl.formatMessage({id: 'ev3.imgAltEv3Illustration'})}
imageSrc="/images/ev3/ev3-illustration.png"
>
<FlexRow className="column extension-copy">
<h1><img
alt=""
src="/images/ev3/ev3.svg"
/>LEGO MINDSTORMS EV3</h1>
<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>
<ExtensionRequirements>
<span>
<img
alt=""
src="/svgs/extensions/windows.svg"
/>
Windows 10+
</span>
<span>
<img
alt=""
src="/svgs/extensions/mac.svg"
/>
macOS 10.13+
</span>
<span>
<img src="/svgs/extensions/bluetooth.svg" />
Bluetooth
</span>
<span>
<img
renderCopy={
<FlexRow className="column extension-copy">
<h1><img
alt=""
src="/svgs/extensions/scratch-link.svg"
src="/images/ev3/ev3.svg"
/>LEGO MINDSTORMS EV3</h1>
<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>
)
}}
/>
Scratch Link
</span>
</ExtensionRequirements>
</ExtensionHeader>
</FlexRow>
}
renderImage={<img
alt={this.props.intl.formatMessage({id: 'ev3.imgAltEv3Illustration'})}
src="/images/ev3/ev3-illustration.png"
/>}
renderRequirements={
<ExtensionRequirements>
<span>
<img
alt=""
src="/svgs/extensions/windows.svg"
/>
Windows 10 version 1709+
</span>
<span>
<img
alt=""
src="/svgs/extensions/mac.svg"
/>
macOS 10.13+
</span>
<span>
<img src="/svgs/extensions/bluetooth.svg" />
Bluetooth
</span>
<span>
<img
alt=""
src="/svgs/extensions/scratch-link.svg"
/>
Scratch Link
</span>
</ExtensionRequirements>
}
/>
<OSChooser
currentOS={this.state.OS}
handleSetOS={this.onSetOS}
......@@ -263,6 +268,32 @@ class EV3 extends ExtensionLanding {
</ExtensionSection>
<ExtensionSection className="faq">
<h2><FormattedMessage id="ev3.troubleshootingTitle" /></h2>
<h3 className="faq-title"><FormattedMessage id="ev3.checkOSVersionTitle" /></h3>
<p>
<FormattedMessage
id="ev3.checkOSVersionText"
values={{
winOSVersionLink: (
<a
href="https://support.microsoft.com/en-us/help/13443/windows-which-operating-system"
rel="noopener noreferrer"
target="_blank"
>
<FormattedMessage id="ev3.winOSVersionLinkText" />
</a>
),
macOSVersionLink: (
<a
href="https://support.apple.com/en-us/HT201260"
rel="noopener noreferrer"
target="_blank"
>
<FormattedMessage id="ev3.macOSVersionLinkText" />
</a>
)
}}
/>
</p>
<h3 className="faq-title"><FormattedMessage id="ev3.makeSurePairedTitle" /></h3>
<p>
<FormattedMessage
......@@ -280,6 +311,10 @@ class EV3 extends ExtensionLanding {
}}
/>
</p>
<h3 className="faq-title"><FormattedMessage id="ev3.reconnectTitle" /></h3>
<p>
<FormattedMessage id="ev3.reconnectText" />
</p>
<h3 className="faq-title"><FormattedMessage id="ev3.closeScratchCopiesTitle" /></h3>
<p>
<FormattedMessage id="ev3.closeScratchCopiesText" />
......
src/views/ev3/l10n.json
View file @ 824764bc
......@@ -25,9 +25,15 @@
"ev3.spaceTacosTitle": "Space Tacos",
"ev3.spaceTacosDescription": "Build your own controller to catch tacos in space.",
"ev3.troubleshootingTitle": "Troubleshooting",
"ev3.checkOSVersionTitle": "Make sure your operating system is compatible with Scratch Link",
"ev3.checkOSVersionText": "The minimum operating system versions are listed at the top of this page. See instructions for checking your version of {winOSVersionLink} or {macOSVersionLink}.",
"ev3.winOSVersionLinkText": "Windows",
"ev3.macOSVersionLinkText": "Mac OS",
"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}.",
"ev3.pairingInstructionText": "bluetooth pairing instructions from LEGO",
"ev3.reconnectTitle": "On Windows, try un-pairing before connecting",
"ev3.reconnectText": "If you have connected before and are unable to reconnect, try manually un-pairing your EV3 from your computer: open your Bluetooth settings, find your EV3, and remove it.",
"ev3.closeScratchCopiesTitle": "Close other copies of Scratch",
"ev3.closeScratchCopiesText": "Only one copy of Scratch can connect with the EV3 at a time. If you have Scratch open in other browser tabs, close it and try again.",
"ev3.otherComputerConnectedTitle": "Make sure no other computer is connected to your EV3",
......
src/views/microbit/l10n.json
View file @ 824764bc
......@@ -23,6 +23,10 @@
"microbit.oceanAdventure": "Ocean Adventure",
"microbit.oceanAdventureDescription": "Build your own controller and swim toward the saxophones.",
"microbit.troubleshootingTitle": "Troubleshooting",
"microbit.checkOSVersionTitle": "Make sure your operating system is compatible with Scratch Link",
"microbit.checkOSVersionText": "The minimum operating system versions are listed at the top of this page. See instructions for checking your version of {winOSVersionLink} or {macOSVersionLink}.",
"microbit.winOSVersionLinkText": "Windows",
"microbit.macOSVersionLinkText": "Mac OS",
"microbit.closeScratchCopiesTitle": "Close other copies of Scratch",
"microbit.closeScratchCopiesText": "Only one copy of Scratch can connect with the micro:bit at a time. If you have Scratch open in other browser tabs, close it and try again.",
"microbit.otherComputerConnectedTitle": "Make sure no other computer is connected to your micro:bit",
......
src/views/microbit/microbit.jsx
View file @ 824764bc
......@@ -27,65 +27,69 @@ require('../../components/extension-landing/extension-landing.scss');
require('./microbit.scss');
class MicroBit extends ExtensionLanding {
render () {
return (
<div className="extension-landing microbit">
<ExtensionHeader
imageAlt={this.props.intl.formatMessage({id: 'microbit.imgAltMicrobitIllustration'})}
imageSrc="/images/microbit/microbit-heart.png"
>
<FlexRow className="column extension-copy">
<h1><img
alt=""
src="/images/microbit/microbit.svg"
/>micro:bit</h1>
<FormattedMessage
id="microbit.headerText"
values={{
microbitLink: (
<a
href="http://microbit.org/"
rel="noopener noreferrer"
target="_blank"
>
micro:bit
</a>
)
}}
/>
</FlexRow>
<ExtensionRequirements>
<span>
<img
alt=""
src="/svgs/extensions/windows.svg"
/>
Windows 10+
</span>
<span>
<img
alt=""
src="/svgs/extensions/mac.svg"
/>
macOS 10.13+
</span>
<span>
<img
renderCopy={
<FlexRow className="extension-copy">
<h1><img
alt=""
src="/svgs/extensions/bluetooth.svg"
src="/images/microbit/microbit.svg"
/>micro:bit</h1>
<FormattedMessage
id="microbit.headerText"
values={{
microbitLink: (
<a
href="http://microbit.org/"
rel="noopener noreferrer"
target="_blank"
>
micro:bit
</a>
)
}}
/>
Bluetooth 4.0
</span>
<span>
<img
alt=""
src="/svgs/extensions/scratch-link.svg"
/>
Scratch Link
</span>
</ExtensionRequirements>
</ExtensionHeader>
</FlexRow>
}
renderImage={<img
alt={this.props.intl.formatMessage({id: 'microbit.imgAltMicrobitIllustration'})}
src="/images/microbit/microbit-heart.png"
/>}
renderRequirements={
<ExtensionRequirements>
<span>
<img
alt=""
src="/svgs/extensions/windows.svg"
/>
Windows 10 version 1709+
</span>
<span>
<img
alt=""
src="/svgs/extensions/mac.svg"
/>
macOS 10.13+
</span>
<span>
<img
alt=""
src="/svgs/extensions/bluetooth.svg"
/>
Bluetooth 4.0
</span>
<span>
<img
alt=""
src="/svgs/extensions/scratch-link.svg"
/>
Scratch Link
</span>
</ExtensionRequirements>
}
/>
<OSChooser
currentOS={this.state.OS}
handleSetOS={this.onSetOS}
......@@ -267,6 +271,32 @@ class MicroBit extends ExtensionLanding {
</ExtensionSection>
<ExtensionSection className="faq">
<h2><FormattedMessage id="microbit.troubleshootingTitle" /></h2>
<h3 className="faq-title"><FormattedMessage id="microbit.checkOSVersionTitle" /></h3>
<p>
<FormattedMessage
id="microbit.checkOSVersionText"
values={{
winOSVersionLink: (
<a
href="https://support.microsoft.com/en-us/help/13443/windows-which-operating-system"
rel="noopener noreferrer"
target="_blank"
>
<FormattedMessage id="microbit.winOSVersionLinkText" />
</a>
),
macOSVersionLink: (
<a
href="https://support.apple.com/en-us/HT201260"
rel="noopener noreferrer"
target="_blank"
>
<FormattedMessage id="microbit.macOSVersionLinkText" />
</a>
)
}}
/>
</p>
<h3 className="faq-title"><FormattedMessage id="microbit.closeScratchCopiesTitle" /></h3>
<p>
<FormattedMessage id="microbit.closeScratchCopiesText" />
......
src/views/microbit/microbit.scss
View file @ 824764bc
......@@ -5,15 +5,6 @@
.extension-header {
background-color: $ui-mint-green;
background-image: url("/images/microbit/mbit-pattern.svg");
.extension-info {
padding-right: $cols1;
max-width: $cols7 + ($gutter / $em);
}
.extension-image {
max-width: $cols4;
}
}
.things-to-try {
......
src/views/wedo2/l10n.json
View file @ 824764bc
......@@ -17,6 +17,10 @@
"wedo2.starter3Title": "Distance Dino",
"wedo2.starter3Description": "Use the distance sensor to move the dinosaur.",
"wedo2.troubleshootingTitle": "Troubleshooting",
"wedo2.checkOSVersionTitle": "Make sure your operating system is compatible with Scratch Link",
"wedo2.checkOSVersionText": "The minimum operating system versions are listed at the top of this page. See instructions for checking your version of {winOSVersionLink} or {macOSVersionLink}.",
"wedo2.winOSVersionLinkText": "Windows",
"wedo2.macOSVersionLinkText": "Mac OS",
"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",
......
src/views/wedo2/wedo2.jsx
View file @ 824764bc
......@@ -29,60 +29,65 @@ class Wedo2 extends ExtensionLanding {
return (
<div className="extension-landing wedo2">
<ExtensionHeader
imageAlt={this.props.intl.formatMessage({id: 'wedo2.imgAltWeDoIllustration'})}
imageSrc="/images/wedo2/wedo2-illustration.png"
>
<FlexRow className="column extension-copy">
<h1><img
alt=""
src="/images/wedo2/wedo2.svg"
/>LEGO WeDo 2.0</h1>
<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
alt=""
src="/svgs/extensions/windows.svg"
/>
Windows 10+
</span>
<span>
<img
renderCopy={
<FlexRow className="extension-copy">
<h1><img
alt=""
src="/svgs/extensions/mac.svg"
src="/images/wedo2/wedo2.svg"
/>LEGO WeDo 2.0</h1>
<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>
)
}}
/>
macOS 10.13+
</span>
<span>
<img
alt=""
src="/svgs/extensions/bluetooth.svg"
/>
Bluetooth
</span>
<span>
<img
alt=""
src="/svgs/extensions/scratch-link.svg"
/>
Scratch Link
</span>
</ExtensionRequirements>
</ExtensionHeader>
</FlexRow>
}
renderImage={<img
alt={this.props.intl.formatMessage({id: 'wedo2.imgAltWeDoIllustration'})}
src="/images/wedo2/wedo2-illustration.png"
/>}
renderRequirements={
<ExtensionRequirements>
<span>
<img
alt=""
src="/svgs/extensions/windows.svg"
/>
Windows 10 version 1709+
</span>
<span>
<img
alt=""
src="/svgs/extensions/mac.svg"
/>
macOS 10.13+
</span>
<span>
<img
alt=""
src="/svgs/extensions/bluetooth.svg"
/>
Bluetooth 4.0
</span>
<span>
<img
alt=""
src="/svgs/extensions/scratch-link.svg"
/>
Scratch Link
</span>
</ExtensionRequirements>
}
/>
<OSChooser
currentOS={this.state.OS}
handleSetOS={this.onSetOS}
......@@ -201,6 +206,32 @@ class Wedo2 extends ExtensionLanding {
</ExtensionSection>
<ExtensionSection className="faq">
<h2><FormattedMessage id="wedo2.troubleshootingTitle" /></h2>
<h3 className="faq-title"><FormattedMessage id="wedo2.checkOSVersionTitle" /></h3>
<p>
<FormattedMessage
id="wedo2.checkOSVersionText"
values={{
winOSVersionLink: (
<a
href="https://support.microsoft.com/en-us/help/13443/windows-which-operating-system"
rel="noopener noreferrer"
target="_blank"
>
<FormattedMessage id="wedo2.winOSVersionLinkText" />
</a>
),
macOSVersionLink: (
<a
href="https://support.apple.com/en-us/HT201260"
rel="noopener noreferrer"
target="_blank"
>
<FormattedMessage id="wedo2.macOSVersionLinkText" />
</a>
)
}}
/>
</p>
<h3 className="faq-title"><FormattedMessage id="wedo2.closeScratchCopiesTitle" /></h3>
<p>
<FormattedMessage id="wedo2.closeScratchCopiesText" />
......
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