Add "Request Account" button to Educators landing

This commit is contained in:
Ray Schamp 2016-08-01 12:19:29 -04:00
parent 025958fc24
commit c842d06ac4
3 changed files with 16 additions and 20 deletions
src/views/teachers/landing

View file

@ -19,5 +19,5 @@
"teacherlanding.creativeComputing": "The <a href=\"http://scratched.gse.harvard.edu/guide/\">Creative Computing Curriculum Guide</a> provides plans, activities, and strategies for introducing creative computing.",
"teacherlanding.accountsTitle": "Teacher Accounts in Scratch",
"teacherlanding.accountsDescription": "As an educator, you can request a Scratch Teacher Account, which makes it easier to create accounts for groups of students and to manage your students projects and comments. To learn more, see the <a href=\"/educators/faq\">Teacher Account FAQ page</a>.",
"teacherlanding.accountsButton": "Coming Soon"
"teacherlanding.requestAccount": "Request Account"
}

View file

@ -5,6 +5,7 @@ var FormattedHTMLMessage = require('react-intl').FormattedHTMLMessage;
var FormattedMessage = require('react-intl').FormattedMessage;
var injectIntl = require('react-intl').injectIntl;
var Button = require('../../../components/forms/button.jsx');
var Page = require('../../../components/page/www/page.jsx');
var FlexRow = require('../../../components/flex-row/flex-row.jsx');
var SubNavigation = require('../../../components/subnavigation/subnavigation.jsx');
@ -109,7 +110,11 @@ var Landing = injectIntl(React.createClass({
<p>
<FormattedHTMLMessage id="teacherlanding.accountsDescription" />
</p>
<div className="coming-soon"><FormattedMessage id="teacherlanding.accountsButton" /></div>
<SubNavigation className="teacher-account-buttons" align="left">
<a href="/educators/register">
<li><FormattedMessage id="teacherlanding.requestAccount" /></li>
</a>
</SubNavigation>
</div>
<img src="/images/teachers/teacher-account.png" alt="teacher account" id="teacher-icon"/>
</div>

View file

@ -220,6 +220,15 @@ $story-width: $cols3;
color: $ui-white;
}
.teacher-account-buttons {
li {
border: 2px solid $ui-white;
padding: 16px;
font-size: 16px;
font-weight: 500;
}
}
#left {
width: $cols4;
max-width: $cols4;
@ -229,24 +238,6 @@ $story-width: $cols3;
p {
margin-bottom: 3.5rem;
}
.coming-soon {
border: 2px solid $ui-white;
border-radius: 50px;
box-shadow: none;
background-color: transparent;
padding: 16px 16px;
width: $cols5 / 2;
text-align: center;
color: $ui-white;
font-size: 16px;
font-weight: 500;
box-sizing: border-box;
&:hover {
box-shadow: none;
}
}
}
img {