country sections

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

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;

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;
}
}
}
}

View file

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

View file

@ -1303,272 +1303,15 @@ img.comment-viz{
padding-top: 32px; padding-top: 32px;
} }
&.abhi { .flex-content{
padding-top: 0; // display: flex;
padding-bottom: 132px; // flex-wrap: wrap;
// justify-content: space-between;
// align-content: center;
max-width: 780px;
margin-top: 80px;
} }
&.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;
max-width: 780px;
@media #{$intermediate} {
width: 620px;
}
@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 { .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 {
.tools-abhi-intro { .tools-abhi-intro {

View file

@ -94,6 +94,22 @@
"annualReport.connectivityWorld": "Scratch Around the World", "annualReport.connectivityWorld": "Scratch Around the World",
"annualReport.connectivityWorldSubtitle": "International Collaborators", "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 Networks Creative Learning Week event to share how kids were using Scratch to build community, express themselves, and speak out about whats 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.toolsCollabAWS": "Collaboration with Amazon Web Services",
"annualReport.toolsTranslate": "Translate", "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.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.",