Skip to content

GitLab

S
scratch-www
Commit 976cfa4a authored by rschamp's avatar rschamp
Browse files
Options

Resurrect HOC banners

parent 1a172d45
Hide whitespace changes
Inline Side-by-side
Showing with 293 additions and 6 deletions
src/views/splash/hoc/hoc-banner.scss 0 → 100644
View file @ 976cfa4a
@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 → 100644
View file @ 976cfa4a
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 → 100644
View file @ 976cfa4a
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
View file @ 976cfa4a
...@@ -33,6 +33,15 @@ ...@@ -33,6 +33,15 @@
"teacherbanner.classesButton": "My Classes", "teacherbanner.classesButton": "My Classes",
"teacherbanner.faqButton": "Teacher Account FAQ", "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.welcomeToScratch": "Welcome to Scratch!",
"welcome.learn": "Learn how to make a project in Scratch", "welcome.learn": "Learn how to make a project in Scratch",
"welcome.tryOut": "Try out starter projects", "welcome.tryOut": "Try out starter projects",
......
src/views/splash/presentation.jsx
View file @ 976cfa4a
...@@ -2,9 +2,11 @@ const bindAll = require('lodash.bindall'); ...@@ -2,9 +2,11 @@ const bindAll = require('lodash.bindall');
const FormattedMessage = require('react-intl').FormattedMessage; const FormattedMessage = require('react-intl').FormattedMessage;
const injectIntl = require('react-intl').injectIntl; const injectIntl = require('react-intl').injectIntl;
const intlShape = require('react-intl').intlShape; const intlShape = require('react-intl').intlShape;
const MediaQuery = require('react-responsive').default;
const PropTypes = require('prop-types'); const PropTypes = require('prop-types');
const React = require('react'); const React = require('react');
const frameless = require('../../lib/frameless');
const sessionActions = require('../../redux/session.js'); const sessionActions = require('../../redux/session.js');
const shuffle = require('../../lib/shuffle.js').shuffle; const shuffle = require('../../lib/shuffle.js').shuffle;
...@@ -29,6 +31,13 @@ const LoveProjectMessage = require('./activity-rows/love-project.jsx'); ...@@ -29,6 +31,13 @@ const LoveProjectMessage = require('./activity-rows/love-project.jsx');
const RemixProjectMessage = require('./activity-rows/remix-project.jsx'); const RemixProjectMessage = require('./activity-rows/remix-project.jsx');
const ShareProjectMessage = require('./activity-rows/share-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'); require('./splash.scss');
class ActivityList extends React.Component { class ActivityList extends React.Component {
...@@ -268,7 +277,7 @@ class SplashPresentation extends React.Component { // eslint-disable-line react/ ...@@ -268,7 +277,7 @@ class SplashPresentation extends React.Component { // eslint-disable-line react/
</Box> </Box>
); );
} }
if (this.props.featuredGlobal.scratch_design_studio && if (this.props.featuredGlobal.scratch_design_studio &&
this.props.featuredGlobal.scratch_design_studio.length > 4) { this.props.featuredGlobal.scratch_design_studio.length > 4) {
...@@ -409,11 +418,21 @@ class SplashPresentation extends React.Component { // eslint-disable-line react/ ...@@ -409,11 +418,21 @@ class SplashPresentation extends React.Component { // eslint-disable-line react/
] : []} ] : []}
{ {
this.props.sessionStatus === sessionActions.Status.FETCHED && 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 <div
className="inner mod-splash" className="inner mod-splash"
...@@ -446,6 +465,26 @@ class SplashPresentation extends React.Component { // eslint-disable-line react/ ...@@ -446,6 +465,26 @@ class SplashPresentation extends React.Component { // eslint-disable-line react/
/> />
</div> </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} {featured}
{this.props.isAdmin && ( {this.props.isAdmin && (
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment