From 1a172d45e0979bbee3c1d5c59c65312e879b5e95 Mon Sep 17 00:00:00 2001 From: rschamp Date: Tue, 26 Nov 2019 17:31:47 -0500 Subject: [PATCH] Purge old banner --- src/views/splash/feature/middle-banner.jsx | 43 ---- src/views/splash/feature/middle-banner.scss | 99 -------- src/views/splash/feature/small-top-banner.jsx | 26 -- .../splash/feature/small-top-banner.scss | 27 --- src/views/splash/feature/top-banner.jsx | 47 ---- src/views/splash/feature/top-banner.scss | 223 ------------------ src/views/splash/l10n.json | 6 +- src/views/splash/presentation.jsx | 64 +---- 8 files changed, 7 insertions(+), 528 deletions(-) delete mode 100644 src/views/splash/feature/middle-banner.jsx delete mode 100644 src/views/splash/feature/middle-banner.scss delete mode 100644 src/views/splash/feature/small-top-banner.jsx delete mode 100644 src/views/splash/feature/small-top-banner.scss delete mode 100644 src/views/splash/feature/top-banner.jsx delete mode 100644 src/views/splash/feature/top-banner.scss diff --git a/src/views/splash/feature/middle-banner.jsx b/src/views/splash/feature/middle-banner.jsx deleted file mode 100644 index 735c82e12..000000000 --- a/src/views/splash/feature/middle-banner.jsx +++ /dev/null @@ -1,43 +0,0 @@ -const FormattedMessage = require('react-intl').FormattedMessage; -const injectIntl = require('react-intl').injectIntl; -const React = require('react'); - -const MediaQuery = require('react-responsive').default; - -const FlexRow = require('../../../components/flex-row/flex-row.jsx'); -const TitleBanner = require('../../../components/title-banner/title-banner.jsx'); - -const frameless = require('../../../lib/frameless'); - -require('./middle-banner.scss'); - -const MiddleBanner = () => ( - - -

- -

-

- -

- - - - -
- -
- -
- -
- -
-
- -); - -module.exports = injectIntl(MiddleBanner); diff --git a/src/views/splash/feature/middle-banner.scss b/src/views/splash/feature/middle-banner.scss deleted file mode 100644 index a51926f14..000000000 --- a/src/views/splash/feature/middle-banner.scss +++ /dev/null @@ -1,99 +0,0 @@ -@import "../../../colors"; -@import "../../../frameless"; - -.feature-middle-banner { - display: flex; - margin-top: 20px; - border-radius: 16px; - background-color: $ui-orange; - background-image: url("/images/feature/bg-pattern.png"); - background-size: cover; - padding: 0; - height: 17rem; - overflow: hidden; - box-sizing: border-box; - justify-content: space-between; - - .feature-middle-container { - padding-left: 3rem; - align-items: flex-start; - flex-shrink: 0; - } - - .feature-banner-images { - display: flex; - height: 100%; - align-self: flex-end; - - .feature-banner-image { - display: flex; - margin-right: 2rem; - min-width: 0; - height: 100%; - align-self: flex-end; - - img { - display: block; - max-width: 100%; - max-height: 100%; - align-self: flex-end; - } - } - } - - .feature-header, - .feature-copy, - .feature-call-to-action { - color: $ui-white; - } - - .feature-header { - font-size: 1.7rem; - } - - .feature-copy { - margin-bottom: 1rem; - max-width: 350px; - line-height: 1.7rem; - font-size: 1.3rem; - } - - .feature-call-to-action { - border-radius: 10px; - padding: 1em 2em; - font-size: 1em; - } -} - -@media #{$intermediate} { - .feature-middle-banner { - margin: 20px auto 40px auto; - width: $cols8; - height: initial; - flex-direction: column; - justify-content: center; - - .feature-middle-container { - padding-top: 4rem; - padding-left: 0; - align-items: center; - } - - .feature-banner-images { - .feature-banner-image { - margin: 0; - padding: 0; - - &.left { - margin-left: -2.5rem; - } - - &.right { - margin-right: -2.5rem; - } - } - } - } -} - - diff --git a/src/views/splash/feature/small-top-banner.jsx b/src/views/splash/feature/small-top-banner.jsx deleted file mode 100644 index d3eb366bc..000000000 --- a/src/views/splash/feature/small-top-banner.jsx +++ /dev/null @@ -1,26 +0,0 @@ -const FormattedMessage = require('react-intl').FormattedMessage; -const injectIntl = require('react-intl').injectIntl; -const React = require('react'); - -const FlexRow = require('../../../components/flex-row/flex-row.jsx'); -const TitleBanner = require('../../../components/title-banner/title-banner.jsx'); - -require('./small-top-banner.scss'); - -const SmallTopBanner = () => ( - - -

- -

- - - - - -); - -module.exports = injectIntl(SmallTopBanner); diff --git a/src/views/splash/feature/small-top-banner.scss b/src/views/splash/feature/small-top-banner.scss deleted file mode 100644 index 6d8866933..000000000 --- a/src/views/splash/feature/small-top-banner.scss +++ /dev/null @@ -1,27 +0,0 @@ -@import "../../../colors"; - -.small-top-banner { - background: $ui-orange; - padding: 5px 0; - - .small-top-container { - justify-content: center; - } - - .copy, - .call-to-action { - color: $ui-white; - font-weight: 500; - } - - .copy { - font-size: 1.1rem; - } - - .call-to-action { - margin-left: 32px; - border-radius: 8px; - padding: .625rem 1.2rem; - font-size: 1rem; - } -} diff --git a/src/views/splash/feature/top-banner.jsx b/src/views/splash/feature/top-banner.jsx deleted file mode 100644 index 9dff84981..000000000 --- a/src/views/splash/feature/top-banner.jsx +++ /dev/null @@ -1,47 +0,0 @@ -const FormattedMessage = require('react-intl').FormattedMessage; -const injectIntl = require('react-intl').injectIntl; -const React = require('react'); -const PropTypes = require('prop-types'); - -const FlexRow = require('../../../components/flex-row/flex-row.jsx'); -const TitleBanner = require('../../../components/title-banner/title-banner.jsx'); - -require('./top-banner.scss'); - -const TopBanner = props => ( - - -

- -

- {/*

- -

*/} - - {/* */} - - - -
-
- -
-
- -
-
- -); - -TopBanner.propTypes = { - actionLink: PropTypes.string -}; - -TopBanner.defaultProps = { - actionLink: 'https://scratch.mit.edu' -}; - -module.exports = injectIntl(TopBanner); diff --git a/src/views/splash/feature/top-banner.scss b/src/views/splash/feature/top-banner.scss deleted file mode 100644 index c3ca9cf91..000000000 --- a/src/views/splash/feature/top-banner.scss +++ /dev/null @@ -1,223 +0,0 @@ -@import "../../../colors"; -@import "../../../frameless"; - -.feature-top-banner { - display: flex; - position: relative; - background-color: $ui-blue; - // background-image: url("/images/feature/bg-pattern.png"); - background-size: cover; - padding: 0; - min-height: 22rem; - // overflow: hidden; // if banner shouldn't have things that break the edges - justify-content: center; - - .feature-top-container { - z-index: 1; - justify-content: center; - align-items: flex-start; - min-height: 20rem; - max-width: 55%; - } - - .feature-banner-images { - display: flex; - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - width: 100%; - justify-content: space-between; - } - - .feature-banner-image { - display: flex; - align-self: flex-end; - - img { - max-width: 100%; - height: auto; - align-self: flex-end; - } - - &.left { - margin: auto 0; - width: 14rem; - } - - &.right { - width: 50%; - justify-content: flex-end; - } - } - - .feature-header, - .feature-copy, - .feature-call-to-action { - color: $ui-white; - } - - .feature-header { - margin-bottom: .75rem; - font-size: 4rem; - line-height: 4.2rem; - max-width: 570px; // Ensure that launch title wraps before 'is' - } - - .feature-copy { - font-size: 1.3rem; - } - - .feature-call-to-action { - border-radius: 4px; - background-color: $ui-dark-orange; - padding: 1rem 1.5rem; - font-size: 1rem; - - &:before { - display: inline-block; - margin-right: .5rem; - background-repeat: no-repeat; - background-position: center center; - background-size: contain; - background-image: url("/svgs/feature/create-icon.svg"); - width: 1.5rem; - height: 1.5rem; - vertical-align: -.35rem; - content: ""; - } - } -} - -@media only screen and (min-width: $desktop) { - .feature-banner-image { - &.right:after { - display: block; - position: absolute; - bottom: -42px; - right: 33%; - background-image: url("/svgs/feature/tapping-block.svg"); - background-repeat: no-repeat; - width: 122px; - height: 81px; - content: ""; - } - } -} - -@media only screen and (min-width: $mobileIntermediate) { - .feature-top-banner { - margin-bottom: 80px; // double the normal banner 40px for the notch - - &:after{ - display: block; - position: absolute; - bottom: -46px; - left: 48px; - background-image: url("/svgs/feature/banner-notch.svg"); - background-repeat: no-repeat; - width: 433px; - height: 56px; - content: ""; - } - - .feature-top-container { - transform: translateX(-15%); - } - } -} - - -@media only screen and (max-width: $desktop - 1) { - .feature-top-banner { - .feature-header { - text-align: left; // override #view text centering - } - } -} - -@media only screen and (min-width: $mobile) and (max-width: $desktop - 1) { - .feature-top-banner { - justify-content: flex-start; - - .feature-header { - text-align: left; // override #view text centering - } - - .feature-banner-images { - justify-content: flex-end; - } - - .feature-top-container { - transform: translateX(10%); - } - - .feature-banner-image { - &.left { - display: none; - } - } - } -} - -@media only screen and (min-width: $mobileIntermediate) and (max-width: $desktop - 1) { - .feature-top-banner { - .feature-banner-images { - overflow: hidden; // make sure overflow is hidden to avoid scrolling with translated content - } - - .feature-banner-image { - &.right { - width: 80%; - transform: translateX(10%); - } - } - } -} - -@media only screen and (min-width: $mobile) and (max-width: $mobileIntermediate - 1) { - .feature-top-banner { - .feature-banner-image { - &.right { - width: 100%; - transform: translateX(30%); - } - } - } -} - -@media only screen and (max-width: $mobile - 1) { - .feature-top-banner { - overflow: hidden; - min-height: 32rem; - - .feature-top-container { - right: 0; - left: 0; - min-height: 30rem; - max-width: 100%; - justify-content: flex-start; - align-items: center; - } - - .feature-header { - margin: 2rem 0; - text-align: center; - } - - .feature-banner-image { - &.right { - margin-right: 0; - margin-bottom: -4rem; - width: 100%; - } - - &.left { - margin-bottom: .5rem; - display: block; - width: 25%; - } - } - } -} diff --git a/src/views/splash/l10n.json b/src/views/splash/l10n.json index ec969065c..07e3885ca 100644 --- a/src/views/splash/l10n.json +++ b/src/views/splash/l10n.json @@ -36,9 +36,5 @@ "welcome.welcomeToScratch": "Welcome to Scratch!", "welcome.learn": "Learn how to make a project in Scratch", "welcome.tryOut": "Try out starter projects", - "welcome.connect": "Connect with other Scratchers", - - "featureBanner.title": "The new Scratch is here!", - "featureBanner.subtitle": "not used", - "featureBanner.callToAction": "call to action" + "welcome.connect": "Connect with other Scratchers" } diff --git a/src/views/splash/presentation.jsx b/src/views/splash/presentation.jsx index 0fb4c42ad..eea14c54a 100644 --- a/src/views/splash/presentation.jsx +++ b/src/views/splash/presentation.jsx @@ -2,11 +2,9 @@ const bindAll = require('lodash.bindall'); const FormattedMessage = require('react-intl').FormattedMessage; const injectIntl = require('react-intl').injectIntl; const intlShape = require('react-intl').intlShape; -const MediaQuery = require('react-responsive').default; const PropTypes = require('prop-types'); const React = require('react'); -const frameless = require('../../lib/frameless'); const sessionActions = require('../../redux/session.js'); const shuffle = require('../../lib/shuffle.js').shuffle; @@ -31,14 +29,6 @@ const LoveProjectMessage = require('./activity-rows/love-project.jsx'); const RemixProjectMessage = require('./activity-rows/remix-project.jsx'); const ShareProjectMessage = require('./activity-rows/share-project.jsx'); -// Featured Banner Components -const TopBanner = require('./feature/top-banner.jsx'); -const SmallTopBanner = require('./feature/small-top-banner.jsx'); -const MiddleBanner = require('./feature/middle-banner.jsx'); - -// Scratch 3.0 Launch Banner -const LAUNCH_END_TIME = 1547873999000; - require('./splash.scss'); class ActivityList extends React.Component { @@ -231,7 +221,7 @@ class SplashPresentation extends React.Component { // eslint-disable-line react/ } } } - renderHomepageRows (showBanner) { + renderHomepageRows () { const rows = [ - - - ); - } - if (this.props.featuredGlobal.scratch_design_studio && this.props.featuredGlobal.scratch_design_studio.length > 4) { @@ -369,10 +344,7 @@ class SplashPresentation extends React.Component { // eslint-disable-line react/ return rows; } render () { - const ShowTopBanner = Date.now() < LAUNCH_END_TIME; - const ShowMiddleBanner = false; - const ShowSmallTopBanner = false; - const featured = this.renderHomepageRows(ShowMiddleBanner); + const featured = this.renderHomepageRows(); const formatHTMLMessage = this.props.intl.formatHTMLMessage; const formatMessage = this.props.intl.formatMessage; @@ -438,34 +410,10 @@ class SplashPresentation extends React.Component { // eslint-disable-line react/ { this.props.sessionStatus === sessionActions.Status.FETCHED && Object.keys(this.props.user).length === 0 && // if user is not logged in - (ShowTopBanner ? [ - - - - ] : [ - - ] - ) - } - { - this.props.sessionStatus === sessionActions.Status.FETCHED && - Object.keys(this.props.user).length !== 0 && // if user is logged in - ShowTopBanner && - - {ShowSmallTopBanner ? - : - - } - + }