mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2024-11-23 15:47:53 -05:00
finish content in connectivity section
This commit is contained in:
caseymm
parent
950c608217
commit
a45c1b6700
5 changed files with 136 additions and 174 deletions
|
|
@ -0,0 +1,39 @@
|
|||
const classNames = require('classnames');
|
||||
const PropTypes = require('prop-types');
|
||||
const React = require('react');
|
||||
|
||||
|
||||
require('./annual-report-example.scss');
|
||||
|
||||
const AnnualReportExample = props => (
|
||||
<div className={classNames('annual-report-example', props.className)}>
|
||||
{props.className === 'regular' &&
|
||||
<div className="half">
|
||||
<img className="large" src={props.large_image} />
|
||||
</div>
|
||||
}
|
||||
<div className="half">
|
||||
<h5>{props.title}</h5>
|
||||
<p>{props.paragraph}</p>
|
||||
</div>
|
||||
{props.className === 'reverse' &&
|
||||
<div className="half">
|
||||
<img className="large" src={props.large_image} />
|
||||
</div>
|
||||
}
|
||||
{props.className === 'full-width' &&
|
||||
<div className="half">
|
||||
<img className="large" src={props.large_image} />
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
);
|
||||
|
||||
AnnualReportExample.propTypes = {
|
||||
title: PropTypes.string,
|
||||
paragraph: PropTypes.string,
|
||||
large_image: PropTypes.string,
|
||||
className: PropTypes.string
|
||||
};
|
||||
|
||||
module.exports = AnnualReportExample;
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
@import "../../frameless";
|
||||
|
||||
.annual-report-example{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
margin: 30px 0;
|
||||
@media #{$intermediate-and-smaller} {
|
||||
flex-direction: column;
|
||||
}
|
||||
&.reverse{
|
||||
@media #{$intermediate-and-smaller} {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
}
|
||||
.half{
|
||||
max-width: 330px;
|
||||
width: 100%;
|
||||
img.large{
|
||||
max-width: 350px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
p{
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
}
|
||||
&.full-width{
|
||||
flex-direction: column;
|
||||
max-width: 600px;
|
||||
margin: auto;
|
||||
.half{
|
||||
max-width: 100%;
|
||||
img.large{
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -16,6 +16,7 @@ const Button = require('../../../../components/forms/button.jsx');
|
|||
const FlexRow = require('../../../../components/flex-row/flex-row.jsx');
|
||||
const Comment = require('../../../../components/comment/comment.jsx');
|
||||
const CountryBlurb = require('../../../../components/country-blurb/country-blurb.jsx');
|
||||
const AnnualReportExample = require('../../../../components/annual-report-example/annual-report-example.jsx');
|
||||
const WorldMap = require('../../../../components/world-map/world-map.jsx');
|
||||
const CountryUsage = require('./country-usage.json');
|
||||
const IndiaProjects = require('./india-projects.json');
|
||||
|
|
@ -951,154 +952,48 @@ class AnnualReport extends React.Component {
|
|||
)}
|
||||
large_image="/images/annual-report/2020/connectivity/Scratch Around the World/Raspberry Pi graphic.svg"
|
||||
/>
|
||||
|
||||
</div>
|
||||
<div className="tools-tutorials">
|
||||
<h4>
|
||||
<FormattedMessage id="annualReport.toolsVideoTutorials" />
|
||||
</h4>
|
||||
<p>
|
||||
<FormattedMessage id="annualReport.toolsTutorialsIntro" />
|
||||
<div className="resources">
|
||||
<h2>
|
||||
<FormattedMessage id="annualReport.connectivityResources" />
|
||||
</h2>
|
||||
<p className="bold">
|
||||
<FormattedMessage id="annualReport.connectivityResourcesSubtitle" />
|
||||
</p>
|
||||
<p>
|
||||
<FormattedMessage id="annualReport.connectivityResourcesParagraph" />
|
||||
</p>
|
||||
<div className="tutorial-list">
|
||||
<img src="/images/annual-report/initiatives/animate a name.png" />
|
||||
<img src="/images/annual-report/initiatives/make music.png" />
|
||||
<img src="/images/annual-report/initiatives/imagine a world.png" />
|
||||
<img src="/images/annual-report/initiatives/create a story.png" />
|
||||
</div>
|
||||
<div className="tools-stats">
|
||||
<div className="tools-stat">
|
||||
<FormattedMessage
|
||||
id="annualReport.toolsNewTutorials"
|
||||
values={{
|
||||
numTutorials: (
|
||||
<h5>
|
||||
<FormattedMessage id="annualReport.toolsNumTutorials" />
|
||||
</h5>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="tools-stat">
|
||||
<FormattedMessage
|
||||
id="annualReport.toolsTutorialsViews"
|
||||
values={{
|
||||
numViews: (
|
||||
<h5>
|
||||
<FormattedMessage id="annualReport.toolsNumViews" />
|
||||
</h5>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="tools-app">
|
||||
<div className="tools-app-info">
|
||||
<h4>
|
||||
<FormattedMessage id="annualReport.toolsApp" />
|
||||
</h4>
|
||||
<p>
|
||||
<FormattedMessage
|
||||
id="annualReport.toolsAppIntro"
|
||||
values={{
|
||||
downloadableLink: (
|
||||
<a
|
||||
href="https://scratch.mit.edu/download"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<FormattedMessage id="annualReport.toolsDownloadLink" />
|
||||
</a>
|
||||
),
|
||||
raspberryLink: (
|
||||
<a
|
||||
href="https://www.raspberrypi.org/blog/scratch-3-desktop-for-raspbian-on-raspberry-pi/"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<FormattedMessage id="annualReport.toolsRaspberryLink" />
|
||||
</a>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
<img src="/images/annual-report/initiatives/Offline Learning Illustration.svg" />
|
||||
</div>
|
||||
<div className="tools-abhi">
|
||||
<div className="subsection-tag">
|
||||
<FormattedMessage id="annualReport.toolsSpotlight" />
|
||||
</div>
|
||||
<div className="tools-abhi-intro">
|
||||
<div>
|
||||
<h2>
|
||||
<FormattedMessage id="annualReport.toolsAbhiTitle" />
|
||||
</h2>
|
||||
<p>
|
||||
<FormattedMessage id="annualReport.toolsAbhiIntro" />
|
||||
</p>
|
||||
</div>
|
||||
<img src="/images/annual-report/initiatives/Abhi Hero.svg" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="video-container">
|
||||
<div className="video-background abhi">
|
||||
<MediaQuery minWidth={frameless.tabletPortrait}>
|
||||
<VideoPreview
|
||||
buttonMessage={
|
||||
this.props.intl.formatMessage({id: 'annualReport.watchVideo'})
|
||||
}
|
||||
thumbnail="/images/annual-report/initiatives/CN Video Thumbnail.png"
|
||||
thumbnailWidth="580"
|
||||
videoHeight="320"
|
||||
videoId="r2ctnvb0sy"
|
||||
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/CN Video Thumbnail.png"
|
||||
thumbnailWidth="400"
|
||||
videoHeight="320"
|
||||
videoId="r2ctnvb0sy"
|
||||
videoWidth="568"
|
||||
/>
|
||||
</MediaQuery>
|
||||
<MediaQuery maxWidth={frameless.mobile - 1}>
|
||||
<VideoPreview
|
||||
buttonMessage={
|
||||
this.props.intl.formatMessage({id: 'annualReport.watchVideo'})
|
||||
}
|
||||
thumbnail="/images/annual-report/initiatives/CN Video Thumbnail.png"
|
||||
thumbnailWidth="300"
|
||||
videoHeight="216"
|
||||
videoId="r2ctnvb0sy"
|
||||
videoWidth="380"
|
||||
/>
|
||||
</MediaQuery>
|
||||
</div>
|
||||
</div>
|
||||
<div className="inner abhi">
|
||||
<div className="abhi-quote">
|
||||
<div className="quote-person">
|
||||
<Avatar
|
||||
alt=""
|
||||
src="/images/annual-report/initiatives/Abhi Avatar.png"
|
||||
/>
|
||||
<div>Abhi</div>
|
||||
</div>
|
||||
<Comment
|
||||
comment={this.props.intl.formatMessage(
|
||||
{id: 'annualReport.toolsAbhiQuote'}
|
||||
<div className="flex-content">
|
||||
<AnnualReportExample
|
||||
className="reverse"
|
||||
title={this.props.intl.formatMessage(
|
||||
{id: 'annualReport.connectivityExample1Title'}
|
||||
)}
|
||||
paragraph={this.props.intl.formatMessage(
|
||||
{id: 'annualReport.connectivityExample1Paragraph'}
|
||||
)}
|
||||
large_image="/images/annual-report/2020/connectivity/TutorialUI.svg"
|
||||
/>
|
||||
<AnnualReportExample
|
||||
className="regular"
|
||||
title={this.props.intl.formatMessage(
|
||||
{id: 'annualReport.connectivityExample2Title'}
|
||||
)}
|
||||
paragraph={this.props.intl.formatMessage(
|
||||
{id: 'annualReport.connectivityExample2Paragraph'}
|
||||
)}
|
||||
large_image="/images/annual-report/2020/connectivity/Getting Started with Scratch video.png"
|
||||
/>
|
||||
<AnnualReportExample
|
||||
className="full-width"
|
||||
title={this.props.intl.formatMessage(
|
||||
{id: 'annualReport.connectivityExample3Title'}
|
||||
)}
|
||||
paragraph={this.props.intl.formatMessage(
|
||||
{id: 'annualReport.connectivityExample3Paragraph'}
|
||||
)}
|
||||
large_image="/images/annual-report/2020/connectivity/isiXhosa_scratcheditor.jpg"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1266,7 +1266,7 @@ img.comment-viz{
|
|||
text-align: center;
|
||||
margin: 35px auto;
|
||||
}
|
||||
.world{
|
||||
.world, .resources{
|
||||
text-align: center;
|
||||
margin-top: 80px;
|
||||
.bubble{
|
||||
|
|
@ -1290,6 +1290,11 @@ img.comment-viz{
|
|||
}
|
||||
}
|
||||
}
|
||||
.resources{
|
||||
max-width: 600px;
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
}
|
||||
.inner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -1318,9 +1323,9 @@ img.comment-viz{
|
|||
// justify-content: space-between;
|
||||
// align-content: center;
|
||||
max-width: 780px;
|
||||
margin-top: 80px;
|
||||
width: 100%;
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.conferences-hero-and-caption {
|
||||
|
|
|
|||
|
|
@ -110,34 +110,18 @@
|
|||
"annualReport.connectivityCountryUSA": "USA",
|
||||
"annualReport.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 Scratch Team members!",
|
||||
|
||||
"annualReport.toolsCollabAWS": "Collaboration with Amazon Web Services",
|
||||
"annualReport.toolsTranslate": "Translate",
|
||||
"annualReport.toolsTranslateIntro": "With the Translate extension, built on the Google Translate API, kids can incorporate automatic translation into their projects, supporting language learning and global communication.",
|
||||
"annualReport.toolsNumLanguages": "50+",
|
||||
"annualReport.toolsTranslateLanguages": "{numLanguages} languages translated in the extension",
|
||||
"annualReport.toolsSupportsLiteracy": "Supports Literacy",
|
||||
"annualReport.toolsCSandLanguageArts": "computer science and language arts",
|
||||
"annualReport.toolsTranslateLiteracy": "{supportsLiteracy} across {CSandLanguageArtsLink}",
|
||||
"annualReport.toolsCollabGoogle": "Collaboration with Google",
|
||||
"annualReport.toolsPhysicalWorld": "Physical World Connections",
|
||||
"annualReport.toolsMindstormsLink": "LEGO Mindstorms EV3",
|
||||
"annualReport.toolsWeDoLink": "WeDo 2.0",
|
||||
"annualReport.toolsLEGORoboticsIntro": "Students can create dancing robots, interactive sculptures, and data-collection experiments using Scratch with LEGO robotics kits. The new LEGO Education SPIKE Prime Set features an app based on Scratch. In addition, Scratch extensions are available for {mindstormsLink} and {weDoLink}.",
|
||||
"annualReport.toolsCollabLEGO": "Collaboration with LEGO Education",
|
||||
"annualReport.toolsVideoTutorials": "Video Tutorials",
|
||||
"annualReport.toolsTutorialsIntro": "Scratch 3.0 introduced a diverse collection of video tutorials to help kids get started with Scratch. The tutorials are open-ended and designed to encourage students to experiment, follow their interests, and express their own ideas.",
|
||||
"annualReport.toolsNumTutorials": "25 new tutorials",
|
||||
"annualReport.toolsNewTutorials": "{numTutorials} available in Scratch 3.0",
|
||||
"annualReport.toolsNumViews": "23 million",
|
||||
"annualReport.toolsTutorialsViews": "{numViews} views in 2019",
|
||||
"annualReport.toolsApp": "Scratch App Supports Learning Offline",
|
||||
"annualReport.toolsDownloadLink": "downloadable app",
|
||||
"annualReport.toolsRaspberryLink": "use on Raspberry Pi 4",
|
||||
"annualReport.toolsAppIntro": "During 2019, the Scratch Team released Scratch 3.0 as a {downloadableLink} for use on multiple platforms, including Windows, MacOS, ChromeOS, and Android tablets. In addition, the Raspberry Pi Foundation released Scratch 3.0 for {raspberryLink}. These downloadable versions are especially important for millions of learners in areas where internet connectivity is unavailable or unreliable.",
|
||||
"annualReport.toolsAbhiTitle": "Abhi at Cartoon Network",
|
||||
"annualReport.toolsAbhiIntro": "To highlight what kids can do with Scratch 3.0, we collaborated with Cartoon Network to create a video featuring Abhi, a 12-year-old Scratcher who loves to make animations and games. In the video, Abhi meets with Ian Jones-Quartey, creator of OK K.O. and other Cartoon Network shows. Abhi introduces Ian to key features of the new version of Scratch, and together they draw and program an animation of a Cartoon Network character jumping up and down.",
|
||||
"annualReport.toolsAbhiQuote": "My favorite thing about Scratch is the community, because they are nice and helpful to me. That’s why I’m always happy to share every project that’s in my dreams.",
|
||||
"annualReport.connectivityResources": "Resources",
|
||||
"annualReport.connectivityResourcesSubtitle": "Localizing with Support from the LEGO Foundation",
|
||||
"annualReport.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.connectivityExample1Title": "Tutorial Images",
|
||||
"annualReport.connectivityExample1Paragraph": "We created translations of the images for 25 Scratch tutorials in 12 languages—totalling over 1,000 new images!",
|
||||
|
||||
"annualReport.connectivityExample2Title": "Gettting Started with Scratch",
|
||||
"annualReport.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.connectivityExample3Title": "Scratch Editor",
|
||||
"annualReport.connectivityExample3Paragraph": "The Scratch project editor is the most essential Scratch resource. We worked with a South African translation company that specializes in culturally-relevant educational translation to translate and review the Scratch editor in five South African languages: isiZulu, isiXhosa, Afrikaans, Sestwana, and Sepedi.",
|
||||
|
||||
"annualReport.adaptationTitle": "Adaptation",
|
||||
"annualReport.schoolsIntro": "We provide programs and resources to support teachers and students in schools around the world, designed to achieve equity in creative computing experiences, based on projects, passion, peers, and play.",
|
||||
|
|
|
|||
Loading…
Reference in a new issue