revert 2017 HoC top and middle banners

src/views/splash/hoc/middle-banner.jsx

@@ -1,115 +0,0 @@
-var FormattedMessage = require('react-intl').FormattedMessage;
-var injectIntl = require('react-intl').injectIntl;
-var MediaQuery = require('react-responsive');
-var React = require('react');
-
-var FlexRow = require('../../../components/flex-row/flex-row.jsx');
-var TitleBanner = require('../../../components/title-banner/title-banner.jsx');
-var TTTModal = require('../../../components/modal/ttt/modal.jsx');
-var TTTTile = require('../../../components/ttt-tile/ttt-tile.jsx');
-
-var frameless = require('../../../lib/frameless');
-var tiles = require('../../tips/ttt');
-
-require('../../../components/forms/button.scss');
-require('./middle-banner.scss');
-
-var MiddleBanner = injectIntl(React.createClass({
-    getInitialState: function () {
-        return {
-            currentTile: tiles[1],
-            TTTModalOpen: false
-        };
-    },
-    showTTTModal: function (tile) {
-        return this.setState({
-            currentTile: tile,
-            TTTModalOpen: true
-        });
-    },
-    hideTTTModal: function () {
-        return this.setState({TTTModalOpen: false});
-    },
-    renderTTTTiles: function () {
-        var formatMessage = this.props.intl.formatMessage;
-        
-        var tileObjects = {
-            flyTile: {
-                title: formatMessage({id: tiles[1].title}),
-                description: formatMessage({id: tiles[1].description}),
-                tutorialLoc: tiles[1].tutorialLoc,
-                activityLoc: formatMessage({id: tiles[1].activityLoc}),
-                guideLoc: formatMessage({id: tiles[1].guideLoc}),
-                thumbUrl: tiles[1].thumbUrl,
-                bannerUrl: tiles[1].bannerUrl
-            },
-            musicTile: {
-                title: formatMessage({id: tiles[2].title}),
-                description: formatMessage({id: tiles[2].description}),
-                tutorialLoc: tiles[2].tutorialLoc,
-                activityLoc: formatMessage({id: tiles[2].activityLoc}),
-                guideLoc: formatMessage({id: tiles[2].guideLoc}),
-                thumbUrl: tiles[2].thumbUrl,
-                bannerUrl: tiles[2].bannerUrl
-            },
-            pongTile: {
-                title: formatMessage({id: tiles[7].title}),
-                description: formatMessage({id: tiles[7].description}),
-                tutorialLoc: tiles[7].tutorialLoc,
-                activityLoc: formatMessage({id: tiles[7].activityLoc}),
-                guideLoc: formatMessage({id: tiles[7].guideLoc}),
-                thumbUrl: tiles[7].thumbUrl,
-                bannerUrl: tiles[7].bannerUrl
-            }
-        };
-        
-        return [
-            <TTTTile
-                key={1}
-                className="mod-banner"
-                onGuideClick={this.showTTTModal.bind(this, tileObjects.flyTile)}
-                {...tileObjects.flyTile}
-            />,
-            <TTTTile
-                key={2}
-                className="mod-banner"
-                onGuideClick={this.showTTTModal.bind(this, tileObjects.musicTile)}
-                {...tileObjects.musicTile}
-            />,
-            <TTTTile
-                key={7}
-                className="mod-banner mod-last-tile"
-                onGuideClick={this.showTTTModal.bind(this, tileObjects.pongTile)}
-                {...tileObjects.pongTile}
-            />
-        ];
-    },
-    render: function () {
-        return (
-            <TitleBanner className="mod-splash-middle">
-                <div className="middle-banner inner">
-                    <FlexRow className="middle-banner-header">
-                        <h1 className="middle-banner-header-h1">
-                            <FormattedMessage id="middleBanner.header" />
-                        </h1>
-                        <a href="/tips" className="button mod-ttt-try-button">
-                            <FormattedMessage id="middleBanner.ttt" />
-                        </a>
-                    </FlexRow>
-                    <MediaQuery minWidth={frameless.tablet}>
-                        <FlexRow className="middle-banner-tiles">
-                            {this.renderTTTTiles()}
-                        </FlexRow>
-                        <TTTModal
-                            isOpen={this.state.TTTModalOpen}
-                            onRequestClose={this.hideTTTModal}
-                            {...this.state.currentTile}
-                        />
-                    </MediaQuery>
-                </div>
-            </TitleBanner>
-        );
-    }
-}));
-
-module.exports = MiddleBanner;

src/views/splash/hoc/middle-banner.scss

@@ -1,49 +0,0 @@
-@import "../../../colors";
-@import "../../../frameless";
-
-.title-banner.mod-splash-middle {
-    background: url("/images/blocks-pattern.png");
-    background-color: $ui-purple;
-    background-repeat: repeat;
-    background-size: 180px 180px;
-}
-
-.middle-banner-header {
-    margin-bottom: 1rem;
-    justify-content: space-between;
-    align-items: center;
-}
-
-.middle-banner-header-h1 {
-    color: $type-white;
-}
-
-.mod-ttt-try-button {
-    &:link,
-    &:visited,
-    &:active
-    &:hover {
-        color: $type-white;
-    }
-}
-
-.ttt-tile.mod-banner {
-    background-color: $background-color;
-}
-
-@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
-    .mod-last-tile {
-        display: none;
-    }
-    
-    .middle-banner-header {
-        flex-direction: column;
-        align-items: center;
-    }
-}
-
-@media only screen and (max-width: $tablet - 1) {
-    .title-banner.mod-splash-middle {
-        display: none;
-    }
-}

src/views/splash/hoc/top-banner.jsx

@@ -1,115 +0,0 @@
-var FormattedMessage = require('react-intl').FormattedMessage;
-var injectIntl = require('react-intl').injectIntl;
-var React = require('react');
-
-var FlexRow = require('../../../components/flex-row/flex-row.jsx');
-var TitleBanner = require('../../../components/title-banner/title-banner.jsx');
-var TTTModal = require('../../../components/modal/ttt/modal.jsx');
-
-require('../../../components/forms/button.scss');
-require('./top-banner.scss');
-
-var nameTile = {
-    title: 'ttt.AnimateYourNameTitle',
-    description: 'ttt.AnimateYourNameDescription',
-    thumbUrl: '/images/ttt/animate-your-name.jpg',
-    bannerUrl: '/images/ttt/animate-your-name-banner.jpg',
-    tutorialLoc: '/projects/editor/?tip_bar=name',
-    activityLoc: 'cards.nameCardsLink',
-    guideLoc: 'guides.NameGuideLink'
-};
-
-var TopBanner = injectIntl(React.createClass({
-    type: 'TopBanner',
-    propTypes: {
-        loggedIn: React.PropTypes.bool.isRequired
-    },
-    getInitialState: function () {
-        // use translated tile
-        var formatMessage = this.props.intl.formatMessage;
-        var translatedTile = {};
-        translatedTile = {
-            title: formatMessage({id: nameTile.title}),
-            description: formatMessage({id: nameTile.description}),
-            tutorialLoc: nameTile.tutorialLoc,
-            activityLoc: formatMessage({id: nameTile.activityLoc}),
-            guideLoc: formatMessage({id: nameTile.guideLoc}),
-            thumbUrl: nameTile.thumbUrl,
-            bannerUrl: nameTile.bannerUrl
-        };
-        return {currentTile: translatedTile, TTTModalOpen: false};
-    },
-    showTTTModal: function () {
-        this.setState({TTTModalOpen: true});
-    },
-    hideTTTModal: function () {
-        this.setState({TTTModalOpen: false});
-    },
-    render: function () {
-        return (
-            <TitleBanner className="mod-splash-top">
-                <FlexRow className="banner-top inner">
-                    <a href="/projects/editor/?tip_bar=name">
-                        <FlexRow className="top-animation">
-                            <img
-                                src="/images/hoc/s.png"
-                                alt=""
-                                className="top-animation-letter mod-letter-s"
-                            />
-                            <img
-                                src="/images/hoc/c1.png"
-                                alt=""
-                                className="top-animation-letter mod-letter-c1"
-                            />
-                            <img
-                                src="/images/hoc/r.png"
-                                alt=""
-                                className="top-animation-letter mod-letter-r"
-                            />
-                            <img
-                                src="/images/hoc/a.png"
-                                alt=""
-                                className="top-animation-letter mod-letter-a"
-                            />
-                            <img
-                                src="/images/hoc/t.png"
-                                alt=""
-                                className="top-animation-letter mod-letter-t"
-                            />
-                            <img
-                                src="/images/hoc/c2.png"
-                                alt=""
-                                className="top-animation-letter mod-letter-c2"
-                            />
-                            <img
-                                src="/images/hoc/h.png"
-                                alt=""
-                                className="top-animation-letter mod-letter-h"
-                            />
-                        </FlexRow>
-                    </a>
-                    <div className="top-links">
-                        <a href="/projects/editor/?tip_bar=name" className="button mod-top-button">
-                            { this.props.loggedIn ?
-                                <FormattedMessage id="ttt.AnimateYourNameTitle" /> :
-                                <FormattedMessage id="topBanner.getStarted" />
-                            }
-                        </a>
-                        <div className="mod-guides-link" onClick={this.showTTTModal}>
-                            &nbsp;&nbsp;
-                            <FormattedMessage id="tile.guides" />
-                            <img className="top-open-modal" src="/svgs/modal/open-white.svg" />
-                            <TTTModal
-                                isOpen={this.state.TTTModalOpen}
-                                onRequestClose={this.hideTTTModal}
-                                {...this.state.currentTile}/>
-                        </div>
-                    </div>
-                </FlexRow>
-            </TitleBanner>
-        );
-    }
-}));
-
-module.exports = TopBanner;
-

src/views/splash/hoc/top-banner.scss

@@ -1,228 +0,0 @@
-@import "../../../colors";
-@import "../../../frameless";
-
-.title-banner.mod-splash-top {
-    background-color: $ui-aqua;
-    background-image: url("/images/hoc/splash-left.png"), url("/images/hoc/splash-right.png");
-    background-repeat: no-repeat, no-repeat;
-    background-position: left bottom, right bottom;
-    background-size: 40% auto, 40% auto;
-}
-
-.banner-top {
-    background-image: url("/images/hoc/doodads.png");
-    background-repeat: no-repeat;
-    background-position: top;
-    background-size: 70%;
-    flex-direction: column;
-}
-
-.top-banner-header {
-    justify-content: space-between;
-}
-
-.top-banner-header-h1 {
-    margin-bottom: 1.25rem;
-    color: $type-white;
-}
-
-.banner-image.mod-top {
-    width: 100%;
-}
-
-.top-animation {
-    margin: auto;
-    padding-top: 2rem;
-    padding-bottom: 1rem;
-    width: 70%;
-}
-
-.top-animation-letter {
-    animation-duration: 1s;
-    animation-iteration-count: infinite;
-    animation-fill-mode: both;
-    width: 100%;
-}
-
-@keyframes jump {
-    from,
-    to {
-        transform: translate3d(0, 0, 0);
-    }
-
-    12.5%,
-    62.5% {
-        transform: translate3d(0, 10px, 0);
-    }
-
-    37.5%,
-    87.5% {
-        transform: translate3d(0, -10px, 0);
-    }
-}
-
-.mod-letter-s {
-    // width: 16.6%;
-    animation-name: jump;
-    width: 13.3%;
-}
-
-@keyframes pulse {
-    from {
-        transform: scale3d(1, 1, 1);
-    }
-
-    50% {
-        transform: scale3d(1.25, 1.25, 1.25);
-    }
-
-    to {
-        transform: scale3d(1, 1, 1);
-    }
-}
-
-.mod-letter-c1 {
-    // width: 12.5%;
-    animation-name: pulse;
-    width: 10%;
-}
-
-@keyframes spin-left {
-    90% {
-        transform: rotate3d(0, 0, 1, -360deg);
-    }
-
-    to {
-        transform: rotate3d(0, 0, 1, -360deg);
-    }
-}
-
-.mod-letter-r {
-    // width: 14%;
-    animation-name: spin-left;
-    width: 11.2%;
-}
-
-@keyframes swing {
-    25% {
-        transform: rotate3d(0, 0, 1, 40deg);
-    }
-
-    75% {
-        transform: rotate3d(0, 0, 1, -40deg);
-    }
-
-    from,
-    to {
-        transform: rotate3d(0, 0, 1, 0deg);
-    }
-}
-
-.mod-letter-a {
-    // width: 14.4%;
-    animation-name: swing;
-    width: 11.5%;
-}
-
-@keyframes shake {
-    from,
-    to {
-        transform: translate3d(0, 0, 0);
-    }
-
-    12.5%,
-    62.5% {
-        transform: translate3d(-10px, 0, 0);
-    }
-
-    37.5%,
-    87.5% {
-        transform: translate3d(10px, 0, 0);
-    }
-}
-
-.mod-letter-t {
-    // width: 15.5%;
-    animation-name: shake;
-    width: 12.4%;
-}
-
-@keyframes spin-right {
-    90% {
-        transform: rotate3d(0, 0, 1, 360deg);
-    }
-
-    to {
-        transform: rotate3d(0, 0, 1, 360deg);
-    }
-}
-
-.mod-letter-c2 {
-    // width: 12.5%;
-    animation-name: spin-right;
-    width: 10%;
-}
-
-@keyframes inverse-jump {
-    from,
-    to {
-        transform: translate3d(0, 0, 0);
-    }
-
-    12.5%,
-    62.5% {
-        transform: translate3d(0, -10px, 0);
-    }
-
-    37.5%,
-    87.5% {
-        transform: translate3d(0, 10px, 0);
-    }
-}
-
-.mod-letter-h {
-    // width: 14.4%;
-    animation-name: inverse-jump;
-    width: 11.5%;
-}
-
-.mod-top-button {
-    &:active &:hover,
-    &:link,
-    &:visited {
-        color: $type-white;
-        font-size: 1rem;
-    }
-}
-
-.mod-top-button {
-    border: 1px solid $active-gray;
-    box-shadow: none;
-    background-color: $ui-blue;
-}
-
-.top-links {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-around;
-    align-items: center;
-}
-
-.mod-guides-link {
-    cursor: pointer;
-    padding: 1.25rem 0;
-    color: $ui-white;
-    font-size: 1rem;
-    font-weight: 500;
-}
-
-.top-open-modal {
-    display: inline-block;
-    padding: 0 .25rem;
-    vertical-align: top;
-}
-@media only screen and (max-width: $tablet - 1) {
-    .flex-row.top-animation {
-        flex-direction: row;
-    }
-}

src/views/splash/l10n-static.json

@@ -1,10 +0,0 @@
-{
-    "cards.nameCardsLink": "https://resources.scratch.mit.edu/www/cards/en/nameCards.pdf",
-    "cards.flyCardsLink": "https://resources.scratch.mit.edu/www/cards/en/flyCards.pdf",
-    "cards.musicCardsLink": "https://resources.scratch.mit.edu/www/cards/en/musicCards.pdf",
-    "cards.pongCardsLink": "https://resources.scratch.mit.edu/www/cards/en/pongCards.pdf",
-    "guides.NameGuideLink": "https://resources.scratch.mit.edu/www/guides/en/NameGuide.pdf",
-    "guides.FlyGuideLink": "https://resources.scratch.mit.edu/www/guides/en/FlyGuide.pdf",
-    "guides.MusicGuideLink": "https://resources.scratch.mit.edu/www/guides/en/MusicGuide.pdf",
-    "guides.PongGuideLink": "https://resources.scratch.mit.edu/www/guides/en/PongGuide.pdf"
-}

src/views/splash/l10n.json

@@ -28,28 +28,6 @@
     "teacherbanner.subgreeting": "Teacher Account",
     "teacherbanner.classesButton": "My Classes",
     "teacherbanner.faqButton": "Teacher Account FAQ",
-    
-    "middleBanner.header": "Get Creative with Coding",
-    "middleBanner.ttt": "See more activities",
-    "topBanner.getStarted": "Get Started with Coding!",
-    "ttt.tutorial": "Tutorial",
-    "ttt.open": "Open",
-    "ttt.tutorialSubtitle": "Find out how to make this project using a step-by-step tutorial in Scratch.",
-    "ttt.activityTitle": "Activity Cards",
-    "ttt.activitySubtitle": "Explore new coding ideas using this set of illustrated cards you can print out.",
-    "ttt.educatorTitle": "Educator Guide",
-    "ttt.educatorSubtitle": "Use this educator guide to plan and lead a one-hour Scratch workshop.",
-    "tile.tryIt": "Try It",
-    "tile.guides": "See Cards and Guides",
-    "ttt.download": "Download",
-    "ttt.AnimateYourNameTitle": "Animate a Name",
-    "ttt.AnimateYourNameDescription": "Animate the letters of your username, initials, or favorite word.",
-    "ttt.MakeItFlyTitle": "Make It Fly",
-    "ttt.MakeItFlyDescription": "Animate the Scratch Cat, The Powerpuff Girls, or even a taco!",
-    "ttt.MakeMusicTitle": "Make Music",
-    "ttt.MakeMusicDescription": "Choose instruments, add sounds, and press keys to play music.",
-    "ttt.PongTitle": "Pong Game",
-    "ttt.PongDescription": "Make a bouncing ball game with sounds, points, and other effects.",
 
     "welcome.welcomeToScratch": "Welcome to Scratch!",
     "welcome.learn": "Learn how to make a project in Scratch",

src/views/splash/presentation.jsx

@@ -11,8 +11,6 @@ var Box = require('../../components/box/box.jsx');
 var Button = require('../../components/forms/button.jsx');
 var Carousel = require('../../components/carousel/carousel.jsx');
 var LegacyCarousel = require('../../components/carousel/legacy-carousel.jsx');
-var TopBanner = require('./hoc/top-banner.jsx');
-var MiddleBanner = require('./hoc/middle-banner.jsx');
 var Intro = require('../../components/intro/intro.jsx');
 var IframeModal = require('../../components/modal/iframe/modal.jsx');
 var News = require('../../components/news/news.jsx');
@@ -255,8 +253,6 @@ var SplashPresentation = injectIntl(React.createClass({
                 {this.props.isEducator ? [
                     <TeacherBanner key="teacherbanner" messages={messages} />
                 ] : []}
-                <TopBanner loggedIn={this.props.sessionStatus === sessionActions.Status.FETCHED
-                    && Object.keys(this.props.user).length !== 0}/>
                 <div key="inner" className="inner mod-splash">
                     {this.props.sessionStatus === sessionActions.Status.FETCHED ? (
                         Object.keys(this.props.user).length !== 0 ? [
@@ -276,12 +272,6 @@ var SplashPresentation = injectIntl(React.createClass({
                             </MediaQuery>
                         ]) : []
                     }
-
-                    {featured.shift()}
-                    {featured.shift()}
-                </div>
-                <MiddleBanner />
-                <div key="inner2" className="inner mod-splash">
                     
                     {featured}