scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-23 07:38:07 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Merge branch 'release/hoc-2016-1' into release/2.2.15

Browse source 
* release/hoc-2016-1:
  Merge pull request #1027 from TheGrits/patch-7
  Additional content changes
  Fix TTT content
  Redirect hoc page to `/go`
  Merge pull request #1037 from chrisgarrity/patch-column-count
  update ttt content
  Update ttt content
  Merge pull request #1006 from chrisgarrity/feature/gh979-tttpage
  Merge pull request #1018 from mewtaylor/issue/gh-995
  Merge pull request #1008 from mewtaylor/issue/gh-980
  Update pattern so rewrite accepts querystring too

# Conflicts:
#	src/components/modal/ttt/modal.jsx
#	src/views/jobs/jobs.jsx
#	src/views/thingstotry/l10n.json
This commit is contained in:
Matthew Taylor 2016-11-21 15:01:53 -05:00
commit 0c9f2561f9
9 changed files with 15 additions and 591 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/components/modal/ttt/modal.jsx
View file

@ -88,7 +88,7 @@ var TTTModal = React.createClass({
href={this.props.activityLoc}
className="button white mod-ttt-item"
>
<FormattedMessage id="ttt.download" />
<FormattedMessage id="ttt.open" />
</a>
</FlexRow>
<FlexRow as="li" className="mod-ttt-item">
@ -109,7 +109,7 @@ var TTTModal = React.createClass({
href={this.props.guideLoc}
className="button white mod-ttt-item"
>
<FormattedMessage id="ttt.download" />
<FormattedMessage id="ttt.open" />
</a>
</FlexRow>
</ul>

9
src/components/title-banner/title-banner.scss
View file

@ -10,15 +10,20 @@
padding: 20px 0;
width: 100%;
h1,
h1,
p {
margin: 0 auto;
padding: 5px 0;
text-align: center;
color: $type-white;
color: $type-white;
}
p {
max-width: 500px;
}
// On windows strong gets reset to font-weight 500, so make sure to override for banners
strong {
font-weight: 700;
}
}

5
src/routes.json
View file

@ -121,10 +121,9 @@
},
{
"name": "hoc",
"pattern": "^/hoc/?$",
"pattern": "^/hoc/?(\\?.*)?$",
"routeAlias": "/hoc/?\\??",
"view": "hoc/hoc",
"title": "Hour of Code"
"redirect": "/go"
},
{
"name": "cards",

338
src/views/hoc/hoc.jsx
View file

@ -1,338 +0,0 @@
var FormattedHTMLMessage = require('react-intl').FormattedHTMLMessage;
var FormattedMessage = require('react-intl').FormattedMessage;
var React = require('react');
var render = require('../../lib/render.jsx');
var Button = require('../../components/forms/button.jsx');
var Box = require('../../components/box/box.jsx');
var FlexRow = require('../../components/flex-row/flex-row.jsx');
var Page = require('../../components/page/www/page.jsx');
var SubNavigation = require('../../components/subnavigation/subnavigation.jsx');
var TitleBanner = require('../../components/title-banner/title-banner.jsx');
require('./hoc.scss');
var Hoc = React.createClass({
type: 'Hoc',
getInitialState: function () {
return {
bgClass: ''
};
},
onCardEnter: function (bgClass) {
this.setState({
bgClass: bgClass
});
},
render: function () {
return (
<div className="hoc">
<TitleBanner className={this.state.bgClass}>
<h1>
<FormattedMessage id='hoc.title' />
</h1>
<p>
<FormattedMessage id='hoc.subTitle' />
</p>
<section className="hoc-section mod-title-banner">
<FlexRow>
<div className="flex-row-card">
<a href="/projects/editor/?tip_bar=name">
<div className="flex-row-card-info"
onMouseEnter={this.onCardEnter.bind(this, 'mod-name-bg')}>
<img className="flex-row-card-info-img"
src="/images/hoc/name-tutorial.jpg"
alt="" />
<Button className="flex-row-card-info-button">
<FormattedMessage id='hoc.tipsAnimateYourNameTitle' />
</Button>
</div>
</a>
</div>
<div className="flex-row-card" onMouseEnter={this.onCardEnter.bind(this, 'mod-wbb-bg')}>
<a href="/projects/editor/?tip_bar=fly">
<div className="flex-row-card-info">
<img className="flex-row-card-info-img"
src="/images/hoc/make-it-fly-tutorial.jpg"
alt="" />
<Button className="flex-row-card-info-button">
<FormattedMessage id='hoc.tipsMakeItFlyTitle' />
</Button>
</div>
</a>
</div>
<div className="flex-row-card" onMouseEnter={this.onCardEnter.bind(this, 'mod-dance-bg')}>
<a href="/projects/editor/?tip_bar=music">
<div className="flex-row-card-info">
<img className="flex-row-card-info-img"
src="/images/hoc/make-music-tutorial.png"
alt="" />
<Button className="flex-row-card-info-button">
<FormattedMessage id='hoc.tipsMakeMusicTitle' />
</Button>
</div>
</a>
</div>
</FlexRow>
</section>
<SubNavigation>
<li className="description">
<FormattedMessage id='hoc.findOutMore' />:
</li>
<a href="/about/">
<li>
<FormattedMessage id='general.about' />
</li>
</a>
<a href="/parents/">
<li>
<FormattedMessage id='general.forParents' />
</li>
</a>
<a href="/educators/">
<li>
<FormattedMessage id='general.forEducators'/>
</li>
</a>
</SubNavigation>
</TitleBanner>
<div className="inner">
<Box title={''}>
<section id="teacher" className="hoc-section">
<div className="hoc-section-column">
<h3>
<FormattedMessage id='hoc.activityCardsHeader' />
</h3>
<p className="section-paragraph">
<FormattedHTMLMessage id='hoc.activityCardsInfo1' />
</p>
</div>
<div className="hoc-section-resource">
<img className="hoc-section-resource-img"
src="/svgs/tips-card.svg"
alt="" />
<div className="hoc-section-resource-info">
<h5 className="hoc-section-resource-info-header">
<FormattedMessage id='hoc.tipsAnimateYourNameTitle' />
</h5>
<a className="hoc-section-resource-anchor"
href="/scratchr2/static/pdfs/help/AnimateYourNameCards.pdf">
<FormattedMessage id='hoc.activityCards' />
</a>
<a className="hoc-section-resource-anchor"
href="/scratchr2/static/pdfs/help/AnimateYourNameGuide.pdf">
<FormattedMessage id='hoc.facilitatorGuide' />
</a>
</div>
</div>
<div className="hoc-section-resource">
<img className="hoc-section-resource-img"
src="/svgs/tips-card.svg"
alt="" />
<div className="hoc-section-resource-info">
<h5 className="hoc-section-resource-info-header">
<FormattedMessage id='hoc.tipsMakeItFlyTitle' />
</h5>
<a className="hoc-section-resource-anchor"
href="/scratchr2/static/pdfs/help/FlyCards.pdf">
<FormattedMessage id='hoc.activityCards' />
</a>
</div>
</div>
<div className="hoc-section-resource">
<img className="hoc-section-resource-img"
src="/svgs/tips-card.svg"
alt="" />
<div className="hoc-section-resource-info">
<h5 className="hoc-section-resource-info-header">
<FormattedMessage id='hoc.tipsMakeMusicTitle' />
</h5>
<a className="hoc-section-resource-anchor"
href="/scratchr2/static/pdfs/help/MusicCards.pdf">
<FormattedMessage id='hoc.activityCards' />
</a>
</div>
</div>
</section>
<section className="hoc-section">
<div className="hoc-section-column mod-split">
<h3>
<FormattedMessage id='hoc.helpScratch' />
</h3>
<p className="hoc-section-paragraph">
<FormattedHTMLMessage id='hoc.helpScratchDescription' />
</p>
</div>
<div className="hoc-section-column mod-split">
<img className="hoc-section-column-img"
src="/images/hoc/tips-test-animation.gif"
alt="Tips Window Animation" />
</div>
</section>
<section className="hoc-section">
<div className="hoc-section-column">
<h3>
<FormattedMessage id='hoc.moreActivities' />
</h3>
<p className="hoc-section-paragraph">
<FormattedHTMLMessage id='hoc.moreDescription' />
</p>
</div>
<FlexRow>
<div className="flex-row-card">
<a href="/projects/editor/?tip_bar=getStarted">
<div className="flex-row-card-info">
<img className="flex-row-card-info-img"
src="/images/hoc/getting-started-tutorial.jpg" alt="" />
<Button>
<FormattedMessage id='hoc.tipsGetStarted' />
</Button>
</div>
</a>
</div>
<div className="flex-row-card">
<a href="/hide/">
<div className="flex-row-card-info">
<img className="flex-row-card-info-img"
src="/images/hoc/hide-seek-tutorial.jpg"
alt="" />
<Button>
<FormattedMessage id='hoc.tipsHideAndSeekTitle' />
</Button>
</div>
</a>
</div>
<div className="flex-row-card">
<a href="/projects/editor/?tip_bar=dance">
<div className="flex-row-card-info">
<img className="flex-row-card-info-img"
src="/images/hoc/dance-tutorial.jpg"
alt="" />
<Button>
<FormattedMessage id='hoc.tipsDanceTitle' />
</Button>
</div>
</a>
</div>
</FlexRow>
</section>
<section className="hoc-section">
<div className="hoc-section-column">
<h3>
<FormattedMessage id='hoc.addToStudios' />
</h3>
<p className="hoc-section-paragraph">
<FormattedHTMLMessage id='hoc.addToStudiosDescription' />
</p>
</div>
<FlexRow className="mod-studio">
<div className="hoc-section-studio">
<img className="hoc-section-studio-img"
src="/svgs/studio.svg"
alt="" />
<div className="hoc-section-studio-info">
<a href="/studios/432299/">
<h5 className="hoc-section-studio-info-header">
<FormattedMessage id='hoc.tipsAnimateYourNameTitle' />
</h5>
</a>
</div>
</div>
<div className="hoc-section-studio">
<img className="hoc-section-studio-img"
src="/svgs/studio.svg"
alt="" />
<div className="hoc-section-studio-info">
<a href="/studios/1999784/">
<h5 className="hoc-section-studio-info-header">
<FormattedMessage id='hoc.tipsMakeMusicTitle' />
</h5>
</a>
</div>
</div>
<div className="hoc-section-studio">
<img className="hoc-section-studio-img"
src="/svgs/studio.svg"
alt="" />
<div className="hoc-section-studio-info">
<a href="/studios/2050750/">
<h5 className="hoc-section-studio-info-header">
<FormattedMessage id='hoc.tipsMakeItFlyTitle' />
</h5>
</a>
</div>
</div>
</FlexRow>
</section>
</Box>
<section className="hoc-section">
<h3>
<FormattedMessage
id='general.collaborators'
defaultMessage={'Collaborators'} />
</h3>
<div className="hoc-section-logos">
<a href="http://scratched.gse.harvard.edu/">
<img className="hoc-section-logos-img"
src="/images/hoc/scratchEd-logo.png"
alt="ScratchEd" />
</a>
<a href="https://code.org/">
<img className="hoc-section-logos-img"
src="/images/hoc/code-org-logo.png"
alt="code.org" />
</a>
<a href="http://www.cartoonnetwork.com/">
<img className="hoc-section-logos-img"
src="/images/hoc/cn-logo.png"
alt="Cartoon Network" />
</a>
<a href="http://www.madewithcode.com/">
<img className="hoc-section-logos-img"
src="/images/hoc/made-with-code-logo.png"
alt="Made with Code" />
</a>
<a href="http://www.paalive.org/">
<img className="hoc-section-logos-img"
src="/images/hoc/paa-logo.png"
alt="Progressive Arts Alliance" />
</a>
<a href="http://www.catrobat.org/">
<img className="hoc-section-logos-img"
src="/images/hoc/pocketcode-logo.png"
alt="Pocket Code" />
</a>
</div>
<div className="hoc-section-trademark">
<p className="hoc-section-paragraph legal">
<FormattedHTMLMessage id='hoc.officialNotice' />
</p>
</div>
</section>
</div>
</div>
);
}
});
render(<Page><Hoc /></Page>, document.getElementById('app'));

216
src/views/hoc/hoc.scss
View file

@ -1,216 +0,0 @@
@import "../../colors";
@import "../../frameless";
$base-bg: $ui-white;
#view {
padding: 0;
}
.hoc-section {
display: flex;
margin: 0 auto;
border-bottom: 1px solid $ui-border;
padding: 50px 0;
width: 95%;
text-align: center;
justify-content: center;
flex-wrap: wrap;
align-items: center;
}
.hoc-section:last-child {
border-bottom: 0;
}
.hoc-section.mod-title-banner {
border: 0;
padding: 10px 0;
max-width: $desktop;
}
.hoc-section-column {
width: 100%;
}
.hoc-section-column.mod-split {
min-width: 200px;
max-width: 40%;
text-align: left;
}
.hoc-section-column-img {
border-radius: 5px;
width: 100%;
}
.hoc-section-paragraph {
margin: 10px auto 20px;
max-width: 600px;
}
.title-banner.mod-wbb-bg {
background-image: url("/images/hoc2015/hide-bg.jpg");
}
.title-banner.mod-dance-bg {
background-image: url("/images/hoc2015/dance-bg.jpg");
}
.title-banner.mod-name-bg {
background-image: url("/images/hoc2015/name-bg.jpg");
}
.flex-row-card {
margin: 10px;
border-radius: 7px;
background-color: $active-gray;
padding: 2px;
width: 30%;
min-width: 200px;
max-width: 230px;
}
.flex-row-card-info {
border-radius: 5px;
background-color: $base-bg;
width: 100%;
height: 100%;
}
.flex-row-card-info-img,
.button.flex-row-card-info-button {
width: calc(100% - 20px);
}
.flex-row-card-info-img {
margin: 10px 10px 5px 10px;
border-radius: 5px;
}
.button.flex-row-card-info-button {
margin: 0 10px 10px 10px;
}
.hoc-section-resource,
.hoc-section-studio {
display: flex;
margin: 10px 0;
min-width: 200px;
text-align: left;
justify-content: center;
}
.hoc-section-resource-img,
.hoc-section-studio-img {
margin-right: 15px;
}
.hoc-section-resource {
width: 33%;
min-height: 4rem;
align-items: flex-start;
}
.hoc-section-resource-anchor {
display: block;
margin: 5px 0;
font-size: .8em;
}
.hoc-section-resource-info-header {
margin: 0;
line-height: inherit;
}
.flex-row.mod-studio {
justify-content: space-between;
}
.hoc-section-studio {
align-items: center;
}
.hoc-section-studio-img {
float: left;
}
.hoc-section-studio-info-header {
margin: 8px 0;
width: 150px;
color: $ui-blue;
font-weight: 500;
}
.hoc-section-studio-info-header:hover {
color: darken($ui-blue, 15);
}
.hoc-section-logos {
margin: 20px 0;
width: 100%;
}
.hoc-section-logos-img {
margin: 20px;
max-width: 150px;
max-height: 55px;
vertical-align: middle;
}
.hoc-section-trademark {
margin-top: 20px;
}
@media only screen and (max-width: $mobile - 1) {
.hoc-section-studio {
display: inline-block;
}
}
//6 columns
@media only screen and (min-width: $mobile) and (max-width: $tablet - 1) {
.hoc-section.mod-title-banner {
max-width: $mobile;
}
.hoc-section-studio {
display: inline-block;
}
}
//8 columns
@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
.flex-row-card {
margin: 2px;
min-width: 175px;
}
.button.flex-row-card-info-button {
font-size: .7em;
}
.hoc-section-resource,
.hoc-section-studio {
display: block;
width: 30%;
min-width: 180px;
text-align: center;
}
.hoc-section-resource-img,
.hoc-section-studio-img {
margin: 0 auto;
}
.hoc-section-studio-img {
float: none;
}
.hoc-section-studio-info-header {
width: 100%;
}
}

26
src/views/hoc/l10n.json
View file

@ -1,26 +0,0 @@
{
"hoc.activityCards": "Activity Cards",
"hoc.activityCardsHeader": "Activity Cards and Guides",
"hoc.activityCardsInfo1": "Want tips and ideas for these Hour of Code&trade; activities? Use the activity cards to get ideas for creating with Scratch. Facilitator guides can help you plan a group activity.",
"hoc.addToStudios": "Add Your Projects to Studios",
"hoc.addToStudiosDescription": "These studios include projects created by young people around the world. Take a look at the studios to get inspired - or submit your own projects to the studios!",
"hoc.facilitatorGuide": "Facilitator Guide",
"hoc.findOutMore": "Find out more",
"hoc.helpScratch": "Help with Scratch",
"hoc.helpScratchDescription": "You can find tutorials and helpful hints in the <a href=\"/projects/editor/?tip_bar=home\">Tips Window</a>. For more resources, see <a href=\"/help\">Scratch Help</a>",
"hoc.moreActivities": "Want More Activities?",
"hoc.moreDescription": "Check out these other tutorials. Or remix one of our <a href=\"/starter_projects\">Starter Projects</a>",
"hoc.officialNotice": "The \"Hour of Code&trade;\" is a nationwide initiative by <a href=\"http://csedweek.org\">Computer Science Education Week</a> and <a href=\"http://code.org\">Code.org</a> to introduce millions of students to one hour of computer science and computer programming.",
"hoc.studioAlice": "Alice in Wonderland Studio",
"hoc.studioWeBareBears": "We Bare Bears Studio",
"hoc.subTitle": "With Scratch, you can program your own stories, games, and animations — and share them online.",
"hoc.tipsDescription": "Need help getting started? Looking for ideas?&nbsp; You can find tutorials and helpful hints in the <a href=\"/projects/editor/?tip_bar=home\">Tips Window</a>",
"hoc.title": "Get Creative with Coding",
"hoc.tipsAnimateYourNameTitle": "Animate Your Name",
"hoc.tipsDanceTitle": "Dance, Dance, Dance",
"hoc.tipsGetStarted": "Getting Started",
"hoc.tipsHideAndSeekTitle": "Hide-and-Seek Game",
"hoc.tipsMakeMusicTitle": "Make Music",
"hoc.tipsMakeItFlyTitle": "Make it Fly",
"hoc.tipsPongGame": "Create a Pong Game"
}

2
src/views/jobs/jobs.jsx
View file

@ -31,7 +31,7 @@ var Jobs = React.createClass({
<h3><FormattedMessage id='jobs.openings' /></h3>
<ul>
<li>
<a href="http://bit.ly/24B9aEz">
<a href="http://bit.ly/2f5hABE">
Trust &amp; Safety Manager
</a>
<span>

6
src/views/thingstotry/l10n.json
View file

@ -1,7 +1,7 @@
{
"ttt.placeholder": "Placeholder text",
"ttt.title": "Things to Try",
"ttt.subTitle": "You can get started with Scratch in a variety of ways. Click a picture to try a <b>Tutorial</b>. You can also download a set of <b>Activity Cards</b> and <b>Educator Guide</b> for each theme.",
"ttt.subTitle": "You can get started with Scratch in a variety of ways. Click a picture to try the <strong>Tutorial</strong>. You can also download a set of <strong>Activity Cards</strong> and <strong>Educator Guide</strong> for each theme.",
"tile.tutorial": "Tutorial",
"tile.guides": "See Cards and Guides",
"ttt.tutorialTitle": "Tutorial",
@ -11,7 +11,7 @@
"ttt.educatorTitle": "Educator Guide",
"ttt.educatorSubtitle": "Use this educator guide to plan and lead a one-hour Scratch workshop.",
"ttt.tryIt": "Try It",
"ttt.download": "Download",
"ttt.open": "Open",
"ttt.MakeItFlyTitle": "Make It Fly",
"ttt.MakeItFlyDescription": "Animate the Scratch Cat, The Powerpuff Girls, or even a taco!",
"ttt.AnimateYourNameTitle": "Animate Your Name",
@ -20,7 +20,7 @@
"ttt.RaceDescription": "Make a game where two characters race each other.",
"ttt.MakeMusicTitle": "Make Music",
"ttt.MakeMusicDescription": "Choose instruments, add sounds, and press keys to play music.",
"ttt.HideAndSeekTitle": "Hide-and-Seek Game",
"ttt.HideAndSeekTitle": "Hide and Seek",
"ttt.HideAndSeekDescription": "Make a hide-and-seek game with characters that appear and disappear.",
"ttt.StoryTitle": "Create a Story",
"ttt.StoryDescription": "Choose characters, add conversation, and bring your story to life.",

BIN
static/pdfs/cards/FlyCards.pdf
View file

Binary file not shown.