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

Update Windows version requirement on hardware extension landing pages
This commit is contained in:
Eric Rosenbaum 2018-12-04 16:17:17 -05:00 committed by GitHub
commit 824764bc83
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 307 additions and 205 deletions

View file

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

View file

@ -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-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;
margin-top: auto;
img {
max-width: 100%;
max-height: 100%;
max-width: $cols5;
max-height: $cols3;
}
}
.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;
}
}
}

View file

@ -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
renderCopy={
<FlexRow className="column extension-copy">
<h1><img
alt=""
src="/svgs/extensions/windows.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>
)
}}
/>
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
alt=""
src="/svgs/extensions/scratch-link.svg"
/>
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" />

View file

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

View file

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

View file

@ -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
renderCopy={
<FlexRow className="extension-copy">
<h1><img
alt=""
src="/svgs/extensions/windows.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>
)
}}
/>
Windows 10+
</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>
</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" />

View file

@ -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 {

View file

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

View file

@ -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
renderCopy={
<FlexRow className="extension-copy">
<h1><img
alt=""
src="/svgs/extensions/windows.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>
)
}}
/>
Windows 10+
</span>
<span>
<img
alt=""
src="/svgs/extensions/mac.svg"
/>
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" />

Binary file not shown.

Before

Width:  |  Height:  |  Size: 27 KiB

After

Width:  |  Height:  |  Size: 37 KiB