mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2025-02-17 00:21:20 -05:00
Merge pull request #117 from mewtaylor/issue/105-hide-carousel-arrows
Override `Slider`'s `arrows` setting by row length
This commit is contained in:
Matthew Taylor
commit
36eff8a9db
1 changed files with 62 additions and 40 deletions
|
|
@ -21,6 +21,11 @@ var Splash = injectIntl(React.createClass({
|
|||
Api,
|
||||
Session
|
||||
],
|
||||
getDefaultProps: function () {
|
||||
return {
|
||||
slidesToShow: 5
|
||||
};
|
||||
},
|
||||
getInitialState: function () {
|
||||
return {
|
||||
projectCount: 10569070,
|
||||
|
|
@ -89,6 +94,7 @@ var Splash = injectIntl(React.createClass({
|
|||
},
|
||||
renderHomepageRows: function () {
|
||||
var formatMessage = this.props.intl.formatMessage;
|
||||
var showArrows = true;
|
||||
var rows = [
|
||||
<Box
|
||||
title={formatMessage({
|
||||
|
|
@ -106,9 +112,10 @@ var Splash = injectIntl(React.createClass({
|
|||
</Box>
|
||||
];
|
||||
|
||||
if (
|
||||
this.state.featuredGlobal.curator_top_projects &&
|
||||
this.state.featuredGlobal.curator_top_projects.length > 4) {
|
||||
if (this.state.featuredGlobal.curator_top_projects &&
|
||||
this.state.featuredGlobal.curator_top_projects.length > 4) {
|
||||
|
||||
showArrows = this.state.featuredGlobal.curator_top_projects.length > this.props.slidesToShow;
|
||||
rows.push(
|
||||
<Box
|
||||
key="curator_top_projects"
|
||||
|
|
@ -117,14 +124,17 @@ var Splash = injectIntl(React.createClass({
|
|||
this.state.featuredGlobal.curator_top_projects[0].curator_name}
|
||||
moreTitle={formatMessage({id: 'general.learnMore', defaultMessage: 'Learn More'})}
|
||||
moreHref="/studios/386359/">
|
||||
<Carousel items={this.state.featuredGlobal.curator_top_projects} />
|
||||
<Carousel
|
||||
items={this.state.featuredGlobal.curator_top_projects}
|
||||
arrows={showArrows} />
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
if (
|
||||
this.state.featuredGlobal.scratch_design_studio &&
|
||||
this.state.featuredGlobal.scratch_design_studio.length > 4) {
|
||||
if (this.state.featuredGlobal.scratch_design_studio &&
|
||||
this.state.featuredGlobal.scratch_design_studio.length > 4) {
|
||||
|
||||
showArrows = this.state.featuredGlobal.scratch_design_studio.length > this.props.slidesToShow;
|
||||
rows.push(
|
||||
<Box
|
||||
key="scratch_design_studio"
|
||||
|
|
@ -135,15 +145,18 @@ var Splash = injectIntl(React.createClass({
|
|||
+ ' - ' + this.state.featuredGlobal.scratch_design_studio[0].gallery_title}
|
||||
moreTitle={formatMessage({id: 'splash.visitTheStudio', defaultMessage: 'Visit the studio'})}
|
||||
moreHref={'/studios/' + this.state.featuredGlobal.scratch_design_studio[0].gallery_id + '/'}>
|
||||
<Carousel items={this.state.featuredGlobal.scratch_design_studio} />
|
||||
<Carousel
|
||||
items={this.state.featuredGlobal.scratch_design_studio}
|
||||
arrows={showArrows} />
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
if (
|
||||
this.state.session.user &&
|
||||
this.state.featuredGlobal.community_newest_projects &&
|
||||
this.state.featuredGlobal.community_newest_projects.length > 0) {
|
||||
if (this.state.session.user &&
|
||||
this.state.featuredGlobal.community_newest_projects &&
|
||||
this.state.featuredGlobal.community_newest_projects.length > 0) {
|
||||
|
||||
showArrows = this.state.featuredGlobal.community_newest_projects.length > this.props.slidesToShow;
|
||||
rows.push(
|
||||
<Box
|
||||
title={
|
||||
|
|
@ -151,70 +164,79 @@ var Splash = injectIntl(React.createClass({
|
|||
id: 'splash.recentlySharedProjects',
|
||||
defaultMessage: 'Recently Shared Projects' })}
|
||||
key="community_newest_projects">
|
||||
<Carousel items={this.state.featuredGlobal.community_newest_projects} />
|
||||
<Carousel
|
||||
items={this.state.featuredGlobal.community_newest_projects}
|
||||
arrows={showArrows} />
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
if (
|
||||
this.state.featuredCustom.custom_projects_by_following &&
|
||||
this.state.featuredCustom.custom_projects_by_following.length > 0) {
|
||||
if (this.state.featuredCustom.custom_projects_by_following &&
|
||||
this.state.featuredCustom.custom_projects_by_following.length > 0) {
|
||||
|
||||
showArrows = this.state.featuredCustom.custom_projects_by_following.length > this.props.slidesToShow;
|
||||
rows.push(
|
||||
<Box
|
||||
title={
|
||||
<Box title={
|
||||
formatMessage({
|
||||
id: 'splash.projectsByScratchersFollowing',
|
||||
defaultMessage: 'Projects by Scratchers I\'m Following'})}
|
||||
key="custom_projects_by_following">
|
||||
<Carousel items={this.state.featuredCustom.custom_projects_by_following} />
|
||||
key="custom_projects_by_following">
|
||||
|
||||
<Carousel items={this.state.featuredCustom.custom_projects_by_following}
|
||||
arrows={showArrows} />
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
if (
|
||||
this.state.featuredCustom.custom_projects_loved_by_following &&
|
||||
this.state.featuredCustom.custom_projects_loved_by_following.length > 0) {
|
||||
if (this.state.featuredCustom.custom_projects_loved_by_following &&
|
||||
this.state.featuredCustom.custom_projects_loved_by_following.length > 0) {
|
||||
|
||||
showArrows = this.state.featuredCustom.custom_projects_loved_by_following.length > this.props.slidesToShow;
|
||||
rows.push(
|
||||
<Box
|
||||
title={
|
||||
<Box title={
|
||||
formatMessage({
|
||||
id: 'splash.projectsLovedByScratchersFollowing',
|
||||
defaultMessage: 'Projects Loved by Scratchers I\'m Following'})}
|
||||
key="custom_projects_loved_by_following">
|
||||
<Carousel items={this.state.featuredCustom.custom_projects_loved_by_following} />
|
||||
key="custom_projects_loved_by_following">
|
||||
|
||||
<Carousel items={this.state.featuredCustom.custom_projects_loved_by_following}
|
||||
arrows={showArrows} />
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
if (
|
||||
this.state.featuredCustom.custom_projects_in_studios_following &&
|
||||
this.state.featuredCustom.custom_projects_in_studios_following.length > 0) {
|
||||
if (this.state.featuredCustom.custom_projects_in_studios_following &&
|
||||
this.state.featuredCustom.custom_projects_in_studios_following.length > 0) {
|
||||
|
||||
showArrows =
|
||||
this.state.featuredCustom.custom_projects_in_studios_following.length > this.props.slidesToShow;
|
||||
rows.push(
|
||||
<Box
|
||||
title={
|
||||
<Box title={
|
||||
formatMessage({
|
||||
id:'splash.projectsInStudiosFollowing',
|
||||
defaultMessage: 'Projects in Studios I\'m Following'})}
|
||||
key="custom_projects_in_studios_following">
|
||||
<Carousel items={this.state.featuredCustom.custom_projects_in_studios_following} />
|
||||
key="custom_projects_in_studios_following">
|
||||
|
||||
<Carousel items={this.state.featuredCustom.custom_projects_in_studios_following}
|
||||
arrows={showArrows} />
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
rows.push(
|
||||
<Box
|
||||
title={
|
||||
<Box title={
|
||||
formatMessage({
|
||||
id: 'splash.communityRemixing',
|
||||
defaultMessage: 'What the Community is Remixing' })}
|
||||
key="community_most_remixed_projects">
|
||||
key="community_most_remixed_projects">
|
||||
|
||||
<Carousel items={this.state.featuredGlobal.community_most_remixed_projects} showRemixes={true} />
|
||||
</Box>,
|
||||
<Box
|
||||
title={
|
||||
<Box title={
|
||||
formatMessage({
|
||||
id: 'splash.communityLoving',
|
||||
defaultMessage: 'What the Community is Loving' })}
|
||||
key="community_most_loved_projects">
|
||||
key="community_most_loved_projects">
|
||||
|
||||
<Carousel items={this.state.featuredGlobal.community_most_loved_projects} showLoves={true} />
|
||||
</Box>
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in a new issue