scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-26 09:08:07 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Add example feature content to splash

Browse source
This commit is contained in:
Ray Schamp 2015-09-08 18:15:02 -04:00
parent d53a84925d
commit 730e440ee6
6 changed files with 339 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
src/components/carousel/carousel.json
View file

@ -5,15 +5,14 @@
"title": "Example Project", "title": "Example Project",
"thumbnailUrl": "http://www.lorempixel.com/144/108/", "thumbnailUrl": "http://www.lorempixel.com/144/108/",
"creator": "raimondious", "creator": "raimondious",
"projectId": "1000" "href": "/projects/1000/"
}, },
{ {
"id": 2, "id": 2,
"type": "project", "type": "project",
"title": "Example Project", "title": "Example Project",
"thumbnailUrl": "http://www.lorempixel.com/144/108/", "thumbnailUrl": "http://www.lorempixel.com/144/108/",
"creator": "raimondious", "href": "/projects/1000/"
"projectId": "1000"
}, },
{ {
"id": 3, "id": 3,
@ -21,7 +20,7 @@
"title": "Example Project", "title": "Example Project",
"thumbnailUrl": "http://www.lorempixel.com/144/108/", "thumbnailUrl": "http://www.lorempixel.com/144/108/",
"creator": "raimondious", "creator": "raimondious",
"projectId": "1000" "href": "/projects/1000/"
}, },
{ {
"id": 4, "id": 4,
@ -29,7 +28,7 @@
"title": "Example Project", "title": "Example Project",
"thumbnailUrl": "http://www.lorempixel.com/144/108/", "thumbnailUrl": "http://www.lorempixel.com/144/108/",
"creator": "raimondious", "creator": "raimondious",
"projectId": "1000" "href": "/projects/1000/"
}, },
{ {
"id": 5, "id": 5,
@ -37,7 +36,7 @@
"title": "Example Project", "title": "Example Project",
"thumbnailUrl": "http://www.lorempixel.com/144/108/", "thumbnailUrl": "http://www.lorempixel.com/144/108/",
"creator": "raimondious", "creator": "raimondious",
"projectId": "1000" "href": "/projects/1000/"
}, },
{ {
"id": 6, "id": 6,
@ -45,6 +44,6 @@
"title": "Example Project", "title": "Example Project",
"thumbnailUrl": "http://www.lorempixel.com/144/108/", "thumbnailUrl": "http://www.lorempixel.com/144/108/",
"creator": "raimondious", "creator": "raimondious",
"projectId": "1000" "href": "/projects/1000/"
} }
] ]

5
src/components/carousel/carousel.jsx
View file

@ -31,9 +31,10 @@ module.exports = React.createClass({
{this.props.items.map(function(item) { {this.props.items.map(function(item) {
return ( return (
<Thumbnail key={item.id} <Thumbnail key={item.id}
href={'/projects/' + item.projectId + '/'} href={item.href}
title={item.title} title={item.title}
extra={'by ' + item.creator} /> src={item.thumbnailUrl}
extra={item.creator ? 'by ' + item.creator:null} />
); );
})} })}
</Slider> </Slider>

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

@ -15,7 +15,7 @@ module.exports = React.createClass({
}; };
}, },
render: function () { render: function () {
var className = this.props.className + " thumbnail"; var className = this.props.className + ' thumbnail';
return ( return (
<div className={className}> <div className={className}>
<a className="thumbnailImage" href={this.props.href}> <a className="thumbnailImage" href={this.props.href}>

314
src/views/splash/featured.json Normal file
View file

@ -0,0 +1,314 @@
[
{
"title": "Featured Projects",
"items": [
{
"id": 1,
"type": "project",
"title": "Example Project",
"thumbnailUrl": "http://www.lorempixel.com/144/108/",
"creator": "raimondious",
"href": "/projects/1000/"
},
{
"id": 2,
"type": "project",
"title": "Example Project",
"thumbnailUrl": "http://www.lorempixel.com/144/108/",
"creator": "raimondious",
"href": "/projects/1000/"
},
{
"id": 3,
"type": "project",
"title": "Example Project",
"thumbnailUrl": "http://www.lorempixel.com/144/108/",
"creator": "raimondious",
"href": "/projects/1000/"
},
{
"id": 4,
"type": "project",
"title": "Example Project",
"thumbnailUrl": "http://www.lorempixel.com/144/108/",
"creator": "raimondious",
"href": "/projects/1000/"
},
{
"id": 5,
"type": "project",
"title": "Example Project",
"thumbnailUrl": "http://www.lorempixel.com/144/108/",
"creator": "raimondious",
"href": "/projects/1000/"
},
{
"id": 6,
"type": "project",
"title": "Example Project",
"thumbnailUrl": "http://www.lorempixel.com/144/108/",
"creator": "raimondious",
"href": "/projects/1000/"
}
]
},
{
"title": "Featured Studios",
"items": [
{
"id": 1,
"type": "studio",
"title": "Example Studio",
"thumbnailUrl": "http://www.lorempixel.com/170/100/",
"href": "/studios/1000/"
},
{
"id": 2,
"type": "studio",
"title": "Example Studio",
"thumbnailUrl": "http://www.lorempixel.com/170/100/",
"href": "/studios/1000/"
},
{
"id": 3,
"type": "studio",
"title": "Example Studio",
"thumbnailUrl": "http://www.lorempixel.com/170/100/",
"href": "/studios/1000/"
},
{
"id": 4,
"type": "studio",
"title": "Example Studio",
"thumbnailUrl": "http://www.lorempixel.com/170/100/",
"href": "/studios/1000/"
},
{
"id": 5,
"type": "studio",
"title": "Example Studio",
"thumbnailUrl": "http://www.lorempixel.com/170/100/",
"href": "/studios/1000/"
},
{
"id": 6,
"type": "studio",
"title": "Example Studio",
"thumbnailUrl": "http://www.lorempixel.com/170/100/",
"href": "/studios/1000/"
}
]
},
{
"title": "Projects Curated by raimondious",
"items": [
{
"id": 1,
"type": "project",
"title": "Example Project",
"thumbnailUrl": "http://www.lorempixel.com/144/108/",
"creator": "raimondious",
"href": "/projects/1000/"
},
{
"id": 2,
"type": "project",
"title": "Example Project",
"thumbnailUrl": "http://www.lorempixel.com/144/108/",
"creator": "raimondious",
"href": "/projects/1000/"
},
{
"id": 3,
"type": "project",
"title": "Example Project",
"thumbnailUrl": "http://www.lorempixel.com/144/108/",
"creator": "raimondious",
"href": "/projects/1000/"
},
{
"id": 4,
"type": "project",
"title": "Example Project",
"thumbnailUrl": "http://www.lorempixel.com/144/108/",
"creator": "raimondious",
"href": "/projects/1000/"
},
{
"id": 5,
"type": "project",
"title": "Example Project",
"thumbnailUrl": "http://www.lorempixel.com/144/108/",
"creator": "raimondious",
"href": "/projects/1000/"
},
{
"id": 6,
"type": "project",
"title": "Example Project",
"thumbnailUrl": "http://www.lorempixel.com/144/108/",
"creator": "raimondious",
"href": "/projects/1000/"
}
]
},
{
"title": "Scratch Design Studio - \"Custom Block Madness!\"",
"items": [
{
"id": 1,
"type": "project",
"title": "Example Project",
"thumbnailUrl": "http://www.lorempixel.com/144/108/",
"creator": "raimondious",
"href": "/projects/1000/"
},
{
"id": 2,
"type": "project",
"title": "Example Project",
"thumbnailUrl": "http://www.lorempixel.com/144/108/",
"creator": "raimondious",
"href": "/projects/1000/"
},
{
"id": 3,
"type": "project",
"title": "Example Project",
"thumbnailUrl": "http://www.lorempixel.com/144/108/",
"creator": "raimondious",
"href": "/projects/1000/"
},
{
"id": 4,
"type": "project",
"title": "Example Project",
"thumbnailUrl": "http://www.lorempixel.com/144/108/",
"creator": "raimondious",
"href": "/projects/1000/"
},
{
"id": 5,
"type": "project",
"title": "Example Project",
"thumbnailUrl": "http://www.lorempixel.com/144/108/",
"creator": "raimondious",
"href": "/projects/1000/"
},
{
"id": 6,
"type": "project",
"title": "Example Project",
"thumbnailUrl": "http://www.lorempixel.com/144/108/",
"creator": "raimondious",
"href": "/projects/1000/"
}
]
},
{
"title": "What the Community is Remixing",
"items": [
{
"id": 1,
"type": "project",
"title": "Example Project",
"thumbnailUrl": "http://www.lorempixel.com/144/108/",
"creator": "raimondious",
"href": "/projects/1000/"
},
{
"id": 2,
"type": "project",
"title": "Example Project",
"thumbnailUrl": "http://www.lorempixel.com/144/108/",
"creator": "raimondious",
"href": "/projects/1000/"
},
{
"id": 3,
"type": "project",
"title": "Example Project",
"thumbnailUrl": "http://www.lorempixel.com/144/108/",
"creator": "raimondious",
"href": "/projects/1000/"
},
{
"id": 4,
"type": "project",
"title": "Example Project",
"thumbnailUrl": "http://www.lorempixel.com/144/108/",
"creator": "raimondious",
"href": "/projects/1000/"
},
{
"id": 5,
"type": "project",
"title": "Example Project",
"thumbnailUrl": "http://www.lorempixel.com/144/108/",
"creator": "raimondious",
"href": "/projects/1000/"
},
{
"id": 6,
"type": "project",
"title": "Example Project",
"thumbnailUrl": "http://www.lorempixel.com/144/108/",
"creator": "raimondious",
"href": "/projects/1000/"
}
]
},
{
"title": "What the Community is Loving",
"items": [
{
"id": 1,
"type": "project",
"title": "Example Project",
"thumbnailUrl": "http://www.lorempixel.com/144/108/",
"creator": "raimondious",
"href": "/projects/1000/"
},
{
"id": 2,
"type": "project",
"title": "Example Project",
"thumbnailUrl": "http://www.lorempixel.com/144/108/",
"creator": "raimondious",
"href": "/projects/1000/"
},
{
"id": 3,
"type": "project",
"title": "Example Project",
"thumbnailUrl": "http://www.lorempixel.com/144/108/",
"creator": "raimondious",
"href": "/projects/1000/"
},
{
"id": 4,
"type": "project",
"title": "Example Project",
"thumbnailUrl": "http://www.lorempixel.com/144/108/",
"creator": "raimondious",
"href": "/projects/1000/"
},
{
"id": 5,
"type": "project",
"title": "Example Project",
"thumbnailUrl": "http://www.lorempixel.com/144/108/",
"creator": "raimondious",
"href": "/projects/1000/"
},
{
"id": 6,
"type": "project",
"title": "Example Project",
"thumbnailUrl": "http://www.lorempixel.com/144/108/",
"creator": "raimondious",
"href": "/projects/1000/"
}
]
}
]

14
src/views/splash/splash.jsx
View file

@ -3,6 +3,8 @@ var React = require('react');
var Api = require('../../mixins/api.jsx'); var Api = require('../../mixins/api.jsx');
var Session = require('../../mixins/session.jsx'); var Session = require('../../mixins/session.jsx');
var Box = require('../../components/box/box.jsx');
var Carousel = require('../../components/carousel/carousel.jsx');
var News = require('../../components/news/news.jsx'); var News = require('../../components/news/news.jsx');
require('./splash.scss'); require('./splash.scss');
@ -16,7 +18,7 @@ var View = React.createClass({
return { return {
activity: [], activity: [],
news: [], news: [],
featured: [] featured: require('./featured.json')
}; };
}, },
componentDidMount: function () { componentDidMount: function () {
@ -30,7 +32,15 @@ var View = React.createClass({
<div className="intro"></div> <div className="intro"></div>
<div className="activity"></div> <div className="activity"></div>
<News /> <News />
<div className="featured"></div> {this.state.featured.map(function(set){
return (
<Box
className="featured"
title={set.title}>
<Carousel items={set.items} />
</Box>
);
})}
</div> </div>
); );
} }

4
src/views/splash/splash.scss
View file

@ -1,3 +1,5 @@
#view { #view {
.box {
margin-bottom: 20px;
}
} }