diff --git a/src/views/splash/hoc/hoc-banner.scss b/src/views/splash/hoc/hoc-banner.scss new file mode 100644 index 000000000..3b0f2316c --- /dev/null +++ b/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; + } +} diff --git a/src/views/splash/hoc/middle-banner.jsx b/src/views/splash/hoc/middle-banner.jsx new file mode 100644 index 000000000..69a751c35 --- /dev/null +++ b/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 = () => ( + + + +

+ +

+ + + + + + + + + +
+ +
+ + + + + +
+ +
+ + + + + + +
+ +
+ + + + + + + +); + +module.exports = injectIntl(MiddleBanner); diff --git a/src/views/splash/hoc/top-banner.jsx b/src/views/splash/hoc/top-banner.jsx new file mode 100644 index 000000000..267290cc5 --- /dev/null +++ b/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 = () => ( + + + +

+ +

+ + + + + + + + + + +
+ +
+ + + + + + +
+ +
+ + + + + +
+ +
+ + + + + +); + +module.exports = injectIntl(TopBanner); diff --git a/src/views/splash/l10n.json b/src/views/splash/l10n.json index 07e3885ca..0aad4b444 100644 --- a/src/views/splash/l10n.json +++ b/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", diff --git a/src/views/splash/presentation.jsx b/src/views/splash/presentation.jsx index eea14c54a..84da28335 100644 --- a/src/views/splash/presentation.jsx +++ b/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/ ); } - + 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 + (Date.now() >= HOC_START_TIME && Date.now() < HOC_END_TIME) ? ( + + + + ) : ( + + ) + ) }
} + {featured.shift()} + {featured.shift()} + + { + 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 + + + + } + +
{featured} {this.props.isAdmin && (