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 => (
|
const ExtensionHeader = props => (
|
||||||
<div className="extension-header">
|
<div className="extension-header">
|
||||||
<FlexRow className="inner">
|
<FlexRow className="inner">
|
||||||
<FlexRow className="column extension-info">
|
<FlexRow className="extension-info">
|
||||||
{props.children}
|
{props.renderCopy}
|
||||||
|
<div className="extension-image">
|
||||||
|
{props.renderImage}
|
||||||
|
</div>
|
||||||
</FlexRow>
|
</FlexRow>
|
||||||
<div className="extension-image">
|
{props.renderRequirements}
|
||||||
<img
|
|
||||||
alt={props.imageAlt}
|
|
||||||
src={props.imageSrc}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</FlexRow>
|
</FlexRow>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
||||||
ExtensionHeader.propTypes = {
|
ExtensionHeader.propTypes = {
|
||||||
children: PropTypes.node,
|
renderCopy: PropTypes.node,
|
||||||
imageAlt: PropTypes.string,
|
renderImage: PropTypes.node,
|
||||||
imageSrc: PropTypes.string
|
renderRequirements: PropTypes.node
|
||||||
};
|
};
|
||||||
|
|
||||||
module.exports = ExtensionHeader;
|
module.exports = ExtensionHeader;
|
||||||
|
|
|
||||||
|
|
@ -79,15 +79,20 @@
|
||||||
.inner {
|
.inner {
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
flex-wrap: nowrap;
|
flex-wrap: nowrap;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
}
|
}
|
||||||
|
|
||||||
.extension-info {
|
.extension-info {
|
||||||
max-width: $cols7;
|
flex-wrap: nowrap;
|
||||||
align-items: flex-start;
|
flex-direction: row;
|
||||||
|
margin-bottom: 5rem;
|
||||||
|
|
||||||
.extension-copy {
|
.extension-copy {
|
||||||
margin-bottom: 5rem;
|
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
|
justify-content: start;
|
||||||
|
max-width: $cols7;
|
||||||
|
padding-right: 3.75em;
|
||||||
|
|
||||||
h1, h2 {
|
h1, h2 {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -109,41 +114,39 @@
|
||||||
color: $ui-white;
|
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 {
|
.extension-image {
|
||||||
width: 100%;
|
margin-top: auto;
|
||||||
max-width: $cols5;
|
|
||||||
|
|
||||||
img {
|
img {
|
||||||
max-width: 100%;
|
max-width: $cols5;
|
||||||
max-height: 100%;
|
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 (
|
return (
|
||||||
<div className="extension-landing ev3">
|
<div className="extension-landing ev3">
|
||||||
<ExtensionHeader
|
<ExtensionHeader
|
||||||
imageAlt={this.props.intl.formatMessage({id: 'ev3.imgAltEv3Illustration'})}
|
renderCopy={
|
||||||
imageSrc="/images/ev3/ev3-illustration.png"
|
<FlexRow className="column extension-copy">
|
||||||
>
|
<h1><img
|
||||||
<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
|
|
||||||
alt=""
|
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+
|
</FlexRow>
|
||||||
</span>
|
}
|
||||||
<span>
|
renderImage={<img
|
||||||
<img
|
alt={this.props.intl.formatMessage({id: 'ev3.imgAltEv3Illustration'})}
|
||||||
alt=""
|
src="/images/ev3/ev3-illustration.png"
|
||||||
src="/svgs/extensions/mac.svg"
|
/>}
|
||||||
/>
|
renderRequirements={
|
||||||
macOS 10.13+
|
<ExtensionRequirements>
|
||||||
</span>
|
<span>
|
||||||
<span>
|
<img
|
||||||
<img src="/svgs/extensions/bluetooth.svg" />
|
alt=""
|
||||||
Bluetooth
|
src="/svgs/extensions/windows.svg"
|
||||||
</span>
|
/>
|
||||||
<span>
|
Windows 10 version 1709+
|
||||||
<img
|
</span>
|
||||||
alt=""
|
<span>
|
||||||
src="/svgs/extensions/scratch-link.svg"
|
<img
|
||||||
/>
|
alt=""
|
||||||
Scratch Link
|
src="/svgs/extensions/mac.svg"
|
||||||
</span>
|
/>
|
||||||
</ExtensionRequirements>
|
macOS 10.13+
|
||||||
</ExtensionHeader>
|
</span>
|
||||||
|
<span>
|
||||||
|
<img src="/svgs/extensions/bluetooth.svg" />
|
||||||
|
Bluetooth
|
||||||
|
</span>
|
||||||
|
<span>
|
||||||
|
<img
|
||||||
|
alt=""
|
||||||
|
src="/svgs/extensions/scratch-link.svg"
|
||||||
|
/>
|
||||||
|
Scratch Link
|
||||||
|
</span>
|
||||||
|
</ExtensionRequirements>
|
||||||
|
}
|
||||||
|
/>
|
||||||
<OSChooser
|
<OSChooser
|
||||||
currentOS={this.state.OS}
|
currentOS={this.state.OS}
|
||||||
handleSetOS={this.onSetOS}
|
handleSetOS={this.onSetOS}
|
||||||
|
|
|
||||||
|
|
@ -27,65 +27,69 @@ require('../../components/extension-landing/extension-landing.scss');
|
||||||
require('./microbit.scss');
|
require('./microbit.scss');
|
||||||
|
|
||||||
class MicroBit extends ExtensionLanding {
|
class MicroBit extends ExtensionLanding {
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
return (
|
return (
|
||||||
<div className="extension-landing microbit">
|
<div className="extension-landing microbit">
|
||||||
<ExtensionHeader
|
<ExtensionHeader
|
||||||
imageAlt={this.props.intl.formatMessage({id: 'microbit.imgAltMicrobitIllustration'})}
|
renderCopy={
|
||||||
imageSrc="/images/microbit/microbit-heart.png"
|
<FlexRow className="extension-copy">
|
||||||
>
|
<h1><img
|
||||||
<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
|
|
||||||
alt=""
|
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+
|
</FlexRow>
|
||||||
</span>
|
}
|
||||||
<span>
|
renderImage={<img
|
||||||
<img
|
alt={this.props.intl.formatMessage({id: 'microbit.imgAltMicrobitIllustration'})}
|
||||||
alt=""
|
src="/images/microbit/microbit-heart.png"
|
||||||
src="/svgs/extensions/mac.svg"
|
/>}
|
||||||
/>
|
renderRequirements={
|
||||||
macOS 10.13+
|
<ExtensionRequirements>
|
||||||
</span>
|
<span>
|
||||||
<span>
|
<img
|
||||||
<img
|
alt=""
|
||||||
alt=""
|
src="/svgs/extensions/windows.svg"
|
||||||
src="/svgs/extensions/bluetooth.svg"
|
/>
|
||||||
/>
|
Windows 10 version 1709+
|
||||||
Bluetooth 4.0
|
</span>
|
||||||
</span>
|
<span>
|
||||||
<span>
|
<img
|
||||||
<img
|
alt=""
|
||||||
alt=""
|
src="/svgs/extensions/mac.svg"
|
||||||
src="/svgs/extensions/scratch-link.svg"
|
/>
|
||||||
/>
|
macOS 10.13+
|
||||||
Scratch Link
|
</span>
|
||||||
</span>
|
<span>
|
||||||
</ExtensionRequirements>
|
<img
|
||||||
</ExtensionHeader>
|
alt=""
|
||||||
|
src="/svgs/extensions/bluetooth.svg"
|
||||||
|
/>
|
||||||
|
Bluetooth 4.0
|
||||||
|
</span>
|
||||||
|
<span>
|
||||||
|
<img
|
||||||
|
alt=""
|
||||||
|
src="/svgs/extensions/scratch-link.svg"
|
||||||
|
/>
|
||||||
|
Scratch Link
|
||||||
|
</span>
|
||||||
|
</ExtensionRequirements>
|
||||||
|
}
|
||||||
|
/>
|
||||||
<OSChooser
|
<OSChooser
|
||||||
currentOS={this.state.OS}
|
currentOS={this.state.OS}
|
||||||
handleSetOS={this.onSetOS}
|
handleSetOS={this.onSetOS}
|
||||||
|
|
|
||||||
|
|
@ -5,15 +5,6 @@
|
||||||
.extension-header {
|
.extension-header {
|
||||||
background-color: $ui-mint-green;
|
background-color: $ui-mint-green;
|
||||||
background-image: url("/images/microbit/mbit-pattern.svg");
|
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 {
|
.things-to-try {
|
||||||
|
|
|
||||||
|
|
@ -29,60 +29,65 @@ class Wedo2 extends ExtensionLanding {
|
||||||
return (
|
return (
|
||||||
<div className="extension-landing wedo2">
|
<div className="extension-landing wedo2">
|
||||||
<ExtensionHeader
|
<ExtensionHeader
|
||||||
imageAlt={this.props.intl.formatMessage({id: 'wedo2.imgAltWeDoIllustration'})}
|
renderCopy={
|
||||||
imageSrc="/images/wedo2/wedo2-illustration.png"
|
<FlexRow className="extension-copy">
|
||||||
>
|
<h1><img
|
||||||
<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
|
|
||||||
alt=""
|
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+
|
</FlexRow>
|
||||||
</span>
|
}
|
||||||
<span>
|
renderImage={<img
|
||||||
<img
|
alt={this.props.intl.formatMessage({id: 'wedo2.imgAltWeDoIllustration'})}
|
||||||
alt=""
|
src="/images/wedo2/wedo2-illustration.png"
|
||||||
src="/svgs/extensions/mac.svg"
|
/>}
|
||||||
/>
|
renderRequirements={
|
||||||
macOS 10.13+
|
<ExtensionRequirements>
|
||||||
</span>
|
<span>
|
||||||
<span>
|
<img
|
||||||
<img
|
alt=""
|
||||||
alt=""
|
src="/svgs/extensions/windows.svg"
|
||||||
src="/svgs/extensions/bluetooth.svg"
|
/>
|
||||||
/>
|
Windows 10 version 1709+
|
||||||
Bluetooth
|
</span>
|
||||||
</span>
|
<span>
|
||||||
<span>
|
<img
|
||||||
<img
|
alt=""
|
||||||
alt=""
|
src="/svgs/extensions/mac.svg"
|
||||||
src="/svgs/extensions/scratch-link.svg"
|
/>
|
||||||
/>
|
macOS 10.13+
|
||||||
Scratch Link
|
</span>
|
||||||
</span>
|
<span>
|
||||||
</ExtensionRequirements>
|
<img
|
||||||
</ExtensionHeader>
|
alt=""
|
||||||
|
src="/svgs/extensions/bluetooth.svg"
|
||||||
|
/>
|
||||||
|
Bluetooth 4.0
|
||||||
|
</span>
|
||||||
|
<span>
|
||||||
|
<img
|
||||||
|
alt=""
|
||||||
|
src="/svgs/extensions/scratch-link.svg"
|
||||||
|
/>
|
||||||
|
Scratch Link
|
||||||
|
</span>
|
||||||
|
</ExtensionRequirements>
|
||||||
|
}
|
||||||
|
/>
|
||||||
<OSChooser
|
<OSChooser
|
||||||
currentOS={this.state.OS}
|
currentOS={this.state.OS}
|
||||||
handleSetOS={this.onSetOS}
|
handleSetOS={this.onSetOS}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue