Skip to content

GitLab

S
scratch-www
Commit 971f19b3 authored by seotts's avatar seotts Committed by Karishma Chadha
Browse files
Options

continued work on community section

parent 712004ff
Show whitespace changes
Inline Side-by-side
Showing with 321 additions and 12 deletions
src/views/annual-report/annual-report.jsx
View file @ 971f19b3
......@@ -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 {
<FormattedMessage id="annualReport.communityTeamIntro2" />
</p>
</div>
<img src="/images/annual-report/initiatives/community-hero.png" />
<img className="hero" src="/images/annual-report/initiatives/community-hero.png" />
<div className="moderation-and-guidelines">
<div className="community-moderation">
<h4>
......@@ -776,7 +779,7 @@ class AnnualReport extends React.Component {
<FormattedMessage id="annualReport.communityGuidelinesTitle" />
</h4>
<p>
<FormattedMessage id="annualReport.communityGuidelinesInfo" />
</p>
<div className="guidelines-list">
<ul>
......@@ -803,7 +806,8 @@ class AnnualReport extends React.Component {
</ul>
</div>
</div>
<div className="communityEngagement">
</div>
<div className="community-engagement">
<h4>
<FormattedMessage id="annualReport.communityEngagementTitle" />
</h4>
......@@ -820,6 +824,155 @@ class AnnualReport extends React.Component {
/>
</p>
</div>
<div className="community-sds">
<h3>
<FormattedMessage id="annualReport.communitySDSTitle" />
</h3>
<p>
<FormattedMessage id="annualReport.communitySDSInfo" />
</p>
<div className="sds-list">
<div className="sds-tile">
<a href="studios/6234813/">
<img
src="/images/annual-report/initiatives/Day in the Life Thumbnail.png"
/>
<FormattedMessage id="annualReport.communityDayintheLife" />
</a>
<p>
<FormattedMessage id="annualReport.communityDayintheLifeInfo" />
</p>
</div>
<div className="sds-tile">
<a href="studios/5801323/">
<img
src="/images/annual-report/initiatives/Year 3000 Thumbnail.png"
/>
<FormattedMessage id="annualReport.communityYear3000" />
</a>
<p>
<FormattedMessage id="annualReport.communityYear3000Info" />
</p>
</div>
<div className="sds-tile">
<a href="studios/5702799/">
<img
src="/images/annual-report/initiatives/Bounce Thumbnail.png"
/>
<FormattedMessage id="annualReport.communityBounce" />
</a>
<p>
<FormattedMessage id="annualReport.communityBounceInfo" />
</p>
</div>
<div className="sds-tile">
<a href="studios/5944573/">
<img
src="/images/annual-report/initiatives/Monochromatic Thumbnail.png"
/>
<FormattedMessage id="annualReport.communityMonochromatic" />
</a>
<p>
<FormattedMessage id="annualReport.communityMonochromaticInfo" />
</p>
</div>
</div>
</div>
<div className="subsection-tag quotes-tag">
<FormattedMessage id="annualReport.communityQuotes" />
</div>
<div className="community-quotes">
<div className="community-quote">
<div className="quote-person">
<Avatar
alt=""
src="https://cdn.scratch.mit.edu/get_image/user/36591_80x80.png"
/>
<div>angelical</div>
</div>
<Comment
comment={this.props.intl.formatMessage({id: 'annualReport.communityQuote1'})}
/>
</div>
<div className="community-quote">
<div className="quote-person">
<Avatar
alt=""
src="https://cdn.scratch.mit.edu/get_image/user/61442584_80x80.png"
/>
<div>dlore2009</div>
</div>
<Comment
comment={this.props.intl.formatMessage({id: 'annualReport.communityQuote2'})}
/>
</div>
<div className="community-quote">
<div className="quote-person">
<Avatar
alt=""
src="https://cdn.scratch.mit.edu/get_image/user/56150500_80x80.png"
/>
<div>qood</div>
</div>
<Comment
comment={this.props.intl.formatMessage({id: 'annualReport.communityQuote3'})}
/>
</div>
<div className="community-quote">
<div className="quote-person">
<Avatar
alt=""
src="https://cdn.scratch.mit.edu/get_image/user/176301_80x80.png"
/>
<div>Mechanical_pencil</div>
</div>
<Comment
comment={this.props.intl.formatMessage({id: 'annualReport.communityQuote4'})}
/>
</div>
</div>
<div className="subsection-tag blm-tag">
<FormattedMessage id="annualReport.communitySpotlight" />
</div>
<div className="community-blm">
<div>
<h2>Black Lives Matter</h2>
<p>
<FormattedMessage
id="annualReport.communityBLMIntro"
values={{
BLMStudioLink: (
<a href="studio/26964367">
Black Lives Matter <FormattedMessage id="annualReport.studio" />
</a>
)
}}
/>
</p>
</div>
<div>
<img src="/images/annual-report/initiatives/BLM Hero.svg" />
<b>
<FormattedMessage id="annualReport.communityArtwork" />
</b>
</div>
<div className="blm-projects">
<Grid
showAvatar
items={BLMProjects}
showFavorites={false}
showLoves={false}
showViews={false}
/>
</div>
<div>
<h3>
<FormattedMessage id="annualReport.communityChangeTitle" />
</h3>
<p>
<FormattedMessage id="annualReport.communityChangeInfo" />
</p>
</div>
</div>
</div>
</div>
......
src/views/annual-report/annual-report.scss
View file @ 971f19b3
......@@ -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 {
......
src/views/annual-report/blm-projects.json 0 → 100644
View file @ 971f19b3
[
{
"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
src/views/annual-report/l10n.json
View file @ 971f19b3
......@@ -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",
......
static/images/annual-report/initiatives/BLM Hero.svg 0 → 100644
View file @ 971f19b3
<?xml version="1.0" encoding="UTF-8"?>
<svg width="380px" height="440px" viewBox="0 0 380 440" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>BLM Hero</title>
<g id="BLM-Hero" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(18.000000, 15.000000)">
<path d="M181.533764,412 C286.552015,412 356.976018,308.208786 342.149912,232.836595 C327.323806,157.464404 272.930431,137.04662 171.618707,127.161743 C70.3069824,117.276865 -9.97010595,171.056111 1.14947358,266.198057 C12.2690531,361.340003 76.5155126,412 181.533764,412 Z" id="Oval-Copy" fill-opacity="0.25" fill="#4D97FF"></path>
<g id="BLM-Fist" transform="translate(91.118421, 0.000000)" fill-rule="nonzero">
<path d="M15.3487584,73.6955473 C13.776264,47.5425105 38.3384098,13.2112654 69.7156956,17.2788469 C101.092973,21.3464285 120.373875,34.0857682 122.037949,61.7639894 C123.702006,89.4420804 115.55758,121.815517 93.7140393,107.807725 C75.9151104,96.39371 40.0566927,113.354516 39.1977668,112.94197 C23.1562402,105.238642 16.9212609,99.8485842 15.3487665,73.6955473 L15.3487584,73.6955473 Z" id="Path" stroke="#6D3030" stroke-width="6.9" fill="#813939"></path>
<path d="M42.9025798,29.0955446 C42.9025798,43.9284939 40.5604857,58.3945545 26.633349,58.3945545 C12.7062123,58.3945545 8.73719515,47.1839394 8.73719515,32.3509901 C8.73719515,17.5180408 12.7062123,4.67970297 26.633349,4.67970297 C40.5604857,4.67970297 42.9025798,14.2625952 42.9025798,29.0955446 Z" id="Path" stroke="#6D3030" stroke-width="6.9" fill="#813939"></path>
<path d="M121.808349,121.061881 C121.808349,126.905162 98.4265115,128.386634 72.5939259,128.386634 C46.7613403,128.386634 25.0064259,136.671498 25.0064259,130.828218 C25.0064259,124.984937 45.9478788,120.24802 71.7804644,120.24802 C97.61305,120.24802 121.808349,115.218601 121.808349,121.061881 Z" id="Path" stroke="#D60000" stroke-width="6.9" fill="#D60000"></path>
<path d="M128.316041,40.9335247 C128.316041,50.5974124 126.754643,60.0222772 117.46989,60.0222772 C108.185138,60.0222772 105.539118,52.7183922 105.539118,43.0545044 C105.539118,33.3906166 108.18513,25.0262376 117.46989,25.0262376 C126.754643,25.0262376 128.316041,31.2696369 128.316041,40.9335247 Z" id="Path" stroke="#6D3030" stroke-width="6.9" fill="#813939"></path>
<path d="M99.8448875,144.256931 C99.8448875,159.764099 86.7337177,172.335149 70.5602721,172.335149 C54.3868264,172.335149 41.2756567,159.764099 41.2756567,144.256931 C41.2756567,136.423197 31.6061777,113.875387 37.0025188,108.782324 C42.2884407,103.793476 62.5571365,116.178713 70.5602721,116.178713 C72.8680055,116.178713 95.4499337,105.040597 97.6037847,105.524486 C110.5449,108.431876 99.8448875,130.962432 99.8448875,144.256931 Z" id="Path" stroke="#6D3030" stroke-width="6.9" fill="#813939"></path>
<path d="M111.233349,32.3509901 C111.233349,47.1839313 108.891255,61.65 94.9641182,61.65 C81.0369815,61.65 77.0679644,50.4393768 77.0679644,35.6064356 C77.0679644,20.7734945 81.0369815,7.93514851 94.9641182,7.93514851 C108.891255,7.93514851 111.233349,17.5180489 111.233349,32.3509901 Z" id="Path" stroke="#6D3030" stroke-width="6.9" fill="#813939"></path>
<path d="M78.6948875,25.0262376 C78.6948875,39.8591788 76.3527934,54.3252475 62.4256567,54.3252475 C48.4985281,54.3252475 44.5295028,43.1146243 44.5295028,28.2816832 C44.5295028,13.448742 48.4985281,0.61039604 62.4256567,0.61039604 C76.3527934,0.61039604 78.6948875,10.1932965 78.6948875,25.0262376 Z" id="Path" stroke="#6D3030" stroke-width="6.9" fill="#813939"></path>
<g id="Group" transform="translate(13.617964, 116.341485)" fill="#FF2E2E" stroke="#D60000" stroke-linejoin="round" stroke-width="7.6">
<path d="M27.8269086,180.966295 C24.5881878,151.79556 17.6128496,98.6954728 17.3873581,94.8374768 C16.290999,76.0870953 9.3675709,69.6387006 6.90827331,51.0180241 C4.44897571,32.3973395 -8.14868827,22.2379567 11.9149745,17.1969155 C14.8191949,16.4672155 22.6261154,24.2029599 26.8939333,25.173457 C33.4011619,26.6531954 41.8428102,22.892879 48.7518644,23.1758424 C56.3664257,23.4877059 62.4686319,27.6625707 70.0269342,25.2875115 C90.7148067,18.7867286 113.440042,0.743226356 113.451781,0.787613425 C113.815666,2.2397384 119.159499,0.36866293 122.653682,11.4562954 C128.109365,28.7681037 121.989792,51.0644793 122.907767,61.3945777 C128.195682,120.900549 122.653682,278.29989 122.653682,284.852851 C122.653682,284.852851 102.647661,292 79.0558637,292 C63.3279992,292 46.7882856,290.736107 29.4367231,288.20832 C30.5226606,236.160793 29.9860558,200.413452 27.8269086,180.966295 Z" id="Path"></path>
</g>
<path d="M100.658349,97.459901 C100.658349,98.8083472 99.068593,128.386634 90.083349,128.386634 C85.239877,128.386634 56.5573207,134.183654 44.6426553,131.063416 C34.4541147,128.395212 37.208349,97.2676181 37.208349,96.6460396 C37.208349,95.2975934 75.4038743,92.5767327 84.3891182,92.5767327 C93.3743622,92.5767327 100.658349,96.1114548 100.658349,97.459901 Z" id="Path" fill="#813939"></path>
<path d="M51.785596,81.5759311 C31.8568133,87.6071079 11.0716996,91.2659519 3.04841458,78.0461085 C-4.97486233,64.826265 7.80063248,56.5004955 27.7294152,50.4693269 C47.6581979,44.4381501 67.1936476,42.9854483 75.2169245,56.2052917 C83.2402014,69.4251352 71.7143788,75.5447543 51.785596,81.5759311 L51.785596,81.5759311 Z" id="Path" stroke="#6D3030" stroke-width="6.9" fill="#813939"></path>
</g>
</g>
</g>
</svg>
\ No newline at end of file
static/images/annual-report/initiatives/BLM Video Splash.svg 0 → 100644
View file @ 971f19b3
<?xml version="1.0" encoding="UTF-8"?>
<svg width="1020px" height="500px" viewBox="0 0 1020 500" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>BLM Video Splash</title>
<g id="BLM-Video-Splash" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.5">
<path d="M1012.5263,321.154495 C1006.46594,230.488637 940.903783,200.762755 983.171406,173.192523 C1090.77946,103.002174 945.055691,-35.4860014 771.906145,15.8606443 C666.871088,47.0082733 527.006744,39.3956697 432.62076,15.8606443 C286.970753,-20.4570005 158.318713,5.84911207 61.2036433,92.1669801 C-35.911426,178.484848 -14.9442959,312.302059 106.288301,392.669852 C234.079975,477.385803 513.416265,531.117937 771.906145,480.182176 C912.911902,452.396811 1016.70263,383.634202 1012.5263,321.154495 Z M33.0078125,493.035156 C60.1224606,496.830673 83.8296658,479.357833 85.7820029,462.726382 C87.7343401,446.094932 76.5831796,421.063185 51.9233192,416.75149 C27.2634589,412.439794 9.13807792,427.574202 5.51073908,439.402108 C1.88340024,451.230014 5.89316443,489.239639 33.0078125,493.035156 Z" id="splash" fill="#4D97FF" transform="translate(510.000000, 250.000000) rotate(-180.000000) translate(-510.000000, -250.000000) "></path>
</g>
</svg>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment