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

Merge pull request #1095 from morantsur/microworlds_projects

Browse source 
Add a microworlds homepage, and point microworlds pages at the new microworlds projects.
This commit is contained in:
morantsur 2016-12-22 12:36:03 -05:00 committed by GitHub
commit e763f8a9bf
15 changed files with 129 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -67,7 +67,7 @@ var TTTModal = React.createClass({
href={this.props.tutorialLoc}
className="button white mod-ttt-item"
>
<FormattedMessage id="ttt.tryIt" />
<FormattedMessage id="tile.tryIt" />
</a>
</FlexRow>
<FlexRow as="li" className="mod-ttt-item">

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

@ -27,3 +27,7 @@
.title-banner-strong {
font-weight: 700;
}
.title-banner.mod-blue-bg {
background-color: $ui-blue;
}

16
src/components/ttt-tile/ttt-tile.jsx
View file

@ -9,10 +9,10 @@ var TTTTile = React.createClass({
type: 'TTTTile',
propTypes: {
title: React.PropTypes.string.isRequired,
description: React.PropTypes.string.isRequired,
description: React.PropTypes.string,
thumbUrl: React.PropTypes.string.isRequired,
tutorialLoc: React.PropTypes.string.isRequired,
onGuideClick: React.PropTypes.func.isRequired
onGuideClick: React.PropTypes.func
},
render: function () {
var classes = classNames(
@ -27,7 +27,7 @@ var TTTTile = React.createClass({
<img className="ttt-tile-image-img" src={this.props.thumbUrl} alt="" />
<div className="ttt-tile-image-try">
<div className="button mod-ttt-try-button">
<FormattedMessage id="ttt.tryIt" />
<FormattedMessage id="tile.tryIt" />
</div>
</div>
</div>
@ -44,10 +44,12 @@ var TTTTile = React.createClass({
</div>
</a>
<div className="ttt-tile-guides" onClick={this.props.onGuideClick}>
<FormattedMessage id='tile.guides' defaultMessage='See Cards and Guides'/>
<img className="ttt-tile-see-more" src="/svgs/ttt/see-more.svg" />
</div>
{this.props.onGuideClick && (
<div className="ttt-tile-guides" onClick={this.props.onGuideClick}>
<FormattedMessage id='tile.guides' defaultMessage='See Cards and Guides'/>
<img className="ttt-tile-see-more" src="/svgs/ttt/see-more.svg" />
</div>
)}
</div>
);
}

7
src/routes.json
View file

@ -251,5 +251,12 @@
"routeAlias": "/microworlds",
"view": "microworld/soccer/soccer",
"title": "Soccer"
},
{
"name": "microworlds-homepage",
"pattern": "^/microworlds/go/?(\\?.*)?$",
"routeAlias": "/microworlds",
"view": "microworldshomepage/microworldshomepage",
"title": "Microworlds"
}
]

2
src/views/microworld/art/art.json
View file

@ -5,7 +5,7 @@
"Check out projects by others for inspiration,",
"communicate in the forum and join the challenges!"
],
"microworld_project_id":"88148127",
"microworld_project_id":"133865435",
"starter_projects":[
{
"title":"Architecture Stamps Starter Project",

2
src/views/microworld/fashion/fashion.json
View file

@ -12,7 +12,7 @@
"link":"//player.vimeo.com/video/134864477?title=0&byline=0&portrait=0"
}
],
"microworld_project_id":"68494068",
"microworld_project_id":"133865474",
"tips":[
{
"title":"Click on blocks to see what they do",

2
src/views/microworld/hiphop/hiphop.json
View file

@ -12,7 +12,7 @@
"link":"//player.vimeo.com/video/124055657?title=0&byline=0&portrait=0"
}
],
"microworld_project_id":"68260156",
"microworld_project_id":"133865050",
"tips":[
{
"title":"Start Dancing",

2
src/views/microworld/soccer/soccer.json
View file

@ -3,6 +3,6 @@
"description":[
"Make your own soccer animation or game!"
],
"microworld_project_id":"116297919",
"microworld_project_id":"133865271",
"show_forum":false
}

13
src/views/microworldshomepage/l10n.json Normal file
View file

@ -0,0 +1,13 @@
{
"tile.tutorial": "Microworld",
"tile.tryIt": "Try It",
"microworlds.title": "Scratch Microworlds",
"microworlds.subTitle": "You can get started with Scratch in a variety of ways. Click a picture to try one.",
"microworlds.HipHopTitle": "Hip Hop Dance",
"microworlds.FashionTitle": "Fashion",
"microworlds.HouseTitle": "Interactive House",
"microworlds.MakeMusicTitle": "Make Music",
"microworlds.SoccerTitle": "Soccer",
"microworlds.JokeTitle": "Make a Joke",
"microworlds.ArtTitle": "Make Art"
}

37
src/views/microworldshomepage/microworlds.json Normal file
View file

@ -0,0 +1,37 @@
[
{
"title": "microworlds.HipHopTitle",
"thumbUrl": "//cdn.scratch.mit.edu/static/site/projects/thumbnails/13386/5050.png",
"tutorialLoc": "/pathways/hiphop"
},
{
"title": "microworlds.MakeMusicTitle",
"thumbUrl": "//cdn.scratch.mit.edu/static/site/projects/thumbnails/13386/5393.png",
"tutorialLoc": "/projects/embed-editor/133865393/?isMicroworld=true"
},
{
"title": "microworlds.SoccerTitle",
"thumbUrl": "//cdn.scratch.mit.edu/static/site/projects/thumbnails/13386/5271.png",
"tutorialLoc": "/projects/embed-editor/133865271/?isMicroworld=true"
},
{
"title": "microworlds.FashionTitle",
"thumbUrl": "//cdn.scratch.mit.edu/static/site/projects/thumbnails/13386/5474.png",
"tutorialLoc": "/pathways/fashion"
},
{
"title": "microworlds.ArtTitle",
"thumbUrl": "//cdn.scratch.mit.edu/static/site/projects/thumbnails/13386/5435.png",
"tutorialLoc": "/projects/embed-editor/133865435/?isMicroworld=true"
},
{
"title": "microworlds.JokeTitle",
"thumbUrl": "//cdn.scratch.mit.edu/static/site/projects/thumbnails/13386/5327.png",
"tutorialLoc": "/projects/embed-editor/133865327/?isMicroworld=true"
},
{
"title": "microworlds.HouseTitle",
"thumbUrl": "//cdn.scratch.mit.edu/static/site/projects/thumbnails/13383/5490.png",
"tutorialLoc": "/projects/embed-editor/133835490/?isMicroworld=true"
}
]

47
src/views/microworldshomepage/microworldshomepage.jsx Normal file
View file

@ -0,0 +1,47 @@
var React = require('react');
var injectIntl = require('react-intl').injectIntl;
var FormattedHTMLMessage = require('react-intl').FormattedHTMLMessage;
var FormattedMessage = require('react-intl').FormattedMessage;
var render = require('../../lib/render.jsx');
var MasonryGrid = require('../../components/masonrygrid/masonrygrid.jsx');
var Page = require('../../components/page/www/page.jsx');
var TitleBanner = require('../../components/title-banner/title-banner.jsx');
var TTTTile = require('../../components/ttt-tile/ttt-tile.jsx');
var Tiles = require('./microworlds.json');
require('./microworldshomepage.scss');
var MicroworldsHomepage = injectIntl(React.createClass({
type: 'MicroworldsHomepage',
render: function () {
return (
<div className="microworlds">
<TitleBanner className="masthead mod-blue-bg">
<h1 className="title-banner-h1">
<FormattedMessage id="microworlds.title" />
</h1>
<p className="intro title-banner-p">
<FormattedHTMLMessage id="microworlds.subTitle" />
</p>
</TitleBanner>
<div className="inner">
<MasonryGrid >
{Tiles.map(
function (tile, key) {
return <TTTTile
key={key}
title={this.props.intl.formatMessage({id: tile.title})}
tutorialLoc={tile.tutorialLoc}
thumbUrl={tile.thumbUrl}
/>;
}, this)
}
</MasonryGrid>
</div>
</div>
);
}
}));
render(<Page><MicroworldsHomepage /></Page>, document.getElementById('app'));

3
src/views/microworldshomepage/microworldshomepage.scss Normal file
View file

@ -0,0 +1,3 @@
#view {
padding: 0;
}

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

@ -1,16 +1,16 @@
{
"tile.tutorial": "Tutorial",
"tile.guides": "See Cards and Guides",
"tile.tryIt": "Try It",
"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 the <strong className=\"title-banner-strong\">Tutorial</strong>. You can also download a set of <strong className=\"title-banner-strong\">Activity Cards</strong> and <strong className=\"title-banner-strong\">Educator Guide</strong> for each theme.",
"tile.tutorial": "Tutorial",
"tile.guides": "See Cards and Guides",
"ttt.tutorialTitle": "Tutorial",
"ttt.tutorialSubtitle": "Find out how to make this project using a step-by-step tutorial in Scratch.",
"ttt.activityTitle": "Activity Cards",
"ttt.activitySubtitle": "Explore new coding ideas using this set of illustrated cards you can print out.",
"ttt.educatorTitle": "Educator Guide",
"ttt.educatorSubtitle": "Use this educator guide to plan and lead a one-hour Scratch workshop.",
"ttt.tryIt": "Try It",
"ttt.open": "Open",
"ttt.MakeItFlyTitle": "Make It Fly",
"ttt.MakeItFlyDescription": "Animate the Scratch Cat, The Powerpuff Girls, or even a taco!",

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

@ -57,7 +57,7 @@ var ThingsToTry = injectIntl(React.createClass({
render: function () {
return (
<div className="ttt">
<TitleBanner className="masthead mod-ttt-title">
<TitleBanner className="masthead mod-blue-bg">
<section className="ttt-section">
<img className="ttt-banner-image" src="/svgs/ttt/resources.svg" alt=""/>
</section>

5
src/views/thingstotry/thingstotry.scss
View file

@ -7,11 +7,6 @@ $base-bg: $ui-white;
padding: 0;
}
// .mod-ttt-title, to avoid collision with .title-banner.mod-tt in ttt modal
.title-banner.mod-ttt-title {
background-color: $ui-blue;
}
.ttt-section {
display: flex;
margin: 0 auto;