scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2025-02-17 00:21:20 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Merge pull request #682 from technoboy10/gh680-681-educators-page

Browse source 
Fix GH-680 and GH-681: Educator landing style tweaks
This commit is contained in:
Connor Hudson 2016-07-06 15:19:09 -04:00 committed by GitHub
commit ad8b43a592
2 changed files with 28 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
src/views/teachers/landing/landing.jsx
View file

@ -9,7 +9,6 @@ var Page = require('../../../components/page/www/page.jsx');
var FlexRow = require('../../../components/flex-row/flex-row.jsx');
var SubNavigation = require('../../../components/subnavigation/subnavigation.jsx');
var TitleBanner = require('../../../components/title-banner/title-banner.jsx');
var Button = require('../../../components/forms/button.jsx');
require('./landing.scss');
@ -63,36 +62,36 @@ var Landing = injectIntl(React.createClass({
<p><FormattedHTMLMessage id="teacherlanding.generalUsageSubjectAreas"/></p>
</FlexRow>
<FlexRow className="stories">
<div className="story">
<img src="/images/teachers/stories/ingrid.jpg" alt="ingrid's story" />
<div className="story-info">
<a href="//bit.ly/28SBsa9">Ingrid Gustafson</a>
<p><FormattedMessage id="teacherlanding.ingridTitle" /></p>
</div>
</div>
<div className="story">
<a href="//bit.ly/28SBsa9" className="story">
<img src="/images/teachers/stories/ingrid.jpg" alt="ingrid's story" />
<div className="story-info">
<p className="name">Ingrid Gustafson</p>
<p><FormattedMessage id="teacherlanding.ingridTitle" /></p>
</div>
</a>
<a href="//bit.ly/28Q5l6P" className="story">
<img src="/images/teachers/stories/dylan.jpg" alt="dylan's story" />
<div className="story-info">
<a href="//bit.ly/28Q5l6P">Dylan Ryder</a>
<p className="name">Dylan Ryder</p>
<p><FormattedMessage id="teacherlanding.dylanTitle" /></p>
</div>
</div>
<div className="story">
</a>
<a href="//bit.ly/28SC1AY" className="story">
<img src="/images/teachers/stories/plug-in-studio.jpg"
alt="plug in studio's story" />
<div className="story-info">
<a href="//bit.ly/28SC1AY">Plug-In Studios</a>
<p className="name">Plug-In Studios</p>
<p><FormattedMessage id="teacherlanding.afterSchoolTitle" /></p>
</div>
</div>
<div className="story">
</a>
<a href="//bit.ly/28UzapJ" className="story">
<img src="/images/teachers/stories/ghana-code-club.jpg"
alt="ghana code club's story" />
<div className="story-info">
<a href="//bit.ly/28UzapJ">Ghana Code Club</a>
<p className="name">Ghana Code Club</p>
<p><FormattedMessage id="teacherlanding.afterSchoolTitle" /></p>
</div>
</div>
</a>
</FlexRow>
</section>
<section id="resources">
@ -142,7 +141,7 @@ var Landing = injectIntl(React.createClass({
<p>
<FormattedHTMLMessage id="teacherlanding.accountsDescription" />
</p>
<Button><FormattedMessage id="teacherlanding.accountsButton" /></Button>
<div className="coming-soon"><FormattedMessage id="teacherlanding.accountsButton" /></div>
</div>
<img src="/images/teachers/teacher-account.png" alt="teacher account" id="teacher-icon"/>
</div>

12
src/views/teachers/landing/landing.scss
View file

@ -159,6 +159,14 @@ $story-width: $cols3;
padding-top: 10px;
padding-left: 10px;
.name {
margin: 0;
line-height: initial;
color: $ui-blue;
font-size: initial;
font-weight: 500;
}
p {
margin: 10px 0;
font-size: .75rem;
@ -222,16 +230,18 @@ $story-width: $cols3;
margin-bottom: 3.5rem;
}
button {
.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;