scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-27 09:35:56 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

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

Browse source 
This reverts commit 3d9d280bb9.
This commit is contained in:
morant 2016-02-19 14:39:43 -05:00
parent 3d9d280bb9
commit e9cb08d273
14 changed files with 622 additions and 316 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

121
src/components/microworld/microworld.jsx
View file

@ -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) {
{/* 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 */}
showVideo: function (key) {
var videoOpenArr = this.state.videoOpen;
videoOpenArr[key] = true;
this.setState({videoOpen: videoOpenArr});
},
markVideoClosed: 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 */}
closeVideo: function (key) {
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"
webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<iframe src={video.link} width="560" height="315" frameBorder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</Modal>
</div>
);
)
},
renderEditorWindow: function () {
var projectId = this.props.microworldData.microworld_project_id;
renderEditorWindow: function() {
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'}>
<img src="/images/scratch-og.png" style={{width:'6%', position: 'absolute', left: '75%'}}></img>
<a href={"//scratch.mit.edu/projects/"+ projectId +"/#editor"}>
<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 () {
var tips = this.props.microworldData.tips;
renderTips: function() {
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 () {
var starterProjects = this.props.microworldData.starter_projects;
renderStarterProject: function() {
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 () {
var communityProjects = this.props.microworldData.community_projects;
renderProjectIdeasBox: function() {
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 () {
if (!this.props.microworldData.show_forum) {
renderForum: function() {
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 () {
var designChallenge = this.props.microworldData.design_challenge;
renderDesignStudio: function() {
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 +
'/#fullscreen'} frameBorder="0"> </iframe>
<iframe src={"https://scratch.mit.edu/projects/" + designChallenge.project_id + "/#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
other. This should be probably be changed, to allow better scrolling. */}
<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} />
<Carousel settings={{slidesToShow:2,slidesToScroll:2}} items={this.state.microworld_data.design_challenge.studio1} />
<Carousel settings={{slidesToShow:2,slidesToScroll:2}} items={this.state.microworld_data.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(
this.props.microworldData.design_challenge.studio2)} />
<Carousel items={this.state.microworld_data.design_challenge.studio1.concat(
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>
<p>{this.props.microworldData.description.join(' ')}</p>
<h1>{microworldData.title}</h1>
<p>{microworldData.description.join(" ")}</p>
</div>
{this.renderVideos()}

503
src/components/microworld/microworld.scss
View file

@ -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
h3,
p {
font-weight: 300;
// To be integrated into the Global Typography standards
h3,
p {
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 {
line-height: 2em;
.video {
position:relative;
margin: 10px;
border-radius: 7px;
background-color: $active-gray;
padding: 2px;
max-width: 290px;
}
h1 {
margin: 0 auto;
padding: 5px 0;
max-width: 500px;
text-align: center;
color: $type-gray;
img {
width: calc(100% - 20px);
height: 179px;
margin: 10px 10px 5px 10px;
border-radius: 5px;
}
.top-banner,
.videos-section,
.section {
padding: 30px 0;
width: 100%;
.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;
h1,
p {
margin: 0 auto;
padding: 5px 0;
max-width: 500px;
text-align: center;
color: $type-gray;
}
&,
&: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 {
img {
margin-left: auto;
margin-right: auto;
display: block;
}
.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;
}
.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;
}
}
.box, iframe {
margin-left: auto;
margin-right: auto;
padding-bottom: 15px;
padding-top: 25px;
border: 0px;
display: block;
}
.content {
img {
display: block;
margin-right: auto;
margin-left: auto;
}
iframe {
width: 900px;
height: 600px;
}
.box,
iframe {
display: block;
margin-right: auto;
margin-left: auto;
border: 0;
padding-top: 25px;
padding-bottom: 15px;
}
.box {
width: 900px;
}
.side-by-side {
margin-left: auto;
margin-right: auto;
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;
height: 600px;
margin-top: 60px;
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 {
width: 400px;
}
.box-content .tipsslider {
text-align: center;
.design-studio-projects,
.design-studio {
display: inline-block;
width: 400px;
height: 500px;
}
.thumbnail {
display: inline-block;
margin: 0px 50px;
}
}
.design-studio-projects {
float: right;
}
.design-studio {
float: left;
.pathways .box-content {padding:20px;}
iframe {
margin-top: 60px;
width: 960px;
-webkit-transform: scale(.5);
-webkit-transform-origin: top left;
-moz-transform: scale(.5);
}
}
}
.pathways .rightcol {float:right;width:30%;clear:none;margin-bottom:20px}
.pathways .rightcol .box-content{background-color:#FBFBFB}
.pathways .rightcol .box{margin-bottom:-10px;position:relative}
.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 {
.nestedcarousel {
text-align: center;
.thumbnail {
display: inline-block;
margin: 0 50px;
}
}
.pathways .intro .introinfo ul {
list-style-type: none;
margin: 0;
}
.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;
}
}
}

42
src/components/nestedcarousel/nestedcarousel.json
View file

@ -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"
}
]
}
]

8
src/components/nestedcarousel/nestedcarousel.scss
View file

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

12
src/components/thumbnail/thumbnail.jsx
View file

@ -15,8 +15,7 @@ var Thumbnail = React.createClass({
src: '',
type: 'project',
showLoves: false,
showRemixes: false,
linkTitle: true
showRemixes: false
};
},
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>

50
src/components/tipsslider/tipsslider.json Normal file
View file

@ -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": "#"
}
]

39
src/components/nestedcarousel/nestedcarousel.jsx → src/components/tipsslider/tipsslider.jsx
View file

@ -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');
{/*
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',
var TipsSlider = React.createClass({
type: 'TipsSlider',
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',
'carousel',
'tipsslider',
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];
thumbnails.push(
<Thumbnail key={'inner_' + i + '_' + j}
var item = items[j];
thumbnails.push(<Thumbnail key={item.id}
title={item.title}
src={item.thumbnailUrl}
linkTitle = {false} />);
src={item.thumbnailUrl} />)
}
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;

75
src/components/tipsslider/tipsslider.scss Normal file
View file

@ -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;
}
}

24
src/views/microworld_art/microworld_art.json
View file

@ -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"

4
src/views/microworld_art/microworld_art.jsx
View file

@ -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={microworldData} />, document.getElementById('view'));
render(<Microworld microworldData={require("./microworld_art.json")} />, document.getElementById('view'));

28
src/views/microworld_fashion/microworld_fashion.json
View file

@ -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"

4
src/views/microworld_fashion/microworld_fashion.jsx
View file

@ -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={microworldData} />, document.getElementById('view'));
render(<Microworld microworldData={require("./microworld_fashion.json")} />, document.getElementById('view'));

24
src/views/microworld_hiphop/microworld_hiphop.json
View file

@ -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"

4
src/views/microworld_hiphop/microworld_hiphop.jsx
View file

@ -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={microworldData} />, document.getElementById('view'));
render(<Microworld microworldData={require("./microworld_hiphop.json")} />, document.getElementById('view'));