diff --git a/src/views/annual-report/annual-report.jsx b/src/views/annual-report/annual-report.jsx index d8b83ff6c..9aecb322c 100644 --- a/src/views/annual-report/annual-report.jsx +++ b/src/views/annual-report/annual-report.jsx @@ -10,7 +10,9 @@ const intlShape = require('react-intl').intlShape; const render = require('../../lib/render.jsx'); const frameless = require('../../lib/frameless'); +const Avatar = require('../../components/avatar/avatar.jsx'); const Page = require('../../components/page/www/page.jsx'); +const Grid = require('../../components/grid/grid.jsx'); const Button = require('../../components/forms/button.jsx'); const FlexRow = require('../../components/flex-row/flex-row.jsx'); const Comment = require('../../components/comment/comment.jsx'); @@ -18,6 +20,7 @@ const WorldMap = require('../../components/world-map/world-map.jsx'); const CountryUsage = require('./country-usage.json'); const PeopleGrid = require('../../components/people-grid/people-grid.jsx'); const People = require('./people.json'); +const BLMProjects = require('./blm-projects.json'); require('./annual-report.scss'); @@ -761,7 +764,7 @@ class AnnualReport extends React.Component {

- +

@@ -776,7 +779,7 @@ class AnnualReport extends React.Component {

- +

    @@ -803,23 +806,173 @@ class AnnualReport extends React.Component {
-
-

- -

+
+
+

+ +

+

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

+
+
+

+ +

+

+ +

+
+
+ + + + +

+ +

+
+
+ + + + +

+ +

+
+
+ + + + +

+ +

+
+
+ + + + +

+ +

+
+
+
+
+ +
+
+
+
+ +
angelical
+
+ +
+
+
+ +
dlore2009
+
+ +
+
+
+ +
qood
+
+ +
+
+
+ +
Mechanical_pencil
+
+ +
+
+
+ +
+
+
+

Black Lives Matter

- + BLMStudioLink: ( + + Black Lives Matter ) - }} + }} />

+
+ + + + +
+
+ +
+
+

+ +

+

+ +

+
diff --git a/src/views/annual-report/annual-report.scss b/src/views/annual-report/annual-report.scss index de72bb74d..b80ab1e58 100644 --- a/src/views/annual-report/annual-report.scss +++ b/src/views/annual-report/annual-report.scss @@ -525,8 +525,21 @@ p { } } - .initiatives-community { + .quote-person { + display: flex; + align-items: center; + font-weight: bold; + img { + width: 60px; + height: 60px; + border-radius: 4px; + margin-right: 20px; + } + } + + .initiatives-community { + .hero { width: 100%; } @@ -558,6 +571,57 @@ p { vertical-align: middle; } } + + .community-engagement { + max-width: 620px; + } + + .community-sds { + text-align: center; + + .sds-list { + display: flex; + justify-content: center; + flex-wrap: wrap; + + .sds-tile { + width: 200px; + text-align: center; + margin: 8px; + + img { + width: 100%; + border-radius: 8px; + } + } + } + } + + .quotes-tag, .blm-tag { + align-self: flex-start; + } + + .community-quotes { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + + .community-quote { + width: 380px; + margin: 24px; + + .comment-text { + background-color: $ui-blue; + white-space: pre-line; + margin-top: 8px; + + p { + color: $ui-white; + line-height: 40px; + } + } + } + } } .community-team-intro { diff --git a/src/views/annual-report/blm-projects.json b/src/views/annual-report/blm-projects.json new file mode 100644 index 000000000..d00446a40 --- /dev/null +++ b/src/views/annual-report/blm-projects.json @@ -0,0 +1,42 @@ +[ + { + "id": 423104626, + "author": { + "id": 61730637, + "username": "-pug_arts-" + }, + "image": "https://cdn2.scratch.mit.edu/get_image/project/423104626_144x108.png", + "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": {} + } +] \ No newline at end of file diff --git a/src/views/annual-report/l10n.json b/src/views/annual-report/l10n.json index 4a7bf274d..fd70bac6a 100644 --- a/src/views/annual-report/l10n.json +++ b/src/views/annual-report/l10n.json @@ -77,6 +77,26 @@ "annualReport.communityEngagementTitle": "Community Engagement", "annualReport.storySwap": "Story Swap", "annualReport.communityEngagementInfo": "Another major role of the Community Team is to highlight and develop opportunities for young people to express their ideas and become engaged in positive ways. The team features projects and studios from community members to serve as inspiration, and it regularly posts Scratch Design Studios to encourage creative activity. Each summer, the team organizes an online Scratch Camp: the theme in 2019 was {storySwapLink}, with Scratchers building on one another’s stories.", + "annualReport.communitySDSTitle": "Scratch Design Studios", + "annualReport.communitySDSInfo": "Some Scratch Design Studios from 2019:", + "annualReport.communityDayintheLife": "Day in the Life", + "annualReport.communityDayintheLifeInfo": "Create a project about a day in the life of something", + "annualReport.communityYear3000": "Year 3000", + "annualReport.communityYear3000Info": "What might life be like in the year 3000?", + "annualReport.communityBounce": "Bounce", + "annualReport.communityBounceInfo": "Create a project that involves bouncing, jumping, boinging, or hopping.", + "annualReport.communityMonochromatic": "Monochromatic", + "annualReport.communityMonochromaticInfo": "How would things look if there were only one color?", + "annualReport.communityQuotes": "Community — Quotes", + "annualReport.communityQuote1": "I joined Scratch when I was 11 years old and the things I learned from using the platform and interacting with the community were really a vital part of my learning growing up.", + "annualReport.communityQuote2": "Scratch has allowed me to do things from home, like \n- Respect people and their projects\n- Make friends\n- Feel that I am not alone in this quarantine\n....and much more, so I want to say \n¡GRACIAS!", + "annualReport.communityQuote3": "I've been on Scratch for about 2 years, and it's been a life-changing experience! I've learned so many new things, such as coding, online etiquette, and art!", + "annualReport.communityQuote4": "Scratch was my favorite hobby in sixth grade. It secretly introduced me to Boolean logic, order of operations, and nested mathematical expressions—not to mention computer programming itself.", + "annualReport.studio": "studio", + "annualReport.communityBLMIntro": "As racial justice protests swept the United States after the tragic killings of George Floyd, Breonna Taylor, Ahmaud Arbery, and others in early 2020, many young people used Scratch as a way to express their support for the Black Lives Matter movement, creating projects and posting comments to speak out against racism and police violence. In a {BLMStudioLink} featured on the Scratch home page, Scratchers contributed hundreds of projects and thousands of comments. The Scratch Community Team was actively involved, to support Scratchers during a traumatic time and to ensure that all projects and conversations remained respectful.", + "annualReport.communityArtwork": "Artwork by the Scratcher OnionDipAnimations", + "annualReport.communityChangeTitle": "We see young people as agents of change.", + "annualReport.communityChangeInfo": "We are committed to working with them, and with the educators and families who support them, to ensure that they develop the skills, the motivation, and the confidence they’ll need to lead fulfilling lives and bring about meaningful change in society.", "annualReport.financialsTitle": "Financials - 2019", "annualReport.financialsRevenue": "Revenues", diff --git a/static/images/annual-report/initiatives/BLM Hero.svg b/static/images/annual-report/initiatives/BLM Hero.svg new file mode 100644 index 000000000..077ccfc75 --- /dev/null +++ b/static/images/annual-report/initiatives/BLM Hero.svg @@ -0,0 +1,23 @@ + + + BLM Hero + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/static/images/annual-report/initiatives/BLM Video Splash.svg b/static/images/annual-report/initiatives/BLM Video Splash.svg new file mode 100644 index 000000000..41b7c59e7 --- /dev/null +++ b/static/images/annual-report/initiatives/BLM Video Splash.svg @@ -0,0 +1,7 @@ + + + BLM Video Splash + + + + \ No newline at end of file diff --git a/static/images/annual-report/initiatives/BLM Video Thumbnail.png b/static/images/annual-report/initiatives/BLM Video Thumbnail.png new file mode 100644 index 000000000..2c09a43ee Binary files /dev/null and b/static/images/annual-report/initiatives/BLM Video Thumbnail.png differ diff --git a/static/images/annual-report/initiatives/Bounce Thumbnail.png b/static/images/annual-report/initiatives/Bounce Thumbnail.png new file mode 100644 index 000000000..d90877b68 Binary files /dev/null and b/static/images/annual-report/initiatives/Bounce Thumbnail.png differ diff --git a/static/images/annual-report/initiatives/Day in the Life Thumbnail.png b/static/images/annual-report/initiatives/Day in the Life Thumbnail.png new file mode 100644 index 000000000..20845f82a Binary files /dev/null and b/static/images/annual-report/initiatives/Day in the Life Thumbnail.png differ diff --git a/static/images/annual-report/initiatives/Monochromatic Thumbnail.png b/static/images/annual-report/initiatives/Monochromatic Thumbnail.png new file mode 100644 index 000000000..63182b8b6 Binary files /dev/null and b/static/images/annual-report/initiatives/Monochromatic Thumbnail.png differ diff --git a/static/images/annual-report/initiatives/Year 3000 Thumbnail.png b/static/images/annual-report/initiatives/Year 3000 Thumbnail.png new file mode 100644 index 000000000..af3f0770b Binary files /dev/null and b/static/images/annual-report/initiatives/Year 3000 Thumbnail.png differ