Unverified Commit 824764bc authored by Eric Rosenbaum's avatar Eric Rosenbaum Committed by GitHub

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

Update Windows version requirement on hardware extension landing pages 
parents 4a57d361 87fd7336
......@@ -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>
<FlexRow className="extension-info">
{props.renderCopy}
<div className="extension-image">
<img
alt={props.imageAlt}
src={props.imageSrc}
/>
{props.renderImage}
</div>
</FlexRow>
{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;
......@@ -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,6 +114,16 @@
color: $ui-white;
}
}
}
.extension-image {
margin-top: auto;
img {
max-width: $cols5;
max-height: $cols3;
}
}
.extension-requirements-container {
font-weight: 500;
......@@ -135,18 +150,6 @@
}
}
.extension-image {
width: 100%;
max-width: $cols5;
img {
max-width: 100%;
max-height: 100%;
}
}
}
.os-chooser {
padding: 0;
}
......
......@@ -32,9 +32,7 @@ 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"
>
renderCopy={
<FlexRow className="column extension-copy">
<h1><img
alt=""
......@@ -55,13 +53,19 @@ class EV3 extends ExtensionLanding {
}}
/>
</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+
Windows 10 version 1709+
</span>
<span>
<img
......@@ -82,7 +86,8 @@ class EV3 extends ExtensionLanding {
Scratch Link
</span>
</ExtensionRequirements>
</ExtensionHeader>
}
/>
<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" />
......
......@@ -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",
......
......@@ -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",
......
......@@ -27,15 +27,12 @@ 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">
renderCopy={
<FlexRow className="extension-copy">
<h1><img
alt=""
src="/images/microbit/microbit.svg"
......@@ -55,13 +52,19 @@ class MicroBit extends ExtensionLanding {
}}
/>
</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+
Windows 10 version 1709+
</span>
<span>
<img
......@@ -85,7 +88,8 @@ class MicroBit extends ExtensionLanding {
Scratch Link
</span>
</ExtensionRequirements>
</ExtensionHeader>
}
/>
<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" />
......
......@@ -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 {
......
......@@ -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",
......
......@@ -29,10 +29,8 @@ 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">
renderCopy={
<FlexRow className="extension-copy">
<h1><img
alt=""
src="/images/wedo2/wedo2.svg"
......@@ -52,13 +50,19 @@ class Wedo2 extends ExtensionLanding {
}}
/>
</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+
Windows 10 version 1709+
</span>
<span>
<img
......@@ -72,7 +76,7 @@ class Wedo2 extends ExtensionLanding {
alt=""
src="/svgs/extensions/bluetooth.svg"
/>
Bluetooth
Bluetooth 4.0
</span>
<span>
<img
......@@ -82,7 +86,8 @@ class Wedo2 extends ExtensionLanding {
Scratch Link
</span>
</ExtensionRequirements>
</ExtensionHeader>
}
/>
<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