mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2024-11-23 07:38:07 -05:00
Resurrect HOC banners
This commit is contained in:
rschamp
parent
1a172d45e0
commit
976cfa4acd
5 changed files with 293 additions and 6 deletions
113
src/views/splash/hoc/hoc-banner.scss
Normal file
113
src/views/splash/hoc/hoc-banner.scss
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
63
src/views/splash/hoc/middle-banner.jsx
Normal file
63
src/views/splash/hoc/middle-banner.jsx
Normal file
|
|
@ -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);
|
||||
63
src/views/splash/hoc/top-banner.jsx
Normal file
63
src/views/splash/hoc/top-banner.jsx
Normal file
|
|
@ -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);
|
||||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
@ -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
|
||||
<Intro
|
||||
key="intro"
|
||||
messages={messages}
|
||||
/>
|
||||
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) ? (
|
||||
<MediaQuery
|
||||
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 && (
|
||||
|
|
|
|||
Loading…
Reference in a new issue