From cb4ca51061f8b3b75c76d545bd5159ec71e799d0 Mon Sep 17 00:00:00 2001 From: Matthew Taylor Date: Thu, 20 Jul 2017 13:47:14 -0400 Subject: [PATCH 1/5] Add new carousel component MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 1. Moves carousel to `LegacyCarousel` since it currently is designed to handle JSON from proxy endpoints 2. Add separate `Carousel` endpoint to handle data from project models in scratch’s new api, the standard moving forward. --- src/components/carousel/carousel.jsx | 15 ++-- src/components/carousel/legacy-carousel.jsx | 97 +++++++++++++++++++++ src/components/microworld/microworld.jsx | 14 +-- src/views/splash/presentation.jsx | 15 ++-- 4 files changed, 120 insertions(+), 21 deletions(-) create mode 100644 src/components/carousel/legacy-carousel.jsx 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..e6d0168da --- /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 Carousel = React.createClass({ + type: 'Carousel', + 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 = Carousel; 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/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" > - From 85613853246d68641ab21a43006759c3a643d2fa Mon Sep 17 00:00:00 2001 From: Matthew Taylor Date: Thu, 20 Jul 2017 13:56:11 -0400 Subject: [PATCH 2/5] Update name for legacy carousel --- src/components/carousel/legacy-carousel.jsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/carousel/legacy-carousel.jsx b/src/components/carousel/legacy-carousel.jsx index e6d0168da..36efb5cbf 100644 --- a/src/components/carousel/legacy-carousel.jsx +++ b/src/components/carousel/legacy-carousel.jsx @@ -17,8 +17,8 @@ require('./carousel.scss'); /** * Displays content in horizontal scrolling box. Example usage: splash page rows. */ -var Carousel = React.createClass({ - type: 'Carousel', +var LegacyCarousel = React.createClass({ + type: 'LegacyCarousel', propTypes: { items: React.PropTypes.array }, @@ -94,4 +94,4 @@ var Carousel = React.createClass({ } }); -module.exports = Carousel; +module.exports = LegacyCarousel; From d0e7c29b5fc096cd160a9d76a43a26df76954468 Mon Sep 17 00:00:00 2001 From: Matthew Taylor Date: Thu, 20 Jul 2017 15:01:36 -0400 Subject: [PATCH 3/5] key api calls on `username` check MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit `this.props.user` will now return `true` because there is a default user object that’s empty. So, instead, wait for an actual user object --- src/views/splash/splash.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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); From 110e47f1d2cb3775668f78a1bae1d5eb842febaa Mon Sep 17 00:00:00 2001 From: St19_Galla Date: Thu, 20 Jul 2017 22:28:03 -0400 Subject: [PATCH 4/5] Update l10n.json --- src/views/camp/l10n.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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!", From e2a596ea9d023e73ac6a7488fbef722981dfbd14 Mon Sep 17 00:00:00 2001 From: Matthew Taylor Date: Fri, 21 Jul 2017 12:10:48 -0400 Subject: [PATCH 5/5] Squashed commit of the following: commit b8a05d9624f2958eb9d7051ce71d6141a480eea5 Author: Matthew Taylor Date: Fri Jul 21 12:06:06 2017 -0400 only change style for links on page otherwise, the footer links were getting the new styling commit 34a3b8b49b4a3988b142f2418e28e9a06fe995c9 Author: St19_Galla Date: Thu Jul 20 22:28:03 2017 -0400 Update l10n.json commit 9c8241b92ccf0b99e4dd6e0826ae45e20f347206 Merge: 3f90e98 bca79e6 Author: Matthew Taylor Date: Thu Jul 20 16:36:32 2017 -0400 Merge pull request #1423 from mewtaylor/hotfix/camp-page Hotfix Scratch Camp 2017 Page commit bca79e652a9b5234891881d72529532f600beeda Author: St19_Galla Date: Wed Jul 19 15:42:16 2017 -0400 Update l10n.json (#1421) commit 4a9418d49ced4e49dd974b1ceba2def0877a50eb Author: St19_Galla Date: Wed Jul 19 11:48:29 2017 -0400 Down Deep - Scratch Camp 2017 Page (#1409) * Add files via upload * Create downdeep.jsx * Delete downdeep.jsx * Delete downdeep.scss * Delete l10n.json * Delete downdeep.jsx * Create dd.jsx * Rename dd.jsx to filler.jsx * Add files via upload * Delete dd.jsx * Delete filler.jsx * Create filler.jsx * Add files via upload * Delete filler.jsx * Update routes.json * whoops * travis * Update downdeep.jsx * Update downdeep.scss * Update downdeep.scss * Update _colors.scss * what i get for rushing * Update downdeep.jsx * Update l10n.json * thisandagain's changes * Carl's Changes * carl's changes * carl's changes * Update downdeep.jsx * Rename downdeep.jsx to camp.jsx * Rename downdeep.scss to camp.scss * Rename src/views/downdeep/camp.jsx to src/views/camp/camp.jsx * Rename src/views/downdeep/camp.scss to src/views/camp/camp.scss * Rename src/views/downdeep/l10n.json to src/views/camp/l10n.json * Update camp.jsx * Add files via upload * Update camp.jsx * Update camp.scss * Update l10n.json * Create filler * Add files via upload * Delete bubbles.svg * Delete dolphin.svg * Delete fish-divider.svg * Delete fish-divider2.svg * Delete map.svg * Delete ocean-bottom.svg * Delete ocean-top.svg * Delete treasure.svg * Update camp.scss * Update camp.scss * Update camp.scss * Update camp.jsx * whoops * Update camp.scss * Update l10n.json * Update camp.scss * Update camp.jsx * Update _colors.scss * Update camp.scss * Update camp.scss * Update camp.scss * Update camp.scss * Update _colors.scss * Update camp.scss * Update camp.scss commit 3f90e9859304f40a8b2ce1e9866d79e43b6105fb Merge: c8afebf 84a37a6 Author: Ray Schamp Date: Thu Jul 13 16:32:51 2017 -0400 Merge pull request #1413 from rschamp/hotfix/rip-smartystreets [Master] Remove SmartyStreets API --- src/views/camp/camp.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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; }