Skip to content

GitLab

S
scratch-www
Commit 36eff8a9 authored by Matthew Taylor's avatar Matthew Taylor
Browse files
Options

Merge pull request #117 from mewtaylor/issue/105-hide-carousel-arrows 

Override `Slider`'s `arrows` setting by row length
parents 5b804af2 fe96c6fa
Hide whitespace changes
Inline Side-by-side
Showing with 62 additions and 40 deletions
src/views/splash/splash.jsx
View file @ 36eff8a9
......@@ -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>
);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment