scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2025-02-17 00:21:20 -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

18
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>
<FlexRow className="extension-info">
{props.renderCopy}
<div className="extension-image">
<img
alt={props.imageAlt}
src={props.imageSrc}
/>
{props.renderImage}
</div>
</FlexRow>
{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;

33
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,6 +114,16 @@
color: $ui-white;
}
}
}
.extension-image {
margin-top: auto;
img {
max-width: $cols5;
max-height: $cols3;
}
}
.extension-requirements-container {
font-weight: 500;
@ -135,18 +150,6 @@
}
}
.extension-image {
width: 100%;
max-width: $cols5;
img {
max-width: 100%;
max-height: 100%;
}
}
}
.os-chooser {
padding: 0;
}

13
src/views/ev3/ev3.jsx
View file

@ -32,9 +32,7 @@ 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"
>
renderCopy={
<FlexRow className="column extension-copy">
<h1><img
alt=""
@ -55,6 +53,12 @@ class EV3 extends ExtensionLanding {
}}
/>
</FlexRow>
}
renderImage={<img
alt={this.props.intl.formatMessage({id: 'ev3.imgAltEv3Illustration'})}
src="/images/ev3/ev3-illustration.png"
/>}
renderRequirements={
<ExtensionRequirements>
<span>
<img
@ -82,7 +86,8 @@ class EV3 extends ExtensionLanding {
Scratch Link
</span>
</ExtensionRequirements>
</ExtensionHeader>
}
/>
<OSChooser
currentOS={this.state.OS}
handleSetOS={this.onSetOS}

16
src/views/microbit/microbit.jsx
View file

@ -27,15 +27,12 @@ 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">
renderCopy={
<FlexRow className="extension-copy">
<h1><img
alt=""
src="/images/microbit/microbit.svg"
@ -55,6 +52,12 @@ class MicroBit extends ExtensionLanding {
}}
/>
</FlexRow>
}
renderImage={<img
alt={this.props.intl.formatMessage({id: 'microbit.imgAltMicrobitIllustration'})}
src="/images/microbit/microbit-heart.png"
/>}
renderRequirements={
<ExtensionRequirements>
<span>
<img
@ -85,7 +88,8 @@ class MicroBit extends ExtensionLanding {
Scratch Link
</span>
</ExtensionRequirements>
</ExtensionHeader>
}
/>
<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 {

17
src/views/wedo2/wedo2.jsx
View file

@ -29,10 +29,8 @@ 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">
renderCopy={
<FlexRow className="extension-copy">
<h1><img
alt=""
src="/images/wedo2/wedo2.svg"
@ -52,6 +50,12 @@ class Wedo2 extends ExtensionLanding {
}}
/>
</FlexRow>
}
renderImage={<img
alt={this.props.intl.formatMessage({id: 'wedo2.imgAltWeDoIllustration'})}
src="/images/wedo2/wedo2-illustration.png"
/>}
renderRequirements={
<ExtensionRequirements>
<span>
<img
@ -72,7 +76,7 @@ class Wedo2 extends ExtensionLanding {
alt=""
src="/svgs/extensions/bluetooth.svg"
/>
Bluetooth
Bluetooth 4.0
</span>
<span>
<img
@ -82,7 +86,8 @@ class Wedo2 extends ExtensionLanding {
Scratch Link
</span>
</ExtensionRequirements>
</ExtensionHeader>
}
/>
<OSChooser
currentOS={this.state.OS}
handleSetOS={this.onSetOS}