mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2024-11-27 01:25:52 -05:00
Merge pull request #1440 from LLK/release/2.2.23
[Develop] Release 2.2.23
This commit is contained in:
Matthew Taylor
GitHub
commit
b2e4d02679
7 changed files with 125 additions and 26 deletions
|
|
@ -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({
|
|||
<Slider className={classes} arrows={arrows} {... settings}>
|
||||
{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({
|
|||
<Thumbnail key={[this.key, item.id].join('.')}
|
||||
showLoves={this.props.showLoves}
|
||||
showRemixes={this.props.showRemixes}
|
||||
type={item.type}
|
||||
type={this.props.type}
|
||||
href={href}
|
||||
title={item.title}
|
||||
src={item.thumbnail_url}
|
||||
creator={item.creator}
|
||||
remixes={item.remixers_count}
|
||||
loves={item.love_count} />
|
||||
src={item.image}
|
||||
creator={item.author.username}
|
||||
remixes={item.stats.remixes}
|
||||
loves={item.stats.loves} />
|
||||
);
|
||||
}.bind(this))}
|
||||
</Slider>
|
||||
|
|
|
|||
97
src/components/carousel/legacy-carousel.jsx
Normal file
97
src/components/carousel/legacy-carousel.jsx
Normal file
|
|
@ -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 (
|
||||
<Slider className={classes} arrows={arrows} {... settings}>
|
||||
{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 (
|
||||
<Thumbnail key={[this.key, item.id].join('.')}
|
||||
showLoves={this.props.showLoves}
|
||||
showRemixes={this.props.showRemixes}
|
||||
type={item.type}
|
||||
href={href}
|
||||
title={item.title}
|
||||
src={item.thumbnail_url}
|
||||
creator={item.creator}
|
||||
remixes={item.remixers_count}
|
||||
loves={item.love_count} />
|
||||
);
|
||||
}.bind(this))}
|
||||
</Slider>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = LegacyCarousel;
|
||||
|
|
@ -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({
|
|||
<Box
|
||||
title="More Starter Projects"
|
||||
key="starter_projects">
|
||||
<Carousel items={starterProjects} />
|
||||
<LegacyCarousel items={starterProjects} />
|
||||
</Box>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -129,7 +129,7 @@ var Microworld = React.createClass({
|
|||
<Box
|
||||
title="Featured Community Projects"
|
||||
key="community_featured_projects">
|
||||
<Carousel items={featured} />
|
||||
<LegacyCarousel items={featured} />
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
|
@ -138,7 +138,7 @@ var Microworld = React.createClass({
|
|||
<Box
|
||||
title="All Community Projects"
|
||||
key="community_all_projects">
|
||||
<Carousel items={all} />
|
||||
<LegacyCarousel items={all} />
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
|
@ -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. */}
|
||||
<Carousel settings={{slidesToShow:2,slidesToScroll:2}}
|
||||
<LegacyCarousel settings={{slidesToShow:2,slidesToScroll:2}}
|
||||
items={this.props.microworldData.design_challenge.studio1} />
|
||||
<Carousel settings={{slidesToShow:2,slidesToScroll:2}}
|
||||
<LegacyCarousel settings={{slidesToShow:2,slidesToScroll:2}}
|
||||
items={this.props.microworldData.design_challenge.studio2} />
|
||||
</Box>
|
||||
</div>
|
||||
|
|
@ -204,7 +204,7 @@ var Microworld = React.createClass({
|
|||
key="scratch_design_studio"
|
||||
moreTitle={studioHref ? 'Visit the studio' : null}
|
||||
moreHref={studioHref ? studioHref : null}>
|
||||
<Carousel items={this.props.microworldData.design_challenge.studio1.concat(
|
||||
<LegacyCarousel items={this.props.microworldData.design_challenge.studio1.concat(
|
||||
this.props.microworldData.design_challenge.studio2)} />
|
||||
</Box>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 <a href=\"https://scratch.mit.edu/studios/4160302/\">Main Camp Cabin studio</a>. 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!",
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
>
|
||||
<Carousel items={this.props.featuredGlobal.community_featured_projects} />
|
||||
<LegacyCarousel items={this.props.featuredGlobal.community_featured_projects} />
|
||||
</Box>,
|
||||
<Box
|
||||
title={formatMessage({id: 'splash.featuredStudios'})}
|
||||
key="community_featured_studios"
|
||||
>
|
||||
<Carousel
|
||||
<LegacyCarousel
|
||||
items={this.props.featuredGlobal.community_featured_studios}
|
||||
settings={{slidesToShow: 4, slidesToScroll: 4, lazyLoad: false}}
|
||||
/>
|
||||
|
|
@ -99,7 +100,7 @@ var SplashPresentation = injectIntl(React.createClass({
|
|||
moreTitle={formatMessage({id: 'general.learnMore'})}
|
||||
moreHref="/studios/386359/"
|
||||
>
|
||||
<Carousel items={this.props.featuredGlobal.curator_top_projects} />
|
||||
<LegacyCarousel items={this.props.featuredGlobal.curator_top_projects} />
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
|
@ -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 + '/'}
|
||||
>
|
||||
<Carousel items={this.props.featuredGlobal.scratch_design_studio} />
|
||||
<LegacyCarousel items={this.props.featuredGlobal.scratch_design_studio} />
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
|
@ -130,7 +131,7 @@ var SplashPresentation = injectIntl(React.createClass({
|
|||
title={formatMessage({id: 'splash.recentlySharedProjects'})}
|
||||
key="community_newest_projects"
|
||||
>
|
||||
<Carousel items={this.props.featuredGlobal.community_newest_projects} />
|
||||
<LegacyCarousel items={this.props.featuredGlobal.community_newest_projects} />
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
|
@ -173,7 +174,7 @@ var SplashPresentation = injectIntl(React.createClass({
|
|||
title={formatMessage({id: 'splash.communityRemixing'})}
|
||||
key="community_most_remixed_projects"
|
||||
>
|
||||
<Carousel
|
||||
<LegacyCarousel
|
||||
items={shuffle(this.props.featuredGlobal.community_most_remixed_projects)}
|
||||
showRemixes={true}
|
||||
/>
|
||||
|
|
@ -182,7 +183,7 @@ var SplashPresentation = injectIntl(React.createClass({
|
|||
title={formatMessage({id: 'splash.communityLoving'})}
|
||||
key="community_most_loved_projects"
|
||||
>
|
||||
<Carousel
|
||||
<LegacyCarousel
|
||||
items={shuffle(this.props.featuredGlobal.community_most_loved_projects)}
|
||||
showLoves={true}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
Loading…
Reference in a new issue