scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-23 07:38:07 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

india css

Browse source
This commit is contained in:
caseymm 2021-10-04 14:10:15 -07:00
parent 8c39865c4f
commit 537704cf89
5 changed files with 122 additions and 150 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

161
src/views/annual-report/2020/index/annual-report.jsx
View file

@ -757,131 +757,54 @@ class AnnualReport extends React.Component {
</p>
</div>
</div>
<div className="initiatives-subsection-content">
<div className="initiatives-subsection-content connectivity">
{/* eslint-disable max-len */}
<div className="content">
<div className="text">
<div className="spotlight bubble connectivity">
<FormattedMessage id="annualReport.spotlightStory" />
</div>
<h2>
<FormattedMessage id="annualReport.connectivityIndia" />
</h2>
<p>
<FormattedMessage id="annualReport.connectivityIndiaIntro" />
</p>
</div>
<div className="images">
<Grid
showAvatar
items={IndiaProjects}
showFavorites={false}
showLoves={false}
showViews={false}
/>
{/* <div className="project">
<img src="/images/annual-report/2020/connectivity/India_Data/project_diwali.jpg" />
</div> */}
{/* <div className="project">
<img src="/images/annual-report/2020/India_Data/project_hindinews.jpg" />
</div>
<div className="project">
<img src="/images/annual-report/2020/India_Data/project_proudtobeanindian.jpg" />
</div>
<div className="project">
<img src="/images/annual-report/2020/India_Data/project_flute.jpg" />
</div> */}
</div>
</div>
<p>
<FormattedMessage id="annualReport.connectivityIndiaParagraph" />
</p>
<div className="inner">
<div className="tools-extensions">
<div className="tools-extension">
<img src="/images/annual-report/initiatives/Text-to-Speech Block.svg" />
<h4>
<FormattedMessage id="annualReport.toolsTexttoSpeech" />
</h4>
<p>
<FormattedMessage id="annualReport.toolsTexttoSpeechIntro" />
<div className="content">
<div className="text">
<div className="spotlight bubble connectivity">
<FormattedMessage id="annualReport.spotlightStory" />
</div>
<h2>
<FormattedMessage id="annualReport.connectivityIndia" />
</h2>
<p className="larger">
<FormattedMessage id="annualReport.connectivityIndiaIntro" />
</p>
<div className="tools-stats">
<div className="tools-stat">
<FormattedMessage
id="annualReport.toolsTexttoSpeechProjects"
values={{
numProjects: (
<h5>
<FormattedMessage id="annualReport.toolsNumProjects" />
</h5>
)
}}
/>
</div>
<div className="tools-stat">
<FormattedMessage
id="annualReport.toolsTexttoSpeechPopular"
values={{
mostPopular: (
<h5>
<FormattedMessage id="annualReport.toolsMostPopular" />
</h5>
)
}}
/>
</div>
</div>
<div className="subsection-tag collaborator">
<FormattedMessage id="annualReport.toolsCollabAWS" />
</div>
</div>
<div className="tools-extension">
<img src="/images/annual-report/initiatives/Translation Block.svg" />
<div className="images">
<Grid
showAvatar
items={IndiaProjects}
showFavorites={false}
showLoves={false}
showViews={false}
/>
</div>
</div>
<p className="about-breaker">
<FormattedMessage id="annualReport.connectivityIndiaParagraph" />
</p>
<div className="content around">
<img src="/images/annual-report/2020/connectivity/India_Data/data_projectscreatedonline_graphic.svg" />
<div className="india-numbers">
<h2>
<FormattedMessage
id="annualReport.connectivityIndiaProjectsNumber"
values={{
million: (
<span className="million">
<FormattedMessage id="annualReport.reachMillion" />
</span>
)
}}
/>
</h2>
<h4>
<FormattedMessage id="annualReport.toolsTranslate" />
<FormattedMessage id="annualReport.connectivityIndiaProjectsSubhead" />
</h4>
<p>
<FormattedMessage id="annualReport.toolsTranslateIntro" />
</p>
<div className="tools-stats">
<div className="tools-stat">
<FormattedMessage
id="annualReport.toolsTranslateLanguages"
values={{
numLanguages: (
<h5>
<FormattedMessage id="annualReport.toolsNumLanguages" />
</h5>
)
}}
/>
</div>
<div className="tools-stat">
<FormattedMessage
id="annualReport.toolsTranslateLiteracy"
values={{
supportsLiteracy: (
<h5>
<FormattedMessage id="annualReport.toolsSupportsLiteracy" />
</h5>
),
CSandLanguageArtsLink: (
<a
href="https://www.pila-cs.org/"
rel="noreferrer noopener"
target="_blank"
>
<FormattedMessage id="annualReport.toolsCSandLanguageArts" />
</a>
)
}}
/>
</div>
</div>
<div className="subsection-tag collaborator">
<FormattedMessage id="annualReport.toolsCollabGoogle" />
<div className="increase bubble inverted">
<FormattedMessage id="annualReport.connectivityIndiaProjectsIncreasePercent" />
</div>
</div>
</div>

61
src/views/annual-report/2020/index/annual-report.scss
View file

@ -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;

38
src/views/annual-report/2020/index/india-projects.json
View file

@ -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": {}
}
]

9
src/views/annual-report/2020/index/l10n.json
View file

@ -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",

3
static/images/annual-report/2020/Symbols-UI/Arrow_up_purple.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M23.5412 8.33393V17.4913C23.5193 18.2219 23.0863 18.8445 22.4359 19.1012C21.787 19.3593 21.0754 19.2076 20.5753 18.7075L18.8386 16.9708L11.5812 22.4579C10.4788 23.3066 8.88792 23.2001 7.88907 22.2013C7.80303 22.1152 7.72138 22.0219 7.64555 21.9257C6.88584 20.8831 6.89313 19.4847 7.64847 18.5106L13.105 11.2372L11.4441 9.5763C10.9381 9.07031 10.785 8.32226 11.0533 7.67191C11.3246 7.01864 11.9399 6.61035 12.6602 6.61035L21.8176 6.61035C22.2711 6.61181 22.7028 6.79262 23.0309 7.12072C23.3589 7.44881 23.5398 7.88043 23.5412 8.33393Z" fill="#9966ff"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 704 B