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

country sections

Browse source
This commit is contained in:
caseymm 2021-10-05 11:52:50 -07:00
parent 1b84e3417b
commit 4dbe0d20f0
6 changed files with 182 additions and 420 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
src/components/country-blurb/country-blurb.jsx Normal file
View file

@ -0,0 +1,45 @@
const classNames = require('classnames');
const PropTypes = require('prop-types');
const React = require('react');
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.large_image} />
</div>
}
<div className="half">
<div className="country-info">
<img src={props.icon} />
<div className="country-text">
<h5>{props.title}</h5>
<div className="location">
<img src={props.list_icon} />
<span>{props.country}</span>
</div>
</div>
</div>
<p>{props.paragraph}</p>
</div>
{props.className === 'reverse' &&
<div className="half">
<img className="large" src={props.large_image} />
</div>
}
</div>
);
CountryBlurb.propTypes = {
icon: PropTypes.string,
title: PropTypes.string,
list_icon: PropTypes.string,
country: PropTypes.string,
paragraph: PropTypes.string,
className: PropTypes.string
};
module.exports = CountryBlurb;

50
src/components/country-blurb/country-blurb.scss Normal file
View file

@ -0,0 +1,50 @@
@import "../../frameless";
.country-blurb{
display: flex;
align-items: center;
@media #{$intermediate-and-smaller} {
flex-direction: column;
}
&.reverse{
@media #{$intermediate-and-smaller} {
flex-direction: column-reverse;
}
}
.half{
max-width: 400px;
width: 100%;
img.large{
max-width: 350px;
width: 100%;
}
}
p{
font-size: 14px;
text-align: left;
}
}
.country-info{
display: flex;
align-items: center;
img{
width: 65px;
height: 65px;
margin-right: 15px;
}
.country-text{
h5{
margin: 0 0 5px 0;
}
.location{
display: flex;
justify-content: flex-start;
img{
width: 18px;
height: 18px;
margin-right: 5px;
}
}
}
}

96
src/views/annual-report/2020/index/annual-report.jsx
View file

@ -15,6 +15,7 @@ const Grid = require('../../../../components/grid/grid.jsx');
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 WorldMap = require('../../../../components/world-map/world-map.jsx');
const CountryUsage = require('./country-usage.json');
const IndiaProjects = require('./india-projects.json');
@ -889,41 +890,68 @@ class AnnualReport extends React.Component {
<img src="/images/annual-report/2020/connectivity/Scratch Around the World Video.svg" />
</a>
</div>
<div className="tools-LEGO">
<img src="/images/annual-report/initiatives/LEGO Robotics Illustration.svg" />
<div className="tools-LEGO-info">
<h4>
<FormattedMessage id="annualReport.toolsPhysicalWorld" />
</h4>
<p>
<FormattedMessage
id="annualReport.toolsLEGORoboticsIntro"
values={{
mindstormsLink: (
<a
href="https://scratch.wistia.com/medias/0huu6wfiki"
rel="noreferrer noopener"
target="_blank"
>
<FormattedMessage id="annualReport.toolsMindstormsLink" />
</a>
),
weDoLink: (
<a
href="https://scratch.wistia.com/medias/4im7iizv47"
rel="noreferrer noopener"
target="_blank"
>
<FormattedMessage id="annualReport.toolsWeDoLink" />
</a>
)
}}
<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.connectivityCountryChileTitle'}
)}
list_icon="/images/annual-report/2020/Symbols-UI/Location_icon.svg"
country={this.props.intl.formatMessage(
{id: 'annualReport.connectivityCountryChile'}
)}
paragraph={this.props.intl.formatMessage(
{id: 'annualReport.connectivityCountryChileParagraph'}
)}
large_image="/images/annual-report/2020/connectivity/Scratch Around the World/Scratch Al Sur graphic.svg"
/>
</p>
<div className="subsection-tag collaborator">
<FormattedMessage id="annualReport.toolsCollabLEGO" />
</div>
</div>
<CountryBlurb
className="regular"
icon="/images/annual-report/2020/connectivity/Scratch Around the World/Brazil Creative Learning Network logo.png"
title={this.props.intl.formatMessage(
{id: 'annualReport.connectivityCountryBrazilTitle'}
)}
list_icon="/images/annual-report/2020/Symbols-UI/Location_icon.svg"
country={this.props.intl.formatMessage(
{id: 'annualReport.connectivityCountryBrazil'}
)}
paragraph={this.props.intl.formatMessage(
{id: 'annualReport.connectivityCountryBrazilParagraph'}
)}
large_image="/images/annual-report/2020/connectivity/Scratch Around the World/Brazil Creative Learning Network graphic.svg"
/>
<CountryBlurb
className="reverse"
icon="/images/annual-report/2020/connectivity/Scratch Around the World/Quest Alliance logo.png"
title={this.props.intl.formatMessage(
{id: 'annualReport.connectivityCountryIndiaTitle'}
)}
list_icon="/images/annual-report/2020/Symbols-UI/Location_icon.svg"
country={this.props.intl.formatMessage(
{id: 'annualReport.connectivityCountryIndia'}
)}
paragraph={this.props.intl.formatMessage(
{id: 'annualReport.connectivityCountryIndiaParagraph'}
)}
large_image="/images/annual-report/2020/connectivity/Scratch Around the World/Quest Alliance graphic.svg"
/>
<CountryBlurb
className="regular"
icon="/images/annual-report/2020/connectivity/Scratch Around the World/Raspberry Pi logo.png"
title={this.props.intl.formatMessage(
{id: 'annualReport.connectivityCountryUSATitle'}
)}
list_icon="/images/annual-report/2020/Symbols-UI/Location_icon.svg"
country={this.props.intl.formatMessage(
{id: 'annualReport.connectivityCountryUSA'}
)}
paragraph={this.props.intl.formatMessage(
{id: 'annualReport.connectivityCountryUSAParagraph'}
)}
large_image="/images/annual-report/2020/connectivity/Scratch Around the World/Raspberry Pi graphic.svg"
/>
</div>
<div className="tools-tutorials">
<h4>

389
src/views/annual-report/2020/index/annual-report.scss
View file

@ -1303,272 +1303,15 @@ img.comment-viz{
padding-top: 32px;
}
&.abhi {
padding-top: 0;
padding-bottom: 132px;
}
&.schools {
align-items: flex-start;
text-align: left;
padding-bottom: 0px;
.subsection-tag {
background-color: $ui-purple;
}
@media #{$big} {
max-width: 620px;
}
@media #{$intermediate} {
max-width: 620px;
}
@media #{$small} {
padding-top: 32px;
align-items: flex-start;
h2 {
line-height: 2.5rem;
}
}
}
&.four-pictures-container {
margin-top: 10px;
margin-bottom: 0px;
padding-bottom: 0px;
position: relative;
@media #{$medium} {
max-width: 760px;
padding-top: 10px;
padding-bottom: 10px;
}
.four-pictures {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
flex-wrap: wrap;
padding-top: 10px;
padding-bottom: 10px;
img {
width: 380px;
margin: 10px;
@media #{$intermediate} {
width: 300px;
}
@media #{$medium} {
width: 220px;
}
@media #{$small} {
width: 300px;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
}
}
}
.pencils-img {
position: absolute;
width: 145px;
padding: 0px;
left: 0px;
top: 60px;
@media #{$medium} {
width: 80px;
top: 0px;
img {
width: 80px;
}
}
@media #{$small} {
width: 80px;
top: 0px;
img {
width: 80px;
}
}
}
.pizza-img {
position: absolute;
right: 0px;
bottom: 40px;
@media #{$medium} {
width: 80px;
img {
width: 80px;
}
}
@media #{$small} {
width: 80px;
img {
width: 80px;
}
}
}
}
&.schools-conferences {
align-items: flex-start;
text-align: left;
&.bottom {
padding-top: 0px;
@media #{$intermediate-and-smaller} {
padding-top: 32px;
}
}
@media #{$intermediate} {
max-width: 620px;
}
@media #{$medium} {
max-width: 460px;
}
@media #{$small} {
max-width: 300px;
align-items: center;
h2 {
line-height: 2.5rem;
}
}
.subsection-tag {
background-color: $ui-purple;
margin-bottom: 24px;
}
.schools-conferences-header {
max-width: 620px;
margin-bottom: 20px;
}
.schools-conferences-intro {
display: flex;
flex-direction: row;
align-items: flex-start;
text-align: left;
@media #{$intermediate-and-smaller} {
flex-direction: column;
align-items: center;
}
p {
width: 380px;
margin-top: 0px;
margin-right: 20px;
@media #{$medium-and-smaller} {
margin: 0px 0px 20px 0px;
}
@media #{$intermediate} {
width: 620px;
}
@media #{$medium} {
width: 460px;
}
@media #{$small} {
width: 300px;
}
}
}
.schools-conferences-content {
align-self: center;
.flex-content{
// display: flex;
// flex-wrap: wrap;
// justify-content: space-between;
// align-content: center;
max-width: 780px;
@media #{$intermediate} {
width: 620px;
margin-top: 80px;
}
@media #{$medium} {
width: 460px;
}
@media #{$small} {
width: 300px;
}
.schools-conferences-region {
display: flex;
flex-direction: row;
justify-content: center;
align-items: flex-start;
margin-bottom: 20px;
@media #{$medium-and-smaller} {
flex-direction: column;
align-items: center;
margin-bottom: 48px;
&.europe {
flex-direction: column-reverse;
}
}
.conference-image-and-caption {
display: flex;
flex-direction: column;
align-items: center;
font-size: 0.875rem;
line-height: 1.25rem;
img {
width: 300px;
}
@media #{$medium-and-smaller} {
margin-bottom: 32px;
}
}
.conference-title-and-description {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 460px;
@media #{$small} {
width: 300px;
}
}
.left {
margin-right: 20px;
}
}
}
}
}
.conferences-hero-and-caption {
@ -1717,127 +1460,7 @@ img.comment-viz{
}
}
.tools-extensions {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
}
.tools-extension {
width: 380px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
@media #{$intermediate} {
img {
max-width: 300px;
}
}
@media #{$small} {
img {
max-width: 300px;
}
}
}
.tools-stats {
display: flex;
flex-wrap: wrap;
width: 100%;
margin-bottom: 40px;
justify-content: space-between;
.tools-stat {
width: 160px;
font-size: .875rem;
line-height: 1.25rem;
a {
font-weight: normal;
}
}
}
.tools-LEGO, .tools-app {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-content: center;
max-width: 780px;
margin-top: 80px;
img {
width: 380px;
}
.tools-LEGO-info, .tools-app-info {
display: flex;
flex-direction: column;
justify-content: center;
width: 380px;
h4, p {
margin-bottom: 28px;
}
}
}
.tools-app {
margin-top: 0px;
margin-bottom: 124px;
}
.tools-tutorials {
width: 760px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
margin: 80px 0;
p {
max-width: 620px;
}
.tutorial-list {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 32px 0;
img {
border-radius: 8px;
@media #{$big} {
width: 180px;
height: 100px;
}
@media #{$intermediate} {
width: 140px;
height: 76px;
}
@media #{$medium} {
width: 220px;
height: 120px;
}
@media #{$small} {
width: 140px;
height: 76px;
}
}
}
.tools-stats {
justify-content: center;
.tools-stat {
margin: 0px 10px;
}
}
}
.tools-abhi {
.tools-abhi-intro {

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

@ -94,6 +94,22 @@
"annualReport.connectivityWorld": "Scratch Around the World",
"annualReport.connectivityWorldSubtitle": "International Collaborators",
"annualReport.connectivityCountryChileTitle": "Scratch Al Sur",
"annualReport.connectivityCountryChile": "Chile",
"annualReport.connectivityCountryChileParagraph": "Scratch Al Sur is dedicated to supporting computational and creative thinking among students and educators in Chile and across Latin America. They aided our translation and localization efforts in Rapa Nui and Spanish, and have engaged many educators in collaborative, playful Scratch professional development workshops.",
"annualReport.connectivityCountryBrazilTitle": "Brazil Creative Learning Network",
"annualReport.connectivityCountryBrazil": "Brazil",
"annualReport.connectivityCountryBrazilParagraph": "The Brazilian Creative Learning Network is a grassroots movement that implements playful, creative and relevant hands-on educational practices throughout Brazil. In 2020, the Scratch Team presented at the Brazilian Creative Learning Network’s Creative Learning Week event to share how kids were using Scratch to build community, express themselves, and speak out about what’s important to them. In turn, we learned how educators in the network were creating opportunities for self-expression with learners in their own communities.",
"annualReport.connectivityCountryIndiaTitle": "Quest Alliance",
"annualReport.connectivityCountryIndia": "India",
"annualReport.connectivityCountryIndiaParagraph": "Quest Alliance empowers millions of learners and educators with 21st century skills, including creative computing. In 2020, Quest Alliance shared Scratch with learners and educators across India.",
"annualReport.connectivityCountryUSATitle": "Raspberry Pi",
"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.",

0
static/images/annual-report/2020/connectivity/Scratch Around the World/Raspbery Pi graphic.svg → static/images/annual-report/2020/connectivity/Scratch Around the World/Raspberry Pi graphic.svg
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3 MiB

After

Width:  |  Height:  |  Size: 3 MiB