mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2024-11-27 09:35:56 -05:00
progress on milestones section
This commit is contained in:
seotts
Karishma Chadha
parent
b00110c025
commit
6617db7c8b
4 changed files with 123 additions and 47 deletions
|
|
@ -11,7 +11,8 @@
|
|||
"pattern": "^/annual-report/?$",
|
||||
"routeAlias": "/annual-report/?$",
|
||||
"view": "annual-report/annual-report",
|
||||
"title": "annual-report"
|
||||
"title": "annual-report",
|
||||
"viewportWidth": "device-width"
|
||||
},
|
||||
{
|
||||
"name": "camp",
|
||||
|
|
|
|||
|
|
@ -284,44 +284,100 @@ class AnnualReport extends React.Component {
|
|||
ref={this.setRef(SECTIONS.milestones)}
|
||||
>
|
||||
<div className="inner">
|
||||
<div className="milestones-intro">
|
||||
<h2>
|
||||
<FormattedMessage id="annualReport.milestonesTitle" />
|
||||
</h2>
|
||||
<p>
|
||||
<FormattedMessage id="annualReport.milestonesDescription" />
|
||||
</p>
|
||||
<div className="milestones-wrapper">
|
||||
<div className="milestone-boxes">
|
||||
<h2>
|
||||
<FormattedMessage id="annualReport.milestonesTitle" />
|
||||
</h2>
|
||||
<p>
|
||||
<FormattedMessage id="annualReport.milestonesDescription" />
|
||||
</p>
|
||||
<MediaQuery minWidth={frameless.tabletPortrait}>
|
||||
<img src="/images/annual-report/milestones/timeline1.svg" />
|
||||
</MediaQuery>
|
||||
</div>
|
||||
<div className="milestone-boxes">
|
||||
<div className="milestone-box first">
|
||||
<h4>
|
||||
2003
|
||||
{/* TODO should this be localized? */}
|
||||
</h4>
|
||||
<p>
|
||||
<FormattedMessage id="annualReport.milestones2003Message" />
|
||||
</p>
|
||||
</div>
|
||||
<div className="milestone-box">
|
||||
<h4>
|
||||
2004
|
||||
{/* TODO should this be localized? */}
|
||||
</h4>
|
||||
<p>
|
||||
<FormattedMessage id="annualReport.milestones2004Message" />
|
||||
</p>
|
||||
<img src="/images/annual-report/milestones/2004_Clubhouse.jpg" />
|
||||
</div>
|
||||
<div className="milestone-box last">
|
||||
<h4>
|
||||
2007
|
||||
{/* TODO should this be localized? */}
|
||||
</h4>
|
||||
<p>
|
||||
<FormattedMessage id="annualReport.milestones2007Message" />
|
||||
</p>
|
||||
<img src="/images/annual-report/milestones/2007_EarlyScratch.png" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="milestones-boxes">
|
||||
<div className="milestone-box first">
|
||||
<h4>
|
||||
2003
|
||||
{/* TODO should this be localized? */}
|
||||
</h4>
|
||||
<p>
|
||||
<FormattedMessage id="annualReport.milestones2003Message" />
|
||||
</p>
|
||||
</div>
|
||||
<div className="milestone-box">
|
||||
<h4>
|
||||
2004
|
||||
{/* TODO should this be localized? */}
|
||||
</h4>
|
||||
<p>
|
||||
<FormattedMessage id="annualReport.milestones2004Message" />
|
||||
</p>
|
||||
<img src="/images/annual-report/milestones/2004_Clubhouse.jpg" />
|
||||
</div>
|
||||
<div className="milestone-box last">
|
||||
<h4>
|
||||
2007
|
||||
{/* TODO should this be localized? */}
|
||||
</h4>
|
||||
<p>
|
||||
<FormattedMessage id="annualReport.milestones2007Message" />
|
||||
</p>
|
||||
<img src="/images/annual-report/milestones/2007_EarlyScratch.png" />
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -168,6 +168,8 @@ h5 {
|
|||
.inner {
|
||||
width: 940px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
h2, h4 p {
|
||||
|
|
@ -178,14 +180,25 @@ h5 {
|
|||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.milestones-intro {
|
||||
margin-right: 20px;
|
||||
.milestones-wrapper {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.milestones-boxes {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
.milestones-intro {
|
||||
//margin-right: 88px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
img {
|
||||
flex-grow: 2;
|
||||
}
|
||||
}
|
||||
|
||||
.milestone-boxes {
|
||||
margin: 0 44px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.milestone-box {
|
||||
|
|
@ -213,7 +226,7 @@ h5 {
|
|||
|
||||
.financials-section {
|
||||
.inner {
|
||||
max-width: 780px;
|
||||
/** max-width: 780px; **/
|
||||
padding: 80px 0;
|
||||
}
|
||||
|
||||
|
|
@ -320,7 +333,7 @@ h5 {
|
|||
|
||||
@media #{$intermediate-and-smaller} {
|
||||
.inner {
|
||||
max-width: 620px;
|
||||
// max-width: 620px;
|
||||
padding: 72px 0;
|
||||
}
|
||||
|
||||
|
|
@ -340,7 +353,7 @@ h5 {
|
|||
|
||||
@media #{$medium-and-smaller} {
|
||||
.inner {
|
||||
max-width: 460px;
|
||||
// max-width: 460px;
|
||||
padding: 64px 0;
|
||||
}
|
||||
|
||||
|
|
@ -351,7 +364,8 @@ h5 {
|
|||
|
||||
@media #{$small} {
|
||||
.inner {
|
||||
max-width: 300px;
|
||||
/** max-width: 300px; **/
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
h2 {
|
||||
|
|
|
|||
|
|
@ -67,6 +67,11 @@
|
|||
"annualReport.milestones2003Message": "Awarded National Science Foundation grant to start development of Scratch",
|
||||
"annualReport.milestones2004Message": "Offered first Scratch workshop at Computer Clubhouse Teen Summit",
|
||||
"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.financialsRevenue": "Revenues",
|
||||
|
|
|
|||
Loading…
Reference in a new issue