Skip to content

GitLab

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

add read content, translation subsection

parent 15581783
Show whitespace changes
Inline Side-by-side
Showing with 132 additions and 9 deletions
src/views/annual-report/annual-report.jsx
View file @ 50672aec
...@@ -608,7 +608,7 @@ class AnnualReport extends React.Component { ...@@ -608,7 +608,7 @@ class AnnualReport extends React.Component {
</div> </div>
<div className="reach-datapoint"> <div className="reach-datapoint">
<FormattedMessage <FormattedMessage
id="annualReport.reach170million" id="annualReport.reach60million"
values={{ values={{
million: ( million: (
<div className="million"> <div className="million">
...@@ -618,12 +618,12 @@ class AnnualReport extends React.Component { ...@@ -618,12 +618,12 @@ class AnnualReport extends React.Component {
}} }}
/> />
<h4> <h4>
<FormattedMessage id="annualReport.reachUniqueVisitors" /> <FormattedMessage id="annualReport.reachProjectsCreated" />
</h4> </h4>
</div> </div>
<div className="reach-datapoint"> <div className="reach-datapoint">
<FormattedMessage <FormattedMessage
id="annualReport.reach170million" id="annualReport.reach20million"
values={{ values={{
million: ( million: (
<div className="million"> <div className="million">
...@@ -633,12 +633,12 @@ class AnnualReport extends React.Component { ...@@ -633,12 +633,12 @@ class AnnualReport extends React.Component {
}} }}
/> />
<h4> <h4>
<FormattedMessage id="annualReport.reachUniqueVisitors" /> <FormattedMessage id="annualReport.reachProjectCreators" />
</h4> </h4>
</div> </div>
<div className="reach-datapoint"> <div className="reach-datapoint">
<FormattedMessage <FormattedMessage
id="annualReport.reach170million" id="annualReport.reach48million"
values={{ values={{
million: ( million: (
<div className="million"> <div className="million">
...@@ -648,7 +648,7 @@ class AnnualReport extends React.Component { ...@@ -648,7 +648,7 @@ class AnnualReport extends React.Component {
}} }}
/> />
<h4> <h4>
<FormattedMessage id="annualReport.reachUniqueVisitors" /> <FormattedMessage id="annualReport.reachComments" />
</h4> </h4>
</div> </div>
</div> </div>
...@@ -677,6 +677,17 @@ class AnnualReport extends React.Component { ...@@ -677,6 +677,17 @@ class AnnualReport extends React.Component {
countryNames={countryNames} countryNames={countryNames}
/> />
</div> </div>
<div className="reach-translation">
<div className="reach-translation-intro">
<h3>
<FormattedMessage id="annualReport.reachTranslationTitle" />
</h3>
<p>
<FormattedMessage id="annualReport.reachTranslationBlurb" />
</p>
</div>
<img src="/images/annual-report/translated-illustration.svg" />
</div>
</div> </div>
</div> </div>
<div className="reach-scratch-jr section"> <div className="reach-scratch-jr section">
...@@ -689,7 +700,7 @@ class AnnualReport extends React.Component { ...@@ -689,7 +700,7 @@ class AnnualReport extends React.Component {
</div> </div>
<div className="reach-datapoint"> <div className="reach-datapoint">
<FormattedMessage <FormattedMessage
id="annualReport.reach170million" id="annualReport.reach22million"
values={{ values={{
million: ( million: (
<div className="million"> <div className="million">
...@@ -699,7 +710,7 @@ class AnnualReport extends React.Component { ...@@ -699,7 +710,7 @@ class AnnualReport extends React.Component {
}} }}
/> />
<h4> <h4>
<FormattedMessage id="annualReport.reachUniqueVisitors" /> <FormattedMessage id="annualReport.reachDownloads" />
</h4> </h4>
</div> </div>
</div> </div>
......
src/views/annual-report/annual-report.scss
View file @ 50672aec
...@@ -376,7 +376,7 @@ p { ...@@ -376,7 +376,7 @@ p {
.reach-numbers { .reach-numbers {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: space-between;
} }
} }
...@@ -413,6 +413,26 @@ p { ...@@ -413,6 +413,26 @@ p {
color: $type-gray; color: $type-gray;
} }
} }
.reach-translation {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 780px;
margin-bottom: 100px;
.reach-translation-intro {
max-width: 300px;
h3 {
max-width: 280px;
}
}
img {
max-width: 380px;
}
}
} }
.reach-datapoint { .reach-datapoint {
...@@ -431,6 +451,7 @@ p { ...@@ -431,6 +451,7 @@ p {
.reach-scratch-jr { .reach-scratch-jr {
background-color: #0EA57A; background-color: #0EA57A;
color: $ui-white; color: $ui-white;
padding: 100px 0;
h2, h3, h4, p { h2, h3, h4, p {
color: $ui-white; color: $ui-white;
...@@ -445,6 +466,9 @@ p { ...@@ -445,6 +466,9 @@ p {
.scratch-jr-intro { .scratch-jr-intro {
max-width: 540px; max-width: 540px;
p {
font-size: 1.25rem;
}
} }
} }
......
src/views/annual-report/l10n.json
View file @ 50672aec
...@@ -47,12 +47,22 @@ ...@@ -47,12 +47,22 @@
"annualReport.reachSubtitle": "Scratch is the world’s largest coding community for kids.", "annualReport.reachSubtitle": "Scratch is the world’s largest coding community for kids.",
"annualReport.reachMillion": "million", "annualReport.reachMillion": "million",
"annualReport.reach170million": "170 {million}", "annualReport.reach170million": "170 {million}",
"annualReport.reach60million": "60 {million}",
"annualReport.reach20million": "20 {million}",
"annualReport.reach48million": "48 {million}",
"annualReport.reachUniqueVisitors": "Unique Visitors", "annualReport.reachUniqueVisitors": "Unique Visitors",
"annualReport.reachProjectsCreated": "Projects Created",
"annualReport.reachProjectCreators": "People Created Projects",
"annualReport.reachComments": "Comments Posted in the Online Community",
"annualReport.reachGrowthTitle": "Community Growth", "annualReport.reachGrowthTitle": "Community Growth",
"annualReport.reachGrowthBlurb": "New accounts created in the Scratch Online Community within the last 5 years.", "annualReport.reachGrowthBlurb": "New accounts created in the Scratch Online Community within the last 5 years.",
"annualReport.reachGlobalCommunity": "A Global Community", "annualReport.reachGlobalCommunity": "A Global Community",
"annualReport.reachMapBlurb": "Total accounts registered in the Scratch Online Community through December 31, 2019", "annualReport.reachMapBlurb": "Total accounts registered in the Scratch Online Community through December 31, 2019",
"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.", "annualReport.reachScratchJrBlurb": "ScratchJr is an introductory programming environment that enables young children (ages 5-7) to create their own interactive stories and games.",
"annualReport.reach22million": "22 {million}",
"annualReport.reachDownloads": "Downloads Since Launching in 2014",
"annualReport.financialsTitle": "Financials - 2019", "annualReport.financialsTitle": "Financials - 2019",
"annualReport.financialsRevenue": "Revenues", "annualReport.financialsRevenue": "Revenues",
......
static/images/annual-report/horizontal-command.svg 0 → 100644
View file @ 50672aec
<?xml version="1.0" encoding="UTF-8"?>
<svg width="88px" height="88px" viewBox="0 0 88 88" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>ScratchJr Command</title>
<defs>
<filter id="filter-1">
<feColorMatrix in="SourceGraphic" type="matrix" values="0 0 0 0 1.000000 0 0 0 0 0.749020 0 0 0 0 0.000000 0 0 0 1.000000 0"></feColorMatrix>
</filter>
</defs>
<g id="ScratchJr-Command" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g id="Horizontal/Block/Command" transform="translate(8.000000, 12.000000)" filter="url(#filter-1)">
<g transform="translate(36.000000, 32.000000) rotate(14.000000) translate(-36.000000, -32.000000) ">
<path d="M0,49.6568542 C0,48.5959883 0.421427361,47.5785726 1.17157288,46.8284271 L1.17157288,46.8284271 L6.82842712,41.1715729 C7.57857264,40.4214274 8,39.4040117 8,38.3431458 L8,38.3431458 L8,25.6568542 C8,24.5959883 7.57857264,23.5785726 6.82842712,22.8284271 L6.82842712,22.8284271 L1.17157288,17.1715729 C0.421427361,16.4214274 0,15.4040117 0,14.3431458 L0,14.3431458 L0,4 C-2.705415e-16,1.790861 1.790861,4.05812251e-16 4,0 L60,0 C62.209139,-4.05812251e-16 64,1.790861 64,4 L64,14.375 L64.0064166,14.5697275 C64.061881,15.5479932 64.4750092,16.4750092 65.1715729,17.1715729 L70.8284271,22.8284271 C71.5785726,23.5785726 72,24.5959883 72,25.6568542 L72,38.3431458 C72,39.4040117 71.5785726,40.4214274 70.8284271,41.1715729 L65.1715729,46.8284271 C64.4290142,47.5709858 64.0085581,48.5754358 64.0001292,49.6246797 L64,60 C64,62.209139 62.209139,64 60,64 L4,64 C1.790861,64 2.705415e-16,62.209139 0,60 Z" id="Command" stroke="#CC9900" fill="#FFBF00"></path>
</g>
</g>
</g>
</svg>
\ No newline at end of file
static/images/annual-report/horizontal-loop.svg 0 → 100644
View file @ 50672aec
<?xml version="1.0" encoding="UTF-8"?>
<svg width="144px" height="120px" viewBox="0 0 144 120" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>ScratchJr Loop</title>
<defs>
<filter id="filter-1">
<feColorMatrix in="SourceGraphic" type="matrix" values="0 0 0 0 1.000000 0 0 0 0 0.670588 0 0 0 0 0.098039 0 0 0 1.000000 0"></feColorMatrix>
</filter>
</defs>
<g id="ScratchJr-Loop" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g id="Horizontal/Block/Forever-Loop" transform="translate(10.000000, 22.000000)" filter="url(#filter-1)">
<g transform="translate(62.000000, 38.000000) rotate(-15.000000) translate(-62.000000, -38.000000) ">
<path d="M120,0 C122.209139,-4.05812251e-16 124,1.790861 124,4 L124,72 C124,74.209139 122.209139,76 120,76 L64,76 C61.790861,76 60,74.209139 60,72 L60,61.6568542 C60,60.5959883 60.4214274,59.5785726 61.1715729,58.8284271 L61.1715729,58.8284271 L66.8284271,53.1715729 C67.5785726,52.4214274 68,51.4040117 68,50.3431458 L68,50.3431458 L68,37.6568542 C68,36.5959883 67.5785726,35.5785726 66.8284271,34.8284271 L66.8284271,34.8284271 L61.1715729,29.1715729 C60.4214274,28.4214274 60,27.4040117 60,26.3431458 L60,26.3431458 L60,16 C60,13.790861 58.209139,12 56,12 L28,12 C25.790861,12 24,13.790861 24,16 L24,26.3431458 C24,27.4040117 24.4214274,28.4214274 25.1715729,29.1715729 L30.8284271,34.8284271 C31.5785726,35.5785726 32,36.5959883 32,37.6568542 L32,50.3431458 C32,51.4040117 31.5785726,52.4214274 30.8284271,53.1715729 L25.1715729,58.8284271 C24.4214274,59.5785726 24,60.5959883 24,61.6568542 L24,72 C24,74.209139 22.209139,76 20,76 L4,76 C1.790861,76 -4.86779581e-14,74.209139 -4.89484996e-14,72 L-4.89484996e-14,61.6568542 C-4.89484996e-14,60.5959883 0.421427361,59.5785726 1.17157288,58.8284271 L1.17157288,58.8284271 L6.82842712,53.1715729 C7.57857264,52.4214274 8,51.4040117 8,50.3431458 L8,50.3431458 L8,37.6568542 C8,36.5959883 7.57857264,35.5785726 6.82842712,34.8284271 L6.82842712,34.8284271 L1.17157288,29.1715729 C0.421427361,28.4214274 -4.89484996e-14,27.4040117 -4.89484996e-14,26.3431458 L-4.89484996e-14,26.3431458 L-4.89484996e-14,4 C-4.92190411e-14,1.790861 1.790861,4.05812251e-16 4,0 L120,0 Z" id="Forever-Loop" stroke="#CF8B17" fill="#FFAB19"></path>
</g>
</g>
</g>
</svg>
\ No newline at end of file
static/images/annual-report/translated-illustration.svg 0 → 100644
View file @ 50672aec
This source diff could not be displayed because it is too large. You can view the blob instead.
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