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

moved educators SiP from 3-icon section to standalone sub-banner

Browse source
This commit is contained in:
Ben Wheeler 2019-03-21 09:23:59 -04:00
parent 5a32996229
commit dd3b777763
5 changed files with 231 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/_colors.scss
View file

@ -1,6 +1,7 @@
/* UI Primary Colors */
$ui-blue: hsla(215, 100, 65, 1); // #4C97FF Motion Primary
$ui-blue-dark: hsla(215, 65, 55, 1); // #3373CC Motion Secondary
$ui-blue-very-light: hsla(215, 100, 95, 1);
$ui-blue-10percent: hsla(215, 100, 65, .1);
$ui-blue-25percent: hsla(215, 100, 65, .25);

14
src/components/forms/button.scss
View file

@ -38,4 +38,18 @@ $pass-bg: $ui-aqua;
&:disabled {
box-shadow: none;
}
&.large {
border-radius: .25rem;
font-size: 1rem;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
padding: .75rem 1.25rem .8125rem;
}
&.icon-right img {
height: 1.25rem;
margin-bottom: -.25rem;
margin-left: .5rem;
margin-right: -.25rem;
}
}

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

@ -8,6 +8,7 @@ const React = require('react');
const FlexRow = require('../../../components/flex-row/flex-row.jsx');
const SubNavigation = require('../../../components/subnavigation/subnavigation.jsx');
const TitleBanner = require('../../../components/title-banner/title-banner.jsx');
const Button = require('../../../components/forms/button.jsx');
const Page = require('../../../components/page/www/page.jsx');
const render = require('../../../lib/render.jsx');
@ -64,9 +65,137 @@ const Landing = props => (
</a>
</SubNavigation>
</div>
<div className="feature">
<SubNavigation className="inner">
<section id="sip">
<FlexRow className="educators-using">
<div className="using-scratch-image">
<img src="images/teachers/makey-activity.png" />
</div>
<div className="sip-info">
<h2><FormattedMessage id="teacherlanding.howUsingScratch" /></h2>
<p>
<FormattedMessage
id="teacherlanding.sip"
values={{
sipName: (
<FormattedMessage id="teacherlanding.sipName" />
)
}}
/>
</p>
<a href="https://sip.scratch.mit.edu/">
<Button className="sip-button large icon-right">
<FormattedMessage id="teacherlanding.seeLatest" />
<img src="/svgs/project/r-arrow.svg" />
</Button>
</a>
</div>
</FlexRow>
</section>
</SubNavigation>
</div>
</TitleBanner>
{/*
<div className="feature">
<div className="inner">
<section id="sip">
<FlexRow className="educators-using">
<div className="using-scratch-image">
<img src="images/teachers/makey-activity.png" />
</div>
<div className="sip-info">
<h2><FormattedMessage id="teacherlanding.howUsingScratch" /></h2>
<p>
<FormattedMessage
id="teacherlanding.sip"
values={{
sipName: (
<FormattedMessage id="teacherlanding.sipName" />
)
}}
/>
</p>
<a href="https://sip.scratch.mit.edu/">
<Button className="sip-button large icon-right">
<FormattedMessage id="teacherlanding.seeLatest" />
<img src="/svgs/project/r-arrow.svg" />
</Button>
</a>
</div>
</FlexRow>
</section>
</div>
</div>
*/}
<div className="inner">
{/*
<section id="sip">
<FlexRow className="educators-using">
<div className="using-scratch-image">
<img src="images/teachers/makey-activity.png" />
</div>
<div className="sip-info">
<h2><FormattedMessage id="teacherlanding.howUsingScratch" /></h2>
<p>
<FormattedMessage
id="teacherlanding.sip"
values={{
sipName: (
<FormattedMessage id="teacherlanding.sipName" />
)
}}
/>
</p>
<a href="https://sip.scratch.mit.edu/">
<Button className="sip-button large icon-right">
<FormattedMessage id="teacherlanding.seeLatest" />
<img src="/svgs/project/r-arrow.svg" />
</Button>
</a>
</div>
</FlexRow>
</section>
*/}
<section id="resources">
<span className="nav-spacer" />
<h2><FormattedMessage id="teacherlanding.educatorResourcesTitle" /></h2>
<FlexRow className="educator-community">
<div>
<p>
<FormattedMessage
id="teacherlanding.educatorGuides"
values={{
educatorLink: (
<a
href={props.intl.formatMessage({
id: 'guides.EducatorGuidesAllLink'
})}
>
<FormattedMessage id="teacherlanding.educatorGuideLinkText" />
</a>
)
}}
/>
</p>
</div>
<div>
<p>
<FormattedMessage
id="teacherlanding.creativeComputing"
values={{
scratchEdLink: (
<a href="http://scratched.gse.harvard.edu/guide/">
<FormattedMessage id="teacherlanding.scratchEdLinkText" />
</a>
)
}}
/>
</p>
</div>
</FlexRow>
</section>
{ /*
<section>
<span className="nav-spacer" />
<h2><FormattedMessage id="teacherlanding.educatorResourcesTitle" /></h2>
@ -152,6 +281,7 @@ const Landing = props => (
</div>
</FlexRow>
</section>
*/}
<section>
<span className="nav-spacer" />
<h2><FormattedMessage id="teacherlanding.studentResourcesTitle" /></h2>

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

@ -76,6 +76,47 @@ $story-width: $cols3;
}
}
.feature {
background-color: $ui-blue-very-light;
section#sip {
margin-bottom: .5rem;
}
.educators-using {
justify-content: flex-start;
align-items: start;
.using-scratch-image {
width: 420px;
padding: 2.75rem 2rem;
img {
width: 100%;
border-radius: .5rem;
}
}
.sip-info {
width: 21.75rem;
padding: 2rem;
h2 {
line-height: 2.7rem;
}
p {
margin-top: 1.25rem;
margin-bottom: 1.25rem;
}
}
.sip-button {
font-size: 1rem;
}
}
}
.educator-community {
margin-bottom: 2rem;
text-align: left;
@ -218,6 +259,20 @@ $story-width: $cols3;
}
}
.feature {
.educators-using {
width: 484px;
}
.sip-info {
text-align: center;
h2 {
text-align: center;
}
}
}
#teacher-icon {
display: none;
}
@ -259,6 +314,20 @@ $story-width: $cols3;
width: $story-width;
}
.feature {
.educators-using {
width: 484px;
}
.sip-info {
text-align: center;
h2 {
text-align: center;
}
}
}
#teacher-icon {
display: none;
}
@ -339,6 +408,14 @@ $story-width: $cols3;
text-align: left;
}
.feature {
.sip-info {
h2 {
text-align: left;
}
}
}
.flex-row {
&.sidebar-row {
@ -444,4 +521,12 @@ $story-width: $cols3;
.account-flex {
justify-content: space-between;
}
.feature {
.sip-info {
h2 {
text-align: left;
}
}
}
}

BIN
static/images/teachers/makey-activity.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 129 KiB