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..ae929a4c5 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; + flex-wrap: nowrap; + flex-direction: row; + margin-bottom: 5rem; .extension-copy { - margin-bottom: 5rem; align-items: flex-start; + justify-content: start; + max-width: $cols7; + padding-right: 3.75em; 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 9d2fb77a0..50f29fa1e 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 version 1709+ -
- - - macOS 10.13+ - - - - Bluetooth - - - - Scratch Link - -
-
+ + } + renderImage={{this.props.intl.formatMessage({id:} + renderRequirements={ + + + + Windows 10 version 1709+ + + + + macOS 10.13+ + + + + Bluetooth + + + + Scratch Link + + + } + /> - -

micro:bit

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

micro:bit

+ + micro:bit + + ) + }} /> - Windows 10 version 1709+ -
- - - 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 + + + } + /> - -

LEGO WeDo 2.0

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

LEGO WeDo 2.0

+ + LEGO Education WeDo 2.0 + + ) + }} /> - Windows 10 version 1709+ -
- - - 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 + + + } + />