Skip to content

GitLab

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

continued work on supporters section

parent 10baf9f7
Hide whitespace changes
Inline Side-by-side
Showing with 239 additions and 23 deletions
src/views/annual-report/annual-report.jsx
View file @ ff24f74f
// const bindAll = require('lodash.bindall');
const FormattedHTMLMessage = require('react-intl').FormattedHTMLMessage;
const FormattedMessage = require('react-intl').FormattedMessage;
// const injectIntl = require('react-intl').injectIntl;
const injectIntl = require('react-intl').injectIntl;
// const intlShape = require('react-intl').intlShape;
const React = require('react');
......@@ -346,11 +346,11 @@ const AnnualReport = () => (
<FormattedHTMLMessage id="annualReport.supportersIntro" />
</p>
</div>
<div className="donor-spotlight">
<div className="subsection-tag">
<FormattedHTMLMessage id="annualReport.supportersSpotlightTitle" />
</div>
<div className="sfe-info">
<div className="subsection-tag">
<FormattedHTMLMessage id="annualReport.supportersSpotlightTitle" />
</div>
<div className="supporters-subsection">
<div className="supporters-blurb">
<h3>
<FormattedMessage id="annualReport.supportersSFETitle" />
</h3>
......@@ -361,8 +361,10 @@ const AnnualReport = () => (
<div className="david-siegel">
<div className="ds-info">
<img src="/images/annual-report/david-siegel-photo.svg" />
<h3>David Siegel</h3>
<div>Co-Founder and<br /> Co-Chairman<br /> Two Sigma</div>
<div>
<h3>David Siegel</h3>
<div>Co-Founder and<br /> Co-Chairman<br /> Two Sigma</div>
</div>
</div>
<div className="ds-quote">
{/* eslint-disable-next-line */}
......@@ -370,6 +372,150 @@ const AnnualReport = () => (
</div>
</div>
</div>
<div className="supporters-subsection">
<div className="supporters-blurb">
<h4>
<FormattedHTMLMessage id="annualReport.supportersTitle" />
</h4>
<p>
<FormattedHTMLMessage id="annualReport.supportersAllDescription" />
</p>
</div>
<div className="supporters-level">
<h5>Founding Partners — $10,00,000+</h5>
<hr />
<p>We are especially grateful to our Founding Partners who supported us from the early days of Scratch, each providing at least $10,000,000 of cumulative support, in various forms.</p>
<div className="supporters-list">
<ul className="supporters-list-side">
<li>National Science Foundation</li>
<li>Massachusetts Institute of Technology</li>
</ul>
<ul className="supporters-list-side">
<li>Siegel Family Endowment</li>
<li>LEGO Foundation</li>
</ul>
</div>
</div>
<div className="supporters-level">
<h5>Innovation Circle — $5,00,000+</h5>
<hr />
<div className="supporters-list">
<ul className="supporters-list-side">
<li>Google</li>
</ul>
</div>
</div>
<div className="supporters-level">
<h5>Creativity Circle — $1,00,000++</h5>
<hr />
<div className="supporters-list">
<ul className="supporters-list-side">
<li>Little Bluebridge Foundation</li>
<li>Smilegate Foundation</li>
<li>TAL Education</li>
</ul>
<ul className="supporters-list-side">
<li>Turner Broadcasting System / Cartoon Network (?)</li>
</ul>
</div>
</div>
<div className="supporters-level">
<h5>Imagination Circle — $200,000+</h5>
<hr />
<div className="supporters-list">
<ul className="supporters-list-side">
<li>BrainPOP</li>
<li>Cindy and Evan Goldberg</li>
<li>Kahn-Rowe Family Fund</li>
<li>LEGO Education</li>
</ul>
<ul className="supporters-list-side">
<li>Mark Dalton</li>
<li>Morgan Stanley</li>
<li>Paul T. Jones</li>
<li>Two Sigma</li>
</ul>
</div>
</div>
<div className="supporters-level">
<h5>Inspiration Circle — $50,000+</h5>
<hr />
<div className="supporters-list">
<ul className="supporters-list-side">
<li>BrainPOP</li>
<li>Cindy and Evan Goldberg</li>
<li>Kahn-Rowe Family Fund</li>
<li>LEGO Education</li>
</ul>
<ul className="supporters-list-side">
<li>Mark Dalton</li>
<li>Morgan Stanley</li>
<li>Paul T. Jones</li>
<li>Two Sigma</li>
</ul>
</div>
</div>
<div className="supporters-level">
<h5>Collaboration Circle — $20,000+</h5>
<hr />
<div className="supporters-list">
<ul className="supporters-list-side">
<li>BrainPOP</li>
<li>Cindy and Evan Goldberg</li>
<li>Kahn-Rowe Family Fund</li>
<li>LEGO Education</li>
</ul>
<ul className="supporters-list-side">
<li>Mark Dalton</li>
<li>Morgan Stanley</li>
<li>Paul T. Jones</li>
<li>Two Sigma</li>
</ul>
</div>
</div>
<div className="supporters-level">
<h5>Tinkering Circle — $5,000+</h5>
<hr />
<div className="supporters-list">
<ul className="supporters-list-side">
<li>BrainPOP</li>
<li>Cindy and Evan Goldberg</li>
<li>Kahn-Rowe Family Fund</li>
<li>LEGO Education</li>
</ul>
<ul className="supporters-list-side">
<li>Mark Dalton</li>
<li>Morgan Stanley</li>
<li>Paul T. Jones</li>
<li>Two Sigma</li>
</ul>
</div>
</div>
</div>
<div className="supporters-subsection">
<div className="supporters-level">
<h3>
<FormattedHTMLMessage id="annualReport.supportersInKindTitle" />
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vitae commodo orci, quis ultricies nisi
</p>
<div className="supporters-list">
<ul className="supporters-list-side">
<li>Amazon Web Services</li>
<li>Cindy and Evan Goldberg</li>
<li>Kahn-Rowe Family Fund</li>
<li>LEGO Education</li>
</ul>
<ul className="supporters-list-side">
<li>Mark Dalton</li>
<li>Morgan Stanley</li>
<li>Paul T. Jones</li>
<li>Two Sigma</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div
......@@ -397,4 +543,5 @@ const AnnualReport = () => (
);
render(
<Page><AnnualReport /></Page>, document.getElementById('app'));
<Page><AnnualReport /></Page>, document.getElementById('app')
);
src/views/annual-report/annual-report.scss
View file @ ff24f74f
......@@ -26,6 +26,18 @@ h4 {
line-height: 2rem;
}
h5 {
text-transform: none;
font-size: 1rem;
margin: .5rem 0;
}
@media #{$small} {
.inner {
width: $cols4;
}
}
.banner-wrapper {
background: $ui-yellow bottom right url("/images/ideas/right-juice.png") no-repeat;
}
......@@ -331,14 +343,14 @@ h4 {
.subsection-tag {
color: $ui-white;
font-size: 16px;
font-size: 1rem;
font-weight: bold;
background-color: $ui-blue;
text-align: center;
border-radius: 36px;
display:inline-flex;
display: inline-flex;
width: max-content;
padding: 12px 36px;
}
......@@ -348,7 +360,7 @@ h4 {
padding: 84px 0;
.inner {
width: 780px;
max-width: 780px;
}
.supporters-heading {
......@@ -367,16 +379,16 @@ h4 {
.subsection-tag {
background-color: $ui-orange;
align-self: flex-start;
margin-bottom: 48px;
}
.donor-spotlight {
.supporters-subsection {
display: flex;
flex-direction: column;
align-items: center;
text-align: left;
margin: 48px 80px 0px 80px;
h2 {
font-size: 24px;
font-color: #575E75;
......@@ -387,8 +399,8 @@ h4 {
}
}
.sfe-info {
width: 620px;
.supporters-blurb {
// max-width: 620px;
}
.david-siegel {
......@@ -396,7 +408,7 @@ h4 {
align-items: flex-start;
.ds-info {
text-align: center;
display: flex;
padding: 0 20px;
margin-right: 18px;
......@@ -405,8 +417,8 @@ h4 {
}
div {
font-size: 16px;
padding: 18px;
//font-size: 16px;
//padding: 18px;
}
}
}
......@@ -416,8 +428,63 @@ h4 {
text-align: left;
margin-top: 16px;
line-height: 32px;
padding: 32px;
p {
font-size: 1.25rem;
line-height: 2.25rem;
}
}
.supporters-level {
width: 100%;
.supporters-list {
display: flex;
}
.supporters-list-side {
margin: 0 1.25rem 0 0;
li {
margin: 0 0 .75rem 0;
padding: 0 auto;
width: 300px;
overflow: wrap;
}
}
}
@media #{$medium-and-smaller} {
.supporters-subsection {
margin: 0;
}
.supporters-list {
flex-direction: column;
align-content: flex-start;
}
}
@media #{$intermediate-and-smaller} {
.supporters-subsection {
text-align: left;
}
.ds-info {
flex-direction: row;
text-align: left;
}
.david-siegel {
flex-direction: column;
align-items: center;
}
}
@media #{$big} {
.ds-info {
flex-direction: column;
text-align: center;
}
}
}
......
src/views/annual-report/l10n.json
View file @ ff24f74f
......@@ -85,6 +85,8 @@
"annualReport.supportersSpotlightTitle": "Donor - Spotlight Story",
"annualReport.supportersSFETitle": "Siegel Family Endowment",
"annualReport.supportersSFEDescription": "In May 2012, David Siegel attended Scratch Day at the MIT Media Lab along with his son Zach, an active and enthusiastic Scratcher. Watching Zach and other children using Scratch to code their own games, animations, and robotic creatures, David saw how Scratch could help children learn practical coding skills and develop as computational thinkers. A few days later, David made his first donation to support Scratch.",
"annualReport.supportersAllDescription": "Our mission is to provide all children, from all backgrounds, with opportunities to imagine, create, and share with new technologies. We want to thank all Scratch supporters who, throughout the years, have helped us create amazing learning experiences for millions of young people around the world. The following list is based on cumulative giving to Scratch (at both MIT and Scratch Foundation) through December 31, 2019.",
"annualReport.supportersInKindTitle": "In-Kind Supporters 2019 – 2020",
"annualReport.donateTitle": "Donate",
"annualReport.donateMessage": "Your support enables us to make Scratch free for everyone, keeps our servers running, and most importantly, we are able to provide kids around the world an opportunity to imagine, create and share. Thank you!",
......
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