diff --git a/src/views/download/download.jsx b/src/views/download/download.jsx index e4a6bef7c..17e798146 100644 --- a/src/views/download/download.jsx +++ b/src/views/download/download.jsx @@ -4,13 +4,15 @@ const injectIntl = require('react-intl').injectIntl; const intlShape = require('react-intl').intlShape; const React = require('react'); -const api = require('../../lib/api'); const FlexRow = require('../../components/flex-row/flex-row.jsx'); -const SubNavigation = require('../../components/subnavigation/subnavigation.jsx'); -const TitleBanner = require('../../components/title-banner/title-banner.jsx'); +const bindAll = require('lodash.bindall'); +const Steps = require('../../components/steps/steps.jsx'); +const Step = require('../../components/steps/step.jsx'); const Page = require('../../components/page/www/page.jsx'); const render = require('../../lib/render.jsx'); +const OS_ENUM = require('../../components/extension-landing/os-enum.js'); +const OSChooser = require('../../components/os-chooser/os-chooser.jsx'); require('./download.scss'); require('../../components/forms/button.scss'); @@ -18,246 +20,203 @@ require('../../components/forms/button.scss'); class Download extends React.Component { constructor (props) { super(props); + bindAll(this, [ + 'onSetOS' + ]); + let detectedOS = OS_ENUM.WINDOWS; + if (window.navigator && window.navigator.platform) { + if (window.navigator.platform === 'MacIntel') { + detectedOS = OS_ENUM.MACOS; + } + } + this.state = { - swfVersion: '' + OS: detectedOS }; } - componentDidMount () { - let uri = '/scratchr2/static/sa/version.xml'; - if (this.props.intl.locale === 'pt-br') { - uri = '/scratchr2/static/sa/pt-br/version.xml'; - } - api({ - host: '', - uri: uri, - responseType: 'string' - }, (err, body, res) => { - if (err || res.statusCode >= 400) { - return this.setState({ - swfVersion: -1 - }); - } - - const doc = new DOMParser().parseFromString(body, 'text/xml'); - return this.setState({ - swfVersion: doc.getElementsByTagName('versionNumber')[0].childNodes[0].nodeValue - }); + onSetOS (os) { + this.setState({ + OS: os }); } - render () { - let downloadPath = '/scratchr2/static/sa/Scratch-'; - let downloadUrls = null; - if (this.props.intl.locale === 'pt-br') { - downloadPath = '/scratchr2/static/sa/pt-br/Scratch-'; - } - if (this.state.swfVersion.length > 0 && this.state.swfVersion !== -1) { - downloadUrls = { - mac: `${downloadPath}${this.state.swfVersion}.dmg`, - mac105: `${downloadPath}${this.state.swfVersion}.air`, - windows: `${downloadPath}${this.state.swfVersion}.exe` - }; - } + render () { return (
- -
-

- -

-

- -

-
-
- - -
  • - -
    • -     - -
  • - -
    • -     - -
  • - -
    • -     - -
  • - -
    • -     -     -
    -     -
    -
    -
    -

    - -

    - -
    -
    -

    {'1'}

    -
    -

    -

    - -
    -
    -
    -

    {'2'}

    -
    -

    -

    - {downloadUrls === null ? [] : [ - - ]} - {this.state.swfVersion === -1 ? [ -

    - -

    - ] : []} -
    -
    -
    -

    {'3'}

    -
    -

    -

    - -
    +
    + + + +

    + +

    +     + + + + + + + + Windows 10+ + + + + macOS 10.13+ + + + +     +
    + {this.props.intl.formatMessage({id:
    -
    -
    -
    - -

    -

    - {this.state.swfVersion === -1 ? [] : [ -

    - -

    - ]} -
    + +
    -
    - -

    -

    -

    -
    + +
    + +

    + +
    + + + + +
    + + + + + + + + + +
    +     -
    - -

    -

    -

    -

    -

    - + - - -
    -
    + + + +
    + +
    + +     +     +
    +
    + +

    +

    +

    + +

    +

    +

    + +

    +     +
    + +
    + +

    +

    + +
    + +

    + + + + +

    +
    +
    + +

    + + + + +

    +
    +     +     +
    ); + } } - Download.propTypes = { intl: intlShape + }; const WrappedDownload = injectIntl(Download); diff --git a/src/views/download/download.scss b/src/views/download/download.scss index 146508a6f..5510b2554 100644 --- a/src/views/download/download.scss +++ b/src/views/download/download.scss @@ -6,123 +6,152 @@ } .download { - .title-banner { - &.masthead { - margin-bottom: 0; - background-color: $ui-blue-dark; - padding-bottom: 0; - - h1 { - margin: 0 0 2rem 0; - text-align: left; - color: $ui-white; - } - - p { - margin: 0; - text-align: left; - color: $ui-white; - - a { - border-bottom: 1px solid $ui-white; - color: $ui-white; - } - } - - .band { - margin-top: 2rem; - background-color: $ui-white-15percent; - padding: 1rem 0; - } - - .sub-nav { - text-align: left; - justify-content: flex-start; - - li { - margin: 0 .5rem 0 0; - } - } - } - } - - .sub-nav-item { - margin: .5rem; - } - - .callout { - text-align: center; - } - - .download-content { - padding-bottom: 2rem; - } - - .three-col-row { - align-items: flex-start; - } - - .installation { - background-color: $ui-gray; - padding: 2rem; - } - - .installation-column { - max-width: $cols4; - text-align: center; - - p { - margin-right: .5rem; - margin-left: .5rem; - } - } - - .installation-column-number { - margin: 2rem auto; - border: 2px solid $active-gray; - border-radius: 2rem; + .download-header { background-color: $ui-blue; - width: 3.75rem; - height: 3.75rem; - } - - .installation-column-number-text { - text-align: center; - line-height: 1.8em; - color: $type-white; - } - - .installation-downloads { - padding-left: 0; - list-style: none; - } - - .installation-downloads-item { - margin: .25rem; - padding: 0; - text-align: center; - } - - section { - margin-bottom: 2rem; - } - - .mod-link { color: $ui-white; - } - - @media #{$small} { + padding: 4rem 0; + .inner { - .installation-column { - max-width: 100%; + justify-content: space-between; + flex-wrap: nowrap; + } + + .download-info { + padding-right: $cols1; + max-width: $cols7 + ($gutter / $em); + align-items: flex-start; + + .download-copy { + margin-bottom: 5rem; + align-items: flex-start; + + h1, h2 { + display: flex; + margin-bottom: 2rem; + color: $ui-white; + + img { + padding-right: .5rem; + max-height: 100%; + } + } + } + + .download-requirements-container { + font-weight: 500; + align-items: flex-start; + + .requirements-header { + margin-bottom: 1.5rem; + } + + .download-requirements { + justify-content: space-between; + } + + .download-requirements span { + display: flex; + margin-right: 1rem; + font-size: 15px; + align-items: center; + } + + .download-requirements span img { + padding-right: .5rem; + } } } - } + .download-image { + width: 100%; + max-width: $cols4; + + img { + max-width: 100%; + max-height: 100%; + } - @media #{$intermediate-and-smaller} { - .three-col-row { - flex-direction: column; - align-items: center; } } + .install-scratch { + padding: 2rem 0; + + .inner { + align-items: flex-start; + } + + .downloads-container { + text-align: center; + } + + .store-badge { + display: block; + width: 150px; + height: 80px; + } + + .horizontal-divider { + display: block; + margin: 20px; + } + + .horizontal-divider:before, + .horizontal-divider:after { + display: inline-block; + position: relative; + background-color: $ui-dark-gray; + width: 50%; + height: 1px; + vertical-align: middle; + content: ""; + } + + .horizontal-divider:before { + right: .5em; + margin-left: -50%; + } + + .horizontal-divider:after { + left: .5em; + margin-right: -50%; + } + } + .download-section { + padding: 4rem 0; + .inner { + align-items: flex-start; + } + } + + .blue { + background-color: $ui-blue-10percent; + } + + .faq { + p { + margin-bottom: 1.25rem; + margin-left: 0; + max-width: $cols8; + text-align: left; + } + + .faq-title { + margin-bottom: 0; + font-size: 1.4rem; + } + } + + .older-version { + padding-right: 24px; + p { + color: $link-blue; + font-weight:600; + } + .screenshot { + $img-border: rgba(0, 0, 0, .05); + border: 2px solid $img-border; + border-radius: 8px; + background-color: $ui-white; + } + } + } diff --git a/static/images/download/desktop.png b/static/images/download/desktop.png new file mode 100644 index 000000000..e79ec0632 Binary files /dev/null and b/static/images/download/desktop.png differ diff --git a/static/images/download/download.png b/static/images/download/download.png new file mode 100644 index 000000000..9f379d72c Binary files /dev/null and b/static/images/download/download.png differ diff --git a/static/images/download/placeholder.png b/static/images/download/placeholder.png new file mode 100644 index 000000000..2d54b4d08 Binary files /dev/null and b/static/images/download/placeholder.png differ diff --git a/static/images/download/r-arrow.svg b/static/images/download/r-arrow.svg new file mode 100644 index 000000000..56e23874c --- /dev/null +++ b/static/images/download/r-arrow.svg @@ -0,0 +1,15 @@ + + + + Arrow-Right + Created with Sketch. + + + + + + + + + + \ No newline at end of file diff --git a/static/images/download/scratch1-4.png b/static/images/download/scratch1-4.png new file mode 100644 index 000000000..93fb22b7f Binary files /dev/null and b/static/images/download/scratch1-4.png differ diff --git a/static/images/download/scratch2.png b/static/images/download/scratch2.png new file mode 100644 index 000000000..5178ed543 Binary files /dev/null and b/static/images/download/scratch2.png differ