mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2024-11-22 15:17:53 -05:00
Merge pull request #3573 from LLK/hotfix/hoc-2019
[Develop] CSEdWeek 2019 homepage banners
This commit is contained in:
Ray Schamp
GitHub
commit
f6de9721a1
15 changed files with 289 additions and 526 deletions
|
|
@ -1,43 +0,0 @@
|
||||||
const FormattedMessage = require('react-intl').FormattedMessage;
|
|
||||||
const injectIntl = require('react-intl').injectIntl;
|
|
||||||
const React = require('react');
|
|
||||||
|
|
||||||
const MediaQuery = require('react-responsive').default;
|
|
||||||
|
|
||||||
const FlexRow = require('../../../components/flex-row/flex-row.jsx');
|
|
||||||
const TitleBanner = require('../../../components/title-banner/title-banner.jsx');
|
|
||||||
|
|
||||||
const frameless = require('../../../lib/frameless');
|
|
||||||
|
|
||||||
require('./middle-banner.scss');
|
|
||||||
|
|
||||||
const MiddleBanner = () => (
|
|
||||||
<TitleBanner className="feature-middle-banner">
|
|
||||||
<FlexRow className="feature-middle-container column">
|
|
||||||
<h2 className="feature-header">
|
|
||||||
<FormattedMessage id="featureBanner.title" />
|
|
||||||
</h2>
|
|
||||||
<h3 className="feature-copy">
|
|
||||||
<FormattedMessage id="featureBanner.subtitle" />
|
|
||||||
</h3>
|
|
||||||
<a
|
|
||||||
className="feature-call-to-action button"
|
|
||||||
href="https://scratch.mit.edu/"
|
|
||||||
>
|
|
||||||
<FormattedMessage id="featureBanner.callToAction" />
|
|
||||||
</a>
|
|
||||||
</FlexRow>
|
|
||||||
<div className="feature-banner-images">
|
|
||||||
<MediaQuery maxWidth={frameless.desktop - 1}>
|
|
||||||
<div className="feature-banner-image left">
|
|
||||||
<img src="/images/feature/left-illustration.png" />
|
|
||||||
</div>
|
|
||||||
</MediaQuery>
|
|
||||||
<div className="feature-banner-image right">
|
|
||||||
<img src="/images/feature/right-illustration.png" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</TitleBanner>
|
|
||||||
);
|
|
||||||
|
|
||||||
module.exports = injectIntl(MiddleBanner);
|
|
||||||
|
|
@ -1,99 +0,0 @@
|
||||||
@import "../../../colors";
|
|
||||||
@import "../../../frameless";
|
|
||||||
|
|
||||||
.feature-middle-banner {
|
|
||||||
display: flex;
|
|
||||||
margin-top: 20px;
|
|
||||||
border-radius: 16px;
|
|
||||||
background-color: $ui-orange;
|
|
||||||
background-image: url("/images/feature/bg-pattern.png");
|
|
||||||
background-size: cover;
|
|
||||||
padding: 0;
|
|
||||||
height: 17rem;
|
|
||||||
overflow: hidden;
|
|
||||||
box-sizing: border-box;
|
|
||||||
justify-content: space-between;
|
|
||||||
|
|
||||||
.feature-middle-container {
|
|
||||||
padding-left: 3rem;
|
|
||||||
align-items: flex-start;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.feature-banner-images {
|
|
||||||
display: flex;
|
|
||||||
height: 100%;
|
|
||||||
align-self: flex-end;
|
|
||||||
|
|
||||||
.feature-banner-image {
|
|
||||||
display: flex;
|
|
||||||
margin-right: 2rem;
|
|
||||||
min-width: 0;
|
|
||||||
height: 100%;
|
|
||||||
align-self: flex-end;
|
|
||||||
|
|
||||||
img {
|
|
||||||
display: block;
|
|
||||||
max-width: 100%;
|
|
||||||
max-height: 100%;
|
|
||||||
align-self: flex-end;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.feature-header,
|
|
||||||
.feature-copy,
|
|
||||||
.feature-call-to-action {
|
|
||||||
color: $ui-white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.feature-header {
|
|
||||||
font-size: 1.7rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.feature-copy {
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
max-width: 350px;
|
|
||||||
line-height: 1.7rem;
|
|
||||||
font-size: 1.3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.feature-call-to-action {
|
|
||||||
border-radius: 10px;
|
|
||||||
padding: 1em 2em;
|
|
||||||
font-size: 1em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media #{$intermediate} {
|
|
||||||
.feature-middle-banner {
|
|
||||||
margin: 20px auto 40px auto;
|
|
||||||
width: $cols8;
|
|
||||||
height: initial;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
.feature-middle-container {
|
|
||||||
padding-top: 4rem;
|
|
||||||
padding-left: 0;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.feature-banner-images {
|
|
||||||
.feature-banner-image {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
|
|
||||||
&.left {
|
|
||||||
margin-left: -2.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.right {
|
|
||||||
margin-right: -2.5rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -1,26 +0,0 @@
|
||||||
const FormattedMessage = require('react-intl').FormattedMessage;
|
|
||||||
const injectIntl = require('react-intl').injectIntl;
|
|
||||||
const React = require('react');
|
|
||||||
|
|
||||||
const FlexRow = require('../../../components/flex-row/flex-row.jsx');
|
|
||||||
const TitleBanner = require('../../../components/title-banner/title-banner.jsx');
|
|
||||||
|
|
||||||
require('./small-top-banner.scss');
|
|
||||||
|
|
||||||
const SmallTopBanner = () => (
|
|
||||||
<TitleBanner className="small-top-banner">
|
|
||||||
<FlexRow className="small-top-container">
|
|
||||||
<h2 className="copy">
|
|
||||||
<FormattedMessage id="topBanner.subtitle" />
|
|
||||||
</h2>
|
|
||||||
<a
|
|
||||||
className="call-to-action button"
|
|
||||||
href="https://scratch.mit.edu/"
|
|
||||||
>
|
|
||||||
<FormattedMessage id="topBanner.callToAction" />
|
|
||||||
</a>
|
|
||||||
</FlexRow>
|
|
||||||
</TitleBanner>
|
|
||||||
);
|
|
||||||
|
|
||||||
module.exports = injectIntl(SmallTopBanner);
|
|
||||||
|
|
@ -1,27 +0,0 @@
|
||||||
@import "../../../colors";
|
|
||||||
|
|
||||||
.small-top-banner {
|
|
||||||
background: $ui-orange;
|
|
||||||
padding: 5px 0;
|
|
||||||
|
|
||||||
.small-top-container {
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.copy,
|
|
||||||
.call-to-action {
|
|
||||||
color: $ui-white;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.copy {
|
|
||||||
font-size: 1.1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.call-to-action {
|
|
||||||
margin-left: 32px;
|
|
||||||
border-radius: 8px;
|
|
||||||
padding: .625rem 1.2rem;
|
|
||||||
font-size: 1rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,47 +0,0 @@
|
||||||
const FormattedMessage = require('react-intl').FormattedMessage;
|
|
||||||
const injectIntl = require('react-intl').injectIntl;
|
|
||||||
const React = require('react');
|
|
||||||
const PropTypes = require('prop-types');
|
|
||||||
|
|
||||||
const FlexRow = require('../../../components/flex-row/flex-row.jsx');
|
|
||||||
const TitleBanner = require('../../../components/title-banner/title-banner.jsx');
|
|
||||||
|
|
||||||
require('./top-banner.scss');
|
|
||||||
|
|
||||||
const TopBanner = props => (
|
|
||||||
<TitleBanner className="feature-top-banner">
|
|
||||||
<FlexRow className="feature-top-container column">
|
|
||||||
<h1 className="feature-header">
|
|
||||||
<FormattedMessage id="featureBanner.title" />
|
|
||||||
</h1>
|
|
||||||
{/* <h3 className="feature-copy">
|
|
||||||
<FormattedMessage id="featureBanner.subtitle" />
|
|
||||||
</h3> */}
|
|
||||||
<a
|
|
||||||
className="feature-call-to-action button"
|
|
||||||
href={props.actionLink}
|
|
||||||
>
|
|
||||||
{/* <FormattedMessage id="featureBanner.callToAction" /> */}
|
|
||||||
<FormattedMessage id="intro.startCreating" />
|
|
||||||
</a>
|
|
||||||
</FlexRow>
|
|
||||||
<div className="feature-banner-images">
|
|
||||||
<div className="feature-banner-image left">
|
|
||||||
<img src="/svgs/feature/illustration-left.svg" />
|
|
||||||
</div>
|
|
||||||
<div className="feature-banner-image right">
|
|
||||||
<img src="/svgs/feature/illustration-right.svg" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</TitleBanner>
|
|
||||||
);
|
|
||||||
|
|
||||||
TopBanner.propTypes = {
|
|
||||||
actionLink: PropTypes.string
|
|
||||||
};
|
|
||||||
|
|
||||||
TopBanner.defaultProps = {
|
|
||||||
actionLink: 'https://scratch.mit.edu'
|
|
||||||
};
|
|
||||||
|
|
||||||
module.exports = injectIntl(TopBanner);
|
|
||||||
|
|
@ -1,223 +0,0 @@
|
||||||
@import "../../../colors";
|
|
||||||
@import "../../../frameless";
|
|
||||||
|
|
||||||
.feature-top-banner {
|
|
||||||
display: flex;
|
|
||||||
position: relative;
|
|
||||||
background-color: $ui-blue;
|
|
||||||
// background-image: url("/images/feature/bg-pattern.png");
|
|
||||||
background-size: cover;
|
|
||||||
padding: 0;
|
|
||||||
min-height: 22rem;
|
|
||||||
// overflow: hidden; // if banner shouldn't have things that break the edges
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
.feature-top-container {
|
|
||||||
z-index: 1;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: flex-start;
|
|
||||||
min-height: 20rem;
|
|
||||||
max-width: 55%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.feature-banner-images {
|
|
||||||
display: flex;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
width: 100%;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
|
|
||||||
.feature-banner-image {
|
|
||||||
display: flex;
|
|
||||||
align-self: flex-end;
|
|
||||||
|
|
||||||
img {
|
|
||||||
max-width: 100%;
|
|
||||||
height: auto;
|
|
||||||
align-self: flex-end;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.left {
|
|
||||||
margin: auto 0;
|
|
||||||
width: 14rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.right {
|
|
||||||
width: 50%;
|
|
||||||
justify-content: flex-end;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.feature-header,
|
|
||||||
.feature-copy,
|
|
||||||
.feature-call-to-action {
|
|
||||||
color: $ui-white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.feature-header {
|
|
||||||
margin-bottom: .75rem;
|
|
||||||
font-size: 4rem;
|
|
||||||
line-height: 4.2rem;
|
|
||||||
max-width: 570px; // Ensure that launch title wraps before 'is'
|
|
||||||
}
|
|
||||||
|
|
||||||
.feature-copy {
|
|
||||||
font-size: 1.3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.feature-call-to-action {
|
|
||||||
border-radius: 4px;
|
|
||||||
background-color: $ui-dark-orange;
|
|
||||||
padding: 1rem 1.5rem;
|
|
||||||
font-size: 1rem;
|
|
||||||
|
|
||||||
&:before {
|
|
||||||
display: inline-block;
|
|
||||||
margin-right: .5rem;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-position: center center;
|
|
||||||
background-size: contain;
|
|
||||||
background-image: url("/svgs/feature/create-icon.svg");
|
|
||||||
width: 1.5rem;
|
|
||||||
height: 1.5rem;
|
|
||||||
vertical-align: -.35rem;
|
|
||||||
content: "";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (min-width: $desktop) {
|
|
||||||
.feature-banner-image {
|
|
||||||
&.right:after {
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
bottom: -42px;
|
|
||||||
right: 33%;
|
|
||||||
background-image: url("/svgs/feature/tapping-block.svg");
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
width: 122px;
|
|
||||||
height: 81px;
|
|
||||||
content: "";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (min-width: $mobileIntermediate) {
|
|
||||||
.feature-top-banner {
|
|
||||||
margin-bottom: 80px; // double the normal banner 40px for the notch
|
|
||||||
|
|
||||||
&:after{
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
bottom: -46px;
|
|
||||||
left: 48px;
|
|
||||||
background-image: url("/svgs/feature/banner-notch.svg");
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
width: 433px;
|
|
||||||
height: 56px;
|
|
||||||
content: "";
|
|
||||||
}
|
|
||||||
|
|
||||||
.feature-top-container {
|
|
||||||
transform: translateX(-15%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
@media only screen and (max-width: $desktop - 1) {
|
|
||||||
.feature-top-banner {
|
|
||||||
.feature-header {
|
|
||||||
text-align: left; // override #view text centering
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (min-width: $mobile) and (max-width: $desktop - 1) {
|
|
||||||
.feature-top-banner {
|
|
||||||
justify-content: flex-start;
|
|
||||||
|
|
||||||
.feature-header {
|
|
||||||
text-align: left; // override #view text centering
|
|
||||||
}
|
|
||||||
|
|
||||||
.feature-banner-images {
|
|
||||||
justify-content: flex-end;
|
|
||||||
}
|
|
||||||
|
|
||||||
.feature-top-container {
|
|
||||||
transform: translateX(10%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.feature-banner-image {
|
|
||||||
&.left {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (min-width: $mobileIntermediate) and (max-width: $desktop - 1) {
|
|
||||||
.feature-top-banner {
|
|
||||||
.feature-banner-images {
|
|
||||||
overflow: hidden; // make sure overflow is hidden to avoid scrolling with translated content
|
|
||||||
}
|
|
||||||
|
|
||||||
.feature-banner-image {
|
|
||||||
&.right {
|
|
||||||
width: 80%;
|
|
||||||
transform: translateX(10%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (min-width: $mobile) and (max-width: $mobileIntermediate - 1) {
|
|
||||||
.feature-top-banner {
|
|
||||||
.feature-banner-image {
|
|
||||||
&.right {
|
|
||||||
width: 100%;
|
|
||||||
transform: translateX(30%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (max-width: $mobile - 1) {
|
|
||||||
.feature-top-banner {
|
|
||||||
overflow: hidden;
|
|
||||||
min-height: 32rem;
|
|
||||||
|
|
||||||
.feature-top-container {
|
|
||||||
right: 0;
|
|
||||||
left: 0;
|
|
||||||
min-height: 30rem;
|
|
||||||
max-width: 100%;
|
|
||||||
justify-content: flex-start;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.feature-header {
|
|
||||||
margin: 2rem 0;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.feature-banner-image {
|
|
||||||
&.right {
|
|
||||||
margin-right: 0;
|
|
||||||
margin-bottom: -4rem;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.left {
|
|
||||||
margin-bottom: .5rem;
|
|
||||||
display: block;
|
|
||||||
width: 25%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
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-magenta;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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-magenta;
|
||||||
|
}
|
||||||
|
|
||||||
|
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="/projects/editor?tutorial=all"
|
||||||
|
>
|
||||||
|
<img src="/svgs/tutorials.svg" />
|
||||||
|
<FormattedMessage id="hocbanner.moreActivities" />
|
||||||
|
</a>
|
||||||
|
</FlexRow>
|
||||||
|
<FlexRow className="hoc-banner-images">
|
||||||
|
<a href="/projects/editor?tutorial=imagine">
|
||||||
|
<FlexRow className="hoc-banner-image mod-middle-image column">
|
||||||
|
<img src="/images/hoc/imagine.jpg" />
|
||||||
|
<div className="hoc-image-text">
|
||||||
|
<FormattedMessage id="hocbanner.imagine" />
|
||||||
|
</div>
|
||||||
|
</FlexRow>
|
||||||
|
</a>
|
||||||
|
<a href="/projects/331474033/editor?tutorial=code-cartoon">
|
||||||
|
<FlexRow className="hoc-banner-image mod-middle-image column">
|
||||||
|
<img src="/images/hoc/code-a-cartoon.jpg" />
|
||||||
|
<div className="hoc-image-text">
|
||||||
|
<FormattedMessage id="hocbanner.codeACartoon" />
|
||||||
|
</div>
|
||||||
|
</FlexRow>
|
||||||
|
</a>
|
||||||
|
<MediaQuery
|
||||||
|
key="frameless-desktop"
|
||||||
|
minWidth={frameless.desktop}
|
||||||
|
>
|
||||||
|
<a href="/projects/editor?tutorial=talking">
|
||||||
|
<FlexRow className="hoc-banner-image mod-middle-image column">
|
||||||
|
<img src="/images/hoc/talking.png" />
|
||||||
|
<div className="hoc-image-text">
|
||||||
|
<FormattedMessage id="hocbanner.talking" />
|
||||||
|
</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="/projects/editor?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="/projects/editor?tutorial=imagine">
|
||||||
|
<FlexRow className="hoc-banner-image column">
|
||||||
|
<img src="/images/hoc/imagine.jpg" />
|
||||||
|
<div className="hoc-image-text">
|
||||||
|
<FormattedMessage id="hocbanner.imagine" />
|
||||||
|
</div>
|
||||||
|
</FlexRow>
|
||||||
|
</a>
|
||||||
|
</MediaQuery>
|
||||||
|
<a href="/projects/331474033/editor?tutorial=code-cartoon">
|
||||||
|
<FlexRow className="hoc-banner-image column">
|
||||||
|
<img src="/images/hoc/code-a-cartoon.jpg" />
|
||||||
|
<div className="hoc-image-text">
|
||||||
|
<FormattedMessage id="hocbanner.codeACartoon" />
|
||||||
|
</div>
|
||||||
|
</FlexRow>
|
||||||
|
</a>
|
||||||
|
<a href="/projects/editor?tutorial=talking">
|
||||||
|
<FlexRow className="hoc-banner-image column">
|
||||||
|
<img src="/images/hoc/talking.png" />
|
||||||
|
<div className="hoc-image-text">
|
||||||
|
<FormattedMessage id="hocbanner.talking" />
|
||||||
|
</div>
|
||||||
|
</FlexRow>
|
||||||
|
</a>
|
||||||
|
</FlexRow>
|
||||||
|
</FlexRow>
|
||||||
|
</TitleBanner>
|
||||||
|
);
|
||||||
|
|
||||||
|
module.exports = injectIntl(TopBanner);
|
||||||
|
|
@ -33,12 +33,14 @@
|
||||||
"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.imagine": "Imagine a World",
|
||||||
|
"hocbanner.codeACartoon": "Code a Cartoon",
|
||||||
|
"hocbanner.talking": "Talking Tales",
|
||||||
|
|
||||||
"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",
|
||||||
"welcome.connect": "Connect with other Scratchers",
|
"welcome.connect": "Connect with other Scratchers"
|
||||||
|
|
||||||
"featureBanner.title": "The new Scratch is here!",
|
|
||||||
"featureBanner.subtitle": "not used",
|
|
||||||
"featureBanner.callToAction": "call to action"
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -31,13 +31,12 @@ 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');
|
||||||
|
|
||||||
// Featured Banner Components
|
// Hour of Code Banner Components
|
||||||
const TopBanner = require('./feature/top-banner.jsx');
|
const TopBanner = require('./hoc/top-banner.jsx');
|
||||||
const SmallTopBanner = require('./feature/small-top-banner.jsx');
|
const MiddleBanner = require('./hoc/middle-banner.jsx');
|
||||||
const MiddleBanner = require('./feature/middle-banner.jsx');
|
|
||||||
|
|
||||||
// Scratch 3.0 Launch Banner
|
const HOC_START_TIME = 1575262800000; // 2019-12-02 00:00:00
|
||||||
const LAUNCH_END_TIME = 1547873999000;
|
const HOC_END_TIME = 1577077200000; // 2019-12-23 00:00:00
|
||||||
|
|
||||||
require('./splash.scss');
|
require('./splash.scss');
|
||||||
|
|
||||||
|
|
@ -231,7 +230,7 @@ class SplashPresentation extends React.Component { // eslint-disable-line react/
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
renderHomepageRows (showBanner) {
|
renderHomepageRows () {
|
||||||
const rows = [
|
const rows = [
|
||||||
<Box
|
<Box
|
||||||
key="community_featured_projects"
|
key="community_featured_projects"
|
||||||
|
|
@ -278,22 +277,7 @@ class SplashPresentation extends React.Component { // eslint-disable-line react/
|
||||||
</Box>
|
</Box>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (
|
|
||||||
this.props.sessionStatus === sessionActions.Status.FETCHED &&
|
|
||||||
Object.keys(this.props.user).length === 0 &&
|
|
||||||
showBanner // Show middle banner
|
|
||||||
) {
|
|
||||||
rows.push(
|
|
||||||
<MediaQuery
|
|
||||||
key="frameless-tablet"
|
|
||||||
minWidth={frameless.mobileIntermediate}
|
|
||||||
>
|
|
||||||
<MiddleBanner />
|
|
||||||
</MediaQuery>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
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) {
|
||||||
|
|
||||||
|
|
@ -369,10 +353,7 @@ class SplashPresentation extends React.Component { // eslint-disable-line react/
|
||||||
return rows;
|
return rows;
|
||||||
}
|
}
|
||||||
render () {
|
render () {
|
||||||
const ShowTopBanner = Date.now() < LAUNCH_END_TIME;
|
const featured = this.renderHomepageRows();
|
||||||
const ShowMiddleBanner = false;
|
|
||||||
const ShowSmallTopBanner = false;
|
|
||||||
const featured = this.renderHomepageRows(ShowMiddleBanner);
|
|
||||||
|
|
||||||
const formatHTMLMessage = this.props.intl.formatHTMLMessage;
|
const formatHTMLMessage = this.props.intl.formatHTMLMessage;
|
||||||
const formatMessage = this.props.intl.formatMessage;
|
const formatMessage = this.props.intl.formatMessage;
|
||||||
|
|
@ -437,36 +418,22 @@ 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
|
||||||
(ShowTopBanner ? [
|
(Date.now() >= HOC_START_TIME && Date.now() < HOC_END_TIME) ? (
|
||||||
<MediaQuery
|
<MediaQuery
|
||||||
key="frameless-tablet"
|
key="frameless-tablet"
|
||||||
minWidth={0}
|
minWidth={frameless.tabletPortrait}
|
||||||
>
|
>
|
||||||
<TopBanner actionLink="/create" />
|
<TopBanner />
|
||||||
</MediaQuery>
|
</MediaQuery>
|
||||||
] : [
|
) : (
|
||||||
<Intro
|
<Intro
|
||||||
key="intro"
|
key="intro"
|
||||||
messages={messages}
|
messages={messages}
|
||||||
/>
|
/>
|
||||||
]
|
)
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
{
|
|
||||||
this.props.sessionStatus === sessionActions.Status.FETCHED &&
|
|
||||||
Object.keys(this.props.user).length !== 0 && // if user is logged in
|
|
||||||
ShowTopBanner &&
|
|
||||||
<MediaQuery
|
|
||||||
key="frameless-tablet"
|
|
||||||
minWidth={0}
|
|
||||||
>
|
|
||||||
{ShowSmallTopBanner ?
|
|
||||||
<SmallTopBanner /> :
|
|
||||||
<TopBanner actionLink="/projects/editor/" />
|
|
||||||
}
|
|
||||||
</MediaQuery>
|
|
||||||
}
|
|
||||||
<div
|
<div
|
||||||
className="inner mod-splash"
|
className="inner mod-splash"
|
||||||
key="inner"
|
key="inner"
|
||||||
|
|
@ -498,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 && (
|
||||||
|
|
|
||||||
BIN
static/images/hoc/code-a-cartoon.jpg
Normal file
BIN
static/images/hoc/code-a-cartoon.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 150 KiB |
BIN
static/images/hoc/imagine.jpg
Normal file
BIN
static/images/hoc/imagine.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 188 KiB |
BIN
static/images/hoc/talking.png
Normal file
BIN
static/images/hoc/talking.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 92 KiB |
|
|
@ -9,7 +9,7 @@ const SeleniumHelper = require('../selenium-helpers.js');
|
||||||
const helper = new SeleniumHelper();
|
const helper = new SeleniumHelper();
|
||||||
|
|
||||||
var tap = require('tap');
|
var tap = require('tap');
|
||||||
const test = tap.test;
|
const test = tap.skip;
|
||||||
|
|
||||||
const driver = helper.buildDriver('www-smoke test-my-stuff');
|
const driver = helper.buildDriver('www-smoke test-my-stuff');
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue