scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2025-02-18 09:00:30 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Switch CTA button based on logged in state

Browse source 
Invite logged-out users to ‘Get Started with Coding!’, and make the whole Scratch animation clickable (goes to the Animate a Name tutorial).

See #1664
This commit is contained in:
chrisgarrity 2017-11-08 16:50:14 -05:00
parent 3de61d092f
commit ef4f851e6d
5 changed files with 54 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/views/splash/hoc/middle-banner.jsx
View file

@ -90,10 +90,10 @@ var MiddleBanner = injectIntl(React.createClass({
<div className="middle-banner inner"> <div className="middle-banner inner">
<FlexRow className="middle-banner-header"> <FlexRow className="middle-banner-header">
<h1 className="middle-banner-header-h1"> <h1 className="middle-banner-header-h1">
<FormattedMessage id="middle-banner.header" /> <FormattedMessage id="middleBanner.header" />
</h1> </h1>
<a href="/tips" className="button mod-ttt-try-button"> <a href="/tips" className="button mod-ttt-try-button">
<FormattedMessage id="middle-banner.ttt" /> <FormattedMessage id="middleBanner.ttt" />
</a> </a>
</FlexRow> </FlexRow>
<MediaQuery minWidth={frameless.tablet}> <MediaQuery minWidth={frameless.tablet}>

11
src/views/splash/hoc/top-banner.jsx
View file

@ -21,6 +21,9 @@ var nameTile = {
var TopBanner = injectIntl(React.createClass({ var TopBanner = injectIntl(React.createClass({
type: 'TopBanner', type: 'TopBanner',
propTypes: {
loggedIn: React.PropTypes.bool.isRequired
},
getInitialState: function () { getInitialState: function () {
// use translated tile // use translated tile
var formatMessage = this.props.intl.formatMessage; var formatMessage = this.props.intl.formatMessage;
@ -46,6 +49,7 @@ var TopBanner = injectIntl(React.createClass({
return ( return (
<TitleBanner className="mod-splash-top"> <TitleBanner className="mod-splash-top">
<FlexRow className="banner-top inner"> <FlexRow className="banner-top inner">
<a href="/projects/editor/?tip_bar=name">
<FlexRow className="top-animation"> <FlexRow className="top-animation">
<img <img
src="/images/hoc/s.png" src="/images/hoc/s.png"
@ -83,10 +87,13 @@ var TopBanner = injectIntl(React.createClass({
className="top-animation-letter mod-letter-h" className="top-animation-letter mod-letter-h"
/> />
</FlexRow> </FlexRow>
</a>
<div className="top-links"> <div className="top-links">
<a href="/projects/editor/?tip_bar=name" className="button mod-top-button"> <a href="/projects/editor/?tip_bar=name" className="button mod-top-button">
<FormattedMessage id="ttt.AnimateYourNameTitle" /> { this.props.loggedIn ?
<FormattedMessage id="ttt.AnimateYourNameTitle" /> :
<FormattedMessage id="topBanner.getStarted" />
}
</a> </a>
<div className="mod-guides-link" onClick={this.showTTTModal}> <div className="mod-guides-link" onClick={this.showTTTModal}>
&nbsp;&nbsp; &nbsp;&nbsp;

1
src/views/splash/hoc/top-banner.scss
View file

@ -31,6 +31,7 @@
} }
.top-animation { .top-animation {
margin: auto;
padding-top: 2rem; padding-top: 2rem;
padding-bottom: 1rem; padding-bottom: 1rem;
width: 70%; width: 70%;

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

@ -29,8 +29,9 @@
"teacherbanner.classesButton": "My Classes", "teacherbanner.classesButton": "My Classes",
"teacherbanner.faqButton": "Teacher Account FAQ", "teacherbanner.faqButton": "Teacher Account FAQ",
"middle-banner.header": "Get Creative with Coding", "middleBanner.header": "Get Creative with Coding",
"middle-banner.ttt": "See more activities", "middleBanner.ttt": "See more activities",
"topBanner.getStarted": "Get Started with Coding!",
"ttt.tutorial": "Tutorial", "ttt.tutorial": "Tutorial",
"ttt.open": "Open", "ttt.open": "Open",
"ttt.tutorialSubtitle": "Find out how to make this project using a step-by-step tutorial in Scratch.", "ttt.tutorialSubtitle": "Find out how to make this project using a step-by-step tutorial in Scratch.",

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

@ -255,7 +255,8 @@ var SplashPresentation = injectIntl(React.createClass({
{this.props.isEducator ? [ {this.props.isEducator ? [
<TeacherBanner key="teacherbanner" messages={messages} /> <TeacherBanner key="teacherbanner" messages={messages} />
] : []} ] : []}
<TopBanner /> <TopBanner loggedIn={this.props.sessionStatus === sessionActions.Status.FETCHED
&& Object.keys(this.props.user).length !== 0}/>
<div key="inner" className="inner mod-splash"> <div key="inner" className="inner mod-splash">
{this.props.sessionStatus === sessionActions.Status.FETCHED ? ( {this.props.sessionStatus === sessionActions.Status.FETCHED ? (
Object.keys(this.props.user).length !== 0 ? [ Object.keys(this.props.user).length !== 0 ? [