mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2024-11-23 07:38:07 -05:00
Update version requirements
This commit is contained in:
Eric Rosenbaum
parent
ab106f7723
commit
421aabadc1
6 changed files with 211 additions and 205 deletions
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 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>
|
||||
</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}
|
||||
|
|
|
|||
|
|
@ -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 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>
|
||||
</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}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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 version 1709+
|
||||
</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}
|
||||
|
|
|
|||
Loading…
Reference in a new issue