First version of TTT page

src/components/masonrygrid/masonrygrid.jsx

@@ -0,0 +1,26 @@
+var classNames = require('classnames');
+var React = require('react');
+
+require('./masonrygrid.scss');
+
+var MasonryGrid = React.createClass({
+    type: 'MasonryGrid',
+    getDefaultProps: function () {
+        return {
+            as: 'div'
+        };
+    },
+    render: function () {
+        var classes = classNames(
+            'masonry',
+            this.props.className
+        );
+        return (
+            <this.props.as className={classes}>
+                {this.props.children}
+            </this.props.as>
+        );
+    }
+});
+
+module.exports = MasonryGrid;

src/components/masonrygrid/masonrygrid.scss

@@ -0,0 +1,39 @@
+@import "../../frameless";
+$tile-width: ( 4 * ($column + $gutter) - $gutter);
+
+.masonry {
+    column-gap: $gutter;
+    column-width: $tile-width;
+    -webkit-perspective: 1;
+}
+
+// working around Firefox issue that requires column-count, using explicit -moz-column-count
+//4 columns
+@media only screen and (max-width: $mobile - 1) {
+
+    .masonry {
+        -moz-column-count: 1;
+    }
+}
+
+//6 columns
+@media only screen and (min-width: $mobile) and (max-width: $tablet - 1) {
+    .masonry {
+        -moz-column-count: 1;
+    }
+}
+
+
+//8 columns
+@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
+    .masonry {
+        -moz-column-count: 2;
+    }
+}
+
+// 12 columns
+@media only screen and (min-width: $desktop) {
+    .masonry {
+        -moz-column-count: 3;
+    }
+}

src/components/ttt-tile/ttt-tile.jsx

@@ -0,0 +1,59 @@
+var classNames = require('classnames');
+var React = require('react');
+var FormattedMessage = require('react-intl').FormattedMessage;
+
+require('./ttt-tile.scss');
+
+var TTTTile = React.createClass({
+    type: 'TTTTile',
+    propTypes: {
+        title: React.PropTypes.string.isRequired,
+        description: React.PropTypes.string.isRequired,
+        imageURL: React.PropTypes.string.isRequired,
+        tutorialLoc: React.PropTypes.string.isRequired
+    },
+    handleClick: function () {
+        alert('show Modal');
+    },
+    handleTutorialClick: function () {
+        alert('goto tutoriallink');
+    },
+    render: function () {
+        var classes = classNames(
+            'ttt-tile',
+            this.props.className
+        );
+        return (
+            <div className={classes} >
+                <a href={this.props.tutorialLoc}>
+                    <div className="ttt-tile-tutorial">
+                        <div className="ttt-tile-img-container">
+                            <img className="ttt-tile-img" src={this.props.imageURL} alt="" />
+                            <div className="ttt-try-it">
+                                <div className="ttt-try-it-button">
+                                    Try it
+                                </div>
+                            </div>
+                        </div>
+                        <div className="ttt-tile-info">
+
+                            <div className="ttt-tile-button">
+                                <FormattedMessage id='tile.tutorial' defaultMessage='Tutorial'/>
+                            </div>
+                            <h4 className="ttt-tile-title">{this.props.title}</h4>
+                            <p className="ttt-tile-description">
+                                {this.props.description}
+                            </p>
+                        </div>
+                    </div>
+
+                </a>
+                <div className="ttt-tile-guides" onClick={this.handleClick}>
+                    <FormattedMessage id='tile.guides' defaultMessage='See Cards and Guides'/>
+                </div>
+            </div>
+        );
+    }
+});
+
+module.exports = TTTTile;

src/components/ttt-tile/ttt-tile.scss

@@ -0,0 +1,113 @@
+@import "../../colors";
+@import "../../frameless";
+
+.ttt-tile {
+    display: inline-block;
+    // work-around chrome bug with columns support - 1 px of next column ends up
+    // at the bottom of the previous column.
+    margin-top: 1px;
+    margin-bottom: calc(1.25rem - 1px);
+
+    border-radius: 1rem;
+    box-shadow: 0 0 0 1px $active-gray;
+    // cols4 is not working - calculate width instead
+    width: calc(4 * ($column + $gutter) - $gutter);
+}
+
+.ttt-tile-tutorial {
+    display: inline-block;
+    position: relative;
+}
+
+.ttt-tile-tutorial:hover {
+
+    .ttt-tile-img-container {
+        .ttt-try-it {
+            display: inline-block;
+        }
+
+        .ttt-tile-img {
+            opacity: .5;
+        }
+    }
+}
+
+.ttt-tile-img {
+    display: block;
+    border-radius: 1rem 1rem 0 0;
+    width: 100%;
+}
+
+.ttt-tile-img-container {
+    border-radius: 1rem 1rem 0 0;
+    background: $ui-blue;
+    width: 100%;
+}
+
+.ttt-try-it {
+    display: none;
+    position: absolute;
+    top: 3rem;
+    left: 50%;
+    transform: translate(-50%, 0);
+    text-align: center;
+    color: $ui-white;
+}
+
+.ttt-try-it-button {
+    border: 1px solid $ui-white;
+    border-radius: .5rem;
+    padding: .75rem 1.5rem;
+}
+
+.ttt-tile-info {
+    position: relative;
+    cursor: pointer;
+    padding: 1rem 0;
+}
+
+.ttt-tile-button {
+    display: inline-block;
+    position: absolute;
+    top: -1rem;
+    left: 1rem;
+    margin: 0;
+    border: 0;
+    border-radius: 1rem;
+    background-color: $ui-blue;
+    padding: .25rem 1rem;
+
+    color: $type-white;
+
+    font-size: .75rem;
+    font-weight: bold;
+
+
+
+
+
+}
+
+.ttt-tile-description {
+    margin: auto;
+    width: calc(100% - 2rem);
+    font-size: .875rem;
+
+}
+
+.ttt-tile-guides {
+    margin: auto;
+    border-top: 1px dashed $ui-border;
+    border-radius: 0 0 1rem 1rem;
+    cursor: pointer;
+    padding: 1.25rem 0;
+    color: $link-blue;
+
+    font-size: .75rem;
+    font-weight: 500;
+
+
+    &:hover {
+        background-color: lighten($link-blue, 40%);
+    }
+}

src/routes.json

@@ -133,6 +133,13 @@
         "view": "cards/cards",
         "title": "Cards"
     },
+    {
+        "name": "things-to-try",
+        "pattern": "^/go/?$",
+        "routeAlias": "/go/?$",
+        "view": "thingstotry/thingstotry",
+        "title": "Things to Try"
+    },
     {
         "name": "communityblocks-interviews",
         "pattern": "^/info/communityblocks-interviews/?$",

src/views/thingstotry/l10n-static.json

@@ -0,0 +1,35 @@
+{
+    "ttt.MakeItFlyTutorialLoc": "#",
+    "ttt.MakeItFlyActivityLoc": "/pdfs/cards/FlyCards.pdf",
+    "ttt.MakeItFlyGuideLoc": "#",
+    "ttt.AnimateYourNameTutorialLoc": "#",
+    "ttt.AnimateYourNameActivityLoc": "/pdfs/cards/AnimateYourNameCards.pdf",
+    "ttt.AnimateYourNameGuideLoc": "#",
+    "ttt.MakeMusicTutorialLoc": "#",
+    "ttt.MakeMusicActivityLoc": "/pdfs/cards/MusicCards.pdf",
+    "ttt.MakeMusicGuideLoc": "#",
+    "ttt.RaceTutorialLoc": "#",
+    "ttt.RaceActivityLoc": "/pdfs/cards/RaceGameCards.pdf",
+    "ttt.RaceGuideLoc": "#",
+    "ttt.DanceTutorialLoc": "#",
+    "ttt.DanceActivityLoc": "/pdfs/cards/DanceCards.pdf",
+    "ttt.DanceGuideLoc": "#",
+    "ttt.PongTutorialLoc": "#",
+    "ttt.PongActivityLoc": "/pdfs/cards/PongCards.pdf",
+    "ttt.PongGuideLoc": "#",
+    "ttt.CatchTutorialLoc": "#",
+    "ttt.CatchActivityLoc": "/pdfs/cards/CatchCards.pdf",
+    "ttt.CatchGuideLoc": "#",
+    "ttt.HideAndSeekTutorialLoc": "#",
+    "ttt.HideAndSeekActivityLoc": "/pdfs/cards/Hide-and-Seek-Cards.pdf",
+    "ttt.HideAndSeekGuideLoc": "#",
+    "ttt.VirtualPetTutorialLoc": "#",
+    "ttt.VirtualPetActivityLoc": "/pdfs/cards/PetCards.pdf",
+    "ttt.VirtualPetGuideLoc": "#",
+    "ttt.FashionTutorialLoc": "#",
+    "ttt.FashionActivityLoc": "/pdfs/cards/DressupCards.pdf",
+    "ttt.FashionGuideLoc": "#",
+    "ttt.StoryTutorialLoc": "#",
+    "ttt.StoryActivityLoc": "/pdfs/cards/StoryCards.pdf",
+    "ttt.StoryGuideLoc": "#"
+}

src/views/thingstotry/l10n.json

@@ -0,0 +1,29 @@
+{
+    "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.",
+    "tile.tutorial": "Tutorial",
+    "tile.guides": "See Cards and Guides",
+    "ttt.MakeItFlyTitle": "Make It Fly",
+    "ttt.MakeItFlyDescription": "Animate the Scratch Cat, The Powerpuff Girls, or even a taco!",
+    "ttt.AnimateYourNameTitle": "Animate Your Name",
+    "ttt.AnimateYourNameDescription": "Animate the letters of your name, initials, or favorite word.",
+    "ttt.RaceTitle": "Race to the Finish",
+    "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.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.",
+    "ttt.FashionTitle": "Fashion Game",
+    "ttt.FashionDescription": "Dress up a character with different clothes and styles.",
+    "ttt.PongTitle": "Pong Game",
+    "ttt.PongDescription": "Make a bouncing ball game with sounds, points, and other effects.",
+    "ttt.DanceTitle": "Let's Dance",
+    "ttt.DanceDescription": "Design an animated dance scene with music and dance moves.",
+    "ttt.CatchTitle": "Catch Game",
+    "ttt.CatchDescription": "Make a game where you catch things falling from the sky.",
+    "ttt.VirtualPetTitle": "Virtual Pet",
+    "ttt.VirtualPetDescription": "Create an interactive pet that can eat, drink, and play."
+}

src/views/thingstotry/thingstotry.jsx

@@ -0,0 +1,113 @@
+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 frameless = require('../../lib/frameless.js');
+
+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('./ttt.json');
+
+require('./thingstotry.scss');
+
+var ThingsToTry = injectIntl(React.createClass({
+    type: 'ThingsToTry',
+
+    getInitialState: function () {
+        return {
+            bgClass: ''
+        };
+    },
+    onCardEnter: function (bgClass) {
+        this.setState({
+            bgClass: bgClass
+        });
+    },
+    render: function () {
+        var formatMessage = this.props.intl.formatMessage;
+        var tileOrder = [
+            'AnimateYourName',
+            'Race',
+            'Fashion',
+            'Catch',
+            'MakeItFly',
+            'HideAndSeek',
+            'Pong',
+            'VirtualPet',
+            'MakeMusic',
+            'Story',
+            'Dance'
+        ];
+        if (window.innerWidth < frameless.tablet) {
+            tileOrder = [
+                'AnimateYourName',
+                'MakeItFly',
+                'MakeMusic',
+                'Race',
+                'HideAndSeek',
+                'Story',
+                'Fashion',
+                'Pong',
+                'Dance',
+                'Catch',
+                'VirtualPet'
+            ];
+        }
+        else if (window.innerWidth < frameless.desktop) {
+            tileOrder = [
+                'AnimateYourName',
+                'MakeMusic',
+                'HideAndSeek',
+                'Fashion',
+                'Dance',
+                'VirtualPet',
+                'MakeItFly',
+                'Race',
+                'Story',
+                'Pong',
+                'Catch'
+            ];
+        }
+        return (
+            <div className="ttt">
+                <TitleBanner className="masthead">
+                    <section className="ttt-section mod-title-banner">
+                        image goes here
+                    </section>
+                    <h1>
+                        <FormattedMessage id='ttt.title' />
+                    </h1>
+                        <p>
+                            <FormattedHTMLMessage id='ttt.subTitle' />
+                        </p>
+                </TitleBanner>
+
+                <div className="inner">
+                    <section className="ttt-section">
+
+                        <MasonryGrid >
+                            {tileOrder.map(function (tile) {
+                                return (
+                                    <TTTTile
+                                        key={tile}
+                                        title={formatMessage({id: Tiles[tile].title})}
+                                        description={formatMessage({id: Tiles[tile].description})}
+                                        imageURL={Tiles[tile].thumbURL}
+                                        tutorialLoc={formatMessage({id: Tiles[tile].tutorialLoc})}
+                                    />
+                                );
+                            })}
+
+                    </MasonryGrid>
+
+                    </section>
+                </div>
+            </div>
+        );
+    }
+}));
+
+render(<Page><ThingsToTry /></Page>, document.getElementById('app'));

src/views/thingstotry/thingstotry.scss

@@ -0,0 +1,97 @@
+@import "../../colors";
+@import "../../frameless";
+
+$base-bg: $ui-white;
+
+#view {
+    padding: 0;
+}
+
+.ttt {
+    .title-banner {
+        &.masthead {
+            background-color: $ui-blue;
+            padding-bottom: 0;
+
+            h1 {
+                margin: 0;
+                color: $ui-white;
+            }
+
+        }
+    }
+}
+
+.ttt-section {
+    display: flex;
+    margin: 0 auto;
+    padding: 50px 0;
+    text-align: center;
+    justify-content: center;
+    flex-wrap: wrap;
+    align-items: center;
+}
+
+.ttt-section.mod-title-banner {
+    border: 0;
+    padding: 10px 0;
+    max-width: $desktop;
+}
+
+
+//4 columns
+@media only screen and (max-width: $mobile - 1) {
+
+    .title-banner {
+        &.masthead {
+            padding-bottom: 2rem;
+
+            p {
+                max-width: $cols4;
+            }
+        }
+    }
+}
+
+//6 columns
+@media only screen and (min-width: $mobile) and (max-width: $tablet - 1) {
+    .title-banner {
+        &.masthead {
+
+            p {
+                max-width: $cols6;
+            }
+        }
+    }
+
+    .ttt-section.mod-title-banner {
+        max-width: $mobile;
+    }
+}
+
+
+//8 columns
+@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
+    .title-banner {
+        &.masthead {
+            padding-bottom: 2rem;
+
+            p {
+                max-width: $cols8;
+            }
+        }
+    }
+}
+
+// 12 columns
+@media only screen and (min-width: $desktop) {
+    .title-banner {
+        &.masthead {
+            padding-bottom: 2rem;
+            
+            p {
+                max-width: $cols8;
+            }
+        }
+    }
+}

src/views/thingstotry/ttt.json

@@ -0,0 +1,102 @@
+{
+    "MakeItFly": {
+        "title": "ttt.MakeItFlyTitle",
+        "description": "ttt.MakeItFlyDescription",
+        "thumbURL": "/images/ttt/make-it-fly.jpg",
+        "bannerURL": "/images/ttt/getting-started-tutorial.jpg",
+        "tutorialLoc": "ttt.MakeItFlyTutorialLoc",
+        "activityLoc": "ttt.MakeItFlyCardsLoc",
+        "guideLoc": "ttt.MakeItFlyGuidesLoc"
+    },
+    "AnimateYourName": {
+        "title": "ttt.AnimateYourNameTitle",
+        "description": "ttt.AnimateYourNameDescription",
+        "thumbURL": "/images/ttt/animate-your-name.jpg",
+        "bannerURL": "/images/ttt/getting-started-tutorial.jpg",
+        "tutorialLoc": "ttt.AnimateYourNameTutorialLoc",
+        "activityLoc": "ttt.MakeItFlyCardsLoc",
+        "guideLoc": "ttt.MakeItFlyGuidesLoc"
+    },
+    "Race": {
+        "title": "ttt.RaceTitle",
+        "description": "ttt.RaceDescription",
+        "thumbURL": "/images/ttt/race-to-the-finish.jpg",
+        "bannerURL": "/images/ttt/getting-started-tutorial.jpg",
+        "tutorialLoc": "ttt.RaceTutorialLoc",
+        "activityLoc": "ttt.RaceCardsLoc",
+        "guideLoc": "ttt.RaceGuidesLoc"
+    }
+    ,
+    "MakeMusic": {
+        "title": "ttt.MakeMusicTitle",
+        "description": "ttt.MakeMusicDescription",
+        "thumbURL": "/images/ttt/make-music.jpg",
+        "bannerURL": "/images/ttt/getting-started-tutorial.jpg",
+        "tutorialLoc": "ttt.MakeMusicTutorialLoc",
+        "activityLoc": "ttt.MakeMusicCardsLoc",
+        "guideLoc": "ttt.MakeMusicGuidesLoc"
+    },
+    "HideAndSeek": {
+        "title": "ttt.HideAndSeekTitle",
+        "description": "ttt.HideAndSeekDescription",
+        "thumbURL": "/images/ttt/hide-and-seek.jpg",
+        "bannerURL": "/images/ttt/getting-started-tutorial.jpg",
+        "tutorialLoc": "ttt.HideAndSeekTutorialLoc",
+        "activityLoc": "ttt.HideAndSeekCardsLoc",
+        "guideLoc": "ttt.HideAndSeekGuidesLoc"
+    },
+    "Story": {
+        "title": "ttt.StoryTitle",
+        "description": "ttt.StoryDescription",
+        "thumbURL": "/images/ttt/create-a-story.jpg",
+        "bannerURL": "/images/ttt/getting-started-tutorial.jpg",
+        "tutorialLoc": "ttt.StoryTutorialLoc",
+        "activityLoc": "ttt.StoryCardsLoc",
+        "guideLoc": "ttt.StoryGuidesLoc"
+    },
+    "Fashion": {
+        "title": "ttt.FashionTitle",
+        "description": "ttt.FashionDescription",
+        "thumbURL": "/images/ttt/fashion-game.jpg",
+        "bannerURL": "/images/ttt/getting-started-tutorial.jpg",
+        "tutorialLoc": "ttt.FashionTutorialLoc",
+        "activityLoc": "ttt.FashionCardsLoc",
+        "guideLoc": "ttt.FashionGuidesLoc"
+    },
+    "Pong": {
+        "title": "ttt.PongTitle",
+        "description": "ttt.PongDescription",
+        "thumbURL": "/images/ttt/pong-game.jpg",
+        "bannerURL": "/images/ttt/getting-started-tutorial.jpg",
+        "tutorialLoc": "ttt.PongTutorialLoc",
+        "activityLoc": "ttt.PongCardsLoc",
+        "guideLoc": "ttt.PongGuidesLoc"
+    },
+    "Dance": {
+        "title": "ttt.DanceTitle",
+        "description": "ttt.DanceDescription",
+        "thumbURL": "/images/ttt/lets-dance.jpg",
+        "bannerURL": "/images/ttt/getting-started-tutorial.jpg",
+        "tutorialLoc": "ttt.DanceTutorialLoc",
+        "activityLoc": "ttt.DanceCardsLoc",
+        "guideLoc": "ttt.DanceGuidesLoc"
+    },
+    "Catch": {
+        "title": "ttt.CatchTitle",
+        "description": "ttt.CatchDescription",
+        "thumbURL": "/images/ttt/catch-game.jpg",
+        "bannerURL": "/images/ttt/getting-started-tutorial.jpg",
+        "tutorialLoc": "ttt.CatchTutorialLoc",
+        "activityLoc": "ttt.CatchCardsLoc",
+        "guideLoc": "ttt.CatchGuidesLoc"
+    },
+    "VirtualPet": {
+        "title": "ttt.VirtualPetTitle",
+        "description": "ttt.VirtualPetDescription",
+        "thumbURL": "/images/ttt/virtual-pet.jpg",
+        "bannerURL": "/images/ttt/getting-started-tutorial.jpg",
+        "tutorialLoc": "ttt.VirtualPetTutorialLoc",
+        "activityLoc": "ttt.VirtualPetCardsLoc",
+        "guideLoc": "ttt.VirtualPetGuidesLoc"
+    }
+}