diff --git a/src/components/carousel/carousel.json b/src/components/carousel/carousel.json index b9cc3c9f6..9278fe006 100644 --- a/src/components/carousel/carousel.json +++ b/src/components/carousel/carousel.json @@ -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/" } ] \ No newline at end of file diff --git a/src/components/carousel/carousel.jsx b/src/components/carousel/carousel.jsx index 9b0823df1..041b76e80 100644 --- a/src/components/carousel/carousel.jsx +++ b/src/components/carousel/carousel.jsx @@ -31,9 +31,10 @@ module.exports = React.createClass({ {this.props.items.map(function(item) { return ( + src={item.thumbnailUrl} + extra={item.creator ? 'by ' + item.creator:null} /> ); })} diff --git a/src/components/thumbnail/thumbnail.jsx b/src/components/thumbnail/thumbnail.jsx index b52d150ff..21287ec52 100644 --- a/src/components/thumbnail/thumbnail.jsx +++ b/src/components/thumbnail/thumbnail.jsx @@ -15,7 +15,7 @@ module.exports = React.createClass({ }; }, render: function () { - var className = this.props.className + " thumbnail"; + var className = this.props.className + ' thumbnail'; return (
diff --git a/src/views/splash/featured.json b/src/views/splash/featured.json new file mode 100644 index 000000000..1607a6875 --- /dev/null +++ b/src/views/splash/featured.json @@ -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/" + } + ] + } +] \ No newline at end of file diff --git a/src/views/splash/splash.jsx b/src/views/splash/splash.jsx index 7c9719004..ee5c68bb4 100644 --- a/src/views/splash/splash.jsx +++ b/src/views/splash/splash.jsx @@ -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({
-
+ {this.state.featured.map(function(set){ + return ( + + + + ); + })}
); } diff --git a/src/views/splash/splash.scss b/src/views/splash/splash.scss index d40c56fb9..277e92830 100644 --- a/src/views/splash/splash.scss +++ b/src/views/splash/splash.scss @@ -1,3 +1,5 @@ #view { - + .box { + margin-bottom: 20px; + } }