scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-29 10:36:42 -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",
"thumbnailUrl": "http://www.lorempixel.com/144/108/",
"creator": "raimondious",
"projectId": "1000"
"href": "/projects/1000/"
},
{
"id": 2,
"type": "project",
"title": "Example Project",
"thumbnailUrl": "http://www.lorempixel.com/144/108/",
"creator": "raimondious",
"projectId": "1000"
"href": "/projects/1000/"
},
{
"id": 3,
@ -21,7 +20,7 @@
"title": "Example Project",
"thumbnailUrl": "http://www.lorempixel.com/144/108/",
"creator": "raimondious",
"projectId": "1000"
"href": "/projects/1000/"
},
{
"id": 4,
@ -29,7 +28,7 @@
"title": "Example Project",
"thumbnailUrl": "http://www.lorempixel.com/144/108/",
"creator": "raimondious",
"projectId": "1000"
"href": "/projects/1000/"
},
{
"id": 5,
@ -37,7 +36,7 @@
"title": "Example Project",
"thumbnailUrl": "http://www.lorempixel.com/144/108/",
"creator": "raimondious",
"projectId": "1000"
"href": "/projects/1000/"
},
{
"id": 6,
@ -45,6 +44,6 @@
"title": "Example Project",
"thumbnailUrl": "http://www.lorempixel.com/144/108/",
"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) {
return (
<Thumbnail key={item.id}
href={'/projects/' + item.projectId + '/'}
href={item.href}
title={item.title}
extra={'by ' + item.creator} />
src={item.thumbnailUrl}
extra={item.creator ? 'by ' + item.creator:null} />
);
})}
</Slider>

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

@ -15,7 +15,7 @@ module.exports = React.createClass({
};
},
render: function () {
var className = this.props.className + " thumbnail";
var className = this.props.className + ' thumbnail';
return (
<div className={className}>
<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 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');
require('./splash.scss');
@ -16,7 +18,7 @@ var View = React.createClass({
return {
activity: [],
news: [],
featured: []
featured: require('./featured.json')
};
},
componentDidMount: function () {
@ -30,7 +32,15 @@ var View = React.createClass({
<div className="intro"></div>
<div className="activity"></div>
<News />
<div className="featured"></div>
{this.state.featured.map(function(set){
return (
<Box
className="featured"
title={set.title}>
<Carousel items={set.items} />
</Box>
);
})}
</div>
);
}

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

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