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

Merge pull request #1440 from LLK/release/2.2.23

Browse source 
[Develop] Release 2.2.23
This commit is contained in:
Matthew Taylor 2017-07-27 15:58:46 -04:00 committed by GitHub
commit b2e4d02679
7 changed files with 125 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -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
View 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;

14
src/components/microworld/microworld.jsx
View file

@ -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>

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

@ -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;
}

2
src/views/camp/l10n.json
View file

@ -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!",

15
src/views/splash/presentation.jsx
View file

@ -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}
/>

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

@ -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);