Skip to content

GitLab

S
scratch-www
Commit ef4f851e authored by chrisgarrity's avatar chrisgarrity
Browse files
Options

Switch CTA button based on logged in state 

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
parent 3de61d09
Hide whitespace changes
Inline Side-by-side
Showing with 54 additions and 44 deletions
src/views/splash/hoc/middle-banner.jsx
View file @ ef4f851e
...@@ -90,10 +90,10 @@ var MiddleBanner = injectIntl(React.createClass({ ...@@ -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}>
......
src/views/splash/hoc/top-banner.jsx
View file @ ef4f851e
...@@ -21,6 +21,9 @@ var nameTile = { ...@@ -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,47 +49,51 @@ var TopBanner = injectIntl(React.createClass({ ...@@ -46,47 +49,51 @@ 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">
<FlexRow className="top-animation"> <a href="/projects/editor/?tip_bar=name">
<img <FlexRow className="top-animation">
src="/images/hoc/s.png" <img
alt="" src="/images/hoc/s.png"
className="top-animation-letter mod-letter-s" alt=""
/> className="top-animation-letter mod-letter-s"
<img />
src="/images/hoc/c1.png" <img
alt="" src="/images/hoc/c1.png"
className="top-animation-letter mod-letter-c1" alt=""
/> className="top-animation-letter mod-letter-c1"
<img />
src="/images/hoc/r.png" <img
alt="" src="/images/hoc/r.png"
className="top-animation-letter mod-letter-r" alt=""
/> className="top-animation-letter mod-letter-r"
<img />
src="/images/hoc/a.png" <img
alt="" src="/images/hoc/a.png"
className="top-animation-letter mod-letter-a" alt=""
/> className="top-animation-letter mod-letter-a"
<img />
src="/images/hoc/t.png" <img
alt="" src="/images/hoc/t.png"
className="top-animation-letter mod-letter-t" alt=""
/> className="top-animation-letter mod-letter-t"
<img />
src="/images/hoc/c2.png" <img
alt="" src="/images/hoc/c2.png"
className="top-animation-letter mod-letter-c2" alt=""
/> className="top-animation-letter mod-letter-c2"
<img />
src="/images/hoc/h.png" <img
alt="" src="/images/hoc/h.png"
className="top-animation-letter mod-letter-h" alt=""
/> 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;
......
src/views/splash/hoc/top-banner.scss
View file @ ef4f851e
...@@ -31,6 +31,7 @@ ...@@ -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%;
......
src/views/splash/l10n.json
View file @ ef4f851e
...@@ -29,8 +29,9 @@ ...@@ -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.",
......
src/views/splash/presentation.jsx
View file @ ef4f851e
...@@ -255,7 +255,8 @@ var SplashPresentation = injectIntl(React.createClass({ ...@@ -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 ? [
......
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