scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2025-08-28 22:12:19 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

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
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",

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

@ -284,44 +284,100 @@ 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">
<h2> <div className="milestone-boxes">
<FormattedMessage id="annualReport.milestonesTitle" /> <h2>
</h2> <FormattedMessage id="annualReport.milestonesTitle" />
<p> </h2>
<FormattedMessage id="annualReport.milestonesDescription" /> <p>
</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>
<div className="milestones-boxes"> <MediaQuery minWidth={frameless.tabletPortrait}>
<div className="milestone-box first"> <img src="/images/annual-report/milestones/timeline_line_right.svg" />
<h4> </MediaQuery>
2003 <div className="milestones-wrapper">
{/* TODO should this be localized? */} <div className="milestone-boxes">
</h4> <div className="milestone-box">
<p> <h4>
<FormattedMessage id="annualReport.milestones2003Message" /> 2008
</p> {/* TODO should this be localized? */}
</div> </h4>
<div className="milestone-box"> <p>
<h4> <FormattedMessage id="annualReport.milestones2008Message" />
2004 </p>
{/* TODO should this be localized? */} <img src="/images/annual-report/milestones/2008_Conference.jpg" />
</h4> </div>
<p> <div className="milestone-box">
<FormattedMessage id="annualReport.milestones2004Message" /> <h4>
</p> 2009
<img src="/images/annual-report/milestones/2004_Clubhouse.jpg" /> {/* TODO should this be localized? */}
</div> </h4>
<div className="milestone-box last"> <p>
<h4> <FormattedMessage id="annualReport.milestones2009Message1.4" />
2007 </p>
{/* TODO should this be localized? */} <img src="/images/annual-report/milestones/2009_Scratch1_4.png" />
</h4> </div>
<p> <div className="milestone-box">
<FormattedMessage id="annualReport.milestones2007Message" /> <h4>
</p> 2009
<img src="/images/annual-report/milestones/2007_EarlyScratch.png" /> {/* 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> </div>
<MediaQuery
className="milestone-boxes"
minWidth={frameless.tabletPortrait}
>
<img src="/images/annual-report/milestones/timeline2.svg" />
</MediaQuery>
</div> </div>
</div> </div>
</div> </div>

34
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,14 +180,25 @@ h5 {
font-size: 1.25rem; font-size: 1.25rem;
} }
.milestones-intro { .milestones-wrapper {
margin-right: 20px; display: flex;
} }
.milestones-boxes { .milestones-intro {
display: flex; //margin-right: 88px;
flex-direction: column; display: flex;
justify-content: flex-start; flex-direction: column;
img {
flex-grow: 2;
}
}
.milestone-boxes {
margin: 0 44px;
display: flex;
flex-direction: column;
justify-content: flex-start;
} }
.milestone-box { .milestone-box {
@ -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",