diff --git a/src/components/extension-landing/extension-header.jsx b/src/components/extension-landing/extension-header.jsx index df1957a2a..0a6509583 100644 --- a/src/components/extension-landing/extension-header.jsx +++ b/src/components/extension-landing/extension-header.jsx @@ -8,23 +8,21 @@ require('./extension-landing.scss'); const ExtensionHeader = props => (
- - {props.children} + + {props.renderCopy} +
+ {props.renderImage} +
-
- {props.imageAlt} -
+ {props.renderRequirements}
); ExtensionHeader.propTypes = { - children: PropTypes.node, - imageAlt: PropTypes.string, - imageSrc: PropTypes.string + renderCopy: PropTypes.node, + renderImage: PropTypes.node, + renderRequirements: PropTypes.node }; module.exports = ExtensionHeader; diff --git a/src/components/extension-landing/extension-landing.scss b/src/components/extension-landing/extension-landing.scss index bb06fcda2..96a763cbb 100644 --- a/src/components/extension-landing/extension-landing.scss +++ b/src/components/extension-landing/extension-landing.scss @@ -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; + } } } diff --git a/src/views/ev3/ev3.jsx b/src/views/ev3/ev3.jsx index 476f76f81..011b67b2d 100644 --- a/src/views/ev3/ev3.jsx +++ b/src/views/ev3/ev3.jsx @@ -32,57 +32,62 @@ class EV3 extends ExtensionLanding { return (
- -

LEGO MINDSTORMS EV3

- - LEGO MINDSTORMS Education EV3 - - ) - }} - /> - - - - +

LEGO MINDSTORMS EV3

+ + LEGO MINDSTORMS Education EV3 + + ) + }} /> - Windows 10+ - - - - macOS 10.13+ - - - - Bluetooth - - - - Scratch Link - - - + + } + renderImage={{this.props.intl.formatMessage({id:} + renderRequirements={ + + + + Windows 10 version 1709+ + + + + macOS 10.13+ + + + + Bluetooth + + + + Scratch Link + + + } + />

+

+

+ + + + ), + macOSVersionLink: ( + + + + ) + }} + /> +

+

+

+ +

diff --git a/src/views/ev3/l10n.json b/src/views/ev3/l10n.json index 58a815c8f..a6a93e1d7 100644 --- a/src/views/ev3/l10n.json +++ b/src/views/ev3/l10n.json @@ -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", diff --git a/src/views/microbit/l10n.json b/src/views/microbit/l10n.json index b067a62d8..8691e56a8 100644 --- a/src/views/microbit/l10n.json +++ b/src/views/microbit/l10n.json @@ -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", diff --git a/src/views/microbit/microbit.jsx b/src/views/microbit/microbit.jsx index 2a7f86c51..1a2755889 100644 --- a/src/views/microbit/microbit.jsx +++ b/src/views/microbit/microbit.jsx @@ -27,65 +27,69 @@ require('../../components/extension-landing/extension-landing.scss'); require('./microbit.scss'); class MicroBit extends ExtensionLanding { - render () { return (

- -

micro:bit

- - micro:bit - - ) - }} - /> - - - - +

micro:bit

+ + micro:bit + + ) + }} /> - Windows 10+ - - - - macOS 10.13+ - - - - Bluetooth 4.0 - - - - Scratch Link - - - + + } + renderImage={{this.props.intl.formatMessage({id:} + renderRequirements={ + + + + Windows 10 version 1709+ + + + + macOS 10.13+ + + + + Bluetooth 4.0 + + + + Scratch Link + + + } + />

+

+

+ + + + ), + macOSVersionLink: ( + + + + ) + }} + /> +

diff --git a/src/views/microbit/microbit.scss b/src/views/microbit/microbit.scss index 580d19e0b..cc01b5375 100644 --- a/src/views/microbit/microbit.scss +++ b/src/views/microbit/microbit.scss @@ -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 { diff --git a/src/views/wedo2/l10n.json b/src/views/wedo2/l10n.json index 1fdbc3b4a..b79b6ffb6 100644 --- a/src/views/wedo2/l10n.json +++ b/src/views/wedo2/l10n.json @@ -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", diff --git a/src/views/wedo2/wedo2.jsx b/src/views/wedo2/wedo2.jsx index afb299f05..2b1aa7374 100644 --- a/src/views/wedo2/wedo2.jsx +++ b/src/views/wedo2/wedo2.jsx @@ -29,60 +29,65 @@ class Wedo2 extends ExtensionLanding { return (

- -

LEGO WeDo 2.0

- - LEGO Education WeDo 2.0 - - ) - }} - /> - - - - +

LEGO WeDo 2.0

+ + LEGO Education WeDo 2.0 + + ) + }} /> - Windows 10+ - - - - macOS 10.13+ - - - - Bluetooth - - - - Scratch Link - - - + + } + renderImage={{this.props.intl.formatMessage({id:} + renderRequirements={ + + + + Windows 10 version 1709+ + + + + macOS 10.13+ + + + + Bluetooth 4.0 + + + + Scratch Link + + + } + />

+

+

+ + + + ), + macOSVersionLink: ( + + + + ) + }} + /> +

diff --git a/static/images/microbit/microbit-heart.png b/static/images/microbit/microbit-heart.png index 49ddd7cc6..637f9fc30 100644 Binary files a/static/images/microbit/microbit-heart.png and b/static/images/microbit/microbit-heart.png differ