diff --git a/src/components/carousel/carousel.jsx b/src/components/carousel/carousel.jsx
index 50df3a61b..46e01fa1a 100644
--- a/src/components/carousel/carousel.jsx
+++ b/src/components/carousel/carousel.jsx
@@ -23,7 +23,8 @@ var Carousel = React.createClass({
return {
items: require('./carousel.json'),
showRemixes: false,
- showLoves: false
+ showLoves: false,
+ type: 'project'
};
},
render: function () {
@@ -62,7 +63,7 @@ var Carousel = React.createClass({
{this.props.items.map(function (item) {
var href = '';
- switch (item.type) {
+ switch (this.props.type) {
case 'gallery':
href = '/studios/' + item.id + '/';
break;
@@ -77,13 +78,13 @@ var Carousel = React.createClass({
+ src={item.image}
+ creator={item.author.username}
+ remixes={item.stats.remixes}
+ loves={item.stats.loves} />
);
}.bind(this))}
diff --git a/src/components/carousel/legacy-carousel.jsx b/src/components/carousel/legacy-carousel.jsx
new file mode 100644
index 000000000..36efb5cbf
--- /dev/null
+++ b/src/components/carousel/legacy-carousel.jsx
@@ -0,0 +1,97 @@
+// This component handles json returned via proxy from a django server,
+// or directly from a django server, and the model structure that system
+// has.
+var classNames = require('classnames');
+var defaults = require('lodash.defaults');
+var React = require('react');
+var Slider = require('react-slick');
+
+var Thumbnail = require('../thumbnail/thumbnail.jsx');
+
+var frameless = require('../../lib/frameless.js');
+
+require('slick-carousel/slick/slick.scss');
+require('slick-carousel/slick/slick-theme.scss');
+require('./carousel.scss');
+
+/**
+ * Displays content in horizontal scrolling box. Example usage: splash page rows.
+ */
+var LegacyCarousel = React.createClass({
+ type: 'LegacyCarousel',
+ propTypes: {
+ items: React.PropTypes.array
+ },
+ getDefaultProps: function () {
+ return {
+ items: require('./carousel.json'),
+ showRemixes: false,
+ showLoves: false
+ };
+ },
+ render: function () {
+ var settings = this.props.settings || {};
+ defaults(settings, {
+ centerMode: false,
+ dots: false,
+ infinite: false,
+ lazyLoad: true,
+ slidesToShow: 5,
+ slidesToScroll: 5,
+ variableWidth: true,
+ responsive: [
+ {breakpoint: frameless.mobile, settings: {
+ arrows: true,
+ slidesToScroll: 1,
+ slidesToShow: 1,
+ centerMode: true
+ }},
+ {breakpoint: frameless.tablet, settings: {
+ slidesToScroll: 2,
+ slidesToShow: 2
+ }},
+ {breakpoint: frameless.desktop, settings: {
+ slidesToScroll: 4,
+ slidesToShow: 4
+ }}
+ ]
+ });
+ var arrows = this.props.items.length > settings.slidesToShow;
+ var classes = classNames(
+ 'carousel',
+ this.props.className
+ );
+ return (
+
+ {this.props.items.map(function (item) {
+ var href = '';
+ switch (item.type) {
+ case 'gallery':
+ href = '/studios/' + item.id + '/';
+ break;
+ case 'project':
+ href = '/projects/' + item.id + '/';
+ break;
+ default:
+ href = '/' + item.type + '/' + item.id + '/';
+ }
+
+ return (
+
+ );
+ }.bind(this))}
+
+ );
+ }
+});
+
+module.exports = LegacyCarousel;
diff --git a/src/components/microworld/microworld.jsx b/src/components/microworld/microworld.jsx
index 87d626e5e..ec21d5a87 100644
--- a/src/components/microworld/microworld.jsx
+++ b/src/components/microworld/microworld.jsx
@@ -3,7 +3,7 @@ var React = require('react');
require('./microworld.scss');
var Box = require('../box/box.jsx');
-var Carousel = require('../carousel/carousel.jsx');
+var LegacyCarousel = require('../carousel/legacy-carousel.jsx');
var IframeModal = require('../modal/iframe/modal.jsx');
var NestedCarousel = require('../nestedcarousel/nestedcarousel.jsx');
@@ -109,7 +109,7 @@ var Microworld = React.createClass({
-
+
);
@@ -129,7 +129,7 @@ var Microworld = React.createClass({
-
+
);
}
@@ -138,7 +138,7 @@ var Microworld = React.createClass({
-
+
);
}
@@ -187,9 +187,9 @@ var Microworld = React.createClass({
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. */}
-
-
@@ -204,7 +204,7 @@ var Microworld = React.createClass({
key="scratch_design_studio"
moreTitle={studioHref ? 'Visit the studio' : null}
moreHref={studioHref ? studioHref : null}>
-
diff --git a/src/views/camp/camp.scss b/src/views/camp/camp.scss
index 65062ed69..625ee88c7 100644
--- a/src/views/camp/camp.scss
+++ b/src/views/camp/camp.scss
@@ -15,10 +15,10 @@
margin-top: .938em;
width: 45%;
}
-.inner a {
+.gradient1 a {
text-decoration: underline;
}
-.inner a:hover {
+.gradient1 a:hover {
text-decoration: underline;
color: $ui-light-gray;
}
diff --git a/src/views/camp/l10n.json b/src/views/camp/l10n.json
index d29125db6..dffd9ecc0 100644
--- a/src/views/camp/l10n.json
+++ b/src/views/camp/l10n.json
@@ -6,7 +6,7 @@
"camp.part1Dates":"Part 1 (July 24th - July 30th)",
"camp.detailsTitle": "Details:",
"camp.part1Details": "Create a project introducing us to a character, real or imagined, that lives in the ocean. You could create a monster from the depths, a cute little starfish, a taco eating shark, or anything else you can imagine.",
- "camp.particpateTitle": "How to Particpate:",
+ "camp.particpateTitle": "How to Participate:",
"camp.part1Particpate": "Part 1 of camp will take place in the Main Camp Cabin studio. Here you can ask questions, view other Scratchers' creations, and submit your own. Go to the studio to learn more!",
"camp.part2Dates": "Part 2 (July 31st - August 6th)",
"camp.part2Details": "Now make your character interactive! Does your character have questions to ask us? What happens when you click on it? Does it have any special powers? And more!",
diff --git a/src/views/splash/presentation.jsx b/src/views/splash/presentation.jsx
index 8cb5e7ada..9db4df7e1 100644
--- a/src/views/splash/presentation.jsx
+++ b/src/views/splash/presentation.jsx
@@ -10,6 +10,7 @@ var DropdownBanner = require('../../components/dropdown-banner/banner.jsx');
var Box = require('../../components/box/box.jsx');
var Button = require('../../components/forms/button.jsx');
var Carousel = require('../../components/carousel/carousel.jsx');
+var LegacyCarousel = require('../../components/carousel/legacy-carousel.jsx');
var Intro = require('../../components/intro/intro.jsx');
var IframeModal = require('../../components/modal/iframe/modal.jsx');
var News = require('../../components/news/news.jsx');
@@ -74,13 +75,13 @@ var SplashPresentation = injectIntl(React.createClass({
title={formatMessage({id: 'splash.featuredProjects'})}
key="community_featured_projects"
>
-
+
,
-
@@ -99,7 +100,7 @@ var SplashPresentation = injectIntl(React.createClass({
moreTitle={formatMessage({id: 'general.learnMore'})}
moreHref="/studios/386359/"
>
-
+
);
}
@@ -116,7 +117,7 @@ var SplashPresentation = injectIntl(React.createClass({
moreTitle={formatMessage({id: 'splash.visitTheStudio'})}
moreHref={'/studios/' + this.props.featuredGlobal.scratch_design_studio[0].gallery_id + '/'}
>
-
+
);
}
@@ -130,7 +131,7 @@ var SplashPresentation = injectIntl(React.createClass({
title={formatMessage({id: 'splash.recentlySharedProjects'})}
key="community_newest_projects"
>
-
+
);
}
@@ -173,7 +174,7 @@ var SplashPresentation = injectIntl(React.createClass({
title={formatMessage({id: 'splash.communityRemixing'})}
key="community_most_remixed_projects"
>
-
@@ -182,7 +183,7 @@ var SplashPresentation = injectIntl(React.createClass({
title={formatMessage({id: 'splash.communityLoving'})}
key="community_most_loved_projects"
>
-
diff --git a/src/views/splash/splash.jsx b/src/views/splash/splash.jsx
index 374742719..aae44b28c 100644
--- a/src/views/splash/splash.jsx
+++ b/src/views/splash/splash.jsx
@@ -36,7 +36,7 @@ var Splash = injectIntl(React.createClass({
},
componentDidUpdate: function (prevProps) {
if (this.props.user != prevProps.user) {
- if (this.props.user) {
+ if (this.props.user.username) {
this.getActivity(this.props.user.username);
this.getSharedByFollowing(this.props.user.token);
this.getInStudiosFollowing(this.props.user.token);
@@ -59,7 +59,7 @@ var Splash = injectIntl(React.createClass({
},
componentDidMount: function () {
this.getFeaturedGlobal();
- if (this.props.user) {
+ if (this.props.user.username) {
this.getActivity(this.props.user.username);
this.getSharedByFollowing(this.props.user.token);
this.getInStudiosFollowing(this.props.user.token);