diff --git a/src/_colors.scss b/src/_colors.scss index ad8b3a9165e..60fdddfaecb 100644 --- a/src/_colors.scss +++ b/src/_colors.scss @@ -59,6 +59,7 @@ $active-dark-gray: hsla(0, 0%, 0%, .2); $box-shadow-gray: hsla(0, 0%, 0%, .25); $box-shadow-light-gray: hsla(0, 0%, 0%, .15); $overlay-gray: hsla(0, 0%, 0%, .75); +$gray-50: hsla(226, 15%, 97%, 1); $transparent-light-blue: rgba(229, 240, 254, 0); /* Typography Colors */ diff --git a/src/views/ideas/ideas.jsx b/src/views/ideas/ideas.jsx index a93579351e5..f1057061d84 100644 --- a/src/views/ideas/ideas.jsx +++ b/src/views/ideas/ideas.jsx @@ -1,284 +1,261 @@ -const bindAll = require('lodash.bindall'); const FormattedMessage = require('react-intl').FormattedMessage; -const injectIntl = require('react-intl').injectIntl; const React = require('react'); const Button = require('../../components/forms/button.jsx'); const FlexRow = require('../../components/flex-row/flex-row.jsx'); -const MasonryGrid = require('../../components/masonrygrid/masonrygrid.jsx'); const TitleBanner = require('../../components/title-banner/title-banner.jsx'); -const TTTModal = require('../../components/modal/ttt/modal.jsx'); -const TTTTile = require('../../components/ttt-tile/ttt-tile.jsx'); const Page = require('../../components/page/www/page.jsx'); -const intlShape = require('../../lib/intl-shape'); const render = require('../../lib/render.jsx'); -const Tiles = require('./ttt.json'); +const {useIntl} = require('react-intl'); require('./ideas.scss'); -class Ideas extends React.Component { - constructor (props) { - super(props); - bindAll(this, [ - 'handleShowTTTModal', - 'handleHideTTTModal', - 'renderTiles' - ]); - this.state = { - currentTile: Tiles[0], - TTTModalOpen: false - }; +const tipsSectionData = [ + { + tipImage: { + altTextId: 'ideas.gettingStartedImageDescription', + imageSrc: '/images/ideas/getting-started-illustration.svg' + }, + button: { + href: '/projects/editor/?tutorial=getStarted', + buttonTextId: 'ideas.gettingStartedButtonText' + } + }, + { + tipImage: { + altTextId: 'ideas.seeTutorialsLibraryImageDescription', + imageSrc: '/images/ideas/see-tutorials-library.png' + }, + button: { + href: '/projects/editor/?tutorial=all', + buttonTextId: 'ideas.seeTutorialsLibraryButtonText' + } + }, + { + tipImage: { + altTextId: 'ideas.starterProjectsImageDescription', + imageSrc: '/images/ideas/starter-projects-illustration.svg' + }, + button: { + href: '/starter_projects', + buttonTextId: 'ideas.starterProjectsButton' + } + }, + { + tipImage: { + altTextId: 'ideas.cardsIllustrationDescription', + imageSrc: '/images/ideas/cards-illustration.svg' + }, + button: { + hrefId: 'cards.scratch-cards-allLink', + buttonImageSrc: '/images/ideas/download-icon.svg', + buttonTextId: 'ideas.codingCards' + } } - handleShowTTTModal (tile) { - // expects translated tile - this.setState({ - currentTile: tile, - TTTModalOpen: true - }); - } - handleHideTTTModal () { - this.setState({ - TTTModalOpen: false - }); - } - renderTiles () { - return Tiles.map((tile, key) => { - const translatedTile = { - tutorialUrl: `/projects/editor/?tutorial=${tile.tutorialUrl}`, - modalImage: tile.modalImage, - modalImageDescription: this.props.intl.formatMessage({id: tile.modalImageDescription}), - description: this.props.intl.formatMessage({id: tile.description}), - guideUrl: this.props.intl.formatMessage({id: tile.guideUrl}), - thumbImage: tile.thumbImage, - thumbImageDescription: this.props.intl.formatMessage({id: tile.thumbImageDescription}), - title: this.props.intl.formatMessage({id: tile.title}), - cardsUrl: this.props.intl.formatMessage({id: tile.cardsUrl}) - }; - return ( - { // eslint-disable-line react/jsx-no-bind - this.handleShowTTTModal(translatedTile); - }} - {...translatedTile} - /> - ); - }); +]; + +const physicalIdeasData = [ + { + physicalIdeasImage: { + imageSrc: '/images/ideas/micro-bit.png', + imageClass: 'micro-bit' + }, + physicalIdeasDescription: { + headerId: 'ideas.microBitHeader', + bodyId: 'ideas.microBitBody', + hrefId: 'cards.microbit-cardsLink', + buttonImageSrc: '/images/ideas/download-icon.svg', + buttonTextId: 'ideas.codingCards' + } + }, + { + physicalIdeasImage: { + imageSrc: '/images/ideas/make-board.svg', + imageClass: 'makey-makey-img' + }, + physicalIdeasDescription: { + headerId: 'ideas.makeyMakeyHeader', + bodyId: 'ideas.makeyMakeyBody', + hrefId: 'cards.makeymakey-cardsLink', + buttonImageSrc: '/images/ideas/download-icon.svg', + buttonTextId: 'ideas.codingCards' + } } - render () { - return ( -
-
- -
- {this.props.intl.formatMessage({id: -

- -

- - - -
- -
-
-
- -
+]; + +const Ideas = () => { + const intl = useIntl(); + + return ( +
+ -
-
-
-
-
-

- -

-

- -

-
- - {this.renderTiles()} - - - - - -
+ +
+
+
+
+
-
- +
-
-
-
-
- -
+
+ +
+ + {physicalIdeasData.map((physicalIdea, index) => ( +
{this.props.intl.formatMessage({id: -
-
- -
+ ))} +
-
-
- -
- +
+
+ +
+ +

+ +

+

+ {chunks}}} /> -

- -

-

- {chunks}}} - /> -

-
-
- +
+
+ +

+ +

+

+ {chunks}, + forum: chunks => {chunks} + }} /> -

- -

-

- {chunks}, - forum: chunks => {chunks} - }} - /> -

-
- -
+

+
+
- ); - } -} - -Ideas.propTypes = { - intl: intlShape +
+ ); }; -const WrappedIdeas = injectIntl(Ideas); - render( - , document.getElementById('app')); + + + , + document.getElementById('app') +); diff --git a/src/views/ideas/ideas.scss b/src/views/ideas/ideas.scss index 317c23d0a62..6486ec1b3cc 100644 --- a/src/views/ideas/ideas.scss +++ b/src/views/ideas/ideas.scss @@ -17,127 +17,133 @@ $base-bg: $ui-white; background: bottom left url("/images/ideas/left-juice.png") no-repeat; } -.ttt-section { - display: flex; - margin: 0 auto; - text-align: center; - justify-content: center; - flex-wrap: wrap; - align-items: center; -} - -.tips-divider { - border-top: 1px solid $ui-gray; - width: 100%; -} - -.tips-banner-image { - max-width: calc(100% - 2rem); -} - -.banner-button { - background-color: $ui-white; - color: $ui-aqua; - font-size: 1rem; - - img { - margin-right: 1rem; - height: 1.5rem; - vertical-align: middle; - } - - a { - color: $ui-white; - } - - span { - vertical-align: middle; +.tips { + .inner { + display: flex; + flex-direction: column; + gap: 0.75rem; + + .tips-section { + display: flex; + justify-content: space-between; + + .tip { + display: flex; + flex-direction: column; + + .tips-img { + width: $cols3; + height: 10rem; + } + } + } } } -.ideas-button { - margin-right: .75rem; - background-color: $ui-purple-dark; - color: $ui-white; - font-size: 1rem; +.physical-ideas { + .inner { + display: flex; + flex-direction: column; + gap: 1.5rem; - img { - margin-right: 1rem; - height: 1.5rem; - vertical-align: middle; - } + .physical-ideas-section { + justify-content: space-between; + align-items: flex-start; + gap: 1.5rem; + + .physical-idea { + display: flex; + flex-direction: row; + gap: 1.5rem; + text-align: start; + + .makey-makey-img { + height: 6.5rem; + } + + .micro-bit { + height: 8.5rem; + } + + .physical-idea-description { + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: flex-start; + + p { + margin: 0; + font-size: 1rem; + font-weight: 400; + line-height: 1.5rem; + } + + .tips-button { + width: auto; + padding: 0.75rem; + } + } + } - a { - color: $ui-white; - } + .physical-idea:first-child { + flex: 1.5; + } - span { - vertical-align: middle; + .physical-idea:last-child { + flex: 2; + } + } } } -.wide-button { - width: 100%; -} - -.ideas-all-cards { - padding: 5rem 0 !important; -} - -.ideas-starter { - padding: 5rem 0 !important; -} - -.tips-getting-started { - background-color: $ui-light-gray; - padding-top: 2.5rem; +.tips, .physical-ideas { + display: flex; + justify-content: center; + padding: 3rem 0; + background-color: $gray-50; } -.tips-left { - justify-content: flex-start; -} +.gray-area { + background-color: $ui-gray; -.ideas-image { - margin-right: 2rem; -} + .tips-info-section { + padding: 2.5rem 0; + width: 100%; + flex-wrap: nowrap; -.tips-activity-guides { - background-color: $ui-light-gray; - padding-bottom: 2rem; -} + .tips-info-body { + text-align: left; + } + } -.purchase-button { - img { - margin-right: 0; - margin-left: .75rem; - width: 1rem; - vertical-align: baseline; + img.tips-icon { + height: 1.75rem; } } -.tips-info-section { - padding: 2.5rem 0; - width: 100%; - flex-wrap: nowrap; +.section-header { + font-size: 2rem; + font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif; + font-weight: 700; } -.tips-info-body { - text-align: left; -} +.tips-button { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + gap: 0.5rem; + + font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif; + font-weight: 700; + line-height: 1.25rem; -.tips-cards-buttons { - a { - white-space: normal; - } -} + width: 100%; + padding: 0.5rem 0; -.gray-area { - background-color: $ui-gray; + border-radius: 4px; } -img.tips-icon { - height: 1.75rem; -} //4 columns @media #{$small} { @@ -151,14 +157,7 @@ img.tips-icon { } } - .ttt-head { - - p { - max-width: $cols4; - } - } - - //put the image first if in 4-column + // put the image first if in 4-column .tips-info-body { max-width: $cols4; text-align: center; @@ -187,19 +186,6 @@ img.tips-icon { } } - .ttt-head { - p { - max-width: $cols6; - } - } - - .tips-info-body.tips-illustration { - order: -1; - img { - width: $cols4; - } - } - .tips-info-body { max-width: $cols4; text-align: center; @@ -219,21 +205,21 @@ img.tips-icon { } } - .ttt-head { - p { - max-width: $cols6; - } + .tips-info-body { + max-width: $cols4; } +} - .tips-info-section { - &.mod-align-top { - align-items: flex-start; +@media #{$intermediate-and-smaller}{ + .physical-ideas { + .inner { + .physical-ideas-section { + .physical-idea:first-child { + flex: 2; + } + } } } - - .tips-info-body { - max-width: $cols4; - } } // 12 columns @@ -248,12 +234,6 @@ img.tips-icon { } } - .ttt-head { - p { - max-width: $cols8; - } - } - .tips-info-section { &.mod-align-top { align-items: flex-start; diff --git a/src/views/ideas/l10n-static.json b/src/views/ideas/l10n-static.json index afbec418ad4..2073ceeffd0 100644 --- a/src/views/ideas/l10n-static.json +++ b/src/views/ideas/l10n-static.json @@ -2,6 +2,8 @@ "cards.scratch-cards-allLink": "https://resources.scratch.mit.edu/www/cards/en/scratch-cards-all.pdf", "cards.name-cardsLink": "https://resources.scratch.mit.edu/www/cards/en/name-cards.pdf", "cards.animation-cardsLink": "https://resources.scratch.mit.edu/www/cards/en/animation-cards.pdf", + "cards.microbit-cardsLink": "https://resources.scratch.mit.edu/www/cards/en/microbit-cards.pdf", + "cards.makeymakey-cardsLink": "https://resources.scratch.mit.edu/www/cards/en/makeymakey-cards.pdf", "cards.music-cardsLink": "https://resources.scratch.mit.edu/www/cards/en/music-cards.pdf", "cards.story-cardsLink": "https://resources.scratch.mit.edu/www/cards/en/story-cards.pdf", "cards.chase-cardsLink": "https://resources.scratch.mit.edu/www/cards/en/chase-cards.pdf", diff --git a/src/views/ideas/l10n.json b/src/views/ideas/l10n.json index e105c1dfbaa..af9a4588993 100644 --- a/src/views/ideas/l10n.json +++ b/src/views/ideas/l10n.json @@ -4,7 +4,11 @@ "ideas.headerButtonMessage": "Choose a tutorial", "ideas.gettingStartedTitle": "Getting Started", "ideas.gettingStartedText": "New to Scratch? Try the Getting Started tutorial.", + "ideas.startHereText": "New to Scratch? Stay here!", + "ideas.gettingStartedButtonText": "Try Getting Started Tutorial", + "ideas.seeTutorialsLibraryButtonText": "See Tutorials Library", "ideas.gettingStartedImageDescription": "An illustrated boy plants his flag on top of a freshly painted mountaintop.", + "ideas.seeTutorialsLibraryImageDescription": "An illustration of three tutorial thumbnails.", "ideas.tryIt": "Try it!", "ideas.activityGuidesTitle": "Activity Guides", "ideas.activityGuidesText": "What do you want to make with Scratch? For each activity, you can try the Tutorial, download a set of Coding Cards, or view the Educator Guide.", @@ -37,6 +41,11 @@ "ideas.tryTheTutorial": "Try the tutorial", "ideas.codingCards": "Coding Cards", "ideas.educatorGuide": "Educator Guide", + "ideas.physicalPlayIdeas": "Physical Play Ideas", + "ideas.microBitHeader": "Have a micro:bit?", + "ideas.microBitBody": "Connect your Scratch project to the real world.", + "ideas.makeyMakeyHeader": "Have a MakeyMakey?", + "ideas.makeyMakeyBody": "Turn anything into a key that connects with your Scratch project!", "ideas.desktopEditorHeader": "Scratch App Download", "ideas.desktopEditorBody": "To create projects without an Internet connection, you can download the Scratch app.", "ideas.desktopEditorBodyHTML": "To create projects without an Internet connection, you can download the Scratch app.", diff --git a/static/images/ideas/make-board.svg b/static/images/ideas/make-board.svg new file mode 100644 index 00000000000..e68defc2540 --- /dev/null +++ b/static/images/ideas/make-board.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/ideas/micro-bit.png b/static/images/ideas/micro-bit.png new file mode 100644 index 00000000000..2c9fd4ec55d Binary files /dev/null and b/static/images/ideas/micro-bit.png differ diff --git a/static/images/ideas/see-tutorials-library.png b/static/images/ideas/see-tutorials-library.png new file mode 100644 index 00000000000..5628415aeaf Binary files /dev/null and b/static/images/ideas/see-tutorials-library.png differ