mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2024-11-27 01:25:52 -05:00
year in review cards
This commit is contained in:
caseymm
parent
41ada2ce94
commit
7d4621576f
7 changed files with 346 additions and 352 deletions
44
src/components/timeline-card/timeline-card.jsx
Normal file
44
src/components/timeline-card/timeline-card.jsx
Normal file
|
|
@ -0,0 +1,44 @@
|
||||||
|
const classNames = require('classnames');
|
||||||
|
const PropTypes = require('prop-types');
|
||||||
|
const React = require('react');
|
||||||
|
const VideoPreview = require('../video-preview/video-preview.jsx');
|
||||||
|
|
||||||
|
|
||||||
|
require('./timeline-card.scss');
|
||||||
|
|
||||||
|
const TimelineCard = props => (
|
||||||
|
<div className={classNames('timeline-card', props.className)}>
|
||||||
|
<a href={props.link}><img src="../../images/annual-report/2020/Symbols-UI/Open Link.svg" /></a>
|
||||||
|
<h5>{props.date}</h5>
|
||||||
|
<h4>{props.title}</h4>
|
||||||
|
<p>{props.text}</p>
|
||||||
|
{ props.videoId &&
|
||||||
|
<VideoPreview
|
||||||
|
thumbnail={props.image}
|
||||||
|
thumbnailWidth="300"
|
||||||
|
videoHeight="216"
|
||||||
|
videoId={props.videoId}
|
||||||
|
videoWidth="380"
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
{ !props.videoId &&
|
||||||
|
<img className="large" src={props.image} />
|
||||||
|
}
|
||||||
|
{ props.attribution &&
|
||||||
|
<p>{props.attribution}</p>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
TimelineCard.propTypes = {
|
||||||
|
link: PropTypes.string,
|
||||||
|
date: PropTypes.string,
|
||||||
|
title: PropTypes.string,
|
||||||
|
text: PropTypes.string,
|
||||||
|
image: PropTypes.string,
|
||||||
|
videoId: PropTypes.string,
|
||||||
|
attribution: PropTypes.string,
|
||||||
|
className: PropTypes.string
|
||||||
|
};
|
||||||
|
|
||||||
|
module.exports = TimelineCard;
|
||||||
31
src/components/timeline-card/timeline-card.scss
Normal file
31
src/components/timeline-card/timeline-card.scss
Normal file
|
|
@ -0,0 +1,31 @@
|
||||||
|
@import "../../colors";
|
||||||
|
|
||||||
|
.timeline-card{
|
||||||
|
width: 450px;
|
||||||
|
background-color: $ui-white;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 15px;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
p{
|
||||||
|
margin: 0px;
|
||||||
|
}
|
||||||
|
a{
|
||||||
|
position: absolute;
|
||||||
|
right: 15px;
|
||||||
|
top: 15px;
|
||||||
|
}
|
||||||
|
&.center{
|
||||||
|
margin: 0 auto 30px;
|
||||||
|
}
|
||||||
|
&.left{
|
||||||
|
margin-left: calc((100% - 940px)/2);
|
||||||
|
}
|
||||||
|
&.right{
|
||||||
|
margin-left: calc(100% - ((100% - 940px)/2) - 470px);
|
||||||
|
}
|
||||||
|
img{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -17,6 +17,7 @@ const FlexRow = require('../../../../components/flex-row/flex-row.jsx');
|
||||||
const Comment = require('../../../../components/comment/comment.jsx');
|
const Comment = require('../../../../components/comment/comment.jsx');
|
||||||
const CountryBlurb = require('../../../../components/country-blurb/country-blurb.jsx');
|
const CountryBlurb = require('../../../../components/country-blurb/country-blurb.jsx');
|
||||||
const AnnualReportExample = require('../../../../components/annual-report-example/annual-report-example.jsx');
|
const AnnualReportExample = require('../../../../components/annual-report-example/annual-report-example.jsx');
|
||||||
|
const TimelineCard = require('../../../../components/timeline-card/timeline-card.jsx');
|
||||||
const WorldMap = require('../../../../components/world-map/world-map.jsx');
|
const WorldMap = require('../../../../components/world-map/world-map.jsx');
|
||||||
const CountryUsage = require('./country-usage.json');
|
const CountryUsage = require('./country-usage.json');
|
||||||
const IndiaProjects = require('./india-projects.json');
|
const IndiaProjects = require('./india-projects.json');
|
||||||
|
|
@ -1396,6 +1397,179 @@ class AnnualReport extends React.Component {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* go into timeline section */}
|
||||||
|
<div className="year-in-review">
|
||||||
|
<img className="upper-wave" src="/images/annual-report/2020/community/Timeline/Wave (upper).svg" />
|
||||||
|
<div className="inner center">
|
||||||
|
<h2>
|
||||||
|
<FormattedMessage id="annualReport.yearInReview" />
|
||||||
|
</h2>
|
||||||
|
<p>
|
||||||
|
<FormattedMessage id="annualReport.yearInReviewText" />
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<TimelineCard
|
||||||
|
className="center"
|
||||||
|
link={this.props.intl.formatMessage(
|
||||||
|
{id: 'annualReport.yearInReviewCard1Link'}
|
||||||
|
)}
|
||||||
|
date={this.props.intl.formatMessage(
|
||||||
|
{id: 'annualReport.yearInReviewCard1Date'}
|
||||||
|
)}
|
||||||
|
title={this.props.intl.formatMessage(
|
||||||
|
{id: 'annualReport.yearInReviewCard1Title'}
|
||||||
|
)}
|
||||||
|
text={this.props.intl.formatMessage(
|
||||||
|
{id: 'annualReport.yearInReviewCard1Text'}
|
||||||
|
)}
|
||||||
|
image="/images/annual-report/2020/community/Timeline/Images/endofthedecade_sds.jpg"
|
||||||
|
attribution="project by u/lukiepie2011"
|
||||||
|
/>
|
||||||
|
<TimelineCard
|
||||||
|
className="left"
|
||||||
|
link={this.props.intl.formatMessage(
|
||||||
|
{id: 'annualReport.yearInReviewCard1Link'}
|
||||||
|
)}
|
||||||
|
date={this.props.intl.formatMessage(
|
||||||
|
{id: 'annualReport.yearInReviewCard2Date'}
|
||||||
|
)}
|
||||||
|
title={this.props.intl.formatMessage(
|
||||||
|
{id: 'annualReport.yearInReviewCard2Title'}
|
||||||
|
)}
|
||||||
|
text={this.props.intl.formatMessage(
|
||||||
|
{id: 'annualReport.yearInReviewCard2Text'}
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<TimelineCard
|
||||||
|
className="left"
|
||||||
|
link={this.props.intl.formatMessage(
|
||||||
|
{id: 'annualReport.yearInReviewCard3Link'}
|
||||||
|
)}
|
||||||
|
date={this.props.intl.formatMessage(
|
||||||
|
{id: 'annualReport.yearInReviewCard3Date'}
|
||||||
|
)}
|
||||||
|
title={this.props.intl.formatMessage(
|
||||||
|
{id: 'annualReport.yearInReviewCard3Title'}
|
||||||
|
)}
|
||||||
|
text={this.props.intl.formatMessage(
|
||||||
|
{id: 'annualReport.yearInReviewCard3Text'}
|
||||||
|
)}
|
||||||
|
image="/images/annual-report/2020/community/Timeline/Images/createalong.jpg"
|
||||||
|
// videoId=""
|
||||||
|
/>
|
||||||
|
<TimelineCard
|
||||||
|
className="right"
|
||||||
|
link={this.props.intl.formatMessage(
|
||||||
|
{id: 'annualReport.yearInReviewCard4Link'}
|
||||||
|
)}
|
||||||
|
date={this.props.intl.formatMessage(
|
||||||
|
{id: 'annualReport.yearInReviewCard4Date'}
|
||||||
|
)}
|
||||||
|
title={this.props.intl.formatMessage(
|
||||||
|
{id: 'annualReport.yearInReviewCard4Title'}
|
||||||
|
)}
|
||||||
|
text={this.props.intl.formatMessage(
|
||||||
|
{id: 'annualReport.yearInReviewCard4Text'}
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<TimelineCard
|
||||||
|
className="right"
|
||||||
|
link={this.props.intl.formatMessage(
|
||||||
|
{id: 'annualReport.yearInReviewCard5Link'}
|
||||||
|
)}
|
||||||
|
date={this.props.intl.formatMessage(
|
||||||
|
{id: 'annualReport.yearInReviewCard5Date'}
|
||||||
|
)}
|
||||||
|
title={this.props.intl.formatMessage(
|
||||||
|
{id: 'annualReport.yearInReviewCard5Title'}
|
||||||
|
)}
|
||||||
|
text={this.props.intl.formatMessage(
|
||||||
|
{id: 'annualReport.yearInReviewCard5Text'}
|
||||||
|
)}
|
||||||
|
image="/images/annual-report/2020/community/Timeline/Images/blmvideo.png"
|
||||||
|
videoId="r1pmlyylye"
|
||||||
|
/>
|
||||||
|
<TimelineCard
|
||||||
|
className="left"
|
||||||
|
link={this.props.intl.formatMessage(
|
||||||
|
{id: 'annualReport.yearInReviewCard6Link'}
|
||||||
|
)}
|
||||||
|
date={this.props.intl.formatMessage(
|
||||||
|
{id: 'annualReport.yearInReviewCard6Date'}
|
||||||
|
)}
|
||||||
|
title={this.props.intl.formatMessage(
|
||||||
|
{id: 'annualReport.yearInReviewCard6Title'}
|
||||||
|
)}
|
||||||
|
text={this.props.intl.formatMessage(
|
||||||
|
{id: 'annualReport.yearInReviewCard6Text'}
|
||||||
|
)}
|
||||||
|
image="/images/annual-report/2020/community/Timeline/Images/funathome_sds.jpg"
|
||||||
|
attribution="project by u/cellie"
|
||||||
|
/>
|
||||||
|
<TimelineCard
|
||||||
|
className="left"
|
||||||
|
link={this.props.intl.formatMessage(
|
||||||
|
{id: 'annualReport.yearInReviewCard7Link'}
|
||||||
|
)}
|
||||||
|
date={this.props.intl.formatMessage(
|
||||||
|
{id: 'annualReport.yearInReviewCard7Date'}
|
||||||
|
)}
|
||||||
|
title={this.props.intl.formatMessage(
|
||||||
|
{id: 'annualReport.yearInReviewCard7Title'}
|
||||||
|
)}
|
||||||
|
text={this.props.intl.formatMessage(
|
||||||
|
{id: 'annualReport.yearInReviewCard7Text'}
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<TimelineCard
|
||||||
|
className="right"
|
||||||
|
link={this.props.intl.formatMessage(
|
||||||
|
{id: 'annualReport.yearInReviewCard8Link'}
|
||||||
|
)}
|
||||||
|
date={this.props.intl.formatMessage(
|
||||||
|
{id: 'annualReport.yearInReviewCard8Date'}
|
||||||
|
)}
|
||||||
|
title={this.props.intl.formatMessage(
|
||||||
|
{id: 'annualReport.yearInReviewCard8Title'}
|
||||||
|
)}
|
||||||
|
text={this.props.intl.formatMessage(
|
||||||
|
{id: 'annualReport.yearInReviewCard8Text'}
|
||||||
|
)}
|
||||||
|
image="/images/annual-report/2020/community/Timeline/Images/scratchcamp.jpg"
|
||||||
|
attribution="project by u/LGMammoth"
|
||||||
|
/>
|
||||||
|
<TimelineCard
|
||||||
|
className="center"
|
||||||
|
link={this.props.intl.formatMessage(
|
||||||
|
{id: 'annualReport.yearInReviewCard9Link'}
|
||||||
|
)}
|
||||||
|
date={this.props.intl.formatMessage(
|
||||||
|
{id: 'annualReport.yearInReviewCard9Date'}
|
||||||
|
)}
|
||||||
|
title={this.props.intl.formatMessage(
|
||||||
|
{id: 'annualReport.yearInReviewCard9Title'}
|
||||||
|
)}
|
||||||
|
text={this.props.intl.formatMessage(
|
||||||
|
{id: 'annualReport.yearInReviewCard9text'}
|
||||||
|
)}
|
||||||
|
image="/images/annual-report/2020/community/Timeline/Images/scratchtober.jpg"
|
||||||
|
attribution="project by u/IDK_HAVE_SOME_NUMBER"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div className="inner">
|
<div className="inner">
|
||||||
|
|
||||||
|
|
@ -1470,358 +1644,7 @@ class AnnualReport extends React.Component {
|
||||||
</div>
|
</div>
|
||||||
{/* eslint-enable max-len */}
|
{/* eslint-enable max-len */}
|
||||||
</div>
|
</div>
|
||||||
<div className="initiatives-schools">
|
|
||||||
<div className="initiatives-subsection-header schools">
|
|
||||||
<div className="inner">
|
|
||||||
{/* <h2>
|
|
||||||
<FormattedMessage id="annualReport.schoolsTitle" />
|
|
||||||
</h2> */}
|
|
||||||
<p>
|
|
||||||
<FormattedMessage id="annualReport.schoolsIntro" />
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="initiatives-subsection-content">
|
|
||||||
<div className="inner schools">
|
|
||||||
<div className="subsection-tag">
|
|
||||||
<FormattedMessage id="annualReport.schoolsSpotlight" />
|
|
||||||
</div>
|
|
||||||
<div className="initiatives-subsection-intro schools">
|
|
||||||
<h2>
|
|
||||||
<FormattedMessage id="annualReport.cpsProjectTitle" />
|
|
||||||
</h2>
|
|
||||||
<p>
|
|
||||||
<FormattedMessage id="annualReport.cpsProjectIntroP1" />
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<FormattedMessage id="annualReport.cpsProjectIntroP2" />
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="video-container">
|
|
||||||
<div className="video-background cps">
|
|
||||||
{/* eslint-disable max-len */}
|
|
||||||
<MediaQuery minWidth={frameless.tabletPortrait}>
|
|
||||||
<VideoPreview
|
|
||||||
buttonMessage={
|
|
||||||
this.props.intl.formatMessage({id: 'annualReport.watchVideo'})
|
|
||||||
}
|
|
||||||
thumbnail="/images/annual-report/initiatives/schools/CPS Story/CPS Video Thumbnail.png"
|
|
||||||
thumbnailWidth="580"
|
|
||||||
videoHeight="320"
|
|
||||||
videoId="ymkgy1rzch"
|
|
||||||
videoWidth="568"
|
|
||||||
/>
|
|
||||||
</MediaQuery>
|
|
||||||
<MediaQuery
|
|
||||||
maxWidth={frameless.tabletPortrait - 1}
|
|
||||||
minWidth={frameless.mobile}
|
|
||||||
>
|
|
||||||
<VideoPreview
|
|
||||||
buttonMessage={
|
|
||||||
this.props.intl.formatMessage({id: 'annualReport.watchVideo'})
|
|
||||||
}
|
|
||||||
thumbnail="/images/annual-report/initiatives/schools/CPS Story/CPS Video Thumbnail.png"
|
|
||||||
thumbnailWidth="400"
|
|
||||||
videoHeight="216"
|
|
||||||
videoId="ymkgy1rzch"
|
|
||||||
videoWidth="380"
|
|
||||||
/>
|
|
||||||
</MediaQuery>
|
|
||||||
<MediaQuery maxWidth={frameless.mobile - 1}>
|
|
||||||
<VideoPreview
|
|
||||||
buttonMessage={
|
|
||||||
this.props.intl.formatMessage({id: 'annualReport.watchVideo'})
|
|
||||||
}
|
|
||||||
thumbnail="/images/annual-report/initiatives/schools/CPS Story/CPS Video Thumbnail.png"
|
|
||||||
thumbnailWidth="300"
|
|
||||||
videoHeight="216"
|
|
||||||
videoId="ymkgy1rzch"
|
|
||||||
videoWidth="380"
|
|
||||||
/>
|
|
||||||
</MediaQuery>
|
|
||||||
{/* eslint-enable max-len */}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="inner schools">
|
|
||||||
<h4>
|
|
||||||
<FormattedMessage id="annualReport.familyCreativeNightsHeader" />
|
|
||||||
</h4>
|
|
||||||
<p>
|
|
||||||
<FormattedMessage id="annualReport.familyCreativeNightsDescription" />
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="inner four-pictures-container">
|
|
||||||
<div className="pencils-img">
|
|
||||||
<img src="/images/annual-report/initiatives/schools/CPS Story/Pencils.svg" />
|
|
||||||
</div>
|
|
||||||
<div className="four-pictures">
|
|
||||||
{/* eslint-disable max-len */}
|
|
||||||
<img src="/images/annual-report/initiatives/schools/CPS Story/Family Night 1.png" />
|
|
||||||
<img src="/images/annual-report/initiatives/schools/CPS Story/Family Night 2.png" />
|
|
||||||
<img src="/images/annual-report/initiatives/schools/CPS Story/Family Night 3.png" />
|
|
||||||
<img src="/images/annual-report/initiatives/schools/CPS Story/Family Night 4.png" />
|
|
||||||
{/* eslint-enable max-len */}
|
|
||||||
</div>
|
|
||||||
<div className="pizza-img">
|
|
||||||
<img src="/images/annual-report/initiatives/schools/CPS Story/Pizza.svg" />
|
|
||||||
</div>
|
|
||||||
<span className="photo-credit">
|
|
||||||
<FormattedMessage id="annualReport.familyNightsPhotoCredit" />
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="inner schools">
|
|
||||||
<h4>
|
|
||||||
<FormattedMessage id="annualReport.teacherPDHeader" />
|
|
||||||
</h4>
|
|
||||||
<p>
|
|
||||||
<FormattedMessage id="annualReport.teacherPDDescription" />
|
|
||||||
</p>
|
|
||||||
<div className="teacher-quote">
|
|
||||||
<div className="quote-person">
|
|
||||||
{/* eslint-disable max-len */}
|
|
||||||
<Avatar
|
|
||||||
alt=""
|
|
||||||
src="/images/annual-report/initiatives/schools/CPS Story/School Quote Avatar.png"
|
|
||||||
/>
|
|
||||||
{/* eslint-enable max-len */}
|
|
||||||
<div>
|
|
||||||
<FormattedMessage
|
|
||||||
id="annualReport.teacherPDQuoteAttribution"
|
|
||||||
values={{
|
|
||||||
teacherName: 'Mahmoud Aliamer'
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<Comment
|
|
||||||
comment={this.props.intl.formatMessage(
|
|
||||||
{id: 'annualReport.teacherPDQuote'}
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="extending-reach">
|
|
||||||
<h4>
|
|
||||||
<FormattedMessage id="annualReport.extendingReachHeader" />
|
|
||||||
</h4>
|
|
||||||
<p>
|
|
||||||
<FormattedMessage
|
|
||||||
id="annualReport.extendingReachDescription"
|
|
||||||
values={{
|
|
||||||
codeYourHeroLink: (
|
|
||||||
<a
|
|
||||||
href="https://csfirst.withgoogle.com/c/cs-first/en/code-your-hero/overview.html"
|
|
||||||
rel="noreferrer noopener"
|
|
||||||
target="_blank"
|
|
||||||
>
|
|
||||||
<FormattedMessage id="annualReport.codeYourHero" />
|
|
||||||
</a>
|
|
||||||
)
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<h4>
|
|
||||||
<FormattedMessage id="annualReport.inTheNewsHeader" />
|
|
||||||
</h4>
|
|
||||||
<div className="news-links">
|
|
||||||
{/* eslint-disable max-len */}
|
|
||||||
<div className="icon-and-link">
|
|
||||||
<img src="/images/annual-report/initiatives/schools/CPS Story/News Icon.svg" />
|
|
||||||
<a
|
|
||||||
href="https://chicago.suntimes.com/2019/12/9/21003124/chance-rapper-superme-i-love-you-so-much-cps-public-schools-video-game-google"
|
|
||||||
rel="noreferrer noopener"
|
|
||||||
target="_blank"
|
|
||||||
>
|
|
||||||
<FormattedMessage id="annualReport.chicagoSunTimesArticle" />
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div className="icon-and-link">
|
|
||||||
<img src="/images/annual-report/initiatives/schools/CPS Story/News Icon.svg" />
|
|
||||||
<a
|
|
||||||
href="https://www.rollingstone.com/music/music-news/chance-the-rapper-i-love-you-so-much-video-game-made-by-chicago-students-925198/"
|
|
||||||
rel="noreferrer noopener"
|
|
||||||
target="_blank"
|
|
||||||
>
|
|
||||||
<FormattedMessage id="annualReport.rollingStoneArticle" />
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
{/* eslint-enable max-len */}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="inner schools-conferences">
|
|
||||||
<div className="schools-conferences-header">
|
|
||||||
<div className="subsection-tag">
|
|
||||||
<FormattedMessage id="annualReport.schoolsSpotlight" />
|
|
||||||
</div>
|
|
||||||
<h2>
|
|
||||||
<FormattedMessage id="annualReport.conferencesTitle" />
|
|
||||||
</h2>
|
|
||||||
</div>
|
|
||||||
<div className="schools-conferences-intro">
|
|
||||||
<p>
|
|
||||||
<FormattedMessage id="annualReport.conferencesIntro" />
|
|
||||||
</p>
|
|
||||||
<MediaQuery minWidth={frameless.mobile}>
|
|
||||||
<div className="conferences-hero-and-caption">
|
|
||||||
{/* eslint-disable-next-line max-len */}
|
|
||||||
<img src="/images/annual-report/initiatives/schools/Conferences Story/Scratch Conferences Hero.png" />
|
|
||||||
<span className="photo-credit">
|
|
||||||
<FormattedMessage
|
|
||||||
id="annualReport.conferencesHeroImageCaption"
|
|
||||||
values={{
|
|
||||||
photoCredit: 'Carmelo Presicce'
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</MediaQuery>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<MediaQuery maxWidth={frameless.mobile - 1}>
|
|
||||||
<div className="conferences-hero-and-caption">
|
|
||||||
<div className="conferences-hero" />
|
|
||||||
<span className="photo-credit">
|
|
||||||
<FormattedMessage
|
|
||||||
id="annualReport.conferencesHeroImageCaption"
|
|
||||||
values={{
|
|
||||||
photoCredit: 'Carmelo Presicce'
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</MediaQuery>
|
|
||||||
<div className="inner schools-conferences bottom">
|
|
||||||
<div className="schools-conferences-content">
|
|
||||||
<div className="schools-conferences-region">
|
|
||||||
<div className="conference-image-and-caption left">
|
|
||||||
{/* eslint-disable-next-line max-len */}
|
|
||||||
<img src="/images/annual-report/initiatives/schools/Conferences Story/Latin America Conference.png" />
|
|
||||||
<span className="photo-credit">
|
|
||||||
<FormattedMessage
|
|
||||||
id="annualReport.conferencesLatinAmericaImageCaption"
|
|
||||||
values={{
|
|
||||||
photoCredit: 'Scratch al Sur'
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="conference-title-and-description">
|
|
||||||
<h4>
|
|
||||||
<FormattedMessage id="annualReport.conferencesLatinAmericaTitle" />
|
|
||||||
</h4>
|
|
||||||
<p>
|
|
||||||
{/* eslint-disable max-len */}
|
|
||||||
<FormattedMessage
|
|
||||||
id="annualReport.conferencesLatinAmericaDescription"
|
|
||||||
values={{
|
|
||||||
scratchAlSurLink: (
|
|
||||||
<a
|
|
||||||
href="https://www.scratchalsur.org/"
|
|
||||||
rel="noreferrer noopener"
|
|
||||||
target="_blank"
|
|
||||||
>
|
|
||||||
Scratch al Sur
|
|
||||||
</a>
|
|
||||||
),
|
|
||||||
spanishVersionLink: (
|
|
||||||
<a
|
|
||||||
href="https://scratchalsur.org/assets/computaci%c3%b3n-creativa.pdf"
|
|
||||||
rel="noreferrer noopener"
|
|
||||||
target="_blank"
|
|
||||||
>
|
|
||||||
<FormattedMessage id="annualReport.conferencesSpanishVersionLinkText" />
|
|
||||||
</a>
|
|
||||||
),
|
|
||||||
creativeComputingCurriculumLink: (
|
|
||||||
<a
|
|
||||||
href="http://creativecomputing.gse.harvard.edu/guide/curriculum.html"
|
|
||||||
rel="noreferrer noopener"
|
|
||||||
target="_blank"
|
|
||||||
>
|
|
||||||
Creative Computing Curriculum
|
|
||||||
</a>
|
|
||||||
)
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
{/* eslint-enable max-len */}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="schools-conferences-region europe">
|
|
||||||
<div className="conference-title-and-description left">
|
|
||||||
<h4>
|
|
||||||
<FormattedMessage id="annualReport.conferencesEuropeTitle" />
|
|
||||||
</h4>
|
|
||||||
<p>
|
|
||||||
<FormattedMessage
|
|
||||||
id="annualReport.conferencesEuropeDescription"
|
|
||||||
values={{
|
|
||||||
scratchConferenceEuropeLink: (
|
|
||||||
<a
|
|
||||||
href="https://www.raspberrypi.org/blog/keynote-speeches-scratch-conference-europe-2019/"
|
|
||||||
rel="noreferrer noopener"
|
|
||||||
target="_blank"
|
|
||||||
>
|
|
||||||
Scratch Conference Europe
|
|
||||||
</a>
|
|
||||||
)
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="conference-image-and-caption">
|
|
||||||
{/* eslint-disable-next-line max-len */}
|
|
||||||
<img src="/images/annual-report/initiatives/schools/Conferences Story/Europe Conference.png" />
|
|
||||||
<span className="photo-credit">
|
|
||||||
<FormattedMessage
|
|
||||||
id="annualReport.conferencesEuropeImageCaption"
|
|
||||||
values={{
|
|
||||||
photoCredit: 'Raspberry Pi'
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="schools-conferences-region">
|
|
||||||
<div className="conference-image-and-caption left">
|
|
||||||
{/* eslint-disable-next-line max-len */}
|
|
||||||
<img src="/images/annual-report/initiatives/schools/Conferences Story/Africa Conference.png" />
|
|
||||||
<span className="photo-credit">
|
|
||||||
<FormattedMessage
|
|
||||||
id="annualReport.conferencesAfricaImageCaption"
|
|
||||||
values={{
|
|
||||||
photoCredit: 'Carmelo Presicce'
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="conference-title-and-description">
|
|
||||||
<h4>
|
|
||||||
<FormattedMessage id="annualReport.conferencesAfricaTitle" />
|
|
||||||
</h4>
|
|
||||||
<p>
|
|
||||||
<FormattedMessage
|
|
||||||
id="annualReport.conferencesAfricaDescription"
|
|
||||||
values={{
|
|
||||||
scratchAfricaConferenceLink: (
|
|
||||||
<a
|
|
||||||
href="https://www.scratchafrica.com/"
|
|
||||||
rel="noreferrer noopener"
|
|
||||||
target="_blank"
|
|
||||||
>
|
|
||||||
Scratch Africa Conference
|
|
||||||
</a>
|
|
||||||
)
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
className="financials-section"
|
className="financials-section"
|
||||||
|
|
|
||||||
|
|
@ -1366,6 +1366,27 @@ img.comment-viz{
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.year-in-review{
|
||||||
|
background-color: $ui-blue-10percent;
|
||||||
|
position: relative;
|
||||||
|
padding: 80px 0;
|
||||||
|
.upper-wave{
|
||||||
|
width: 100%;
|
||||||
|
position: absolute;
|
||||||
|
top: 50px;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
.inner {
|
||||||
|
&.center{
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 80px;
|
||||||
|
max-width: 600px;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
.initiatives-adaptation, .initiatives-community {
|
.initiatives-adaptation, .initiatives-community {
|
||||||
.world{
|
.world{
|
||||||
max-width: 600px;
|
max-width: 600px;
|
||||||
|
|
|
||||||
|
|
@ -210,6 +210,55 @@
|
||||||
"annualReport.communityQuoteGroupName4": "Mechanical_pencil",
|
"annualReport.communityQuoteGroupName4": "Mechanical_pencil",
|
||||||
"annualReport.communityQuoteGroupText4": "Scratch was my favorite hobby in sixth grade. It secretly introduced me to Boolean logic, order of operations, and nested mathematical expressions—not to mention computer programming itself.",
|
"annualReport.communityQuoteGroupText4": "Scratch was my favorite hobby in sixth grade. It secretly introduced me to Boolean logic, order of operations, and nested mathematical expressions—not to mention computer programming itself.",
|
||||||
|
|
||||||
|
"annualReport.yearInReview": "Year in Review",
|
||||||
|
"annualReport.yearInReviewText": "2020 was a remarkable year in the online community. The Community Team highlighted and developed opportunities for young people to express their ideas and become engaged in positive ways, and incredible movements sprung up from Scratchers themselves. Here’s a look back at some of the highlights of the year:",
|
||||||
|
|
||||||
|
"annualReport.yearInReviewCard1Date": "January",
|
||||||
|
"annualReport.yearInReviewCard1Title": "End of the Decade Scratch Design Studio",
|
||||||
|
"annualReport.yearInReviewCard1Text": "Scratchers celebrated the close of a decade and new beginnings in this Scratch Design Studio.",
|
||||||
|
"annualReport.yearInReviewCard1Link": "https://scratch.mit.edu/studios/25528144",
|
||||||
|
|
||||||
|
"annualReport.yearInReviewCard2Date": "April",
|
||||||
|
"annualReport.yearInReviewCard2Title": "April Fool’s Day",
|
||||||
|
"annualReport.yearInReviewCard2Text": "“Mundane mysteries” appeared around the site, and Cat Blocks surprised and delighted the Scratch community.",
|
||||||
|
"annualReport.yearInReviewCard2Link": "https://scratch.mit.edu/studios/26134426/",
|
||||||
|
|
||||||
|
"annualReport.yearInReviewCard3Date": "April",
|
||||||
|
"annualReport.yearInReviewCard3Title": "Create-Alongs",
|
||||||
|
"annualReport.yearInReviewCard3Text": "Scratch Team members began hosting live tutorials to connect and create with Scratchers and their families at home.",
|
||||||
|
"annualReport.yearInReviewCard3Link": "https://www.youtube.com/watch?v=uR5C173yrJs",
|
||||||
|
|
||||||
|
"annualReport.yearInReviewCard4Date": "May",
|
||||||
|
"annualReport.yearInReviewCard4Title": "Scratch Month",
|
||||||
|
"annualReport.yearInReviewCard4Text": "Scratchers around the world shared thousands of projects around weekly themes, from recycled crafts to hand-washing jingles.",
|
||||||
|
"annualReport.yearInReviewCard4Link": "https://scratch.mit.edu/projects/400944766/",
|
||||||
|
|
||||||
|
"annualReport.yearInReviewCard5Date": "May",
|
||||||
|
"annualReport.yearInReviewCard5Title": "Black Lives Matter",
|
||||||
|
"annualReport.yearInReviewCard5Text": "As racial justice protests swept the US, the community came together to support each other and call for change.",
|
||||||
|
"annualReport.yearInReviewCard5Link": "https://scratch.wistia.com/medias/r1pmlyylye",
|
||||||
|
|
||||||
|
"annualReport.yearInReviewCard6Date": "June",
|
||||||
|
"annualReport.yearInReviewCard6Title": "Fun At Home! Scratch Design Studio",
|
||||||
|
"annualReport.yearInReviewCard6Text": "Scratchers shared their favorite indoor games and activities to keep themselves engaged while staying home.",
|
||||||
|
"annualReport.yearInReviewCard6Link": "https://scratch.mit.edu/studios/26498205",
|
||||||
|
|
||||||
|
"annualReport.yearInReviewCard7Date": "June",
|
||||||
|
"annualReport.yearInReviewCard7Title": "Juneteenth Studio",
|
||||||
|
"annualReport.yearInReviewCard7Text": "Scratchers created projects to honor Juneteenth and the continued fight for racial justice.",
|
||||||
|
"annualReport.yearInReviewCard7Link": "https://scratch.mit.edu/studios/26938704/",
|
||||||
|
|
||||||
|
"annualReport.yearInReviewCard8Date": "July",
|
||||||
|
"annualReport.yearInReviewCard8Title": "Scratch Camp",
|
||||||
|
"annualReport.yearInReviewCard8Text": "Scratch the Musical got the whole community acting, singing, and dancing together.",
|
||||||
|
"annualReport.yearInReviewCard8Link": "https://scratch.mit.edu/studios/27388950/",
|
||||||
|
|
||||||
|
"annualReport.yearInReviewCard9Date": "October",
|
||||||
|
"annualReport.yearInReviewCard9Title": "Scratchtober",
|
||||||
|
"annualReport.yearInReviewCard9Text": "Scratchers made hundreds of creative stories, games, and animations based on daily themed prompts.",
|
||||||
|
"annualReport.yearInReviewCard9Link": "https://docs.google.com/document/d/1yTT5h9RiNTUcDKPqE0wDWo8HsRMOSy4NREk0-0Bmrhk/edit#:~:text=edu/projects/412126066/-,Scratchtober,-scratch.mit.edu",
|
||||||
|
|
||||||
|
|
||||||
"annualReport.communitySpotlight": "Community — Spotlight Story",
|
"annualReport.communitySpotlight": "Community — Spotlight Story",
|
||||||
"annualReport.communityTeam": "Scratch Community Team",
|
"annualReport.communityTeam": "Scratch Community Team",
|
||||||
"annualReport.communityTeamIntro1": "When asked why they use Scratch, most Scratchers talk about the importance of the online community for motivating their ongoing participation, providing a space where they can express their creativity, make friends, receive feedback, get new ideas, and learn new skills. Many Scratchers express their appreciation for the Scratch community as a safe and welcoming space to connect, share, and learn from one another.",
|
"annualReport.communityTeamIntro1": "When asked why they use Scratch, most Scratchers talk about the importance of the online community for motivating their ongoing participation, providing a space where they can express their creativity, make friends, receive feedback, get new ideas, and learn new skills. Many Scratchers express their appreciation for the Scratch community as a safe and welcoming space to connect, share, and learn from one another.",
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
After Width: | Height: | Size: 1 KiB |
|
|
@ -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>
|
||||||
|
After Width: | Height: | Size: 948 B |
Loading…
Reference in a new issue