diff --git a/src/components/modal/ttt/modal.jsx b/src/components/modal/ttt/modal.jsx index f3bd48068..08a14fba1 100644 --- a/src/components/modal/ttt/modal.jsx +++ b/src/components/modal/ttt/modal.jsx @@ -67,7 +67,7 @@ var TTTModal = React.createClass({ href={this.props.tutorialLoc} className="button white mod-ttt-item" > - + diff --git a/src/components/title-banner/title-banner.scss b/src/components/title-banner/title-banner.scss index c01c94bcc..83c55e864 100644 --- a/src/components/title-banner/title-banner.scss +++ b/src/components/title-banner/title-banner.scss @@ -27,3 +27,7 @@ .title-banner-strong { font-weight: 700; } + +.title-banner.mod-blue-bg { + background-color: $ui-blue; +} diff --git a/src/components/ttt-tile/ttt-tile.jsx b/src/components/ttt-tile/ttt-tile.jsx index 779bb4c3c..468c14dfc 100644 --- a/src/components/ttt-tile/ttt-tile.jsx +++ b/src/components/ttt-tile/ttt-tile.jsx @@ -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({
- +
@@ -44,10 +44,12 @@ var TTTTile = React.createClass({ -
- - -
+ {this.props.onGuideClick && ( +
+ + +
+ )} ); } diff --git a/src/routes.json b/src/routes.json index 0a318506d..d6042de76 100644 --- a/src/routes.json +++ b/src/routes.json @@ -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" } ] diff --git a/src/views/microworld/art/art.json b/src/views/microworld/art/art.json index a008b334f..a4318a584 100644 --- a/src/views/microworld/art/art.json +++ b/src/views/microworld/art/art.json @@ -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", diff --git a/src/views/microworld/fashion/fashion.json b/src/views/microworld/fashion/fashion.json index 4ce4a12f9..366d0daed 100644 --- a/src/views/microworld/fashion/fashion.json +++ b/src/views/microworld/fashion/fashion.json @@ -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", diff --git a/src/views/microworld/hiphop/hiphop.json b/src/views/microworld/hiphop/hiphop.json index 84ffad3ae..bddca452f 100644 --- a/src/views/microworld/hiphop/hiphop.json +++ b/src/views/microworld/hiphop/hiphop.json @@ -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", diff --git a/src/views/microworld/soccer/soccer.json b/src/views/microworld/soccer/soccer.json index d1affd8d3..f0da2b19a 100644 --- a/src/views/microworld/soccer/soccer.json +++ b/src/views/microworld/soccer/soccer.json @@ -3,6 +3,6 @@ "description":[ "Make your own soccer animation or game!" ], - "microworld_project_id":"116297919", + "microworld_project_id":"133865271", "show_forum":false } diff --git a/src/views/microworldshomepage/l10n.json b/src/views/microworldshomepage/l10n.json new file mode 100644 index 000000000..bfbefa51a --- /dev/null +++ b/src/views/microworldshomepage/l10n.json @@ -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" +} diff --git a/src/views/microworldshomepage/microworlds.json b/src/views/microworldshomepage/microworlds.json new file mode 100644 index 000000000..2652480f5 --- /dev/null +++ b/src/views/microworldshomepage/microworlds.json @@ -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" + } +] diff --git a/src/views/microworldshomepage/microworldshomepage.jsx b/src/views/microworldshomepage/microworldshomepage.jsx new file mode 100644 index 000000000..f68520ac6 --- /dev/null +++ b/src/views/microworldshomepage/microworldshomepage.jsx @@ -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 ( +
+ +

+ +

+

+ +

+ +
+ + {Tiles.map( + function (tile, key) { + return ; + }, this) + } + +
+
+ ); + } +})); + +render(, document.getElementById('app')); diff --git a/src/views/microworldshomepage/microworldshomepage.scss b/src/views/microworldshomepage/microworldshomepage.scss new file mode 100644 index 000000000..85d06d71d --- /dev/null +++ b/src/views/microworldshomepage/microworldshomepage.scss @@ -0,0 +1,3 @@ +#view { + padding: 0; +} diff --git a/src/views/thingstotry/l10n.json b/src/views/thingstotry/l10n.json index 71d724a3d..fd830c850 100644 --- a/src/views/thingstotry/l10n.json +++ b/src/views/thingstotry/l10n.json @@ -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 Tutorial. You can also download a set of Activity Cards and Educator Guide 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!", diff --git a/src/views/thingstotry/thingstotry.jsx b/src/views/thingstotry/thingstotry.jsx index 8b84fd66d..35189f3b0 100644 --- a/src/views/thingstotry/thingstotry.jsx +++ b/src/views/thingstotry/thingstotry.jsx @@ -57,7 +57,7 @@ var ThingsToTry = injectIntl(React.createClass({ render: function () { return (
- +
diff --git a/src/views/thingstotry/thingstotry.scss b/src/views/thingstotry/thingstotry.scss index ce765175c..244dc0a30 100644 --- a/src/views/thingstotry/thingstotry.scss +++ b/src/views/thingstotry/thingstotry.scss @@ -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;