diff --git a/src/components/annual-report-example/annual-report-example.jsx b/src/components/annual-report-example/annual-report-example.jsx new file mode 100644 index 000000000..d50e5f58d --- /dev/null +++ b/src/components/annual-report-example/annual-report-example.jsx @@ -0,0 +1,39 @@ +const classNames = require('classnames'); +const PropTypes = require('prop-types'); +const React = require('react'); + + +require('./annual-report-example.scss'); + +const AnnualReportExample = props => ( +
+ {props.className === 'regular' && +
+ +
+ } +
+
{props.title}
+

{props.paragraph}

+
+ {props.className === 'reverse' && +
+ +
+ } + {props.className === 'full-width' && +
+ +
+ } +
+); + +AnnualReportExample.propTypes = { + title: PropTypes.string, + paragraph: PropTypes.string, + large_image: PropTypes.string, + className: PropTypes.string +}; + +module.exports = AnnualReportExample; diff --git a/src/components/annual-report-example/annual-report-example.scss b/src/components/annual-report-example/annual-report-example.scss new file mode 100644 index 000000000..c13f568ab --- /dev/null +++ b/src/components/annual-report-example/annual-report-example.scss @@ -0,0 +1,39 @@ +@import "../../frameless"; + +.annual-report-example{ + display: flex; + align-items: center; + justify-content: space-around; + margin: 30px 0; + @media #{$intermediate-and-smaller} { + flex-direction: column; + } + &.reverse{ + @media #{$intermediate-and-smaller} { + flex-direction: column-reverse; + } + } + .half{ + max-width: 330px; + width: 100%; + img.large{ + max-width: 350px; + width: 100%; + } + } + p{ + font-size: 14px; + text-align: left; + } + &.full-width{ + flex-direction: column; + max-width: 600px; + margin: auto; + .half{ + max-width: 100%; + img.large{ + max-width: 100%; + } + } + } +} \ No newline at end of file diff --git a/src/views/annual-report/2020/index/annual-report.jsx b/src/views/annual-report/2020/index/annual-report.jsx index 4ef8f2e0e..1e9cda8b4 100644 --- a/src/views/annual-report/2020/index/annual-report.jsx +++ b/src/views/annual-report/2020/index/annual-report.jsx @@ -16,6 +16,7 @@ const Button = require('../../../../components/forms/button.jsx'); const FlexRow = require('../../../../components/flex-row/flex-row.jsx'); const Comment = require('../../../../components/comment/comment.jsx'); const CountryBlurb = require('../../../../components/country-blurb/country-blurb.jsx'); +const AnnualReportExample = require('../../../../components/annual-report-example/annual-report-example.jsx'); const WorldMap = require('../../../../components/world-map/world-map.jsx'); const CountryUsage = require('./country-usage.json'); const IndiaProjects = require('./india-projects.json'); @@ -951,154 +952,48 @@ class AnnualReport extends React.Component { )} large_image="/images/annual-report/2020/connectivity/Scratch Around the World/Raspberry Pi graphic.svg" /> - -
-

- -

-

- +

+

+ +

+

+ +

+

+

-
- - - - -
-
-
- - - - ) - }} - /> -
-
- - - - ) - }} - /> -
-
-
-
-

- -

-

- - - - ), - raspberryLink: ( - - - - ) - }} - /> -

-
- -
-
-
- -
-
-
-

- -

-

- -

-
- -
-
-
-
-
- - - - - - - - - -
-
-
-
-
- -
Abhi
-
- + + +
diff --git a/src/views/annual-report/2020/index/annual-report.scss b/src/views/annual-report/2020/index/annual-report.scss index 2c4f3f62c..3c990ac02 100644 --- a/src/views/annual-report/2020/index/annual-report.scss +++ b/src/views/annual-report/2020/index/annual-report.scss @@ -1266,7 +1266,7 @@ img.comment-viz{ text-align: center; margin: 35px auto; } - .world{ + .world, .resources{ text-align: center; margin-top: 80px; .bubble{ @@ -1290,6 +1290,11 @@ img.comment-viz{ } } } + .resources{ + max-width: 600px; + width: 100%; + margin: auto; + } .inner { display: flex; flex-direction: column; @@ -1318,9 +1323,9 @@ img.comment-viz{ // justify-content: space-between; // align-content: center; max-width: 780px; - margin-top: 80px; + width: 100%; + margin-top: 50px; } - } .conferences-hero-and-caption { diff --git a/src/views/annual-report/2020/index/l10n.json b/src/views/annual-report/2020/index/l10n.json index d9dc05475..7b0b0f532 100644 --- a/src/views/annual-report/2020/index/l10n.json +++ b/src/views/annual-report/2020/index/l10n.json @@ -110,34 +110,18 @@ "annualReport.connectivityCountryUSA": "USA", "annualReport.connectivityCountryUSAParagraph": "Raspberry Pi works to put the power of computing and digital making into the hands of people all over the world. Through their Making at Home initiative, they lead livestream events that encouraged families and young people to learn and create together. Several of these livestreams featured Scratch tutorials—and sometimes, even Scratch Team members!", - "annualReport.toolsCollabAWS": "Collaboration with Amazon Web Services", - "annualReport.toolsTranslate": "Translate", - "annualReport.toolsTranslateIntro": "With the Translate extension, built on the Google Translate API, kids can incorporate automatic translation into their projects, supporting language learning and global communication.", - "annualReport.toolsNumLanguages": "50+", - "annualReport.toolsTranslateLanguages": "{numLanguages} languages translated in the extension", - "annualReport.toolsSupportsLiteracy": "Supports Literacy", - "annualReport.toolsCSandLanguageArts": "computer science and language arts", - "annualReport.toolsTranslateLiteracy": "{supportsLiteracy} across {CSandLanguageArtsLink}", - "annualReport.toolsCollabGoogle": "Collaboration with Google", - "annualReport.toolsPhysicalWorld": "Physical World Connections", - "annualReport.toolsMindstormsLink": "LEGO Mindstorms EV3", - "annualReport.toolsWeDoLink": "WeDo 2.0", - "annualReport.toolsLEGORoboticsIntro": "Students can create dancing robots, interactive sculptures, and data-collection experiments using Scratch with LEGO robotics kits. The new LEGO Education SPIKE Prime Set features an app based on Scratch. In addition, Scratch extensions are available for {mindstormsLink} and {weDoLink}.", - "annualReport.toolsCollabLEGO": "Collaboration with LEGO Education", - "annualReport.toolsVideoTutorials": "Video Tutorials", - "annualReport.toolsTutorialsIntro": "Scratch 3.0 introduced a diverse collection of video tutorials to help kids get started with Scratch. The tutorials are open-ended and designed to encourage students to experiment, follow their interests, and express their own ideas.", - "annualReport.toolsNumTutorials": "25 new tutorials", - "annualReport.toolsNewTutorials": "{numTutorials} available in Scratch 3.0", - "annualReport.toolsNumViews": "23 million", - "annualReport.toolsTutorialsViews": "{numViews} views in 2019", - "annualReport.toolsApp": "Scratch App Supports Learning Offline", - "annualReport.toolsDownloadLink": "downloadable app", - "annualReport.toolsRaspberryLink": "use on Raspberry Pi 4", - "annualReport.toolsAppIntro": "During 2019, the Scratch Team released Scratch 3.0 as a {downloadableLink} for use on multiple platforms, including Windows, MacOS, ChromeOS, and Android tablets. In addition, the Raspberry Pi Foundation released Scratch 3.0 for {raspberryLink}. These downloadable versions are especially important for millions of learners in areas where internet connectivity is unavailable or unreliable.", - "annualReport.toolsAbhiTitle": "Abhi at Cartoon Network", - "annualReport.toolsAbhiIntro": "To highlight what kids can do with Scratch 3.0, we collaborated with Cartoon Network to create a video featuring Abhi, a 12-year-old Scratcher who loves to make animations and games. In the video, Abhi meets with Ian Jones-Quartey, creator of OK K.O. and other Cartoon Network shows. Abhi introduces Ian to key features of the new version of Scratch, and together they draw and program an animation of a Cartoon Network character jumping up and down.", - "annualReport.toolsAbhiQuote": "My favorite thing about Scratch is the community, because they are nice and helpful to me. That’s why I’m always happy to share every project that’s in my dreams.", + "annualReport.connectivityResources": "Resources", + "annualReport.connectivityResourcesSubtitle": "Localizing with Support from the LEGO Foundation", + "annualReport.connectivityResourcesParagraph": "To support our glowing global reach and aid our COVID-19 response, the LEGO Foundation supported Scratch with a generous grant. With this funding, we were able to localize key resources and reach even more young people around the world.", + "annualReport.connectivityExample1Title": "Tutorial Images", + "annualReport.connectivityExample1Paragraph": "We created translations of the images for 25 Scratch tutorials in 12 languages—totalling over 1,000 new images!", + + "annualReport.connectivityExample2Title": "Gettting Started with Scratch", + "annualReport.connectivityExample2Paragraph": "The Getting Started with Scratch video is the most highly accessed and viewed Scratch tutorial video, greeting new Scratchers when they first join the site. We were able to translate this video into 25 new languages and to update the 3 previous translations, including visuals, voiceovers, and subtitles.", + + "annualReport.connectivityExample3Title": "Scratch Editor", + "annualReport.connectivityExample3Paragraph": "The Scratch project editor is the most essential Scratch resource. We worked with a South African translation company that specializes in culturally-relevant educational translation to translate and review the Scratch editor in five South African languages: isiZulu, isiXhosa, Afrikaans, Sestwana, and Sepedi.", "annualReport.adaptationTitle": "Adaptation", "annualReport.schoolsIntro": "We provide programs and resources to support teachers and students in schools around the world, designed to achieve equity in creative computing experiences, based on projects, passion, peers, and play.",