diff --git a/src/views/annual-report/2020/index/annual-report.jsx b/src/views/annual-report/2020/index/annual-report.jsx index 13f5e751f..0f23122aa 100644 --- a/src/views/annual-report/2020/index/annual-report.jsx +++ b/src/views/annual-report/2020/index/annual-report.jsx @@ -17,6 +17,7 @@ const FlexRow = require('../../../../components/flex-row/flex-row.jsx'); const Comment = require('../../../../components/comment/comment.jsx'); const WorldMap = require('../../../../components/world-map/world-map.jsx'); const CountryUsage = require('./country-usage.json'); +const IndiaProjects = require('./india-projects.json'); const PeopleGrid = require('../../../../components/people-grid/people-grid.jsx'); const People = require('./people.json'); const BLMProjects = require('./blm-projects.json'); @@ -745,45 +746,57 @@ class AnnualReport extends React.Component { -
-
+
+

- +

{/* eslint-disable max-len */} -
-
- -
-
+
+
+
+ +

- +

- -

-

- +

+
+ + {/*
+ +
*/} + {/*
+ +
+
+ +
+
+ +
*/} +
-
- - -
+

+ +

+
diff --git a/src/views/annual-report/2020/index/annual-report.scss b/src/views/annual-report/2020/index/annual-report.scss index 66de60f66..a981a9fc2 100644 --- a/src/views/annual-report/2020/index/annual-report.scss +++ b/src/views/annual-report/2020/index/annual-report.scss @@ -828,6 +828,21 @@ p { } } } + &.spotlight{ + padding-left: 30px; + &:before{ + content: ''; + width: 30px; + height: 30px; + background-image: url("/images/annual-report/2020/LightBulb_spotlightstory.svg"); + background-size: contain; + display: inline-block; + margin-right: 10px; + } + &.connectivity{ + background-color: $ui-purple; + } + } } .reach-datapoint { @@ -1121,11 +1136,16 @@ img.comment-viz{ padding: 92px 0; - &.tools { - background-color: $ui-aqua; - background-position: 50% 0%; + &.connectivity { + background-color: $ui-purple; + background-position: 50% 100%; } + // &.tools { + // background-color: $ui-aqua; + // background-position: 50% 0%; + // } + &.community { background-color: $ui-blue; background-position: 50% 50%; @@ -1160,6 +1180,17 @@ img.comment-viz{ } .initiatives-subsection-content { + .content{ + display: flex; + flex-direction: row; + flex-wrap: wrap; + .text{ + width: 50%; + } + .images{ + width: 50%; + } + } .inner { display: flex; flex-direction: column; @@ -1576,24 +1607,14 @@ img.comment-viz{ } } - .initiatives-tools { - .hero { + .initiatives-connectivity { + .content { display: flex; justify-content: space-between; - - .right { - width: 58%; - max-width: 740px; - } - - .left { - width: 42%; - max-width: 520px; - } } .subsection-tag { - background-color: $ui-aqua; + background-color: $ui-purple; @media #{$small} { max-width: 250px; diff --git a/src/views/annual-report/2020/index/india-projects.json b/src/views/annual-report/2020/index/india-projects.json new file mode 100644 index 000000000..50279afe0 --- /dev/null +++ b/src/views/annual-report/2020/index/india-projects.json @@ -0,0 +1,42 @@ +[ + { + "id": 423104626, + "author": { + "id": 61730637, + "username": "-pug_arts-" + }, + "image": "/images/annual-report/2020/connectivity/India_Data/project_diwali.jpg", + "title": "♡ BLM ART! ♡", + "stats": {} + }, + { + "id": 404637877, + "author": { + "id": 60051701, + "username": "-MayThe4thBeWithYou-" + }, + "image": "https://cdn2.scratch.mit.edu/get_image/project/404637877_144x108.png", + "title": "Can't Breathe", + "stats": {} + }, + { + "id": 404286089, + "author": { + "id": 28599090, + "username": "BubbleMint-" + }, + "image": "https://cdn2.scratch.mit.edu/get_image/project/404286089_144x108.png", + "title": "In Memory of George Floyd || ♡", + "stats": {} + }, + { + "id": 408116876, + "author": { + "id": 58796616, + "username": "-bIueberryonthemoon-" + }, + "image": "https://cdn2.scratch.mit.edu/get_image/project/408116876_144x108.png", + "title": "Justice for Breonna Taylor ❤️", + "stats": {} + } +] diff --git a/src/views/annual-report/2020/index/l10n.json b/src/views/annual-report/2020/index/l10n.json index 53717a684..f8b57dd64 100644 --- a/src/views/annual-report/2020/index/l10n.json +++ b/src/views/annual-report/2020/index/l10n.json @@ -72,11 +72,11 @@ "annualReport.globalStrategy": "Global Strategy", "annualReport.connectivityTitle": "Connectivity", - "annualReport.toolsIntro": "We are constantly experimenting and innovating with new technologies and new designs — always striving to provide children with new ways to create, collaborate, and learn.", - "annualReport.toolsSpotlight": "Creative Tools — Spotlight Story", - "annualReport.toolsLaunch": "Launch of Scratch 3.0", - "annualReport.toolsLaunchIntro1": "We designed Scratch 3.0 to expand how, what, and where kids can create with Scratch. Released at the start of 2019, Scratch 3.0 led to a surge of activity in the Scratch community, with more projects — and a greater variety of projects — than ever before.", - "annualReport.toolsLaunchIntro2": "Scratch 3.0 includes a library of extensions — extra collections of coding blocks that add new capabilities to Scratch. Some extensions provide access to web services and other software features, while others connect Scratch with physical-world devices like motors and sensors.", + "annualReport.connectivityIntro": "While young people were isolated inside of their homes due to COVID-19, Scratch offered an opportunity for them to connect and create with faraway friends, classmates, and family members. It also served as a portal to the outside world, where they discovered that millions of kids across countries and continents were experiencing the same things they were.", + "annualReport.spotlightStory": "Spotlight Story", + "annualReport.connectivityIndia": "Scratch in India", + "annualReport.connectivityIndiaIntro": "In India, the COVID-19 pandemic took an enormous toll and kept many young people and families isolated inside for long stretches.", + "annualReport.connectivityIndiaParagraph": "Across the entire global Scratch community, we saw a huge spike in activity beginning in March 2020. Nowhere was this sudden spike more evident than in India, where the COVID-19 pandemic took an enormous toll and kept many young people and families isolated inside for long stretches of time. Through Scratch, kids in India found connection by creating and sharing 602% more projects than the year before.", "annualReport.toolsTexttoSpeech": "Text-to-Speech", "annualReport.toolsTexttoSpeechIntro": "With the Text-to-Speech extension, kids can program their Scratch characters to speak out loud, in a variety of different voices.", "annualReport.toolsNumProjects": "330,000+", diff --git a/static/images/annual-report/2020/Symbols-UI/LightBulb_spotlightstory.svg b/static/images/annual-report/2020/Symbols-UI/LightBulb_spotlightstory.svg index d4cd845d4..5a502ad69 100644 --- a/static/images/annual-report/2020/Symbols-UI/LightBulb_spotlightstory.svg +++ b/static/images/annual-report/2020/Symbols-UI/LightBulb_spotlightstory.svg @@ -1,3 +1,3 @@ - + \ No newline at end of file diff --git a/static/images/annual-report/2020/connectivity/India Data /avatar_Furby_Mobile.png b/static/images/annual-report/2020/connectivity/India_Data/avatar_Furby_Mobile.png similarity index 100% rename from static/images/annual-report/2020/connectivity/India Data /avatar_Furby_Mobile.png rename to static/images/annual-report/2020/connectivity/India_Data/avatar_Furby_Mobile.png diff --git a/static/images/annual-report/2020/connectivity/India Data /avatar_animationskills.png b/static/images/annual-report/2020/connectivity/India_Data/avatar_animationskills.png similarity index 100% rename from static/images/annual-report/2020/connectivity/India Data /avatar_animationskills.png rename to static/images/annual-report/2020/connectivity/India_Data/avatar_animationskills.png diff --git a/static/images/annual-report/2020/connectivity/India Data /avatar_mGR8T.png b/static/images/annual-report/2020/connectivity/India_Data/avatar_mGR8T.png similarity index 100% rename from static/images/annual-report/2020/connectivity/India Data /avatar_mGR8T.png rename to static/images/annual-report/2020/connectivity/India_Data/avatar_mGR8T.png diff --git a/static/images/annual-report/2020/connectivity/India Data /avatar_sachiaar.png b/static/images/annual-report/2020/connectivity/India_Data/avatar_sachiaar.png similarity index 100% rename from static/images/annual-report/2020/connectivity/India Data /avatar_sachiaar.png rename to static/images/annual-report/2020/connectivity/India_Data/avatar_sachiaar.png diff --git a/static/images/annual-report/2020/connectivity/India Data /data_alltimeusers_graphic.svg b/static/images/annual-report/2020/connectivity/India_Data/data_alltimeusers_graphic.svg similarity index 100% rename from static/images/annual-report/2020/connectivity/India Data /data_alltimeusers_graphic.svg rename to static/images/annual-report/2020/connectivity/India_Data/data_alltimeusers_graphic.svg diff --git a/static/images/annual-report/2020/connectivity/India Data /data_projectscreatedonline_graphic.svg b/static/images/annual-report/2020/connectivity/India_Data/data_projectscreatedonline_graphic.svg similarity index 100% rename from static/images/annual-report/2020/connectivity/India Data /data_projectscreatedonline_graphic.svg rename to static/images/annual-report/2020/connectivity/India_Data/data_projectscreatedonline_graphic.svg diff --git a/static/images/annual-report/2020/connectivity/India Data /project_diwali.jpg b/static/images/annual-report/2020/connectivity/India_Data/project_diwali.jpg similarity index 100% rename from static/images/annual-report/2020/connectivity/India Data /project_diwali.jpg rename to static/images/annual-report/2020/connectivity/India_Data/project_diwali.jpg diff --git a/static/images/annual-report/2020/connectivity/India Data /project_flute.jpg b/static/images/annual-report/2020/connectivity/India_Data/project_flute.jpg similarity index 100% rename from static/images/annual-report/2020/connectivity/India Data /project_flute.jpg rename to static/images/annual-report/2020/connectivity/India_Data/project_flute.jpg diff --git a/static/images/annual-report/2020/connectivity/India Data /project_hindinews.jpg b/static/images/annual-report/2020/connectivity/India_Data/project_hindinews.jpg similarity index 100% rename from static/images/annual-report/2020/connectivity/India Data /project_hindinews.jpg rename to static/images/annual-report/2020/connectivity/India_Data/project_hindinews.jpg diff --git a/static/images/annual-report/2020/connectivity/India Data /project_proudtobeanindian.jpg b/static/images/annual-report/2020/connectivity/India_Data/project_proudtobeanindian.jpg similarity index 100% rename from static/images/annual-report/2020/connectivity/India Data /project_proudtobeanindian.jpg rename to static/images/annual-report/2020/connectivity/India_Data/project_proudtobeanindian.jpg