From 537704cf8986fa2fee3163821f31f437e4002aee Mon Sep 17 00:00:00 2001 From: caseymm Date: Mon, 4 Oct 2021 14:10:15 -0700 Subject: [PATCH] india css --- .../2020/index/annual-report.jsx | 161 +++++------------- .../2020/index/annual-report.scss | 61 ++++++- .../2020/index/india-projects.json | 38 ++--- src/views/annual-report/2020/index/l10n.json | 9 +- .../2020/Symbols-UI/Arrow_up_purple.svg | 3 + 5 files changed, 122 insertions(+), 150 deletions(-) create mode 100644 static/images/annual-report/2020/Symbols-UI/Arrow_up_purple.svg diff --git a/src/views/annual-report/2020/index/annual-report.jsx b/src/views/annual-report/2020/index/annual-report.jsx index 0f23122aa..b27ebf087 100644 --- a/src/views/annual-report/2020/index/annual-report.jsx +++ b/src/views/annual-report/2020/index/annual-report.jsx @@ -757,131 +757,54 @@ class AnnualReport extends React.Component {

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

- -

-

- -

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

- -

-
-
-
- -

- -

-

- +

+
+
+ +
+

+ +

+

+

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

+ +

+
+ +
+

+ + + + ) + }} + /> +

- +

-

- -

-
-
- - - - ) - }} - /> -
-
- - - - ), - CSandLanguageArtsLink: ( - - - - ) - }} - /> -
-
-
- +
+
diff --git a/src/views/annual-report/2020/index/annual-report.scss b/src/views/annual-report/2020/index/annual-report.scss index a981a9fc2..5ca7ebad1 100644 --- a/src/views/annual-report/2020/index/annual-report.scss +++ b/src/views/annual-report/2020/index/annual-report.scss @@ -829,12 +829,12 @@ p { } } &.spotlight{ - padding-left: 30px; + padding: 10px 6px; &:before{ content: ''; - width: 30px; - height: 30px; - background-image: url("/images/annual-report/2020/LightBulb_spotlightstory.svg"); + width: 25px; + height: 25px; + background-image: url("/images/annual-report/2020/Symbols-UI/LightBulb_spotlightstory.svg"); background-size: contain; display: inline-block; margin-right: 10px; @@ -1179,17 +1179,64 @@ img.comment-viz{ } } - .initiatives-subsection-content { + .initiatives-subsection-content.connectivity{ .content{ display: flex; flex-direction: row; flex-wrap: wrap; + align-items: center; + width: 100%; + &.around{ + justify-content: space-around; + } + @media #{$intermediate} { + flex-direction: column; + } .text{ - width: 50%; + width: 390px; + .larger{ + font-size: 1.25rem; + line-height: 2.5rem; + } } .images{ - width: 50%; + .flex-row{ + max-width: 500px; + @media #{$intermediate} { + justify-content: space-around; + } + } } + .india-numbers{ + max-width: 300px; + text-align: center; + .bubble{ + margin-left: auto; + } + } + } + .bubble{ + margin-left: 0px; + color: $ui-white; + font-weight: bold; + @media #{$intermediate} { + margin-left: auto; + } + &.inverted{ + border: 2.5px solid $ui-purple; + background-color: $ui-white; + color: $ui-purple; + span{ + &:before{ + background: url("/images/annual-report/2020/Symbols-UI/Arrow_up_purple.svg"); + } + } + } + } + .about-breaker{ + max-width: 90%; + text-align: center; + margin: 35px auto; } .inner { display: flex; diff --git a/src/views/annual-report/2020/index/india-projects.json b/src/views/annual-report/2020/index/india-projects.json index 50279afe0..398b3ab56 100644 --- a/src/views/annual-report/2020/index/india-projects.json +++ b/src/views/annual-report/2020/index/india-projects.json @@ -1,42 +1,42 @@ [ { - "id": 423104626, + "id": 442111363, "author": { - "id": 61730637, - "username": "-pug_arts-" + "id": "sachiaar", + "username": "sachiaar" }, "image": "/images/annual-report/2020/connectivity/India_Data/project_diwali.jpg", - "title": "♡ BLM ART! ♡", + "title": "Virtual Crackers", "stats": {} }, { - "id": 404637877, + "id": 400075701, "author": { - "id": 60051701, - "username": "-MayThe4thBeWithYou-" + "id": "sachiaar", + "username": "Furby_Mobile" }, - "image": "https://cdn2.scratch.mit.edu/get_image/project/404637877_144x108.png", - "title": "Can't Breathe", + "image": "/images/annual-report/2020/connectivity/India_Data/project_hindinews.jpg", + "title": "hindi news: बिल्ली ने चोरी की फोन!", "stats": {} }, { - "id": 404286089, + "id": 381920517, "author": { - "id": 28599090, - "username": "BubbleMint-" + "id": "sachiaar", + "username": "animationskills" }, - "image": "https://cdn2.scratch.mit.edu/get_image/project/404286089_144x108.png", - "title": "In Memory of George Floyd || ♡", + "image": "/images/annual-report/2020/connectivity/India_Data/project_proudtobeanindian.jpg", + "title": "proud to be an indian", "stats": {} }, { - "id": 408116876, + "id": 420856183, "author": { - "id": 58796616, - "username": "-bIueberryonthemoon-" + "id": "sachiaar", + "username": "mGR8T" }, - "image": "https://cdn2.scratch.mit.edu/get_image/project/408116876_144x108.png", - "title": "Justice for Breonna Taylor ❤️", + "image": "/images/annual-report/2020/connectivity/India_Data/project_flute.jpg", + "title": "practice basic flute notes", "stats": {} } ] diff --git a/src/views/annual-report/2020/index/l10n.json b/src/views/annual-report/2020/index/l10n.json index f8b57dd64..b3d627551 100644 --- a/src/views/annual-report/2020/index/l10n.json +++ b/src/views/annual-report/2020/index/l10n.json @@ -64,7 +64,7 @@ "annualReport.reachScratchJrBlurb": "ScratchJr is an introductory programming environment that enables young children (ages 5-7) to create their own interactive stories and games.", "annualReport.reachDownloadsMillion": "3 {million}", "annualReport.reachDownloads": "Downloads in 2020", - "annualReport.reachDownloadsIncrease": "2 million from 2019", + "annualReport.reachDownloadsIncrease": "2 {million} from 2019", "annualReport.themesTitle": "Emerging Themes", "annualReport.themesDescription": "As young people faced the unprecedented challenges of COVID-19, Scratch became a more important place than ever for them to connect, create, and express themselves. Throughout the year, our work was focused on three areas to best support our growing global community: connectivity, adaptation, and community. As always, our efforts were grounded in our commitment to equity and inclusion.", @@ -77,10 +77,9 @@ "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+", - "annualReport.toolsTexttoSpeechProjects": "{numProjects} projects in 2019 used Text-to-Speech", + "annualReport.connectivityIndiaProjectsNumber": "2.3 {million}", + "annualReport.connectivityIndiaProjectsSubhead": "Projects Were Created Online in 2020", + "annualReport.connectivityIndiaProjectsIncreasePercent": "602% from 2019", "annualReport.toolsMostPopular": "Most Popular", "annualReport.toolsTexttoSpeechPopular": "{mostPopular} new Scratch Extension in the community", "annualReport.toolsCollabAWS": "Collaboration with Amazon Web Services", diff --git a/static/images/annual-report/2020/Symbols-UI/Arrow_up_purple.svg b/static/images/annual-report/2020/Symbols-UI/Arrow_up_purple.svg new file mode 100644 index 000000000..c77d5463e --- /dev/null +++ b/static/images/annual-report/2020/Symbols-UI/Arrow_up_purple.svg @@ -0,0 +1,3 @@ + + +