Merge pull request #1006 from chrisgarrity/feature/gh979-tttpage

Fix gh-979: TTT page

src/components/masonrygrid/masonrygrid.jsx

@@ -0,0 +1,60 @@
+var classNames = require('classnames');
+var React = require('react');
+var MediaQuery = require('react-responsive');
+var frameless = require('../../lib/frameless');
+
+require('./masonrygrid.scss');
+
+var MasonryGrid = React.createClass({
+    type: 'MasonryGrid',
+    getDefaultProps: function () {
+        return {
+            as: 'div'
+        };
+    },
+    reorderColumns: function (items, cols) {
+        var a1 = [];
+        var a2 = [];
+        var a3 = [];
+        var i = 0;
+        //only implemented for 2 and 3 columns so far - easy to extend if needed
+        if (cols > 1 && cols < 4) {
+            for (i=0;i<items.length;i++){
+                var col = (i+cols)%cols;
+                if (col === 0) {
+                    a1.push(items[i]);
+                }
+                else if (col === 1) {
+                    a2.push(items[i]);
+                }
+                else if (col === 2) {
+                    a3.push(items[i]);
+                }
+            }
+            return a1.concat(a2,a3);
+        } else {
+            return items;
+        }
+    },
+    render: function () {
+        var classes = classNames(
+            'masonry',
+            this.props.className
+        );
+        return (
+            <this.props.as className={classes}>
+                <MediaQuery maxWidth={frameless.tablet - 1} >
+                    {this.props.children}
+                </MediaQuery>
+                <MediaQuery minWidth={frameless.tablet} maxWidth={frameless.desktop - 1} >
+                    {this.reorderColumns(this.props.children, 2)}
+                </MediaQuery>
+                <MediaQuery minWidth={frameless.desktop} >
+                    {this.reorderColumns(this.props.children, 3)}
+                </MediaQuery>
+            </this.props.as>
+        );
+    }
+});
+
+module.exports = MasonryGrid;

src/components/masonrygrid/masonrygrid.scss

@@ -0,0 +1,38 @@
+@import "../../frameless";
+
+.masonry {
+    column-gap: $gutter;
+    column-width: $cols4;
+    padding-bottom: 50px;
+    -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,56 @@
+var classNames = require('classnames');
+var React = require('react');
+var FormattedMessage = require('react-intl').FormattedMessage;
+
+require('../forms/button.scss');
+require('./ttt-tile.scss');
+
+var TTTTile = React.createClass({
+    type: 'TTTTile',
+    propTypes: {
+        title: React.PropTypes.string.isRequired,
+        description: React.PropTypes.string.isRequired,
+        thumbUrl: React.PropTypes.string.isRequired,
+        tutorialLoc: React.PropTypes.string.isRequired,
+        onGuideClick: React.PropTypes.func.isRequired
+    },
+    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-image">
+                            <img className="ttt-tile-image-img" src={this.props.thumbUrl} alt="" />
+                            <div className="ttt-tile-image-try">
+                                <div className="button mod-ttt-tile-image-try-button">
+                                    <FormattedMessage id="ttt.tryIt" />
+                                </div>
+                            </div>
+                        </div>
+                        <div className="ttt-tile-info">
+
+                            <div className="ttt-tile-tag">
+                                <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.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>
+        );
+    }
+});
+
+module.exports = TTTTile;

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

@@ -0,0 +1,118 @@
+@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;
+    width: $cols4;
+    text-align: center;
+}
+
+.ttt-tile-tutorial {
+    display: inline-block;
+    position: relative;
+}
+
+// nesting is required (not just name-spacing) because we want the image
+// and tile box to change style on hover of the parent component.
+.ttt-tile-tutorial:hover {
+
+    .ttt-tile-image {
+        .ttt-tile-image-img {
+            opacity: .5;
+        }
+
+        .ttt-tile-image-try {
+            display: inline-block;
+        }
+    }
+}
+
+.ttt-tile-image {
+    border-radius: 1rem 1rem 0 0;
+    background: $ui-blue;
+    width: 100%;
+}
+
+.ttt-tile-image-img {
+    display: block;
+    border-radius: 1rem 1rem 0 0;
+    width: 100%;
+}
+
+// wrapper for try button to get position correct
+.ttt-tile-image-try {
+    display: none;
+    position: absolute;
+    top: 4rem;
+    left: 50%;
+    transform: translate(-50%, 0);
+    text-align: center;
+    color: $ui-white;
+}
+
+.mod-ttt-tile-image-try-button {
+    border: 1px solid $ui-white;
+    background-color: transparent;
+}
+
+.ttt-tile-info {
+    position: relative;
+    cursor: pointer;
+    padding: 1rem 0;
+}
+
+.ttt-tile-tag {
+    display: inline-block;
+    position: absolute;
+    top: -1rem;
+    left: 1rem;
+    margin: .5em 0;
+    border: 0;
+    border-radius: 1rem;
+    background-color: $ui-blue;
+    padding: .25rem 1rem;
+    color: $type-white;
+    font-size: .8rem;
+    font-weight: bold;
+}
+
+.ttt-tile-title {
+    margin: .5rem auto;
+    width: calc(100% - 3rem);
+}
+
+.ttt-tile-description {
+    margin: auto;
+    width: calc(100% - 3rem);
+    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%);
+    }
+}
+
+.ttt-tile-see-more {
+    display: inline-block;
+    padding: 0 .25rem;
+    vertical-align: middle;
+}

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,24 @@
+{
+    "ttt.MakeItFlyActivityLoc": "/pdfs/cards/FlyCards.pdf",
+    "ttt.MakeItFlyGuideLoc": "/pdfs/guides/FlyGuide.pdf",
+    "ttt.AnimateYourNameActivityLoc": "/pdfs/cards/AnimateYourNameCards.pdf",
+    "ttt.AnimateYourNameGuideLoc": "/pdfs/guides/NameGuide.pdf",
+    "ttt.MakeMusicActivityLoc": "/pdfs/cards/MusicCards.pdf",
+    "ttt.MakeMusicGuideLoc": "/pdfs/guides/MusicGuide.pdf",
+    "ttt.RaceActivityLoc": "/pdfs/cards/RaceGameCards.pdf",
+    "ttt.RaceGuideLoc": "/pdfs/guides/RaceGuide.pdf",
+    "ttt.DanceActivityLoc": "/pdfs/cards/DanceCards.pdf",
+    "ttt.DanceGuideLoc": "/pdfs/guides/DanceGuide.pdf",
+    "ttt.PongActivityLoc": "/pdfs/cards/PongCards.pdf",
+    "ttt.PongGuideLoc": "/pdfs/guides/PongGuide.pdf",
+    "ttt.CatchActivityLoc": "/pdfs/cards/CatchCards.pdf",
+    "ttt.CatchGuideLoc": "/pdfs/guides/CatchGuide.pdf",
+    "ttt.HideAndSeekActivityLoc": "/pdfs/cards/Hide-and-Seek-Cards.pdf",
+    "ttt.HideAndSeekGuideLoc": "/pdfs/guides/Hide-and-Seek-Guide.pdf",
+    "ttt.VirtualPetActivityLoc": "/pdfs/cards/PetCards.pdf",
+    "ttt.VirtualPetGuideLoc": "/pdfs/guides/PetGuide.pdf",
+    "ttt.FashionActivityLoc": "/pdfs/cards/DressupCards.pdf",
+    "ttt.FashionGuideLoc": "/pdfs/guides/DressupGuide.pdf",
+    "ttt.StoryActivityLoc": "/pdfs/cards/StoryCards.pdf",
+    "ttt.StoryGuideLoc": "/pdfs/guides/StoryGuide.pdf"
+}

src/views/thingstotry/l10n.json

@@ -0,0 +1,37 @@
+{
+    "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.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.download": "Download",
+    "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."
+}