mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2024-11-26 17:16:11 -05:00
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
This commit is contained in:
chrisgarrity
parent
3de61d092f
commit
ef4f851e6d
5 changed files with 54 additions and 44 deletions
|
|
@ -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}>
|
||||
|
|
|
|||
|
|
@ -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}>
|
||||
|
||||
|
|
|
|||
|
|
@ -31,6 +31,7 @@
|
|||
}
|
||||
|
||||
.top-animation {
|
||||
margin: auto;
|
||||
padding-top: 2rem;
|
||||
padding-bottom: 1rem;
|
||||
width: 70%;
|
||||
|
|
|
|||
|
|
@ -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.",
|
||||
|
|
|
|||
|
|
@ -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 ? [
|
||||
|
|
|
|||
Loading…
Reference in a new issue