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({
<div className="middle-banner inner">
<FlexRow className="middle-banner-header">
<h1 className="middle-banner-header-h1">
<FormattedMessage id="middle-banner.header" />
<FormattedMessage id="middleBanner.header" />
</h1>
<a href="/tips" className="button mod-ttt-try-button">
<FormattedMessage id="middle-banner.ttt" />
<FormattedMessage id="middleBanner.ttt" />
</a>
</FlexRow>
<MediaQuery minWidth={frameless.tablet}>
......
src/views/splash/hoc/top-banner.jsx
View file @ ef4f851e
......@@ -21,6 +21,9 @@ var nameTile = {
var TopBanner = injectIntl(React.createClass({
type: 'TopBanner',
propTypes: {
loggedIn: React.PropTypes.bool.isRequired
},
getInitialState: function () {
// use translated tile
var formatMessage = this.props.intl.formatMessage;
......@@ -46,47 +49,51 @@ var TopBanner = injectIntl(React.createClass({
return (
<TitleBanner className="mod-splash-top">
<FlexRow className="banner-top inner">
<FlexRow className="top-animation">
<img
src="/images/hoc/s.png"
alt=""
className="top-animation-letter mod-letter-s"
/>
<img
src="/images/hoc/c1.png"
alt=""
className="top-animation-letter mod-letter-c1"
/>
<img
src="/images/hoc/r.png"
alt=""
className="top-animation-letter mod-letter-r"
/>
<img
src="/images/hoc/a.png"
alt=""
className="top-animation-letter mod-letter-a"
/>
<img
src="/images/hoc/t.png"
alt=""
className="top-animation-letter mod-letter-t"
/>
<img
src="/images/hoc/c2.png"
alt=""
className="top-animation-letter mod-letter-c2"
/>
<img
src="/images/hoc/h.png"
alt=""
className="top-animation-letter mod-letter-h"
/>
</FlexRow>
<a href="/projects/editor/?tip_bar=name">
<FlexRow className="top-animation">
<img
src="/images/hoc/s.png"
alt=""
className="top-animation-letter mod-letter-s"
/>
<img
src="/images/hoc/c1.png"
alt=""
className="top-animation-letter mod-letter-c1"
/>
<img
src="/images/hoc/r.png"
alt=""
className="top-animation-letter mod-letter-r"
/>
<img
src="/images/hoc/a.png"
alt=""
className="top-animation-letter mod-letter-a"
/>
<img
src="/images/hoc/t.png"
alt=""
className="top-animation-letter mod-letter-t"
/>
<img
src="/images/hoc/c2.png"
alt=""
className="top-animation-letter mod-letter-c2"
/>
<img
src="/images/hoc/h.png"
alt=""
className="top-animation-letter mod-letter-h"
/>
</FlexRow>
</a>
<div className="top-links">
<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>
<div className="mod-guides-link" onClick={this.showTTTModal}>
&nbsp;&nbsp;
......
src/views/splash/hoc/top-banner.scss
View file @ ef4f851e
......@@ -31,6 +31,7 @@
}
.top-animation {
margin: auto;
padding-top: 2rem;
padding-bottom: 1rem;
width: 70%;
......
src/views/splash/l10n.json
View file @ ef4f851e
......@@ -29,8 +29,9 @@
"teacherbanner.classesButton": "My Classes",
"teacherbanner.faqButton": "Teacher Account FAQ",
"middle-banner.header": "Get Creative with Coding",
"middle-banner.ttt": "See more activities",
"middleBanner.header": "Get Creative with Coding",
"middleBanner.ttt": "See more activities",
"topBanner.getStarted": "Get Started with Coding!",
"ttt.tutorial": "Tutorial",
"ttt.open": "Open",
"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({
{this.props.isEducator ? [
<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">
{this.props.sessionStatus === sessionActions.Status.FETCHED ? (
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