Resurrect HOC banners

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

@@ -0,0 +1,113 @@
+@import "../../../colors";
+@import "../../../frameless";
+
+$tile-height: 244px;
+
+.hoc-banner {
+    display: flex;
+    position: relative;
+    background-color: $ui-aqua;
+    background-image: url("/images/hoc/bg-pattern.png");
+    background-size: cover;
+    padding: 0;
+    height: 25rem;
+    overflow: hidden;
+    justify-content: center;
+
+    &.mod-middle-banner {
+        background-color: $ui-purple;
+    }
+
+    .hoc-container {
+        margin: auto;
+        width: $desktop;
+        height: 25rem;
+        justify-content: flex-start;
+
+        .hoc-title-container {
+            margin: 1.5rem 0;
+            width: 100%;
+            justify-content: space-between;
+        }
+    }
+
+    .hoc-banner-images {
+        display: flex;
+        width: $desktop;
+        justify-content: space-between;
+    }
+
+    .hoc-banner-image {
+        border: 2px solid $ui-aqua;
+        border-radius: 16px;
+        background-color: $ui-white;
+        width: $cols4;
+        height: $tile-height;
+        overflow: hidden;
+        box-sizing: border-box;
+        justify-content: flex-start;
+
+        &.mod-middle-image {
+            border: 2px solid $ui-purple;
+        }
+
+        img {
+            width: $cols4;
+            height: auto;
+        }
+
+        .hoc-image-text {
+            margin: auto auto; 
+            color: $ui-blue;
+            font-size: 1rem;
+            font-weight: bold;
+        }
+    }
+
+    .hoc-header{
+        color: $ui-white;
+    }
+
+    .hoc-header {
+        font-size: 2rem;
+    }
+
+    .hoc-more-activities {
+        border-radius: 10px;
+        background-color: $ui-white;
+        padding: .5rem 1rem .75rem 1rem;
+        color: $ui-blue;
+        font-size: .75rem;
+        font-weight: bold;
+
+        img {
+            margin-right: .25rem;
+            width: 20px;
+            height: 20px;
+            vertical-align: text-bottom;
+        }
+    }
+}
+
+@media only screen and (min-width: $tabletPortrait) and (max-width: $desktop) {
+    .hoc-banner {
+        height: 23.5rem;
+
+        .hoc-container {
+            bottom: 4rem;
+            width: $tabletPortrait;
+        }
+
+        .hoc-banner-images {
+            width: $tabletPortrait;
+        }
+
+        .hoc-banner-image {
+            width: $cols4;
+        }
+    }
+
+    .hoc-hideable {
+        display: none;
+    }
+}

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

@@ -0,0 +1,63 @@
+const FormattedMessage = require('react-intl').FormattedMessage;
+const injectIntl = require('react-intl').injectIntl;
+const React = require('react');
+const MediaQuery = require('react-responsive').default;
+const frameless = require('../../../lib/frameless');
+
+const FlexRow = require('../../../components/flex-row/flex-row.jsx');
+const TitleBanner = require('../../../components/title-banner/title-banner.jsx');
+
+require('./hoc-banner.scss');
+
+const MiddleBanner = () => (
+    <TitleBanner className="hoc-banner mod-middle-banner">
+        <FlexRow className="hoc-container column">
+            <FlexRow className="hoc-title-container">
+                <h1 className="hoc-header">
+                    <FormattedMessage id="hocbanner.title" />
+                </h1>
+                <a
+                    className="hoc-more-activities button"
+                    href="/tips"
+                >
+                    <img src="/svgs/tutorials.svg" />
+                    <FormattedMessage id="hocbanner.moreActivities" />
+                </a>
+            </FlexRow>
+            <FlexRow className="hoc-banner-images">
+                <a href="http://localhost:8333/projects/editor/?tip_bar=name">
+                    <FlexRow className="hoc-banner-image mod-middle-image column">
+                        <img src="/images/ttt/animate-your-name.jpg" />
+                        <div className="hoc-image-text">
+                            <FormattedMessage id="hocbanner.name" />
+                        </div>
+                    </FlexRow>
+                </a>
+                <a href="http://localhost:8333/projects/editor/?tip_bar=fly">
+                    <FlexRow className="hoc-banner-image mod-middle-image column">
+                        <img src="/images/ttt/make-it-fly.jpg" />
+                        <div className="hoc-image-text">
+                            <FormattedMessage id="hocbanner.fly" />
+                        </div>
+                    </FlexRow>
+                </a>
+                <MediaQuery
+                    key="frameless-desktop"
+                    minWidth={frameless.desktop}
+                >
+                    <a href="http://localhost:8333/projects/editor/?tip_bar=pong">
+                        <FlexRow className="hoc-banner-image mod-middle-image column">
+                            <img src="/images/ttt/pong-game.jpg" />
+                            <div className="hoc-image-text">
+                                <FormattedMessage id="hocbanner.pong" />
+                            </div>
+                        </FlexRow>
+                    </a>
+                </MediaQuery>
+                
+            </FlexRow>
+        </FlexRow>
+    </TitleBanner>
+);
+
+module.exports = injectIntl(MiddleBanner);

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

@@ -0,0 +1,63 @@
+const FormattedMessage = require('react-intl').FormattedMessage;
+const injectIntl = require('react-intl').injectIntl;
+const React = require('react');
+
+const MediaQuery = require('react-responsive').default;
+const frameless = require('../../../lib/frameless');
+
+const FlexRow = require('../../../components/flex-row/flex-row.jsx');
+const TitleBanner = require('../../../components/title-banner/title-banner.jsx');
+
+require('./hoc-banner.scss');
+
+const TopBanner = () => (
+    <TitleBanner className="hoc-banner">
+        <FlexRow className="hoc-container column">
+            <FlexRow className="hoc-title-container">
+                <h1 className="hoc-header">
+                    <FormattedMessage id="hocbanner.title" />
+                </h1>
+                <a
+                    className="hoc-more-activities button"
+                    href="https://beta.scratch.mit.edu/?tutorial=all"
+                >
+                    <img src="/svgs/tutorials.svg" />
+                    <FormattedMessage id="hocbanner.moreActivities" />
+                </a>
+            </FlexRow>
+            <FlexRow className="hoc-banner-images">
+                <MediaQuery
+                    key="frameless-desktop"
+                    minWidth={frameless.desktop}
+                >
+                    <a href="https://beta.scratch.mit.edu/?tutorial=getStarted">
+                        <FlexRow className="hoc-banner-image column">
+                            <img src="/images/hoc/getting-started.jpg" />
+                            <div className="hoc-image-text">
+                                <FormattedMessage id="hocbanner.gettingStarted" />
+                            </div>
+                        </FlexRow>
+                    </a>
+                </MediaQuery>
+                <a href="https://beta.scratch.mit.edu/?tutorial=animations-that-talk">
+                    <FlexRow className="hoc-banner-image column">
+                        <img src="/images/hoc/create-animations-that-talk.png" />
+                        <div className="hoc-image-text">
+                            <FormattedMessage id="hocbanner.animationTalk" />
+                        </div>
+                    </FlexRow>
+                </a>
+                <a href="https://beta.scratch.mit.edu/?tutorial=animate-an-adventure-game">
+                    <FlexRow className="hoc-banner-image column">
+                        <img src="/images/hoc/create-an-adventure-game.jpg" />
+                        <div className="hoc-image-text">
+                            <FormattedMessage id="hocbanner.adventureGame" />
+                        </div>
+                    </FlexRow>
+                </a>
+            </FlexRow>
+        </FlexRow>
+    </TitleBanner>
+);
+
+module.exports = injectIntl(TopBanner);

src/views/splash/l10n.json

@@ -33,6 +33,15 @@
     "teacherbanner.classesButton": "My Classes",
     "teacherbanner.faqButton": "Teacher Account FAQ",
 
+    "hocbanner.title": "Get Creative with Coding!",
+    "hocbanner.moreActivities": "See more activities",
+    "hocbanner.gettingStarted": "Getting Started",
+    "hocbanner.animationTalk": "Create Animations that Talk",
+    "hocbanner.adventureGame": "Animate an Adventure Game",
+    "hocbanner.name": "Animate a Name",
+    "hocbanner.fly": "Make it Fly",
+    "hocbanner.pong": "Pong Game",
+
     "welcome.welcomeToScratch": "Welcome to Scratch!",
     "welcome.learn": "Learn how to make a project in Scratch",
     "welcome.tryOut": "Try out starter projects",

src/views/splash/presentation.jsx

@@ -2,9 +2,11 @@ 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;
 
@@ -29,6 +31,13 @@ const LoveProjectMessage = require('./activity-rows/love-project.jsx');
 const RemixProjectMessage = require('./activity-rows/remix-project.jsx');
 const ShareProjectMessage = require('./activity-rows/share-project.jsx');
 
+// Hour of Code Banner Components
+const TopBanner = require('./hoc/top-banner.jsx');
+const MiddleBanner = require('./hoc/middle-banner.jsx');
+
+const HOC_START_TIME = 1575262800000; // 2019-12-02 00:00:00
+const HOC_END_TIME = 1577077200000; // 2019-12-23 00:00:00
+
 require('./splash.scss');
 
 class ActivityList extends React.Component {
@@ -268,7 +277,7 @@ class SplashPresentation extends React.Component { // eslint-disable-line react/
                 </Box>
             );
         }
-
+        
         if (this.props.featuredGlobal.scratch_design_studio &&
             this.props.featuredGlobal.scratch_design_studio.length > 4) {
 
@@ -409,11 +418,21 @@ 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
+                    Object.keys(this.props.user).length === 0 && (// Only show top banner if user is not logged in
-                    <Intro
+                      (Date.now() >= HOC_START_TIME && Date.now() < HOC_END_TIME) ? (
-                        key="intro"
+                        <MediaQuery
-                        messages={messages}
+                          key="frameless-tablet"
-                    />
+                          minWidth={frameless.tabletPortrait}
+                        >
+                          <TopBanner />
+                        </MediaQuery>
+                      ) : (
+                        <Intro
+                          key="intro"
+                          messages={messages}
+                        />
+                      )
+                    )
                 }
                 <div
                     className="inner mod-splash"
@@ -446,6 +465,26 @@ class SplashPresentation extends React.Component { // eslint-disable-line react/
                             />
                         </div>
                     }
+                    {featured.shift()}
+                    {featured.shift()}
+                </div>
+                {
+                    this.props.sessionStatus === sessionActions.Status.FETCHED &&
+                    Object.keys(this.props.user).length !== 0 && // Only show if user is logged in
+                    Date.now() >= HOC_START_TIME && // Show middle banner on and after Dec 3
+                    Date.now() < HOC_END_TIME && // Hide middle banner after Dec 14
+                    <MediaQuery
+                        key="frameless-desktop"
+                        minWidth={frameless.tabletPortrait}
+                    >
+                        <MiddleBanner />
+                    </MediaQuery>
+                }
+
+                <div
+                    className="inner mod-splash"
+                    key="inner2"
+                >
                     {featured}
 
                     {this.props.isAdmin && (