scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2025-02-17 00:21:20 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Initial work on milestones section - WIP - needs cleanup

Browse source
This commit is contained in:
Karishma Chadha 2020-08-31 17:00:50 -04:00
parent a70dbce670
commit 969544da7f
16 changed files with 266 additions and 136 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,15 +1,15 @@
const bindAll = require('lodash.bindall');
// const bindAll = require('lodash.bindall');
const FormattedHTMLMessage = require('react-intl').FormattedHTMLMessage;
const FormattedMessage = require('react-intl').FormattedMessage;
const injectIntl = require('react-intl').injectIntl;
const intlShape = require('react-intl').intlShape;
// const injectIntl = require('react-intl').injectIntl;
// const intlShape = require('react-intl').intlShape;
const React = require('react');
const Button = require('../../components/forms/button.jsx');
const FlexRow = require('../../components/flex-row/flex-row.jsx');
const MasonryGrid = require('../../components/masonrygrid/masonrygrid.jsx');
// const MasonryGrid = require('../../components/masonrygrid/masonrygrid.jsx');
const TitleBanner = require('../../components/title-banner/title-banner.jsx');
const NavigationBox = require('../../components/navigation/base/navigation.jsx');
// const NavigationBox = require('../../components/navigation/base/navigation.jsx');
const Comment = require('../../components/comment/comment.jsx');
const Page = require('../../components/page/www/page.jsx');
@ -21,60 +21,60 @@ const AnnualReport = () => (
<div>
<div className="subnavigation">
<FlexRow className="inner">
<a
className="link"
href="/annual-report#message"
>
<FormattedMessage id="annualReport.subnavMessage" />
</a>
<a
className="link"
href="/annual-report#mission"
>
<FormattedMessage id="annualReport.subnavMission" />
</a>
<a
className="link"
href="/annual-report#reach"
>
<FormattedMessage id="annualReport.subnavReach" />
</a>
<a
className="link"
href="/annual-report#timeline"
>
<FormattedMessage id="annualReport.subnavTimeline" />
</a>
<a
className="link"
href="/annual-report#work"
>
<FormattedMessage id="annualReport.subnavWork" />
</a>
<a
className="link"
href="/annual-report#financials"
>
<FormattedMessage id="annualReport.subnavFinancials" />
</a>
<a
className="link"
href="/annual-report#supporters"
>
<FormattedMessage id="annualReport.subnavSupporters" />
</a>
<a
className="link"
href="/annual-report#leadership"
>
<FormattedMessage id="annualReport.subnavLeadership" />
</a>
<a
className="link"
href="/annual-report#donate"
>
<FormattedMessage id="annualReport.subnavDonate" />
</a>
<a
className="link"
href="/annual-report#message"
>
<FormattedMessage id="annualReport.subnavMessage" />
</a>
<a
className="link"
href="/annual-report#mission"
>
<FormattedMessage id="annualReport.subnavMission" />
</a>
<a
className="link"
href="/annual-report#reach"
>
<FormattedMessage id="annualReport.subnavReach" />
</a>
<a
className="link"
href="/annual-report#milestones"
>
<FormattedMessage id="annualReport.subnavMilestones" />
</a>
<a
className="link"
href="/annual-report#work"
>
<FormattedMessage id="annualReport.subnavWork" />
</a>
<a
className="link"
href="/annual-report#financials"
>
<FormattedMessage id="annualReport.subnavFinancials" />
</a>
<a
className="link"
href="/annual-report#supporters"
>
<FormattedMessage id="annualReport.subnavSupporters" />
</a>
<a
className="link"
href="/annual-report#leadership"
>
<FormattedMessage id="annualReport.subnavLeadership" />
</a>
<a
className="link"
href="/annual-report#donate"
>
<FormattedMessage id="annualReport.subnavDonate" />
</a>
</FlexRow>
</div>
<div className="banner-wrapper">
@ -93,33 +93,63 @@ const AnnualReport = () => (
</div>
</TitleBanner>
</div>
<div className="mission" id="mission">
<div
className="mission"
id="mission"
>
<div className="inner">
<FlexRow
as="section"
className="tips-info-section tips-left"
>
<div className="ideas-image">
<img src="/images/ideas/getting-started-illustration.svg" />
</div>
<div>
<h2>
<FormattedMessage id="ideas.gettingStartedTitle" />
</h2>
<p>
<FormattedHTMLMessage id="ideas.gettingStartedText" />
</p>
<a href="/projects/editor/?tutorial=getStarted">
<Button className="ideas-button">
<img src="/images/ideas/try-it-icon.svg" />
<FormattedMessage id="ideas.tryIt" />
</Button>
</a>
</div>
</FlexRow>
</div>
</div>
<div className="our-reach" id="reach">
<div
className="milestones-section"
id="milestones"
>
<div className="inner">
<div className="milestones-intro">
<h2>
<FormattedMessage id="annualReport.milestonesTitle" />
</h2>
<p>
<FormattedMessage id="annualReport.milestonesDescription" />
</p>
</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" />
</div>
</div>
</div>
</div>
<div
className="our-reach"
id="reach"
>
<div className="inner">
<section className="ttt-section">
<div className="ttt-head">
@ -141,7 +171,10 @@ const AnnualReport = () => (
</section>
</div>
</div>
<div className="history" id="history">
<div
className="our-work"
id="work"
>
<div className="inner">
<section className="ttt-section">
<div className="ttt-head">
@ -163,36 +196,17 @@ const AnnualReport = () => (
</section>
</div>
</div>
<div className="our-work" id="work">
<div
className="financials-section"
id="financials"
>
<div className="inner">
<section className="ttt-section">
<div className="ttt-head">
<h2>
<FormattedMessage id="ideas.activityGuidesTitle" />
</h2>
<p>
<FormattedHTMLMessage id="ideas.activityGuidesText" />
</p>
</div>
<a
className="wide-button"
href="/projects/editor/?tutorial=all"
>
<Button className="ideas-button wide-button">
<FormattedMessage id="ideas.seeAllTutorials" />
</Button>
</a>
</section>
</div>
</div>
<div className="financials-section" id="financials">
<div className="inner">
<h1 className="financials-h1">
<h2 className="financials-h2">
<FormattedMessage id="annualReport.financialsTitle" />
</h1>
<h2>
<FormattedMessage id="annualReport.financialsRevenue" />
</h2>
<h3>
<FormattedMessage id="annualReport.financialsRevenue" />
</h3>
<hr />
<div className="financials-content">
<div className="financials-table">
@ -243,12 +257,15 @@ const AnnualReport = () => (
</div>
</div>
</div>
<img className="graph" src="/images/annual-report/revenue-graph.svg" />
<img
className="graph"
src="/images/annual-report/revenue-graph.svg"
/>
</div>
<h2>
<h3>
<FormattedMessage id="annualReport.financialsExpenses" />
</h2>
<hr/>
</h3>
<hr />
<div className="financials-content">
<div className="financials-table">
<div className="circle-and-words">
@ -298,7 +315,10 @@ const AnnualReport = () => (
</div>
</div>
</div>
<img className="graph" src="/images/annual-report/expenses-graph.svg" />
<img
className="graph"
src="/images/annual-report/expenses-graph.svg"
/>
</div>
<div className="financials-button-wrapper">
<a href="https://secure.donationpay.org/scratchfoundation/">
@ -313,12 +333,15 @@ const AnnualReport = () => (
</div>
</div>
</div>
<div className="supporters-section" id="supporters">
<div
className="supporters-section"
id="supporters"
>
<div className="inner">
<div className="supporters-heading">
<h1>
<h2>
<FormattedMessage id="annualReport.supportersTitle" />
</h1>
</h2>
<p>
<FormattedHTMLMessage id="annualReport.supportersIntro" />
</p>
@ -328,9 +351,9 @@ const AnnualReport = () => (
<FormattedHTMLMessage id="annualReport.supportersSpotlightTitle" />
</div>
<div className="sfe-info">
<h2>
<h3>
<FormattedMessage id="annualReport.supportersSFETitle" />
</h2>
</h3>
<p>
<FormattedMessage id="annualReport.supportersSFEDescription" />
</p>
@ -342,19 +365,23 @@ const AnnualReport = () => (
<div>Co-Founder and<br /> Co-Chairman<br /> Two Sigma</div>
</div>
<div className="ds-quote">
{/* eslint-disable-next-line */}
<Comment comment="Making sure that Scratch remains free and accessible for kids everywhere is one of the most impactful ways we can help young learners engage and thrive in an increasingly digital world. Supporting Scratch is more important today than ever before." />
</div>
</div>
</div>
</div>
</div>
<div className="donate-section" id="donate">
<div
className="donate-section"
id="donate"
>
<FlexRow className="donate-info">
<img src="/images/annual-report/donate-illustration.svg" />
<div className="donate-content">
<h1 className="donate-h1">
<h2 className="donate-h2">
<FormattedMessage id="annualReport.donateTitle" />
</h1>
</h2>
<p className="donate-p">
<FormattedMessage id="annualReport.donateMessage" />
</p>

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

@ -8,6 +8,24 @@ $base-bg: $ui-white;
padding: 0;
}
// body {
// font-family: "Helvetica Neue";
// }
h2 {
font-size: 3.25rem;
line-height: 4rem;
}
// h3 {
//
// }
h4 {
font-size: 1.5rem;
line-height: 2rem;
}
.banner-wrapper {
background: $ui-yellow bottom right url("/images/ideas/right-juice.png") no-repeat;
}
@ -127,6 +145,55 @@ $base-bg: $ui-white;
margin-bottom: 0;
}
.milestones-section {
background-color: $ui-blue-10percent;
.inner {
width: 940px;
display: flex;
}
h2, h4 p {
color: $type-gray;
}
p {
font-size: 1.25rem;
}
.milestones-intro {
margin-right: 20px;
}
.milestones-boxes {
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.milestone-box {
&.first {
margin-top: 4px;
}
&.last {
margin-bottom: 4px;
}
img {
height: 240px;
border-radius: 8px;
}
width: 460px;
background-color: $ui-white;
border-radius: 8px;
padding: 16px;
margin-bottom: 12px;
}
}
.financials-section {
.inner {
max-width: 780px;
@ -134,14 +201,14 @@ $base-bg: $ui-white;
}
background-color: #575E75;
width: 100%;
width: 100%;
color: #FFFFFF;
h1, h2, p {
h2, h3, p {
color: #FFFFFF;
}
h1 {
h2 {
font-size: 52px;
margin-bottom: 72px;
line-height: 64px;
@ -230,7 +297,7 @@ $base-bg: $ui-white;
}
@media #{$medium-and-smaller} {
h1 {
h2 {
position: relative;
margin-bottom: 40px;
max-width: 300px;
@ -288,12 +355,12 @@ $base-bg: $ui-white;
.supporters-heading {
margin-bottom: 48px;
h1 {
h2 {
font-size: 52px;
padding-bottom: 52px;
}
p {
p {
font-size: 24px;
margin: 0;
}
@ -353,7 +420,7 @@ $base-bg: $ui-white;
line-height: 32px;
padding: 32px;
}
}
.donate-section {
@ -374,7 +441,7 @@ $base-bg: $ui-white;
height: 300px;
}
h1 {
h2 {
height: 62px;
width: 460px;
color: $ui-white;
@ -599,7 +666,7 @@ img.tips-icon {
text-decoration: underline;
}
}
@media #{$medium-and-smaller} {
height: auto;
@ -620,7 +687,7 @@ img.tips-icon {
text-decoration: none;
background-color: $box-shadow-gray;
}
}
}
}
}
}

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

@ -54,14 +54,20 @@
"annualReport.subnavMessage": "Message",
"annualReport.subnavMission": "Mission",
"annualReport.subnavMilestones": "Milestones",
"annualReport.subnavReach": "Reach",
"annualReport.subnavTimeline": "Timeline",
"annualReport.subnavWork": "Work",
"annualReport.subnavFinancials": "Financials",
"annualReport.subnavSupporters": "Supporters",
"annualReport.subnavLeadership": "Leadership",
"annualReport.subnavDonate": "Donate",
"annualReport.milestonesTitle": "Milestones",
"annualReport.milestonesDescription": "Here are some key events and accomplishments in the history of Scratch and the global Scratch community.",
"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.financialsTitle": "Financials - 2019",
"annualReport.financialsRevenue": "Revenue",
"annualReport.financialsGrants": "Grants, Individual, & Corporate Donations (Gala Included)",

BIN
static/images/annual-report/milestones/2004_Clubhouse.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.3 MiB

BIN
static/images/annual-report/milestones/2007_EarlyScratch.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.7 MiB

BIN
static/images/annual-report/milestones/2008_Conference.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 159 KiB

BIN
static/images/annual-report/milestones/2009_Scratch1_4.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 600 KiB

BIN
static/images/annual-report/milestones/2013_Scratch2.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 256 KiB

BIN
static/images/annual-report/milestones/2014_ScratchJr.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 231 KiB

BIN
static/images/annual-report/milestones/2019_Scratch3.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 506 KiB

1
static/images/annual-report/milestones/timeline1.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 9.7 KiB

1
static/images/annual-report/milestones/timeline2.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 6.9 KiB

1
static/images/annual-report/milestones/timeline3.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 6.5 KiB

1
static/images/annual-report/milestones/timeline4.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 10 KiB

13
static/images/annual-report/milestones/timeline_line_left.svg Normal file
View file

@ -0,0 +1,13 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="466px" height="146px" viewBox="0 0 466 146" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 63.1 (92452) - https://sketch.com -->
<title>Path Copy</title>
<desc>Created with Sketch.</desc>
<g id="Timeline-R5" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-dasharray="1,16" stroke-linecap="round" stroke-linejoin="round">
<g id="Timeline-12-column-Trees" transform="translate(-408.000000, -2168.000000)" stroke="#4C97FF" stroke-width="6">
<g id="Lines" transform="translate(411.000000, 1312.000000)">
<path d="M0,999 L0,955.468966 C1.92946468e-15,942.214132 10.745166,931.468966 24,931.468966 L436,931.468966 C449.254834,931.468966 460,920.7238 460,907.468966 L460,855 L460,855" id="Path-Copy" transform="translate(230.000000, 927.000000) scale(-1, 1) translate(-230.000000, -927.000000) "></path>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1 KiB

13
static/images/annual-report/milestones/timeline_line_right.svg Normal file
View file

@ -0,0 +1,13 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="466px" height="146px" viewBox="0 0 466 146" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 63.1 (92452) - https://sketch.com -->
<title>Path Copy 2</title>
<desc>Created with Sketch.</desc>
<g id="Timeline-R5" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-dasharray="1,16" stroke-linecap="round" stroke-linejoin="round">
<g id="Timeline-12-column-Trees" transform="translate(-408.000000, -3176.000000)" stroke="#4C97FF" stroke-width="6">
<g id="Lines" transform="translate(411.000000, 1312.000000)">
<path d="M0,2007 L0,1963.46897 C1.92946468e-15,1950.21413 10.745166,1939.46897 24,1939.46897 L436,1939.46897 C449.254834,1939.46897 460,1928.7238 460,1915.46897 L460,1863 L460,1863" id="Path-Copy-2"></path>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 948 B