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

more arrows and formatting

Browse source
This commit is contained in:
caseymm 2021-09-30 16:52:40 -07:00
parent 03a2435863
commit b3b3ab4126
3 changed files with 54 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -655,7 +655,8 @@ class AnnualReport extends React.Component {
<h3> <h3>
<FormattedMessage id="annualReport.reachTranslationTitle" /> <FormattedMessage id="annualReport.reachTranslationTitle" />
</h3> </h3>
<div> <div className="inline">
<img src="/images/annual-report/2020/Symbols-UI/Arrow_up.svg" />
<FormattedMessage id="annualReport.reachTranslationIncrease" /> <FormattedMessage id="annualReport.reachTranslationIncrease" />
</div> </div>
<p> <p>
@ -693,7 +694,7 @@ class AnnualReport extends React.Component {
<h4> <h4>
<FormattedMessage id="annualReport.reachDownloads" /> <FormattedMessage id="annualReport.reachDownloads" />
</h4> </h4>
<div className="increase-bubble"> <div className="increase bubble dark">
<FormattedMessage id="annualReport.reachDownloadsIncrease" /> <FormattedMessage id="annualReport.reachDownloadsIncrease" />
</div> </div>
</div> </div>

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

@ -633,9 +633,9 @@ p {
font-size: 1.5rem; font-size: 1.5rem;
} }
img { // img {
margin-top: 20px; // margin-top: 20px;
} // }
.reach-numbers { .reach-numbers {
display: flex; display: flex;
@ -669,38 +669,6 @@ p {
} }
} }
.bubble {
background-color: darken($ui-teal, 10%);
border-radius: 50px;
padding: 10px 15px;
font-size: 14px;
margin: 15px auto;
max-width: 170px;
display: flex;
justify-content: center;
align-items: center;
img{
margin: 0px 8px;
}
&.increase{
padding: 5px 5px;
span{
display: flex;
justify-content: center;
align-items: center;
&:before{
content: '';
width: 30px;
height: 30px;
background-image: url("/images/annual-report/2020/Symbols-UI/Arrow_up.svg");
background-size: contain;
display: inline-block;
margin-right: 10px;
}
}
}
}
.map-inner { .map-inner {
max-width: 940px; max-width: 940px;
margin: 0 auto; margin: 0 auto;
@ -783,6 +751,15 @@ p {
} }
} }
.inline{
display: flex;
align-items: center;
margin-top: 10px;
img{
margin-right: 6px;
}
}
img { img {
max-width: 380px; max-width: 380px;
} }
@ -813,6 +790,42 @@ p {
} }
} }
.bubble {
background-color: darken($ui-teal, 10%);
border-radius: 50px;
padding: 10px 15px;
font-size: 14px;
margin: 15px auto;
max-width: 170px;
display: flex;
justify-content: center;
align-items: center;
img{
margin: 0px 8px;
}
&.increase{
padding: 5px 5px;
&.dark{
background-color: darken($ui-teal, 15%);
padding: 5px 15px;
}
span{
display: flex;
justify-content: center;
align-items: center;
&:before{
content: '';
width: 30px;
height: 30px;
background-image: url("/images/annual-report/2020/Symbols-UI/Arrow_up.svg");
background-size: contain;
display: inline-block;
margin-right: 10px;
}
}
}
}
.reach-datapoint { .reach-datapoint {
font-size: 5rem; font-size: 5rem;
font-weight: bold; font-weight: bold;

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

@ -58,13 +58,13 @@
"annualReport.reachMapBlurb": "Total accounts registered in the Scratch Online Community from the launch of Scratch through 2019", "annualReport.reachMapBlurb": "Total accounts registered in the Scratch Online Community from the launch of Scratch through 2019",
"annualReport.reachMap20M": "20M", "annualReport.reachMap20M": "20M",
"annualReport.reachMapLog": "on a logarithmic scale", "annualReport.reachMapLog": "on a logarithmic scale",
"annualReport.reachTranslationTitle": "Scratch is Translated into 7x Languages", "annualReport.reachTranslationTitle": "Scratch is Translated into 64 Languages",
"annualReport.reachTranslationIncrease": "x languages from 2019", "annualReport.reachTranslationIncrease": "3 languages from 2019",
"annualReport.reachTranslationBlurb": "Thanks to volunteer translators from around the world.", "annualReport.reachTranslationBlurb": "Thanks to volunteer translators from around the world.",
"annualReport.reachScratchJrBlurb": "ScratchJr is an introductory programming environment that enables young children (ages 5-7) to create their own interactive stories and games.", "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.reachDownloadsMillion": "3 {million}",
"annualReport.reachDownloads": "Downloads in 2020", "annualReport.reachDownloads": "Downloads in 2020",
"annualReport.reachDownloadsIncrease": "x million from 2019", "annualReport.reachDownloadsIncrease": "2 million from 2019",
"annualReport.themesTitle": "Emerging Themes", "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.", "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.",