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

progress on milestones section

Browse source
This commit is contained in:
seotts 2020-09-17 15:07:18 -04:00 committed by Karishma Chadha
parent b00110c025
commit 6617db7c8b
4 changed files with 123 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/routes.json
View file

@ -11,7 +11,8 @@
"pattern": "^/annual-report/?$", "pattern": "^/annual-report/?$",
"routeAlias": "/annual-report/?$", "routeAlias": "/annual-report/?$",
"view": "annual-report/annual-report", "view": "annual-report/annual-report",
"title": "annual-report" "title": "annual-report",
"viewportWidth": "device-width"
}, },
{ {
"name": "camp", "name": "camp",

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

@ -284,15 +284,19 @@ class AnnualReport extends React.Component {
ref={this.setRef(SECTIONS.milestones)} ref={this.setRef(SECTIONS.milestones)}
> >
<div className="inner"> <div className="inner">
<div className="milestones-intro"> <div className="milestones-wrapper">
<div className="milestone-boxes">
<h2> <h2>
<FormattedMessage id="annualReport.milestonesTitle" /> <FormattedMessage id="annualReport.milestonesTitle" />
</h2> </h2>
<p> <p>
<FormattedMessage id="annualReport.milestonesDescription" /> <FormattedMessage id="annualReport.milestonesDescription" />
</p> </p>
<MediaQuery minWidth={frameless.tabletPortrait}>
<img src="/images/annual-report/milestones/timeline1.svg" />
</MediaQuery>
</div> </div>
<div className="milestones-boxes"> <div className="milestone-boxes">
<div className="milestone-box first"> <div className="milestone-box first">
<h4> <h4>
2003 2003
@ -324,6 +328,58 @@ class AnnualReport extends React.Component {
</div> </div>
</div> </div>
</div> </div>
<MediaQuery minWidth={frameless.tabletPortrait}>
<img src="/images/annual-report/milestones/timeline_line_right.svg" />
</MediaQuery>
<div className="milestones-wrapper">
<div className="milestone-boxes">
<div className="milestone-box">
<h4>
2008
{/* TODO should this be localized? */}
</h4>
<p>
<FormattedMessage id="annualReport.milestones2008Message" />
</p>
<img src="/images/annual-report/milestones/2008_Conference.jpg" />
</div>
<div className="milestone-box">
<h4>
2009
{/* TODO should this be localized? */}
</h4>
<p>
<FormattedMessage id="annualReport.milestones2009Message1.4" />
</p>
<img src="/images/annual-report/milestones/2009_Scratch1_4.png" />
</div>
<div className="milestone-box">
<h4>
2009
{/* TODO should this be localized? */}
</h4>
<p>
<FormattedMessage id="annualReport.milestones2009MessageScratchDay" />
</p>
</div>
<div className="milestone-box">
<h4>
2010
{/* TODO should this be localized? */}
</h4>
<p>
<FormattedMessage id="annualReport.milestones2010Message" />
</p>
</div>
</div>
<MediaQuery
className="milestone-boxes"
minWidth={frameless.tabletPortrait}
>
<img src="/images/annual-report/milestones/timeline2.svg" />
</MediaQuery>
</div>
</div>
</div> </div>
<div <div
className="our-reach section" className="our-reach section"

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

@ -168,6 +168,8 @@ h5 {
.inner { .inner {
width: 940px; width: 940px;
display: flex; display: flex;
flex-direction: column;
align-items: center;
} }
h2, h4 p { h2, h4 p {
@ -178,11 +180,22 @@ h5 {
font-size: 1.25rem; font-size: 1.25rem;
} }
.milestones-intro { .milestones-wrapper {
margin-right: 20px; display: flex;
} }
.milestones-boxes { .milestones-intro {
//margin-right: 88px;
display: flex;
flex-direction: column;
img {
flex-grow: 2;
}
}
.milestone-boxes {
margin: 0 44px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: flex-start; justify-content: flex-start;
@ -213,7 +226,7 @@ h5 {
.financials-section { .financials-section {
.inner { .inner {
max-width: 780px; /** max-width: 780px; **/
padding: 80px 0; padding: 80px 0;
} }
@ -320,7 +333,7 @@ h5 {
@media #{$intermediate-and-smaller} { @media #{$intermediate-and-smaller} {
.inner { .inner {
max-width: 620px; // max-width: 620px;
padding: 72px 0; padding: 72px 0;
} }
@ -340,7 +353,7 @@ h5 {
@media #{$medium-and-smaller} { @media #{$medium-and-smaller} {
.inner { .inner {
max-width: 460px; // max-width: 460px;
padding: 64px 0; padding: 64px 0;
} }
@ -351,7 +364,8 @@ h5 {
@media #{$small} { @media #{$small} {
.inner { .inner {
max-width: 300px; /** max-width: 300px; **/
width: 100%;
} }
h2 { h2 {

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

@ -67,6 +67,11 @@
"annualReport.milestones2003Message": "Awarded National Science Foundation grant to start development of Scratch", "annualReport.milestones2003Message": "Awarded National Science Foundation grant to start development of Scratch",
"annualReport.milestones2004Message": "Offered first Scratch workshop at Computer Clubhouse Teen Summit", "annualReport.milestones2004Message": "Offered first Scratch workshop at Computer Clubhouse Teen Summit",
"annualReport.milestones2007Message": "Public launch of Scratch programming language and online community", "annualReport.milestones2007Message": "Public launch of Scratch programming language and online community",
"annualReport.milestones2008Message": "Organized first Scratch Conference for educators and developers",
"annualReport.milestones2009Message1.4": "Released Scratch 1.4, translated into more than 40 languages",
"annualReport.milestones2009MessageScratchDay": "Hosted first Scratch Day event for children and families",
"annualReport.milestones2010Message": "Scratch online community reaches 1 million members",
"annualReport.financialsTitle": "Financials - 2019", "annualReport.financialsTitle": "Financials - 2019",
"annualReport.financialsRevenue": "Revenues", "annualReport.financialsRevenue": "Revenues",