Revert "Fix review comments, and organize code a bit."

This reverts commit 3d9d280bb9.

src/components/microworld/microworld.jsx

@@ -1,39 +1,40 @@
+var classNames = require('classnames');
 var React = require('react');
+var render = require('../../lib/render.jsx');
+var omit = require('lodash.omit');
 
 require('./microworld.scss');
 
 var Box = require('../../components/box/box.jsx');
 var Carousel = require('../../components/carousel/carousel.jsx');
 var Modal = require('../../components/modal/modal.jsx');
-var NestedCarousel = require('../../components/nestedcarousel/nestedcarousel.jsx');
+var TipsSlider = require('../../components/tipsslider/tipsslider.jsx');
 
 var Microworld = React.createClass({
     type: 'Microworld',
     propTypes: {
         microworldData: React.PropTypes.node.isRequired
     },
-    markVideoOpen: function (key) {
+    showVideo: function (key) {
-        {/* When a video is clicked, mark it as an open video, so the video Modal will open.
-        Key is the number of the video, so distinguish between different videos on the page */}
-
         var videoOpenArr = this.state.videoOpen;
         videoOpenArr[key] = true;
         this.setState({videoOpen: videoOpenArr});
     },
-    markVideoClosed: function (key) {
+    closeVideo: function (key) {
-        {/* When a video's x is clicked, mark it as closed, so the video Modal will disappear.
-        Key is the number of the video, so distinguish between different videos on the page */}
         var videoOpenArr = this.state.videoOpen;
         videoOpenArr[key] = false;
         this.setState({videoOpen: videoOpenArr});
     },
     getInitialState: function () {
         return {
-            videoOpen: {}
+            videoOpen: {},
+            featuredGlobal: {},
+            featuredLocal: {},
+            microworld_data: this.props.microworldData
         };
     },
     renderVideos: function () {
-        var videos = this.props.microworldData.videos;
+        var videos = this.state.microworld_data.videos
         if (!videos || videos.length <= 0) {
             return null;
         }
@@ -58,23 +59,23 @@ var Microworld = React.createClass({
         return (
             <div>
                 <div className="video">
-                    <div className="play-button" onClick={this.markVideoOpen.bind(this, key)}>
+                    <div className="play-button" onClick={this.showVideo.bind(this, key)}>
                     </div>
                     <img src={video.image} />
                 </div>
                 <Modal
                     className="video-modal"
                     isOpen={this.state.videoOpen[key]}
-                    onRequestClose={this.markVideoClosed.bind(this, key)}
+                    onRequestClose={this.closeVideo.bind(this, key)}
                     style={{content:frameProps}}>
-                    <iframe src={video.link} width="560" height="315" frameBorder="0"
+                    <iframe src={video.link} width="560" height="315" frameBorder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
-                            webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
                 </Modal>
+                
             </div>
-        );
+        )
     },
-    renderEditorWindow: function () {
+    renderEditorWindow: function() {
-        var projectId = this.props.microworldData.microworld_project_id;
+        var projectId = this.state.microworld_data.microworld_project_id;
         
         if (!projectId) {
             return null;
@@ -82,33 +83,34 @@ var Microworld = React.createClass({
         return (
             <div className="editor section">
                 <h1>Start Creating!</h1>
-                <a href={'//scratch.mit.edu/projects/'+ projectId +'/#editor'}>
+                <a href={"//scratch.mit.edu/projects/"+ projectId +"/#editor"}>
-                  <img src="/images/scratch-og.png" style={{width:'6%', position: 'absolute', left: '75%'}}></img>
+                  <img src="/images/scratch-og.png" style={{width:"6%", position: "absolute", left: "75%"}}></img>
                 </a>
-                <iframe src={'//scratch.mit.edu/projects/embed-editor/' + projectId + '/?isMicroworld=true'}
+                <iframe src={"//scratch.mit.edu/projects/embed-editor/" + projectId + "/?isMicroworld=true"}
                         frameBorder="0"> </iframe>
                 {this.renderTips()}
+                
             </div>
-        );
+        )
     },
-    renderTips: function () {
+    renderTips: function() {
-        var tips =  this.props.microworldData.tips;
+        var tips =  this.state.microworld_data.tips;
         if (!tips || tips.length <= 0) {
             return null;
         }
 
         return (
-            <div className="box nestedcarousel">
+            <div className="box tipsslider">
                 <div className="box-header">
                 </div>
                 <div className="box-content">
-                    <NestedCarousel items={tips} settings={{slidesToShow:1,slidesToScroll:1}}/>
+                    <TipsSlider items={tips} settings={{slidesToShow:1,slidesToScroll:1}}/>
                 </div>
             </div>
-            );
+            )
     },
-    renderStarterProject: function () {
+    renderStarterProject: function() {
-        var starterProjects = this.props.microworldData.starter_projects;
+        var starterProjects = this.state.microworld_data.starter_projects;
         if (!starterProjects || starterProjects.length <= 0){
             return null;
         }
@@ -122,10 +124,10 @@ var Microworld = React.createClass({
                     <Carousel items={starterProjects} />
                 </Box>
             </div>
-        );
+        )
     },
-    renderProjectIdeasBox: function () {
+    renderProjectIdeasBox: function() {
-        var communityProjects = this.props.microworldData.community_projects;
+        var communityProjects = this.state.microworld_data.community_projects;
         if (!communityProjects || communityProjects.size <= 0) {
             return null;
         }
@@ -133,7 +135,7 @@ var Microworld = React.createClass({
         var featured = communityProjects.featured_projects;
         var all = communityProjects.newest_projects;
 
-        var rows = [];
+        var rows = []
         if (featured && featured.length > 0){
             rows.push(
                 <Box
@@ -141,7 +143,7 @@ var Microworld = React.createClass({
                     key="community_featured_projects">
                     <Carousel items={featured} />
                </Box>
-            );
+            )
         }
         if (all && all.length > 0) {
             rows.push(
@@ -150,7 +152,7 @@ var Microworld = React.createClass({
                      key="community_all_projects">
                      <Carousel items={all} />
                </Box>
-            );
+            )
         }
         if (rows.length <= 0) {
             return null;
@@ -160,10 +162,10 @@ var Microworld = React.createClass({
                 <h1>Get inspiration from other projects</h1>
                 {rows}
             </div>
-        );
+        )
     },
-    renderForum: function () {
+    renderForum: function() {
-        if (!this.props.microworldData.show_forum) {
+        if (!this.state.microworld_data.show_forum) {
             return null;
         }
 
@@ -172,61 +174,64 @@ var Microworld = React.createClass({
             <h1>Chat with others!</h1>
             <img src="/images/forum-image.png"/>
         </div>
-        );
+        )
     },
-    renderDesignStudio: function () {
+    renderDesignStudio: function() {
-        var designChallenge = this.props.microworldData.design_challenge;
+        var designChallenge = this.state.microworld_data.design_challenge;
         if (!designChallenge) {
             return null;
         }
         if (designChallenge.studio_id) {
-            var studioHref = 'https://scratch.mit.edu//studios/' + designChallenge.studio_id + '/';
+            var studioHref = 'https://scratch.mit.edu//studios/' + designChallenge.studio_id + '/'
         }
+        var designStudioIntro;
         if (designChallenge.project_id) {
             return (
                 <div className="side-by-side section">
                     <h1>Join our Design Challenge!</h1>
                     <div className="design-studio">
-                        <iframe src={'https://scratch.mit.edu/projects/' + designChallenge.project_id +
+                        <iframe src={"https://scratch.mit.edu/projects/" + designChallenge.project_id + "/#fullscreen"} frameBorder="0"> </iframe>
-                                     '/#fullscreen'} frameBorder="0"> </iframe>
                     </div>
                     <div className="design-studio-projects">
                         <Box title="Examples"
                              key="scratch_design_studio"
-                             moreTitle={studioHref ? 'Visit the studio' : null}
+                             moreTitle={studioHref ? "Visit the studio" : null}
                              moreHref={studioHref ? studioHref : null}>
-                            {/* The two carousels are used to show two rows of projects, one above the
+                            <Carousel settings={{slidesToShow:2,slidesToScroll:2}} items={this.state.microworld_data.design_challenge.studio1} />
-                                other. This should be probably be changed, to allow better scrolling. */}
+                            <Carousel settings={{slidesToShow:2,slidesToScroll:2}} items={this.state.microworld_data.design_challenge.studio2} />
-                            <Carousel settings={{slidesToShow:2,slidesToScroll:2}}
-                                      items={this.props.microworldData.design_challenge.studio1} />
-                            <Carousel settings={{slidesToShow:2,slidesToScroll:2}}
-                                      items={this.props.microworldData.design_challenge.studio2} />
                         </Box>
                     </div>
                 </div>
-            );
+            )
         } else {
-            return (
+            return ( 
                 <div className="section">
                     <h1>Join our Design Challenge!</h1>
                     <Box
                         title="design Challenge Projects"
                         key="scratch_design_studio"
-                        moreTitle={studioHref ? 'Visit the studio' : null}
+                        moreTitle={studioHref ? "Visit the studio" : null}
                         moreHref={studioHref ? studioHref : null}>
-                        <Carousel items={this.props.microworldData.design_challenge.studio1.concat(
+                        <Carousel items={this.state.microworld_data.design_challenge.studio1.concat(
-                            this.props.microworldData.design_challenge.studio2)} />
+                            this.state.microworld_data.design_challenge.studio2)} />
                    </Box>
                 </div>
-            );
+            )
         }
     },
     render: function () {
+        var classes = classNames(
+            'top-banner'
+        );
+
+        var microworldData = this.state.microworld_data;
+        
+
         return (
             <div className="inner">
                 <div className="top-banner section">
-                    <h1>{this.props.microworldData.title}</h1>
+                    <h1>{microworldData.title}</h1>
-                    <p>{this.props.microworldData.description.join(' ')}</p>
+                    <p>{microworldData.description.join(" ")}</p>
                 </div>
                 {this.renderVideos()}
 

src/components/microworld/microworld.scss

@@ -4,179 +4,386 @@
 $base-bg: $ui-white;
 
 #view {
-    background-color: $base-bg;
+  padding: 0;
-    padding: 0;
+  background-color: $base-bg;
 
-    // To be integrated into the Global Typography standards
+  // To be integrated into the Global Typography standards
-    h3,
+  h3,
-    p {
+  p {
-        font-weight: 300;
+      font-weight: 300;
 
+  }
+
+  p {
+      line-height: 2em;
+  }
+
+  h1 {
+    margin: 0 auto;
+    padding: 5px 0;
+    max-width: 500px;
+    text-align: center;
+    color: $type-gray;
+  }
+
+  .top-banner, .videos-section, .section {
+      padding: 30px 0;
+      width: 100%;
+
+      h1,
+      p {
+          margin: 0 auto;
+          padding: 5px 0;
+          max-width: 500px;
+          text-align: center;
+          color: $type-gray;
+      }
+  }
+
+  .videos-container {
+    display: flex;
+    margin: 0 auto;
+
+    justify-content: center;
+    flex-wrap: wrap;
+    align-items: center;
+
+    .videos {
+      display: inline-flex;
+      justify-content: center;
+      flex-wrap: wrap;
     }
 
-    p {
+    .video {
-        line-height: 2em;
+      position:relative;
+      margin: 10px;
+      border-radius: 7px;
+      background-color: $active-gray;
+      padding: 2px;
+      max-width: 290px;
     }
 
-    h1 {
+    img {
-        margin: 0 auto;
+      width: calc(100% - 20px);
-        padding: 5px 0;
+      height: 179px;
-        max-width: 500px;
+      margin: 10px 10px 5px 10px;
-        text-align: center;
+      border-radius: 5px;
-        color: $type-gray;
     }
 
-    .top-banner, 
+    .play-button {
-    .videos-section,
+      display: block;
-    .section {
+      top: calc(50% - 25px);
-        padding: 30px 0;
+      left: calc(50% - 35px);
-        width: 100%;
+      opacity: .8;
+      border: 5px solid $ui-border;
+      border-radius: 20px;
+      background-color: $type-gray;
+      width: 70px;
+      height: 50px;
 
-        h1,
+      &,
-        p {
+      &:after {
-            margin: 0 auto;
+        position: absolute;
-            padding: 5px 0;
+        margin: 0;
-            max-width: 500px;
+        cursor: pointer;
-            text-align: center;
+        padding: 0;
-            color: $type-gray;
+      }
-        }
+
+      &:after {
+        $play-arrow: rgba(255, 255, 255, 0);
+        top: 37px;
+        left: 28px;
+        margin-top: -30px;
+        border: solid transparent;
+        border-width: 18px;
+        border-color: $play-arrow;
+        border-left-color: $ui-white;
+        width: 0;
+        height: 0;
+        content: " ";
+        pointer-events: none;
+      }
+    }
+  }
+
+  .content {
+    img {
+      margin-left: auto;
+      margin-right: auto;
+      display: block;
     }
 
-    .videos-container {
+    .box, iframe {
-        display: flex;
+      margin-left: auto;
-        margin: 0 auto;
+      margin-right: auto;
-
+      padding-bottom: 15px;
-        justify-content: center;
+      padding-top: 25px;
-        flex-wrap: wrap;
+      border: 0px;
-        align-items: center;
+      display: block;
-
-        .videos {
-            display: inline-flex;
-            justify-content: center;
-            flex-wrap: wrap;
-        }
-
-        .video {
-            position: relative;
-            margin: 10px;
-            border-radius: 7px;
-            background-color: $active-gray;
-            padding: 2px;
-            max-width: 290px;
-        }
-
-        img {
-            margin: 10px 10px 5px;
-            border-radius: 5px;
-            width: calc(100% - 20px);
-            height: 179px;
-        }
-
-        .play-button {
-            display: block;
-            top: calc(50% - 25px);
-            left: calc(50% - 35px);
-            opacity: .8;
-            border: 5px solid $ui-border;
-            border-radius: 20px;
-            background-color: $type-gray;
-            width: 70px;
-            height: 50px;
-
-            &,
-            &:after {
-                position: absolute;
-                margin: 0;
-                cursor: pointer;
-                padding: 0;
-            }
-
-            &:after {
-                $play-arrow: rgba(255, 255, 255, 0);
-                top: 37px;
-                left: 28px;
-                margin-top: -30px;
-                border: solid transparent;
-                border-width: 18px;
-                border-color: $play-arrow;
-                border-left-color: $ui-white;
-                width: 0;
-                height: 0;
-                content: " ";
-                pointer-events: none;
-            }
-        }
     }
 
-    .content {
+    iframe {
-        img {
+      width: 900px;
-            display: block;
+      height: 600px;
-            margin-right: auto;
+    }
-            margin-left: auto;
-        }
 
-        .box,
+    .box {
-        iframe {
+      width: 900px;
-            display: block;
+    }
-            margin-right: auto;
+
-            margin-left: auto;
+    .side-by-side {
-            border: 0;
+      margin-left: auto;
-            padding-top: 25px;
+      margin-right: auto;
-            padding-bottom: 15px;
+      width: 900px;
-        }
+      height:520px;
+
+      .box {
+        width: 400px;
+      }
+
+      .design-studio-projects,.design-studio {
+        width: 400px;
+        height: 500px;
+        display: inline-block;
+      }
+      .design-studio-projects {
+        float:right;
+      }
+      .design-studio {
+        float: left;
 
         iframe {
-            width: 900px;
+          margin-top: 60px;
-            height: 600px;
+          width: 960px;
+          -webkit-transform: scale(0.5);
+          -webkit-transform-origin: top left;
+          -moz-transform: scale(0.5);
         }
+      }
 
-        .box {
-            width: 900px;
-        }
 
-        .side-by-side {
+    }
-            margin-right: auto;
+  }
-            margin-left: auto;
-            width: 900px;
-            height: 520px;
 
-            .box {
+  .box-content .tipsslider {
-                width: 400px;
+    text-align: center;
-            }
 
-            .design-studio-projects,
+    .thumbnail {
-            .design-studio {
+      display: inline-block;
-                display: inline-block;
+      margin: 0px 50px;
-                width: 400px;
+    }
-                height: 500px;
+  }
-            }
 
-            .design-studio-projects {
-                float: right;
-            }
 
-            .design-studio {
+  .pathways .box-content {padding:20px;}
-                float: left;
 
-                iframe {
+  .pathways .rightcol {float:right;width:30%;clear:none;margin-bottom:20px}
-                    margin-top: 60px;
+  .pathways .rightcol .box-content{background-color:#FBFBFB}
-                    width: 960px;
+  .pathways .rightcol .box{margin-bottom:-10px;position:relative}
-                    -webkit-transform: scale(.5);
+
-                    -webkit-transform-origin: top left;
+
-                    -moz-transform: scale(.5);
+  .pathways .thumb-with-subtext img {width:158px;height:128px;border:1px solid #ccc}
-                }
+  .pathways .thumb-with-subtext p {width:158px;height:auto}
-            }
+  .pathways .thumb-with-subtext{white-space:normal;display:inline-block;width:30%;margin:0 9px;vertical-align:top}
-        }
+  .pathways .thumb-with-title-and-sublinks{white-space:normal;display:inline-block;width:auto;margin:0 20px 20px 20px;vertical-align:top;text-align:left;}
+  .pathways .thumb-with-title-and-sublinks .span{}
+  .pathways .thumb-with-title-and-sublinks a {display:block}
+
+  .pathways  .intro{ overflow:auto;margin-bottom:20px; }
+  .pathways  h1{ text-align:center;}
+  .pathways  .tutorial-pane {height: 300px}
+  .pathways  .leftcol, .pathways  .rightcol { //margin-right: 20px;float:left;}
+    .pathways .leftcol {
+      width: 50%;
+    }
+    .pathways .rightcol {
+      text-align: center;
+      margin-left: 8%;
+    }
+    .pathways .intro .rightcol {
+      margin: 0;
+      text-align: right;
+    }
+    .pathways .intro .leftcol {
+      margin: 20px;
+      float: left;
+      position: relative;
+    }
+    .pathways .intro .introinfo {
+      font-size: 17px;
+      position: absolute;
+      top: 0;
     }
 
-    .box-content {
+    .pathways .intro .introinfo ul {
-        .nestedcarousel {
+      list-style-type: none;
-            text-align: center;
+      margin: 0;
-
-            .thumbnail {
-                display: inline-block;
-                margin: 0 50px;
-            }
-        }
     }
+
+    .pathways .intro h1 {
+      text-align: left;
+    }
+    .pathways .intro p {
+      font-size: 18px;
+      padding-right: 25px;
+      text-align: left;
+    }
+
+    .pathways .microworld {
+      padding: 5px;
+    }
+    .pathways .editor-and-tips {
+      padding: 15px 15px 0px 15px;
+      border-radius: 15px 15px 0 0;
+      box-shadow: 0px 0px 8px #cccccc inset, 0 2px 3px rgba(34, 25, 25, 0.3);
+      border-top: 1px solid #E0E0E0;
+      border-right: 1px solid #E0E0E0;
+      border-left: 1px solid #E0E0E0;
+      background-color: white;
+      margin-bottom: 50px;
+      /* offset-x | offset-y | blur-radius | color */
+
+    }
+    //for tips slideshow
+
+    .pathways .tips-slider.flexslider {
+    }
+
+    .pathways .flexslider .flex-prev {
+      top: 130px;
+      margin-left: 50px;
+    }
+    .pathways .flexslider .flex-next {
+      margin-right: 50px;
+      top: 130px;
+    }
+
+    .pathways .tips {
+      background-color: #E6E6E8;
+      width: 887px;
+      margin-left: 10px;
+      padding-bottom: 1px;
+      margin-bottom: 15px;
+      border: 1px solid #D0D1D2;
+    }
+    .pathways .tips h3 {
+      text-align: center;
+      font-size: 1.4em;
+      padding: 5px;
+    }
+
+    .pathways .tip-slide {
+      width: 80%;
+      margin: 0 auto;
+      text-align: center;
+      //background: lightgray;
+    }
+    .pathways .tip-step {
+      display: inline-block;
+      margin: 0 10px;
+      min-width: 180px;
+      padding: 10px;
+      text-align: center;
+      vertical-align: middle;
+      height: 140px;
+      background-color: white;
+      border-radius: 10px;
+      position: relative;
+    }
+
+    .pathways .tip-step h5 {
+      color: #5C5D5F;
+      font-size: 1.1em;
+      font-weight: 400;
+      position: absolute;
+      border-radius: 0 0 10px 10px;
+      width: 100%;
+      bottom: 0;
+      margin: 0;
+      left: 0;
+    }
+    .pathways .tip-step img {
+      margin-left: auto;
+      margin-right: auto;
+      position: relative;
+      top: 45%;
+      transform: translateY(-50%);
+      overflow: hidden;
+      height: 50;
+    }
+
+    .pathways .tips-download {
+      background-color: #E6E6E8;
+      padding: 8px;
+      font-size: 1.1em;
+      margin: 0 -16px;
+      text-align: center;
+      font-family: "helvetica neue", arial, sans-serif;
+    }
+
+    .pathways .tips-download a:hover:after {
+      text-decoration: none;
+    }
+    .pathways .button {
+      padding-left: .5em;
+      padding-right: .5em;
+    }
+    .get-started .button {
+      text-size: 12px;
+      border-color: #ED8629;
+      background-color: #E58220;
+      background-image: -webkit-linear-gradient(top, #FF9522, #E58220);
+      background-image: -moz-linear-gradient(top, #FF9522, #E58220);
+      background-image: -ms-linear-gradient(top, #FF9522, #E58220);
+      background-image: -o-linear-gradient(top, #FF9522, #E58220);
+      background-image: linear-gradient(top, #FF9522, #E58220);
+      filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#FF9522, endColorStr=#E58220);
+    }
+    //.pathways  .box {background-color:#fff;}
+    .pathways .box-content {
+      margin: 5px 0;
+      border-top: none;
+    }
+    .pathways .tutorial-pane .box-content {
+      background-color: #f7f7f7;
+      padding: 20px 30px;
+      display: inline-block;
+    }
+    .pathways .slider-carousel {
+      padding: 10px 43px;
+    }
+
+    .gallery.thumb {
+      position: relative;
+    }
+
+    .pathways .gallery.thumb.item {
+      display: inline-block;
+      width: 33%;
+      font-size: 14px;
+    }
+
+    .pathways .gallery.thumb a.image {
+      display: block;
+    }
+
+    .pathways .gallery.thumb span.image img {
+      background-color: #fff;
+      width: 170px;
+      height: 100px;
+      margin: 5px;
+    }
+
+    .pathways .gallery.thumb .stats {
+      vertical-align: top;
+      opacity: .9;
+      border-radius: 5px;
+      background-color: #333;
+      color: white !important;
+      position: absolute;
+      bottom: 30px;
+      right: 120px;
+      padding: 1px;
+    }
+  }
 }

src/components/nestedcarousel/nestedcarousel.json

@@ -1,42 +0,0 @@
-[
-  {
-     "title":"Start Dancing",
-     "thumbnails":[
-        {
-           "type":"tip",
-           "title":"First, select a sprite",
-           "thumbnailUrl":"/images/microworlds/hiphop/dancer-sprite.png"
-        },
-        {
-           "type":"tip",
-           "title":"Then, try this script",
-           "thumbnailUrl":"/images/microworlds/hiphop/switch-wait.gif"
-        },
-        {
-           "type":"tip",
-           "title":"Start it!",
-           "thumbnailUrl":"/images/microworlds/hiphop/green-flag.gif"
-        }
-     ]
-  },
-  {
-     "title":"Repeat the Dance",
-     "thumbnails":[
-        {
-           "type":"tip",
-           "title":"Add another \"wait\"",
-           "thumbnailUrl":"/images/microworlds/hiphop/add-wait.gif"
-        },
-        {
-           "type":"tip",
-           "title":"Drag this block over",
-           "thumbnailUrl":"/images/microworlds/hiphop/add-repeat.gif"
-        },
-        {
-           "type":"tip",
-           "title":"Start it",
-           "thumbnailUrl":"/images/microworlds/hiphop/green-flag.gif"
-        }
-     ]
-  }
-]

src/components/nestedcarousel/nestedcarousel.scss

@@ -1,8 +0,0 @@
-@import "../../colors";
-@import "../carousel/carousel.scss";
-
-.nestedcarousel {
-    .slick-slide {
-        padding-left: 60px;
-    }
-}

src/components/thumbnail/thumbnail.jsx

@@ -15,8 +15,7 @@ var Thumbnail = React.createClass({
             src: '',
             type: 'project',
             showLoves: false,
-            showRemixes: false,
+            showRemixes: false
-            linkTitle: true
         };
     },
     render: function () {
@@ -55,20 +54,13 @@ var Thumbnail = React.createClass({
                 </div>
             );
         }
-        var titleElement;
-        if (this.props.linkTitle) {
-            titleElement =  <a href={this.props.href}>{this.props.title}</a>;
-        } else {
-            titleElement = this.props.title;
-        }
-
         return (
             <div className={classes} >
                 <a className="thumbnail-image" href={this.props.href}>
                     <img src={this.props.src} />
                 </a>
                 <div className="thumbnail-title">
-                    {titleElement}
+                    <a href={this.props.href}>{this.props.title}</a>
                 </div>
                 {extra}
             </div>

src/components/tipsslider/tipsslider.json

@@ -0,0 +1,50 @@
+[
+    {
+        "id": 1,
+        "type": "project",
+        "title": "Project1",
+        "thumbnailUrl": "/images/microworlds/hiphop/add-repeat.gif",
+        "creator": "",
+        "href": "/images/microworlds/hiphop/add-repeat.gif"
+    },
+    {
+        "id": 2,
+        "type": "project",
+        "title": "Project2",
+        "thumbnailUrl": "/images/microworlds/hiphop/add-wait.gif",
+        "creator": "",
+        "href": "/images/microworlds/hiphop/add-wait.gif"
+    },
+    {
+        "id": 3,
+        "type": "project",
+        "title": "Project",
+        "thumbnailUrl": "",
+        "creator": "",
+        "href": "#"
+    },
+    {
+        "id": 4,
+        "type": "project",
+        "title": "Project",
+        "thumbnailUrl": "",
+        "creator": "",
+        "href": "#"
+    },
+    {
+        "id": 5,
+        "type": "project",
+        "title": "Project",
+        "thumbnailUrl": "",
+        "creator": "",
+        "href": "#"
+    },
+    {
+        "id": 6,
+        "type": "project",
+        "title": "Project",
+        "thumbnailUrl": "",
+        "creator": "",
+        "href": "#"
+    }
+]

src/components/tipsslider/tipsslider.jsx

@@ -7,24 +7,16 @@ var Thumbnail = require('../thumbnail/thumbnail.jsx');
 
 require('slick-carousel/slick/slick.scss');
 require('slick-carousel/slick/slick-theme.scss');
-require('./nestedcarousel.scss');
+require('./tipsslider.scss');
 
-
+var TipsSlider = React.createClass({
-{/*
+    type: 'TipsSlider',
-    NestedCarousel is used to show a carousel, where each slide is composed of a few
-    thumbnails (for example, to show step-by-syep tips, where each stage has a few steps).
-    It creates the thumbnails without links.
-
-    Each slide has a title, and then a list of thumbnails, that will be shown together.
-*/}
-var NestedCarousel = React.createClass({
-    type: 'NestedCarousel',
     propTypes: {
         items: React.PropTypes.array
     },
     getDefaultProps: function () {
         return {
-            items: require('./nestedcarousel.json')
+            items: require('./tipsslider.json'),
         };
     },
     render: function () {
@@ -41,35 +33,32 @@ var NestedCarousel = React.createClass({
         var arrows = this.props.items.length > settings.slidesToShow;
         
         var classes = classNames(
-            'nestedcarousel',
+            'tipsslider',
-            'carousel',
             this.props.className
         );
         
         var stages = [];
         for (var i=0; i < this.props.items.length; i++) {
-            var items = this.props.items[i].thumbnails;
+            var items = this.props.items[i].tips;
             var thumbnails = [];
             for (var j=0; j < items.length; j++) {
-                var item = items[j];
+                    var item = items[j];
-                thumbnails.push(
+                    thumbnails.push(<Thumbnail key={item.id}
-                    <Thumbnail key={'inner_' + i + '_' + j}
                                title={item.title}
-                               src={item.thumbnailUrl}
+                               src={item.thumbnailUrl} />)
-                               linkTitle = {false} />);
             }
             stages.push(
-            <div key={'outer_' + i}>
+            <div className="testing" key={"stage_" + i}>
                 <h3>{this.props.items[i].title}</h3>
                 {thumbnails}
-            </div>);
+            </div>)
-        }
+        } 
         return (
             <Slider className={classes} arrows={arrows} {... settings}>
-                {stages}
+                {stages}    
             </Slider>
         );
     }
 });
 
-module.exports = NestedCarousel;
+module.exports = TipsSlider;

src/components/tipsslider/tipsslider.scss

@@ -0,0 +1,75 @@
+@import "../../colors";
+
+.tipsslider {
+    $icon-size: 40px;
+    $button-offset: $icon-size + 5px;
+    $box-content-offset: 20px;
+
+    //padding: 12px $button-offset;
+
+    .box-content & {
+        padding: 12px $button-offset - 20px;
+    }
+
+    .slick-next,
+    .slick-prev {
+        margin-top: -$icon-size/2;
+        width: $icon-size;
+        height: $icon-size;
+
+        &:before {
+            display: block;
+            background-repeat: no-repeat;
+            background-position: center center;
+            background-size: 70%;
+            width: $icon-size;
+            height: $icon-size;
+            font-size: $icon-size;
+            content: "";
+        }
+
+        &.slick-disabled:before {
+            opacity: 1;
+        }
+    }
+
+    .slick-prev {
+        left: 0;
+
+        &:before {
+            background-image: url("/svgs/carousel/prev_ui-dark-gray.svg");
+        }
+
+        &:hover:before {
+            background-image: url("/svgs/carousel/prev_ui-blue.svg");
+            background-size: 90%;
+        }
+
+
+        .box-content & {
+            left: -$box-content-offset;
+        }
+    }
+
+    .slick-next {
+        right: 0;
+
+        &:before {
+            background-image: url("/svgs/carousel/next_ui-dark-gray.svg");
+        }
+
+        &:hover:before {
+            background-image: url("/svgs/carousel/next_ui-blue.svg");
+            background-size: 90%;
+        }
+
+        .box-content & {
+            right: -$box-content-offset;
+        }
+    }
+
+    .slick-slide {
+        padding-right: 30px;
+    }
+
+}

src/views/microworld_art/microworld_art.json

@@ -27,18 +27,21 @@
    "tips":[
       {
          "title":"Start Dancing",
-         "thumbnails":[
+         "tips":[
             {
+               "id":1,
                "type":"tip",
                "title":"First, select a sprite",
                "thumbnailUrl":"/images/microworlds/hiphop/dancer-sprite.png"
             },
             {
+               "id":2,
                "type":"tip",
                "title":"Then, try this script",
                "thumbnailUrl":"/images/microworlds/hiphop/switch-wait.gif"
             },
             {
+               "id":3,
                "type":"tip",
                "title":"Start it!",
                "thumbnailUrl":"/images/microworlds/hiphop/green-flag.gif"
@@ -47,18 +50,21 @@
       },
       {
          "title":"Repeat the Dance",
-         "thumbnails":[
+         "tips":[
             {
+               "id":4,
                "type":"tip",
                "title":"Add another \"wait\"",
                "thumbnailUrl":"/images/microworlds/hiphop/add-wait.gif"
             },
             {
+               "id":5,
                "type":"tip",
                "title":"Drag this block over",
                "thumbnailUrl":"/images/microworlds/hiphop/add-repeat.gif"
             },
             {
+               "id":6,
                "type":"tip",
                "title":"Start it",
                "thumbnailUrl":"/images/microworlds/hiphop/green-flag.gif"
@@ -67,13 +73,15 @@
       },
       {
          "title":"Play Music",
-         "thumbnails":[
+         "tips":[
             {
+               "id":7,
                "type":"tip",
                "title":"Add music that repeats",
                "thumbnailUrl":"/images/microworlds/hiphop/add-play-sound.gif"
             },
             {
+               "id":8,
                "type":"tip",
                "title":"Start it",
                "thumbnailUrl":"/images/microworlds/hiphop/green-flag.gif"
@@ -82,18 +90,21 @@
       },
       {
          "title":"Shadow Dance",
-         "thumbnails":[
+         "tips":[
             {
+               "id":7,
                "type":"tip",
                "title":"Add this block",
                "thumbnailUrl":"/images/microworlds/hiphop/shadow-dance.gif"
             },
             {
+               "id":8,
                "type":"tip",
                "title":"Start it",
                "thumbnailUrl":"/images/microworlds/hiphop/green-flag.gif"
             },
             {
+               "id":9,
                "type":"tip",
                "title":"Click the stop sign to reset",
                "thumbnailUrl":"/images/microworlds/hiphop/stop.gif"
@@ -102,18 +113,21 @@
       },
       {
          "title":"More things to try",
-         "thumbnails":[
+         "tips":[
             {
+               "id":10,
                "type":"tip",
                "title":"Try different dance moves",
                "thumbnailUrl":"/images/microworlds/hiphop/change-dance-moves.gif"
             },
             {
+               "id":11,
                "type":"tip",
                "title":"Add more moves",
                "thumbnailUrl":"/images/microworlds/hiphop/long-dance-script.png"
             },
             {
+               "id":12,
                "type":"tip",
                "title":"Change the timing",
                "thumbnailUrl":"/images/microworlds/hiphop/change-dance-timing.png"

src/views/microworld_art/microworld_art.jsx

@@ -1,6 +1,4 @@
 var render = require('../../lib/render.jsx');
 var Microworld = require('../../components/microworld/microworld.jsx');
 
-var microworldData = require('./microworld_art.json');
+render(<Microworld microworldData={require("./microworld_art.json")} />, document.getElementById('view'));
-
-render(<Microworld microworldData={microworldData} />, document.getElementById('view'));

src/views/microworld_fashion/microworld_fashion.json

@@ -16,13 +16,15 @@
    "tips":[
       {
          "title":"Click on blocks to see what they do",
-         "thumbnails":[
+         "tips":[
             {
+               "id":0,
                "type":"tip",
                "title":" Try clicking this block ",
                "thumbnailUrl":"/images/microworlds/fashion/click-block-color.gif"
             },
             {
+               "id":1,
                "type":"tip",
                "title":" Or this block",
                "thumbnailUrl":"/images/microworlds/fashion/click-block-costume.gif"
@@ -31,18 +33,21 @@
       },
       {
          "title":"Try changing colors",
-         "thumbnails":[
+         "tips":[
             {
+               "id":2,
                "type":"tip",
                "title":" First, select a clothing item ",
                "thumbnailUrl":"/images/microworlds/fashion/shirts-sprite.png"
             },
             {
+               "id":3,
                "type":"tip",
                "title":" Then, try this script",
                "thumbnailUrl":"/images/microworlds/fashion/when-clicked-color.gif"
             },
             {
+               "id":4,
                "type":"tip",
                "title":" Test it out!",
                "thumbnailUrl":"/images/microworlds/fashion/click-shirt.gif"
@@ -51,18 +56,21 @@
       },
       {
          "title":"Try changing costumes",
-         "thumbnails":[
+         "tips":[
             {
+               "id":5,
                "type":"tip",
                "title":"Select a piece of clothing ",
                "thumbnailUrl":"/images/microworlds/fashion/hats-sprite.png"
             },
             {
+               "id":6,
                "type":"tip",
                "title":"Then, switch costumes",
                "thumbnailUrl":"/images/microworlds/fashion/when-clicked-costume.gif"
             },
             {
+               "id":7,
                "type":"tip",
                "title":" Now, click it!",
                "thumbnailUrl":"/images/microworlds/fashion/click-hat.gif"
@@ -71,18 +79,21 @@
       },
       {
          "title":"Say hello",
-         "thumbnails":[
+         "tips":[
             {
+               "id":8,
                "type":"tip",
                "title":"Select the person",
                "thumbnailUrl":"/images/microworlds/fashion/person-sprite.png"
             },
             {
+               "id":9,
                "type":"tip",
                "title":"Type in a phrase",
                "thumbnailUrl":"/images/microworlds/fashion/say-something.gif"
             },
             {
+               "id":10,
                "type":"tip",
                "title":"Then, try this script",
                "thumbnailUrl":"/images/microworlds/fashion/when-clicked-say.gif"
@@ -91,13 +102,15 @@
       },
       {
          "title":"Move the sprites",
-         "thumbnails":[
+         "tips":[
             {
+               "id":11,
                "type":"tip",
                "title":"Select an accessory",
                "thumbnailUrl":"/images/microworlds/fashion/accessories-sprite.png"
             },
             {
+               "id":12,
                "type":"tip",
                "title":"Tell it where to go",
                "thumbnailUrl":"/images/microworlds/fashion/when-clicked-goto.gif"
@@ -106,18 +119,21 @@
       },
       {
          "title":"Other things to try",
-         "thumbnails":[
+         "tips":[
             {
+               "id":13,
                "type":"tip",
                "title":"Add a sound ",
                "thumbnailUrl":"/images/microworlds/fashion/play-drum.png"
             },
             {
+               "id":14,
                "type":"tip",
                "title":" Explore other costumes ",
                "thumbnailUrl":"/images/microworlds/fashion/next-costume.png"
             },
             {
+               "id":15,
                "type":"tip",
                "title":"Make longer scripts ",
                "thumbnailUrl":"/images/microworlds/fashion/block-stack.png"

src/views/microworld_fashion/microworld_fashion.jsx

@@ -1,6 +1,4 @@
 var render = require('../../lib/render.jsx');
 var Microworld = require('../../components/microworld/microworld.jsx');
 
-var microworldData = require('./microworld_fashion.json');
+render(<Microworld microworldData={require("./microworld_fashion.json")} />, document.getElementById('view'));
-
-render(<Microworld microworldData={microworldData} />, document.getElementById('view'));

src/views/microworld_hiphop/microworld_hiphop.json

@@ -16,18 +16,21 @@
    "tips":[
       {
          "title":"Start Dancing",
-         "thumbnails":[
+         "tips":[
             {
+               "id":1,
                "type":"tip",
                "title":"First, select a sprite",
                "thumbnailUrl":"/images/microworlds/hiphop/dancer-sprite.png"
             },
             {
+               "id":2,
                "type":"tip",
                "title":"Then, try this script",
                "thumbnailUrl":"/images/microworlds/hiphop/switch-wait.gif"
             },
             {
+               "id":3,
                "type":"tip",
                "title":"Start it!",
                "thumbnailUrl":"/images/microworlds/hiphop/green-flag.gif"
@@ -36,18 +39,21 @@
       },
       {
          "title":"Repeat the Dance",
-         "thumbnails":[
+         "tips":[
             {
+               "id":4,
                "type":"tip",
                "title":"Add another \"wait\"",
                "thumbnailUrl":"/images/microworlds/hiphop/add-wait.gif"
             },
             {
+               "id":5,
                "type":"tip",
                "title":"Drag this block over",
                "thumbnailUrl":"/images/microworlds/hiphop/add-repeat.gif"
             },
             {
+               "id":6,
                "type":"tip",
                "title":"Start it",
                "thumbnailUrl":"/images/microworlds/hiphop/green-flag.gif"
@@ -56,13 +62,15 @@
       },
       {
          "title":"Play Music",
-         "thumbnails":[
+         "tips":[
             {
+               "id":7,
                "type":"tip",
                "title":"Add music that repeats",
                "thumbnailUrl":"/images/microworlds/hiphop/add-play-sound.gif"
             },
             {
+               "id":8,
                "type":"tip",
                "title":"Start it",
                "thumbnailUrl":"/images/microworlds/hiphop/green-flag.gif"
@@ -71,18 +79,21 @@
       },
       {
          "title":"Shadow Dance",
-         "thumbnails":[
+         "tips":[
             {
+               "id":7,
                "type":"tip",
                "title":"Add this block",
                "thumbnailUrl":"/images/microworlds/hiphop/shadow-dance.gif"
             },
             {
+               "id":8,
                "type":"tip",
                "title":"Start it",
                "thumbnailUrl":"/images/microworlds/hiphop/green-flag.gif"
             },
             {
+               "id":9,
                "type":"tip",
                "title":"Click the stop sign to reset",
                "thumbnailUrl":"/images/microworlds/hiphop/stop.gif"
@@ -91,18 +102,21 @@
       },
       {
          "title":"More things to try",
-         "thumbnails":[
+         "tips":[
             {
+               "id":10,
                "type":"tip",
                "title":"Try different dance moves",
                "thumbnailUrl":"/images/microworlds/hiphop/change-dance-moves.gif"
             },
             {
+               "id":11,
                "type":"tip",
                "title":"Add more moves",
                "thumbnailUrl":"/images/microworlds/hiphop/long-dance-script.png"
             },
             {
+               "id":12,
                "type":"tip",
                "title":"Change the timing",
                "thumbnailUrl":"/images/microworlds/hiphop/change-dance-timing.png"

src/views/microworld_hiphop/microworld_hiphop.jsx

@@ -1,6 +1,4 @@
 var render = require('../../lib/render.jsx');
 var Microworld = require('../../components/microworld/microworld.jsx');
 
-var microworldData = require('./microworld_hiphop.json');
+render(<Microworld microworldData={require("./microworld_hiphop.json")} />, document.getElementById('view'));
-
-render(<Microworld microworldData={microworldData} />, document.getElementById('view'));