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

start on tools section

Browse source
This commit is contained in:
seotts 2020-10-14 10:04:31 -04:00 committed by Karishma Chadha
parent 17b658316b
commit 78c871541c
5 changed files with 77 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -827,6 +827,53 @@ class AnnualReport extends React.Component {
</p>
</div>
</div>
<div className="initiatives-subsection-content">
{/* eslint-disable max-len */}
<div className="inner">
<div className="subsection-tag">
<FormattedMessage id="annualReport.toolsSpotlight" />
</div>
<div className="initiatives-subsection-intro">
<h2>
<FormattedMessage id="annualReport.toolsLaunch" />
</h2>
<p>
<FormattedMessage id="annualReport.toolsLaunchIntro1" />
</p>
<p>
<FormattedMessage id="annualReport.toolsLaunchIntro2" />
</p>
</div>
</div>
<div className="video-container">
<div className="video-background ahbi">
<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="joal01i8b1"
videoWidth="568"
/>
</MediaQuery>
<MediaQuery maxWidth={frameless.tabletPortrait - 1}>
<VideoPreview
buttonMessage={
this.props.intl.formatMessage({id: 'annualReport.watchVideo'})
}
thumbnail="/images/annual-report/initiatives/CN Video Thumbnail.png"
thumbnailWidth="400"
videoHeight="216"
videoId="joal01i8b1"
videoWidth="380"
/>
</MediaQuery>
</div>
</div>
</div>
</div>
<div className="initiatives-community">
<div className="initiatives-subsection-header community">
@ -845,7 +892,7 @@ class AnnualReport extends React.Component {
<div className="subsection-tag">
<FormattedMessage id="annualReport.communitySpotlight" />
</div>
<div className="community-team-intro">
<div className="initiatives-subsection-intro">
<h2>
<FormattedMessage id="annualReport.communityTeam" />
</h2>

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

@ -588,6 +588,16 @@ p {
}
}
.initiatives-subsection-intro {
max-width: 780px;
text-align: center;
margin: 32px 0;
p {
max-width: 620px;
}
}
.quote-person {
display: flex;
align-items: center;
@ -601,6 +611,12 @@ p {
}
}
.initiatives-tools {
.subsection-tag {
background-color: $ui-aqua;
}
}
.initiatives-community {
.hero {
width: 100%;
@ -859,15 +875,9 @@ p {
&.blm {
background-image: url("/images/annual-report/initiatives/BLM Video Splash.svg");
}
}
.community-team-intro {
max-width: 780px;
text-align: center;
margin-top: 32px;
p {
max-width: 620px;
&.ahbi {
background-image: url("/images/annual-report/initiatives/Ahbi Video Splash.svg");
}
}
}

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

@ -68,7 +68,10 @@
"annualReport.toolsTitle": "Creative Tools",
"annualReport.toolsIntro": "We are constantly experimenting and innovating with new technologies and new designs — always striving to provide children with new ways to create, collaborate, and learn.",
"annualReport.toolsSpotlight": "Creative Tools — Spotlight Story",
"annualReport.toolsLaunch": "Launch of Scratch 3.0",
"annualReport.toolsLaunchIntro1": "We designed Scratch 3.0 to expand how, what, and where kids can create with Scratch. Released at the start of 2019, Scratch 3.0 led to a surge of activity in the Scratch community, with more projects — and a greater variety of projects — than ever before.",
"annualReport.toolsLaunchIntro2": "Scratch 3.0 includes a library of extensions — extra collections of coding blocks that add new capabilities to Scratch. Some extensions provide access to web services and other software features, while others connect Scratch with physical-world devices like motors and sensors.",
"annualReport.communityTitle": "Community",
"annualReport.communityIntro": "The Scratch programming language has always been intertwined with the Scratch online community, providing opportunities for children to collaborate, share, and provide feedback to one another.",
"annualReport.communitySpotlight": "Community - Spotlight Story",

7
static/images/annual-report/initiatives/Ahbi Video Splash.svg Normal file
View file

@ -0,0 +1,7 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="1020px" height="500px" viewBox="0 0 1020 500" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Ahbi Video Splash</title>
<g id="Ahbi-Video-Splash" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.5">
<path d="M61.677234,70.3664159 C234.157139,-35.4025071 677.179332,4.68477567 750.952782,22.1909398 C858.405647,47.6891035 1006.11115,97.9507291 901.513249,165.833814 C860.427992,192.497771 991.213222,227.252548 997.104056,314.938082 C1008.60536,486.135949 650.276573,525.115334 446.776703,486.135949 C222.451203,443.16752 26.8853299,474.386664 19.1859313,410.891236 C11.4865326,347.395808 164.324967,351.218316 61.677234,281.991429 C-38.1378312,214.674927 -0.89844901,108.739365 61.677234,70.3664159 Z M973.641775,139.135036 C996.208002,132.302352 1020,153.081715 1020,176.598907 C1020,200.116099 994.545839,221.091846 966.091253,198.376727 C937.636667,175.661607 951.075548,145.96772 973.641775,139.135036 Z" id="splash" fill="#0EBD8C"></path>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
static/images/annual-report/initiatives/CN Video Thumbnail.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 798 KiB