scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-26 17:16:11 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

Purge old banner

Browse source
This commit is contained in:
rschamp 2019-11-26 17:31:47 -05:00
parent da515a84f0
commit 1a172d45e0
8 changed files with 7 additions and 528 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
src/views/splash/feature/middle-banner.jsx
View file

@ -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);

99
src/views/splash/feature/middle-banner.scss
View file

@ -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;
}
}
}
}
}

26
src/views/splash/feature/small-top-banner.jsx
View file

@ -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);

27
src/views/splash/feature/small-top-banner.scss
View file

@ -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;
}
}

47
src/views/splash/feature/top-banner.jsx
View file

@ -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);

223
src/views/splash/feature/top-banner.scss
View file

@ -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%;
}
}
}
}

6
src/views/splash/l10n.json
View file

@ -36,9 +36,5 @@
"welcome.welcomeToScratch": "Welcome to Scratch!",
"welcome.learn": "Learn how to make a project in Scratch",
"welcome.tryOut": "Try out starter projects",
"welcome.connect": "Connect with other Scratchers",
"featureBanner.title": "The new Scratch is here!",
"featureBanner.subtitle": "not used",
"featureBanner.callToAction": "call to action"
"welcome.connect": "Connect with other Scratchers"
}

64
src/views/splash/presentation.jsx
View file

@ -2,11 +2,9 @@ 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;
@ -31,14 +29,6 @@ const LoveProjectMessage = require('./activity-rows/love-project.jsx');
const RemixProjectMessage = require('./activity-rows/remix-project.jsx');
const ShareProjectMessage = require('./activity-rows/share-project.jsx');
// Featured Banner Components
const TopBanner = require('./feature/top-banner.jsx');
const SmallTopBanner = require('./feature/small-top-banner.jsx');
const MiddleBanner = require('./feature/middle-banner.jsx');
// Scratch 3.0 Launch Banner
const LAUNCH_END_TIME = 1547873999000;
require('./splash.scss');
class ActivityList extends React.Component {
@ -231,7 +221,7 @@ class SplashPresentation extends React.Component { // eslint-disable-line react/
}
}
}
renderHomepageRows (showBanner) {
renderHomepageRows () {
const rows = [
<Box
key="community_featured_projects"
@ -279,21 +269,6 @@ class SplashPresentation extends React.Component { // eslint-disable-line react/
);
}
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 &&
this.props.featuredGlobal.scratch_design_studio.length > 4) {
@ -369,10 +344,7 @@ class SplashPresentation extends React.Component { // eslint-disable-line react/
return rows;
}
render () {
const ShowTopBanner = Date.now() < LAUNCH_END_TIME;
const ShowMiddleBanner = false;
const ShowSmallTopBanner = false;
const featured = this.renderHomepageRows(ShowMiddleBanner);
const featured = this.renderHomepageRows();
const formatHTMLMessage = this.props.intl.formatHTMLMessage;
const formatMessage = this.props.intl.formatMessage;
@ -438,34 +410,10 @@ 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
(ShowTopBanner ? [
<MediaQuery
key="frameless-tablet"
minWidth={0}
>
<TopBanner actionLink="/create" />
</MediaQuery>
] : [
<Intro
key="intro"
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>
<Intro
key="intro"
messages={messages}
/>
}
<div
className="inner mod-splash"