scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-23 07:38:07 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Update version requirements

Browse source
This commit is contained in:
Eric Rosenbaum 2018-12-03 15:29:25 -05:00
parent ab106f7723
commit 421aabadc1
6 changed files with 211 additions and 205 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
src/components/extension-landing/extension-header.jsx
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;

65
src/components/extension-landing/extension-landing.scss
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;
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;
}
}
}

103
src/views/ev3/ev3.jsx
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 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}

110
src/views/microbit/microbit.jsx
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 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}

9
src/views/microbit/microbit.scss
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 {

109
src/views/wedo2/wedo2.jsx
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 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}