scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-27 01:25:52 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

add map key

Browse source
This commit is contained in:
seotts 2020-10-26 17:36:15 -04:00
parent 020e9029e9
commit d68691de40
6 changed files with 52 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/world-map/world-map.jsx
View file

@ -74,7 +74,7 @@ const WorldMap = props => (
);
WorldMap.propTypes = {
colorIndex: PropTypes.arrayOf(PropTypes.string),
colorIndex: PropTypes.arrayOf(PropTypes.number),
countryData: PropTypes.arrayOf(PropTypes.string),
countryNames: PropTypes.arrayOf(PropTypes.string)
};

12
src/views/annual-report/annual-report.jsx
View file

@ -807,6 +807,18 @@ class AnnualReport extends React.Component {
<p>
<FormattedMessage id="annualReport.reachMapBlurb" />
</p>
<div className="map-key">
<div className="map-scale">
<div>0</div>
<img src="/images/annual-report/reach/Map Key.svg" />
<div>
<FormattedMessage id="annualReport.reachMap20M" />
</div>
</div>
<div>
<FormattedMessage id="annualReport.reachMapLog" />
</div>
</div>
<div className="map-wrapper">
<MediaQuery minWidth={frameless.desktop}>
<WorldMap

22
src/views/annual-report/annual-report.scss
View file

@ -665,6 +665,10 @@ p {
padding-bottom: 20px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
h3, p {
color: $type-gray;
padding: 0 48px;
@ -674,7 +678,23 @@ p {
width: 100%;
border-radius: 0px;
}
.map-key {
font-size: .75rem;
margin-bottom: 36px;
.map-scale {
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
img {
padding: 4px 8px;
}
}
}
.map-wrapper {
width: 100%;
height: 0;

2
src/views/annual-report/country-usage.json
View file

File diff suppressed because one or more lines are too long

2
src/views/annual-report/l10n.json
View file

@ -73,6 +73,8 @@
"annualReport.reachGrowthBlurb": "New accounts created in the Scratch Online Community within the last 5 years.",
"annualReport.reachGlobalCommunity": "A Global Community",
"annualReport.reachMapBlurb": "Total accounts registered in the Scratch Online Community through December 31, 2019",
"annualReport.reachMap20M": "20M",
"annualReport.reachMapLog": "on a logarithmic scale",
"annualReport.reachTranslationTitle": "Scratch is Translated into 60+ Languages",
"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.",

15
static/images/annual-report/reach/Map Key.svg Normal file
View file

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="330px" height="32px" viewBox="0 0 330 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Map Key</title>
<defs>
<linearGradient x1="-1.11022302e-14%" y1="50%" x2="100%" y2="50%" id="linearGradient-1">
<stop stop-color="#0EBD8C" stop-opacity="0.05" offset="0%"></stop>
<stop stop-color="#0EBD8C" offset="100%"></stop>
</linearGradient>
</defs>
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Map-Key" fill="url(#linearGradient-1)">
<rect x="0" y="0" width="330" height="32" rx="16"></rect>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 736 B