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

Merge pull request #6301 from kchadha/annual-report-fixes

Browse source 
[Develop] Annual report fixes
This commit is contained in:
Karishma Chadha 2021-11-16 11:47:36 -05:00 committed by GitHub
commit 78688203b1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 1133 additions and 900 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

77
src/components/text-and-media-snippet/text-and-media-snippet.jsx
View file

@ -7,22 +7,64 @@ const frameless = require('../../lib/frameless');
require('./text-and-media-snippet.scss');
// For left and right mode:
// Regular means text is on the left and media is on the right; reverse means these are swapped.
// For top and bottom mode:
// Regular means text is on top and media is on the bottom; and reverse means these are swapped.
const TextAndMediaSnippet = props => (
<div className={classNames('text-and-media-snippet', props.className)}>
{props.className === 'regular' &&
<div className="half">
<h4>{props.title}</h4>
<p>
{props.children}
</p>
</div>
<div className="half">
{props.type === 'video' &&
<div>
<MediaQuery
minWidth={frameless.mobile}
minWidth={frameless.desktop}
>
<VideoPreview
buttonMessage=""
thumbnail={props.largeImage}
thumbnailWidth="430"
videoHeight={430 * .568}
thumbnailWidth="420"
videoHeight={420 * .568}
videoId={props.videoId}
videoWidth="430"
videoWidth="420"
alt={props.alt}
spinnerColor={props.spinnerColor}
/>
</MediaQuery>
<MediaQuery
minWidth={frameless.tabletPortrait}
maxWidth={frameless.desktop - 1}
>
<VideoPreview
buttonMessage=""
thumbnail={props.largeImage}
thumbnailWidth="620"
videoHeight={620 * .568}
videoId={props.videoId}
videoWidth="620"
alt={props.alt}
spinnerColor={props.spinnerColor}
/>
</MediaQuery>
<MediaQuery
minWidth={frameless.mobile}
maxWidth={frameless.tabletPortrait - 1}
>
<VideoPreview
buttonMessage=""
thumbnail={props.largeImage}
thumbnailWidth="460"
videoHeight={460 * .568}
videoId={props.videoId}
videoWidth="460"
alt={props.alt}
spinnerColor={props.spinnerColor}
/>
@ -49,31 +91,6 @@ const TextAndMediaSnippet = props => (
/>
}
</div>
}
<div className="half">
<h5>{props.title}</h5>
<p>
{props.children}
</p>
</div>
{props.className === 'reverse' &&
<div className="half">
<img
className="large"
src={props.largeImage}
alt={props.alt}
/>
</div>
}
{props.className === 'full-width' &&
<div className="half">
<img
className="large"
src={props.largeImage}
alt={props.alt}
/>
</div>
}
</div>
);

120
src/components/text-and-media-snippet/text-and-media-snippet.scss
View file

@ -3,49 +3,121 @@
.text-and-media-snippet{
display: flex;
align-items: center;
justify-content: space-around;
margin: 30px 0;
&.between{
justify-content: space-between;
margin: 50px auto;
&.top {
margin-top: 75px;
}
&.regular {
flex-direction: row;
}
&.reverse {
flex-direction: row-reverse;
}
&.full-width{
flex-direction: column;
max-width: 780px;
margin: auto;
@media #{$intermediate} {
max-width: 620px;
}
@media #{$medium} {
max-width: 460px;
}
@media #{$small} {
max-width: 300px;
}
.half{
width: 100%;
img.large{
width: 100%;
}
}
}
@media #{$intermediate-and-smaller} {
text-align: center;
margin: 32px auto;
&.top {
margin-top: 32px;
}
&.regular {
flex-direction: column;
}
&.reverse{
@media #{$intermediate-and-smaller} {
&.reverse {
flex-direction: column-reverse;
}
}
.half{
max-width: 360px;
&.regular, &.reverse {
@media #{$intermediate} {
max-width: 620px;
}
@media #{$medium} {
max-width: 460px;
}
@media #{$small} {
max-width: 300px;
}
.half {
max-width: 400px;
width: 100%;
@media #{$intermediate} {
max-width: 620px;
}
@media #{$medium} {
max-width: 460px;
}
@media #{$small} {
max-width: 300px;
}
@media #{$intermediate-and-smaller} {
max-width: 430px;
width: 100%;
margin-bottom: 20px;
}
img.large{
max-width: 350px;
width: 100%;
@media #{$intermediate-and-smaller} {
max-width: 430px;
max-width: 420px;
width: 100%;
}
}
}
p{
font-size: 14px;
h4 {
font-size: 1.5rem;
}
&.big-title {
h4 {
font-size: 2.25rem;
line-height: 3rem;
}
margin: 25px auto;
}
p {
font-size: 1rem;
text-align: left;
}
&.full-width{
flex-direction: column;
max-width: 600px;
margin: auto;
.half{
max-width: 100%;
img.large{
max-width: 100%;
}
@media #{$intermediate-and-smaller} {
text-align: center;
}
}
}

24
src/components/timeline-card/timeline-card.jsx
View file

@ -2,12 +2,15 @@ const classNames = require('classnames');
const PropTypes = require('prop-types');
const React = require('react');
const VideoPreview = require('../video-preview/video-preview.jsx');
const frameless = require('../../lib/frameless.js');
const MediaQuery = require('react-responsive').default;
require('./timeline-card.scss');
const TimelineCard = props => (
<div className={classNames('timeline-card', props.className)}>
<div className="timeline-content">
<a
href={props.link}
rel="noreferrer noopener"
@ -22,16 +25,32 @@ const TimelineCard = props => (
<h4>{props.title}</h4>
<p>{props.text}</p>
{props.videoId &&
<div>
<MediaQuery minWidth={frameless.mobile}>
<VideoPreview
buttonMessage=""
thumbnail={props.image}
thumbnailWidth="100%"
videoHeight="216"
videoHeight={430 * .565}
videoId={props.videoId}
videoWidth="380"
videoWidth="430"
alt={props.alt}
spinnerColor={props.spinnerColor}
/>
</MediaQuery>
<MediaQuery maxWidth={frameless.mobile - 1}>
<VideoPreview
buttonMessage=""
thumbnail={props.image}
thumbnailWidth="100%"
videoHeight={270 * .565}
videoId={props.videoId}
videoWidth="270"
alt={props.alt}
spinnerColor={props.spinnerColor}
/>
</MediaQuery>
</div>
}
{!props.videoId && props.image &&
<img
@ -44,6 +63,7 @@ const TimelineCard = props => (
<p>{props.projectBy} {props.attribution}</p>
}
</div>
</div>
);
TimelineCard.propTypes = {

37
src/components/timeline-card/timeline-card.scss
View file

@ -3,15 +3,22 @@
$timeline-breakpoint: "only screen and (max-width : 1030px)";
.timeline-card{
max-width: 450px;
width: calc(100% - 30px);
max-width: 460px;
@media #{$small} {
max-width: 300px;
}
background-color: $ui-white;
border-radius: 8px;
padding: 15px;
position: relative;
z-index: 1;
margin-bottom: 30px;
p{
.timeline-content {
margin: 15px;
text-align: left;
p {
margin: 10px 0 0;
line-height: 1.5;
}
@ -20,6 +27,18 @@ $timeline-breakpoint: "only screen and (max-width : 1030px)";
right: 15px;
top: 15px;
}
img{
margin-top: 10px;
width: 100%;
}
.video-preview{
margin-top: 15px;
img{
margin-top: 0px;
}
}
}
&.center{
margin: 0 auto 30px;
}
@ -35,14 +54,4 @@ $timeline-breakpoint: "only screen and (max-width : 1030px)";
margin: 0 auto 30px;
}
}
img{
margin-top: 10px;
width: 100%;
}
.video-preview{
margin-top: 15px;
img{
margin-top: 0px;
}
}
}

2
src/lib/frameless.js
View file

@ -3,8 +3,8 @@
*/
const frameless = {
desktop: 942,
mobileIntermediate: 640,
tabletPortrait: 768,
mobileIntermediate: 640,
mobile: 480
};

4
src/routes.json
View file

@ -10,8 +10,8 @@
"name": "annual-report",
"pattern": "^/annual-report/?(\\?.*)?$",
"routeAlias": "/annual-report/?$",
"view": "annual-report/2019/annual-report",
"title": "Annual Report 2019",
"view": "annual-report/2020/annual-report",
"title": "Annual Report 2020",
"viewportWidth": "device-width"
},
{

130
src/views/annual-report/2020/annual-report.jsx
View file

@ -772,7 +772,7 @@ class AnnualReport extends React.Component {
</div>
</div>
</div>
<div className="inner">
<div className="inner translation">
<div className="reach-translation">
<div className="reach-translation-intro">
<h3>
@ -785,7 +785,11 @@ class AnnualReport extends React.Component {
{id: 'annualReport.2020.altArrowUp'}
)}
/>
<FormattedMessage id="annualReport.2020.reachTranslationIncrease" />
<span className="bold">
<FormattedMessage
id="annualReport.2020.reachTranslationIncrease"
/>
</span>
</div>
<p>
<FormattedMessage id="annualReport.2020.reachTranslationBlurb" />
@ -1059,9 +1063,9 @@ class AnnualReport extends React.Component {
<h2>
<FormattedMessage id="annualReport.2020.connectivityWorld" />
</h2>
<p className="bold">
<span className="subtitle bold">
<FormattedMessage id="annualReport.2020.connectivityWorldSubtitle" />
</p>
</span>
</div>
</div>
<div className="video-container connectivity">
@ -1125,7 +1129,6 @@ class AnnualReport extends React.Component {
<div className="inner">
<div className="flex-content">
<CountryBlurb
className="reverse"
icon="/images/annual-report/2020/connectivity/Scratch Around the World/Scratch Al Sur logo.png"
title={this.props.intl.formatMessage(
{id: 'annualReport.2020.connectivityCountryChileTitle'}
@ -1147,7 +1150,7 @@ class AnnualReport extends React.Component {
/>
</CountryBlurb>
<CountryBlurb
className="regular"
className="reverse"
icon="/images/annual-report/2020/connectivity/Scratch Around the World/Brazil-Creative-Learning-Network-logo.png"
title={this.props.intl.formatMessage(
{id: 'annualReport.2020.connectivityCountryBrazilTitle'}
@ -1169,7 +1172,6 @@ class AnnualReport extends React.Component {
/>
</CountryBlurb>
<CountryBlurb
className="reverse"
icon="/images/annual-report/2020/connectivity/Scratch Around the World/Quest Alliance logo.png"
title={this.props.intl.formatMessage(
{id: 'annualReport.2020.connectivityCountryIndiaTitle'}
@ -1198,7 +1200,7 @@ class AnnualReport extends React.Component {
/>
</CountryBlurb>
<CountryBlurb
className="regular"
className="reverse"
icon="/images/annual-report/2020/connectivity/Scratch Around the World/Raspberry-Pi-logo.png"
title={this.props.intl.formatMessage(
{id: 'annualReport.2020.connectivityCountryUSATitle'}
@ -1231,16 +1233,16 @@ class AnnualReport extends React.Component {
<h2>
<FormattedMessage id="annualReport.2020.connectivityResources" />
</h2>
<p className="bold">
<h4>
<FormattedMessage id="annualReport.2020.connectivityResourcesSubtitle" />
</p>
</h4>
<p>
<FormattedMessage id="annualReport.2020.connectivityResourcesParagraph" />
</p>
</div>
<div className="flex-content">
<TextAndMediaSnippet
className="reverse"
className="regular top" /* Text should be left when side by side, and on top when top and bottom */
title={this.props.intl.formatMessage(
{id: 'annualReport.2020.connectivityExample1Title'}
)}
@ -1254,6 +1256,26 @@ class AnnualReport extends React.Component {
id="annualReport.2020.connectivityExample1Paragraph"
/>
</TextAndMediaSnippet>
<MediaQuery minWidth={frameless.desktop}>
<TextAndMediaSnippet
className="reverse"
title={this.props.intl.formatMessage(
{id: 'annualReport.2020.connectivityExample2Title'}
)}
alt={this.props.intl.formatMessage(
{id: 'annualReport.2020.altGettingStarted'}
)}
type="video"
videoId="xfh9bvbeik"
largeImage="/images/annual-report/2020/connectivity/Getting Started with Scratch video.png"
spinnerColor="blue"
>
<FormattedMessage
id="annualReport.2020.connectivityExample2Paragraph"
/>
</TextAndMediaSnippet>
</MediaQuery>
<MediaQuery maxWidth={frameless.desktop - 1}>
<TextAndMediaSnippet
className="regular"
title={this.props.intl.formatMessage(
@ -1271,6 +1293,7 @@ class AnnualReport extends React.Component {
id="annualReport.2020.connectivityExample2Paragraph"
/>
</TextAndMediaSnippet>
</MediaQuery>
<TextAndMediaSnippet
className="full-width"
title={this.props.intl.formatMessage(
@ -1280,7 +1303,7 @@ class AnnualReport extends React.Component {
{id: 'annualReport.2020.altEditor'}
)}
type="image"
largeImage="/images/annual-report/2020/connectivity/isiXhosa_scratcheditor.jpg"
largeImage="/images/annual-report/2020/connectivity/isiXhosa_scratcheditor.png"
>
<FormattedMessage
id="annualReport.2020.connectivityExample3Paragraph"
@ -1352,13 +1375,13 @@ class AnnualReport extends React.Component {
</div>
</div>
<div className="flex-content">
<div className="text-and-media-snippet regular between">
<div className="text-and-media-snippet regular">
<div className="half">
<MediaQuery
minWidth={frameless.desktop}
>
<iframe
src="https://scratch.mit.edu/projects/389148460/embed"
src="https://scratch.mit.edu/projects/601589442/embed"
allowTransparency="true"
width="360"
height={((360 * .76) + 45)}
@ -1372,7 +1395,7 @@ class AnnualReport extends React.Component {
minWidth={frameless.mobile}
>
<iframe
src="https://scratch.mit.edu/projects/389148460/embed"
src="https://scratch.mit.edu/projects/601589442/embed"
allowTransparency="true"
width="430"
height={((430 * .76) + 45)}
@ -1383,7 +1406,7 @@ class AnnualReport extends React.Component {
</MediaQuery>
<MediaQuery maxWidth={frameless.mobile - 1}>
<iframe
src="https://scratch.mit.edu/projects/389148460/embed"
src="https://scratch.mit.edu/projects/601589442/embed"
allowTransparency="true"
width="300"
height={((300 * .76) + 45)}
@ -1498,6 +1521,31 @@ class AnnualReport extends React.Component {
</div>
<div className="inner">
<div className="flex-content">
<MediaQuery minWidth={frameless.desktop}>
<TextAndMediaSnippet
className="reverse"
title={this.props.intl.formatMessage(
{id: 'annualReport.2020.adaptationHighlightTitle4'}
)}
alt={this.props.intl.formatMessage(
{id: 'annualReport.2020.altHackYourWindow'}
)}
type="image"
largeImage="/images/annual-report/2020/adaptation/hackyourwindow_gif.gif"
>
<FormattedMessage
id="annualReport.2020.adaptationHighlightText4b"
values={{
linkText: (
<a href="https://scratch.mit.edu/studios/25970382">
Hack Your Window
</a>
)
}}
/>
</TextAndMediaSnippet>
</MediaQuery>
<MediaQuery maxWidth={frameless.desktop - 1}>
<TextAndMediaSnippet
className="regular"
title={this.props.intl.formatMessage(
@ -1520,9 +1568,10 @@ class AnnualReport extends React.Component {
}}
/>
</TextAndMediaSnippet>
</MediaQuery>
</div>
<div className="left-align">
<h5><FormattedMessage id="annualReport.2020.adaptationEducatorsTitle" /></h5>
<div className="connecting-educators">
<h4><FormattedMessage id="annualReport.2020.adaptationEducatorsTitle" /></h4>
<p><FormattedMessage id="annualReport.2020.adaptationEducatorsText" /></p>
</div>
</div>
@ -1542,7 +1591,7 @@ class AnnualReport extends React.Component {
<FormattedMessage id="annualReport.2020.adaptationSnapshot" />
</div>
<TextAndMediaSnippet
className="regular"
className="reverse big-title"
title={this.props.intl.formatMessage(
{id: 'annualReport.2020.adaptationSnapshot1Title'}
)}
@ -1565,8 +1614,9 @@ class AnnualReport extends React.Component {
</TextAndMediaSnippet>
</div>
<div className="flex-content lg">
<MediaQuery minWidth={frameless.desktop}>
<TextAndMediaSnippet
className="reverse"
className="regular big-title"
title={this.props.intl.formatMessage(
{id: 'annualReport.2020.adaptationSnapshot2Title'}
)}
@ -1580,12 +1630,30 @@ class AnnualReport extends React.Component {
id="annualReport.2020.adaptationSnapshot2Text"
/>
</TextAndMediaSnippet>
</MediaQuery>
<MediaQuery maxWidth={frameless.desktop - 1}>
<TextAndMediaSnippet
className="reverse big-title"
title={this.props.intl.formatMessage(
{id: 'annualReport.2020.adaptationSnapshot2Title'}
)}
alt={this.props.intl.formatMessage(
{id: 'annualReport.2020.altImageBubbles'}
)}
type="image"
largeImage="/images/annual-report/2020/adaptation/BYIS Graphic.svg"
>
<FormattedMessage
id="annualReport.2020.adaptationSnapshot2Text"
/>
</TextAndMediaSnippet>
</MediaQuery>
</div>
</div>
{/* <div className="community-hero-img" /> */}
</div>
</div>
<div className="initiatives-community">
<div className="initiatives-subsection-header community">
<div className="inner">
@ -1627,7 +1695,7 @@ class AnnualReport extends React.Component {
minWidth={frameless.mobile}
>
<iframe
src="https://scratch.mit.edu/projects/411647484/embed"
src="https://scratch.mit.edu/projects/601595010/embed"
allowTransparency="true"
width="480"
height={((480 * .76) + 45)}
@ -1638,7 +1706,7 @@ class AnnualReport extends React.Component {
</MediaQuery>
<MediaQuery maxWidth={frameless.mobile - 1}>
<iframe
src="https://scratch.mit.edu/projects/411647484/embed"
src="https://scratch.mit.edu/projects/601595010/embed"
allowTransparency="true"
width="300"
height={((300 * .76) + 45)}
@ -2069,9 +2137,9 @@ class AnnualReport extends React.Component {
<div className="snapshot bubble community">
<FormattedMessage id="annualReport.2020.adaptationSnapshot" />
</div>
<h5>
<h4>
<FormattedMessage id="annualReport.2020.communitySnapshotTitle" />
</h5>
</h4>
<p>
<FormattedMessage id="annualReport.2020.communitySnapshotText" />
</p>
@ -2084,9 +2152,9 @@ class AnnualReport extends React.Component {
</div>
</div>
<div className="world">
<h5>
<h4>
<FormattedMessage id="annualReport.2020.communitySnapshot2Title" />
</h5>
</h4>
<p>
<FormattedMessage id="annualReport.2020.communitySnapshot2Text" />
</p>
@ -2152,7 +2220,7 @@ class AnnualReport extends React.Component {
</div>
{/* eslint-enable max-len */}
</div>
</div>
<div
@ -2270,7 +2338,7 @@ class AnnualReport extends React.Component {
</p>
</div>
</div>
<div className="supporters-subsection supporters-lists">
<div className="supporters-subsection">
<div className="supporters-level">
<h4>
<FormattedMessage id="annualReport.2020.supportersFoundingTitle" />
@ -2353,7 +2421,7 @@ class AnnualReport extends React.Component {
<b className="board-title">
<FormattedMessage id="annualReport.2020.leadershipChair" />
</b>
<h4>Mitch Resnick</h4>
<h4>Mitchel Resnick</h4>
<FormattedMessage id="annualReport.2020.leadershipProfessor" />
<br />MIT Media Lab
</div>
@ -2395,7 +2463,7 @@ class AnnualReport extends React.Component {
</b>
<h4>Ursula Burns</h4>
<FormattedMessage id="annualReport.2020.leadershipFormerChairCEO" />
<br />Xerox
<br />Xerox Corporation and VEON Ltd.
</div>
</FlexRow>
<h4>

241
src/views/annual-report/2020/annual-report.scss
View file

@ -32,7 +32,7 @@ h1 {
h2 {
font-size: 3.25rem;
line-height: 4rem;
line-height: 3.75rem;
}
h3 {
@ -54,7 +54,7 @@ h5 {
p {
font-size: 1rem;
line-height: 2em;
line-height: 2rem;
}
p a {
@ -66,9 +66,13 @@ a, a:link, a:visited, a:active{
color: $motion-blue-3;
}
.bold {
font-weight: bold;
}
.photo-credit {
font-size: 0.875rem;
line-height: 1.125rem;
font-size: 1rem;
line-height: 2rem;
text-align: center;
margin-top: 1rem;
}
@ -83,13 +87,7 @@ a, a:link, a:visited, a:active{
line-height: 4rem;
}
h2 {
font-size: 2rem;
}
h3 {
font-size: 1.75rem;
}
}
.message-section {
@ -112,7 +110,7 @@ a, a:link, a:visited, a:active{
.masthead {
padding-top: 50px;
p {
p { // Text above the title of the AR -- "2020 Annual Report"
font-size: 1.25rem;
line-height: 2rem;
font-weight: bold;
@ -296,6 +294,7 @@ a, a:link, a:visited, a:active{
width: 620px;
h5{
margin: 20px 0 0;
font-size: 1.25rem;
}
}
@ -503,6 +502,10 @@ a, a:link, a:visited, a:active{
display: flex;
flex-direction: column;
align-items: center;
&.translation {
padding-top: 80px;
}
}
background-color: $annual-report-teal;
@ -636,11 +639,10 @@ a, a:link, a:visited, a:active{
.reach-translation {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
max-width: 780px;
margin-bottom: 100px;
width: 100%;
.reach-translation-intro {
max-width: 300px;
@ -688,23 +690,23 @@ a, a:link, a:visited, a:active{
.bubble {
background-color: darken($annual-report-teal, 10%);
border-radius: 50px;
padding: 10px 15px;
font-size: 14px;
padding: 8px 36px;
font-size: 1rem;
margin: 15px auto;
max-width: 170px;
width: max-content;
display: flex;
justify-content: center;
align-items: center;
img{
margin: 0px 8px;
width: 30px;
height: 30px;
}
&.increase{
padding: 5px 5px;
&.dark{
background-color: darken($annual-report-teal, 15%);
padding: 5px 15px;
.million{
font-size: 14px;
font-size: 1rem;
margin: 0 3px;
span:before{
display: none;
@ -727,11 +729,10 @@ a, a:link, a:visited, a:active{
}
}
&.spotlight{
padding: 10px 6px;
&:before{
content: '';
width: 25px;
height: 25px;
width: 30px;
height: 30px;
background-image: url("/images/annual-report/2020/Symbols-UI/LightBulb_spotlightstory.svg");
background-size: contain;
display: inline-block;
@ -741,23 +742,24 @@ a, a:link, a:visited, a:active{
&.snapshot{
&:before{
content: '';
width: 25px;
height: 25px;
width: 30px;
height: 30px;
background-image: url("/images/annual-report/2020/Symbols-UI/Camera_snapshots.svg");
background-size: contain;
display: inline-block;
margin-right: 10px;
}
}
&.connectivity{
background-color: $ui-purple-dark;
}
&.community{
background-color: $motion-blue-3;
}
&.adaptation{
background-color: $annual-report-aqua;
padding: 10px 13px;
}
}
@ -767,9 +769,6 @@ a, a:link, a:visited, a:active{
width: 286px;
text-align: center;
margin: 32px 0;
@media #{$medium-and-smaller} {
width: 203px;
}
.million {
font-size: 2rem;
@ -863,10 +862,9 @@ img.comment-viz{
.increase-bubble {
background-color: darken($annual-report-teal, 15%);
border-radius: 50px;
padding: 10px;
font-size: 14px;
padding: 8px 16px;
font-size: 1rem;
margin: 15px auto;
max-width: 170px;
}
@media #{$intermediate-and-smaller} {
@ -1081,6 +1079,10 @@ img.comment-viz{
line-height: 2.5rem;
}
@media #{$intermediate} {
max-width: 620px;
}
@media #{$medium} {
max-width: 460px;
}
@ -1096,6 +1098,12 @@ img.comment-viz{
.bold{
font-weight: bold;
}
.subtitle {
font-size: 1.5rem;
line-height: 2rem;
}
.content{
display: flex;
flex-direction: row;
@ -1105,9 +1113,15 @@ img.comment-viz{
justify-content: space-around;
&.around{
justify-content: space-around;
margin-bottom: 20px;
&.users{
justify-content: center;
@media #{$intermediate} {
margin: 20px 0px;
@media #{$intermediate-and-smaller} {
flex-direction: column-reverse;
}
}
@ -1116,11 +1130,15 @@ img.comment-viz{
flex-direction: column;
}
.text{
width: 360px;
max-width: 390px;
.larger{
font-size: 1.25rem;
line-height: 2.5rem;
}
@media #{$intermediate} {
max-width: 620px;
}
}
.images{
.flex-row{
@ -1139,20 +1157,28 @@ img.comment-viz{
}
.users-text{
max-width: 400px;
p {
font-size: 1.25rem;
line-height: 2.5rem;
}
}
.stats{
max-width: 300px;
text-align: center;
margin: 0 30px;
h2 {
font-size: 3.75rem;
line-height: 4.375rem;
}
@media #{$intermediate-and-smaller} {
margin: 0 0;
}
p{
max-width: 233px;
line-height: 1.4;
}
.bubble.inverted{
max-width: 198px;
p {
font-size: 1.25rem;
line-height: 2rem;
}
}
}
@ -1160,7 +1186,7 @@ img.comment-viz{
margin-left: 0px;
color: $ui-white;
font-weight: bold;
@media #{$intermediate} {
@media #{$intermediate-and-smaller} {
margin-left: auto;
}
&.spotlight{
@ -1186,7 +1212,6 @@ img.comment-viz{
}
}
&.snapshot{
padding: 10px 0px;
&.bump{
margin-left: 45px;
@media #{$intermediate-and-smaller} {
@ -1196,13 +1221,13 @@ img.comment-viz{
}
}
.about-breaker{
max-width: 90%;
text-align: center;
margin: 35px auto;
}
.world, .resources{
text-align: center;
margin-top: 80px;
margin-bottom: 40px;
.bubble{
margin-left: auto;
}
@ -1211,6 +1236,16 @@ img.comment-viz{
max-width: 600px;
width: 100%;
margin: 80px auto 0;
h4{
margin-top: 56px;
}
@media #{$small} {
h4 {
margin-top: 35px;
}
}
}
.inner {
display: flex;
@ -1219,9 +1254,14 @@ img.comment-viz{
&.center{
text-align: center;
}
&.community h5{
font-size: 28px;
line-height: 1.5;
&.community{
h5 { // Anna Lytical's name
line-height: 1.5rem;
}
h4 { // Improving our tools & New Scratch Tutorials on Youtube
font-size: 2.25rem;
line-height: 3rem;
}
}
@media #{$big} {
max-width: 940px;
@ -1232,6 +1272,10 @@ img.comment-viz{
padding-top: 72px;
}
@media #{$intermediate} {
max-width: 620px;
}
@media #{$medium} {
max-width: 460px;
}
@ -1260,15 +1304,15 @@ img.comment-viz{
}
.flex-content{
max-width: 840px;
max-width: 940px;
width: 100%;
margin-top: 50px;
text-align: left;
@media #{$medium-and-smaller} {
@media #{$intermediate-and-smaller} {
flex-direction: column;
align-items: center;
justify-content: center;
&.aaron{
text-align: center;
flex-direction: column-reverse;
}
}
@ -1290,7 +1334,7 @@ img.comment-viz{
&.content{
justify-content: space-between;
.text{
max-width: 360px;
max-width: 460px;
width: 100%;
}
.images{
@ -1300,11 +1344,9 @@ img.comment-viz{
width: 100%;
}
}
}
&.lg{
h5{
font-size: 28px;
line-height: 1.5;
@media #{$intermediate} {
max-width: 620px;
}
}
}
@ -1340,8 +1382,7 @@ img.comment-viz{
.upper-wave{
width: 100%;
position: absolute;
top: 50px;
z-index: 0;
top: 600px;
left: 0px;
}
.inner {
@ -1404,15 +1445,13 @@ img.comment-viz{
width: 100%;
position: absolute;
bottom: 50px;
z-index: 0;
left: 0px;
}
}
.world{
h2{
line-height: 1.5;
margin-top: 20px;
margin: 20px auto;
}
}
@ -1425,10 +1464,14 @@ img.comment-viz{
padding: 0 15px;
}
}
.left-align{
.connecting-educators{
max-width: 700px;
text-align: left;
margin: 50px 0 0;
@media #{$medium-and-smaller} {
text-align: center;
}
}
.bg-image-container{
width: 100%;
@ -1482,7 +1525,7 @@ img.comment-viz{
}
img{
position: absolute;
top: 0px;
top: 30px;
left: 0px;
width: 100%;
}
@ -1604,8 +1647,7 @@ img.comment-viz{
margin-top: 8px;
p {
// color: $ui-white;
line-height: 40px;
line-height: 2.5rem;
font-size: 1.25rem;
}
}
@ -1805,7 +1847,13 @@ img.comment-viz{
max-width: 900px;
padding: 80px 0;
@media #{$intermediate}{
max-width: 700px;
max-width: 640px;
}
@media #{$medium}{
max-width: 500px;
}
@media #{$small}{
max-width: 300px;
}
}
@ -1823,8 +1871,8 @@ img.comment-viz{
}
.pull-quote{
font-size: 26px;
line-height: 1.5;
font-size: 1.5rem;
line-height: 2.5rem;
@media #{$small}{
font-size: 24px;
}
@ -1846,10 +1894,9 @@ img.comment-viz{
.flex-content{
display: flex;
justify-content: space-between;
@media #{$big}{
.header{
width: 37%;
h2{
line-height: 1.4;
max-width: 300px;
}
}
.text{
@ -1884,7 +1931,6 @@ img.comment-viz{
}
p{
margin-top: 0px;
line-height: 1.4;
}
}
@ -1897,15 +1943,23 @@ img.comment-viz{
display: flex;
flex-direction: column;
text-align: left;
@media #{$intermediate-and-smaller}{
padding: 0 25px;
width: calc(100% - 50px);
@media #{$intermediate} {
max-width: 620px;
}
@media #{$medium} {
max-width: 460px;
}
@media #{$small} {
max-width: 300px;
}
img.illo{
margin: 40px 0;
width: 100%;
max-width: 524px;
// align-self: center;
}
ul{
list-style-type: none;
@ -1998,25 +2052,6 @@ img.comment-viz{
font-style: italic;
}
.david-siegel {
display: flex;
align-items: flex-start;
margin: 32px 0px 52px 0px;
.ds-info {
display: flex;
line-height: 24px;
}
img {
width: 140px;
}
.ds-text {
width: 144px;
}
}
.comment-text {
background-color: $ui-white;
@ -2282,10 +2317,10 @@ img.comment-viz{
margin: 0px;
border-radius: 6px;
font-size: 24px;
font-size: 1.5rem;
font-weight: bold;
letter-spacing: 0;
line-height: 29px;
line-height: 2rem;
a {
color: $motion-blue-3;
@ -2391,6 +2426,20 @@ img.comment-viz{
box-shadow: none;
}
.grid {
.flex-row {
justify-content: center;
@media #{$medium} {
flex-direction: row;
.thumbnail {
margin: auto;
}
}
}
}
.annual-report-content, #footer {
position: relative;
top: 58px;

13
src/views/annual-report/2020/country-blurb/country-blurb.jsx
View file

@ -13,15 +13,6 @@ require('./country-blurb.scss');
const CountryBlurb = props => (
<div className={classNames('country-blurb', props.className)}>
{props.className === 'regular' &&
<div className="half">
<img
className="large"
src={props.largeImage}
alt={props.alt}
/>
</div>
}
<div className="half">
<div className="country-info">
<img
@ -29,7 +20,7 @@ const CountryBlurb = props => (
alt={props.iconAlt}
/>
<div className="country-text">
<h5>{props.title}</h5>
<h4>{props.title}</h4>
<div className="location">
<img
src={props.listIcon}
@ -43,7 +34,6 @@ const CountryBlurb = props => (
{props.children}
</p>
</div>
{props.className === 'reverse' &&
<div className="half">
<img
className="large"
@ -51,7 +41,6 @@ const CountryBlurb = props => (
alt={props.alt}
/>
</div>
}
</div>
);

41
src/views/annual-report/2020/country-blurb/country-blurb.scss
View file

@ -2,31 +2,35 @@
.country-blurb{
display: flex;
flex-direction: row;
align-items: center;
@media #{$intermediate-and-smaller} {
flex-direction: column;
}
.half img{
float: left;
}
&.reverse{
.half img{
float: right;
}
justify-content: space-around;
margin-bottom: 62px;
&.reverse {
flex-direction: row-reverse;
@media #{$intermediate-and-smaller} {
flex-direction: column-reverse;
}
}
@media #{$intermediate-and-smaller} {
// If we want to support both image on top and image on bottom,
// we can use the regular & reverse classNames
flex-direction: column-reverse;
}
.half{
max-width: 400px;
width: 100%;
max-width: 460px;
img.large{
max-width: 350px;
width: 100%;
max-width: 380px;
}
}
p{
font-size: 14px;
font-size: 1rem;
text-align: left;
}
}
@ -40,12 +44,17 @@
margin-right: 15px;
}
.country-text{
h5{
h4{
margin: 0 0 5px 0;
}
.location{
display: flex;
justify-content: flex-start;
align-items: center;
font-size: 1.25rem;
line-height: 1.5rem;
img{
width: 18px;
height: 18px;

22
src/views/annual-report/2020/l10n.json
View file

@ -54,7 +54,7 @@
"annualReport.2020.reachNewUsers": "New Users",
"annualReport.2020.reachProjectsCreated": "Projects Created",
"annualReport.2020.reachProjectCreators": "People Creating Projects",
"annualReport.2020.reachComments": "increase in comments made since 2019",
"annualReport.2020.reachComments": "increase in comments posted",
"annualReport.2020.reachGlobalCommunity": "Our Global Community",
"annualReport.2020.reachMapBlurb": "Total accounts registered in the Scratch Online Community from the launch of Scratch through December 2020",
"annualReport.2020.reachMap24M": "24M",
@ -108,18 +108,18 @@
"annualReport.2020.connectivityCountryIndia": "India",
"annualReport.2020.connectivityCountryIndiaParagraph": "Quest Alliance empowers millions of learners and educators with 21st century skills, including creative computing. In 2020, {QuestAllianceLink} shared Scratch with learners and educators across India.",
"annualReport.2020.connectivityCountryUSATitle": "Raspberry Pi",
"annualReport.2020.connectivityCountryUSA": "USA",
"annualReport.2020.connectivityCountryUSAParagraph": "Raspberry Pi works to put the power of computing and digital making into the hands of people all over the world. Through their Making at Home initiative, they lead livestream events that encouraged families and young people to learn and create together. Several of these livestreams featured Scratch tutorials—and sometimes, even {USALink}!",
"annualReport.2020.connectivityCountryUSATitle": "Raspberry Pi Foundation",
"annualReport.2020.connectivityCountryUSA": "UK",
"annualReport.2020.connectivityCountryUSAParagraph": "The Raspberry Pi Foundation works to put the power of computing and digital making into the hands of people all over the world. Through their Making at Home initiative, they lead livestream events that encouraged families and young people to learn and create together. Several of these livestreams featured Scratch tutorials—and sometimes, even {USALink}!",
"annualReport.2020.connectivityResources": "Resources",
"annualReport.2020.connectivityResourcesSubtitle": "Localizing with Support from the LEGO Foundation",
"annualReport.2020.connectivityResourcesParagraph": "To support our glowing global reach and aid our COVID-19 response, the LEGO Foundation supported Scratch with a generous grant. With this funding, we were able to localize key resources and reach even more young people around the world.",
"annualReport.2020.connectivityResourcesParagraph": "To support our growing global reach and aid our COVID-19 response, the LEGO Foundation supported Scratch with a generous grant. With this funding, we were able to localize key resources and reach even more young people around the world.",
"annualReport.2020.connectivityExample1Title": "Tutorial Images",
"annualReport.2020.connectivityExample1Paragraph": "We created translations of the images for 25 Scratch tutorials in 12 languages—totalling over 1,000 new images!",
"annualReport.2020.connectivityExample2Title": "Gettting Started with Scratch",
"annualReport.2020.connectivityExample2Title": "Getting Started with Scratch",
"annualReport.2020.connectivityExample2Paragraph": "The Getting Started with Scratch video is the most highly accessed and viewed Scratch tutorial video, greeting new Scratchers when they first join the site. We were able to translate this video into 25 new languages and to update the 3 previous translations, including visuals, voiceovers, and subtitles.",
"annualReport.2020.connectivityExample3Title": "Scratch Editor",
@ -253,7 +253,7 @@
"annualReport.2020.supportersIntro": "Thank you to our generous supporters. Your contribution helps us expand creative learning opportunities for children of all ages, from all backgrounds, around the globe.",
"annualReport.2020.ourSupporters": "Our Supporters",
"annualReport.2020.ourSupportersText": "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 giving to Scratch Foundation from January 1, 2020 to December 31, 2020.",
"annualReport.2020.ourSupportersText": "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 giving to the Scratch Foundation from January 1, 2020 to December 31, 2020.",
"annualReport.2020.supportersFoundingTitle": "Founding Partners — $10,000,000+",
"annualReport.2020.supportersFoundingText": "We are especially grateful to our Founding Partners who have each provided at least $10,000,000 in cumulative support, since the start of Scratch in 2003.",
@ -275,12 +275,12 @@
"annualReport.2020.leadershipBoardMember": "Board Member",
"annualReport.2020.leadershipPresidentCEO": "President and CEO",
"annualReport.2020.leadershipFormerPresident": "Former President",
"annualReport.2020.leadershipFounderCEO": "Founder and CEO",
"annualReport.2020.leadershipFormerChairCEO": "Former Chair and CEO",
"annualReport.2020.leadershipFounderCEO": "Founder and Executive Chairman",
"annualReport.2020.leadershipFormerChairCEO": "Former CEO and Chairwoman",
"annualReport.2020.leadershipBoardSecretaryTreasurer": "Board Secretary & Treasurer",
"annualReport.2020.leadershipBoardSecretary": "Board Secretary",
"annualReport.2020.leadershipBoardTreasurer": "Board Treasurer",
"annualReport.2020.leadershipScratchTeam": "Scratch Team",
"annualReport.2020.leadershipScratchTeam": "2020 Scratch Team",
"annualReport.2020.leadershipED": "Executive Director",
"annualReport.2020.teamThankYou": "Thank you to Mitch Resnick, Natalie Rusk, Rupal Jain, and other collaborators at the Lifelong Kindergarten Group at the MIT Media Lab for your tireless support of Scratch.",
@ -344,7 +344,7 @@
"annualReport.2020.altChileIcon": "The Scratch mascot",
"annualReport.2020.altBrazilIcon": "A green swirl",
"annualReport.2020.altIndiaIcon": "A star interlocked with a circle",
"annualReport.2020.altUSAIcon": "A cartoon raspberry, the Raspberry Pi logo",
"annualReport.2020.altUSAIcon": "A cartoon raspberry, the Raspberry Pi Foundation logo",
"annualReport.2020.altTutorial": "A Scratch tutorial in Spanish",
"annualReport.2020.altGettingStarted": "A play button sits on top of the Scratch UI.",

2
src/views/annual-report/2020/people.json
View file

@ -150,7 +150,7 @@
"userId": 61415372
},
{
"name": "Tasha",
"name": "LaTasha",
"userName": "LT7845",
"userId": 68837085
},

2
src/views/annual-report/2020/supporters.json
View file

@ -28,7 +28,7 @@
"James Hill",
"Inversoft/CleanSpeak",
"Paul T. Jones",
"Kahn-Row Family Fund",
"Kahn-Rowe Family Fund",
"Wilson, Sonsini, Goodrich & Rosati"
],
"inspiration": [

BIN
static/images/annual-report/2020/connectivity/isiXhosa_scratcheditor.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 224 KiB

BIN
static/images/annual-report/2020/connectivity/isiXhosa_scratcheditor.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 620 KiB