Skip to content

GitLab

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

work on reach section

parent 8b1c008e
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 342 additions and 12 deletions
src/views/annual-report/annual-report.jsx
View file @ 5ff0e346
...@@ -11,7 +11,6 @@ const FlexRow = require('../../components/flex-row/flex-row.jsx'); ...@@ -11,7 +11,6 @@ const FlexRow = require('../../components/flex-row/flex-row.jsx');
const Comment = require('../../components/comment/comment.jsx'); const Comment = require('../../components/comment/comment.jsx');
const People = require('./people.json'); const People = require('./people.json');
const PeopleGrid = require('../../components/people-grid/people-grid.jsx'); const PeopleGrid = require('../../components/people-grid/people-grid.jsx');
const Avatar = require('../../components/avatar/avatar.jsx');
const Page = require('../../components/page/www/page.jsx'); const Page = require('../../components/page/www/page.jsx');
const render = require('../../lib/render.jsx'); const render = require('../../lib/render.jsx');
...@@ -164,19 +163,19 @@ class AnnualReport extends React.Component { ...@@ -164,19 +163,19 @@ class AnnualReport extends React.Component {
</a> </a>
<a <a
className={classNames( className={classNames(
{selectedItem: this.state.currentlyVisible === SECTIONS.reach} {selectedItem: this.state.currentlyVisible === SECTIONS.milestones}
)} )}
onClick={this.handleSubnavItemClick(SECTIONS.reach)} onClick={this.handleSubnavItemClick(SECTIONS.milestones)}
> >
<FormattedMessage id="annualReport.subnavReach" /> <FormattedMessage id="annualReport.subnavMilestones" />
</a> </a>
<a <a
className={classNames( className={classNames(
{selectedItem: this.state.currentlyVisible === SECTIONS.milestones} {selectedItem: this.state.currentlyVisible === SECTIONS.reach}
)} )}
onClick={this.handleSubnavItemClick(SECTIONS.milestones)} onClick={this.handleSubnavItemClick(SECTIONS.reach)}
> >
<FormattedMessage id="annualReport.subnavMilestones" /> <FormattedMessage id="annualReport.subnavReach" />
</a> </a>
<a <a
className={classNames( className={classNames(
...@@ -319,7 +318,7 @@ class AnnualReport extends React.Component { ...@@ -319,7 +318,7 @@ class AnnualReport extends React.Component {
</div> </div>
</FlexRow> </FlexRow>
</div> </div>
<div className="message-transition-images"> <div className="transition-images">
<img src="/images/annual-report/message/blocks.svg" /> <img src="/images/annual-report/message/blocks.svg" />
<img src="/images/annual-report/message/banana.svg" /> <img src="/images/annual-report/message/banana.svg" />
</div> </div>
...@@ -567,13 +566,106 @@ class AnnualReport extends React.Component { ...@@ -567,13 +566,106 @@ class AnnualReport extends React.Component {
</div> </div>
</div> </div>
</div> </div>
<div className="transition-images">
<img src="/images/annual-report/milestones/vertical-loop.svg" />
<img src="/images/annual-report/milestones/painting-hand.svg" />
</div>
</div> </div>
<div <div
className="our-reach section" className="reach-section section"
id="reach" id="reach"
ref={this.setRef(SECTIONS.reach)} ref={this.setRef(SECTIONS.reach)}
> >
<div className="inner"> <div className="inner">
<div className="reach-intro">
<h2>
<FormattedMessage id="annualReport.reachTitle" />
</h2>
<p>
<FormattedMessage id="annualReport.reachSubtitle" />
</p>
<div className="reach-numbers">
<div className="reach-datapoint">
<FormattedMessage
id="annualReport.reach170million"
values={{
million: (
<div className="million">
<FormattedMessage id="annualReport.reachMillion" />
</div>
)
}}
/>
<h4>
<FormattedMessage id="annualReport.reachUniqueVisitors" />
</h4>
</div>
<div className="reach-datapoint">
<FormattedMessage
id="annualReport.reach170million"
values={{
million: (
<div className="million">
<FormattedMessage id="annualReport.reachMillion" />
</div>
)
}}
/>
<h4>
<FormattedMessage id="annualReport.reachUniqueVisitors" />
</h4>
</div>
<div className="reach-datapoint">
<FormattedMessage
id="annualReport.reach170million"
values={{
million: (
<div className="million">
<FormattedMessage id="annualReport.reachMillion" />
</div>
)
}}
/>
<h4>
<FormattedMessage id="annualReport.reachUniqueVisitors" />
</h4>
</div>
<div className="reach-datapoint">
<FormattedMessage
id="annualReport.reach170million"
values={{
million: (
<div className="million">
<FormattedMessage id="annualReport.reachMillion" />
</div>
)
}}
/>
<h4>
<FormattedMessage id="annualReport.reachUniqueVisitors" />
</h4>
</div>
</div>
</div>
<div className="reach-growth">
<div className="growth-blurb">
<h3>
<FormattedMessage id="annualReport.reachGrowthTitle" />
</h3>
<p>
<FormattedMessage id="annualReport.reachGrowthBlurb" />
</p>
</div>
<img src="/images/annual-report/milestones/community-growth-graph.svg" />
</div>
<div className="reach-map">
<h3>
<FormattedMessage id="annualReport.reachGlobalCommunity" />
</h3>
<p>
<FormattedMessage id="annualReport.reachMapBlurb" />
</p>
</div>
</div> </div>
</div> </div>
<div <div
......
src/views/annual-report/annual-report.scss
View file @ 5ff0e346
...@@ -184,7 +184,7 @@ p { ...@@ -184,7 +184,7 @@ p {
} }
} }
.message-transition-images { .transition-images {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
...@@ -339,6 +339,93 @@ p { ...@@ -339,6 +339,93 @@ p {
} }
} }
.transition-images {
width: 100%;
//overflow-x: hidden;
img {
margin-bottom: -200px;
margin-right: -68px;
}
}
}
.reach-section {
.inner {
max-width: 940px;
padding-top: 120px;
display: flex;
flex-direction: column;
align-items: center;
}
background-color: #0EBD8C;
color: $ui-white;
h2, h3, h4, p {
color: $ui-white;
}
.reach-intro {
max-width: 620px;
text-align: center;
p {
font-size: 1.5rem;
}
.reach-numbers {
display: flex;
flex-wrap: wrap;
justify-content: center;
font-size: 5rem;
}
.reach-datapoint {
width: 300px;
text-align: center;
margin: 32px 0;
}
.million {
font-size: 2rem;
font-weight: bold;
margin-bottom: 16px;
}
}
.reach-growth {
max-width: 940px;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
margin-top: 76px;
.growth-blurb {
max-width: 300px;
margin: 20px;
}
img {
width: 600px;
}
}
.reach-map {
max-width: 1064px;
background-color: $ui-white;
border-radius: 6px;
color: $type-gray;
padding: 48px;
margin: 52px 0;
text-align: center;
h3, p {
color: $type-gray;
}
}
} }
.financials-section { .financials-section {
...@@ -349,10 +436,10 @@ p { ...@@ -349,10 +436,10 @@ p {
background-color: #575E75; background-color: #575E75;
width: 100%; width: 100%;
color: #FFFFFF; color: $ui-white;
h2, h3, p { h2, h3, p {
color: #FFFFFF; color: $ui-white;
} }
h2 { h2 {
......
src/views/annual-report/l10n.json
View file @ 5ff0e346
...@@ -43,6 +43,15 @@ ...@@ -43,6 +43,15 @@
"annualReport.milestones2019MessageScratch3": "Launch of Scratch 3.0, expanding what kids can create with code", "annualReport.milestones2019MessageScratch3": "Launch of Scratch 3.0, expanding what kids can create with code",
"annualReport.milestones2019MessageMove": "Scratch Team moves from MIT into Scratch Foundation", "annualReport.milestones2019MessageMove": "Scratch Team moves from MIT into Scratch Foundation",
"annualReport.reachTitle": "Reaching Children Around the World",
"annualReport.reachSubtitle": "Scratch is the world’s largest coding community for kids.",
"annualReport.reachMillion": "million",
"annualReport.reach170million": "170 {million}",
"annualReport.reachUniqueVisitors": "Unique Visitors",
"annualReport.reachGrowthTitle": "Community Growth",
"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.financialsTitle": "Financials - 2019", "annualReport.financialsTitle": "Financials - 2019",
"annualReport.financialsRevenue": "Revenues", "annualReport.financialsRevenue": "Revenues",
......
static/images/annual-report/milestones/horizontal-command.svg 0 → 100644
View file @ 5ff0e346
<?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/milestones/painting-hand.svg 0 → 100644
View file @ 5ff0e346
This diff is collapsed.
static/images/annual-report/milestones/vertical-loop.svg 0 → 100644
View file @ 5ff0e346
<?xml version="1.0" encoding="UTF-8"?>
<svg width="216px" height="216px" viewBox="0 0 216 216" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Vertical Loop Block</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="Vertical-Loop-Block" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g id="Vertical/Block/Loop" transform="translate(27.000000, 40.000000)" filter="url(#filter-1)">
<g transform="translate(84.000000, 68.000000) rotate(-25.000000) translate(-84.000000, -68.000000) ">
<path d="M16,92 C16,94.209139 17.790861,96 20,96 L30.3431458,96 C31.4040117,96 32.4214274,96.4214274 33.1715729,97.1715729 L33.1715729,97.1715729 L38.8284271,102.828427 C39.5785726,103.578573 40.5959883,104 41.6568542,104 L41.6568542,104 L54.3431458,104 C55.4040117,104 56.4214274,103.578573 57.1715729,102.828427 L57.1715729,102.828427 L62.8284271,97.1715729 C63.5785726,96.4214274 64.5959883,96 65.6568542,96 L65.6568542,96 L164,96 C166.209139,96 168,97.790861 168,100 L168,124 C168,126.209139 166.209139,128 164,128 L49.6568542,128 C48.5959883,128 47.5785726,128.421427 46.8284271,129.171573 L41.1715729,134.828427 C40.4214274,135.578573 39.4040117,136 38.3431458,136 L25.6568542,136 C24.5959883,136 23.5785726,135.578573 22.8284271,134.828427 L17.1715729,129.171573 C16.4214274,128.421427 15.4040117,128 14.3431458,128 L4,128 C1.790861,128 3.22449646e-14,126.209139 3.19744231e-14,124 L3.19744231e-14,4 C3.17038816e-14,1.790861 1.790861,-1.84335299e-13 4,-1.84741111e-13 L14.3431458,-1.37667655e-14 C15.4040117,-1.37667655e-14 16.4214274,0.421427361 17.1715729,1.17157288 L17.1715729,1.17157288 L22.8284271,6.82842712 C23.5785726,7.57857264 24.5959883,8 25.6568542,8 L25.6568542,8 L38.3431458,8 C39.4040117,8 40.4214274,7.57857264 41.1715729,6.82842712 L41.1715729,6.82842712 L46.8284271,1.17157288 C47.5785726,0.421427361 48.5959883,-1.37667655e-14 49.6568542,-1.37667655e-14 L49.6568542,-1.37667655e-14 L164,-1.84741111e-13 C166.209139,-1.85146924e-13 168,1.790861 168,4 L168,44 C168,46.209139 166.209139,48 164,48 L65.6568542,48 C64.5959883,48 63.5785726,48.4214274 62.8284271,49.1715729 L57.1715729,54.8284271 C56.4214274,55.5785726 55.4040117,56 54.3431458,56 L41.6568542,56 C40.5959883,56 39.5785726,55.5785726 38.8284271,54.8284271 L33.1715729,49.1715729 C32.4214274,48.4214274 31.4040117,48 30.3431458,48 L20,48 C17.790861,48 16,49.790861 16,52 L16,92 Z" id="Loop-C-Block" stroke="#CF8B17" fill="#FFAB19"></path>
</g>
</g>
</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