From 4dbe0d20f00c4a53408ce60ebb7054c7ce9d724d Mon Sep 17 00:00:00 2001 From: caseymm Date: Tue, 5 Oct 2021 11:52:50 -0700 Subject: [PATCH] country sections --- .../country-blurb/country-blurb.jsx | 45 ++ .../country-blurb/country-blurb.scss | 50 +++ .../2020/index/annual-report.jsx | 98 +++-- .../2020/index/annual-report.scss | 393 +----------------- src/views/annual-report/2020/index/l10n.json | 16 + ...i graphic.svg => Raspberry Pi graphic.svg} | 0 6 files changed, 182 insertions(+), 420 deletions(-) create mode 100644 src/components/country-blurb/country-blurb.jsx create mode 100644 src/components/country-blurb/country-blurb.scss rename static/images/annual-report/2020/connectivity/Scratch Around the World/{Raspbery Pi graphic.svg => Raspberry Pi graphic.svg} (100%) diff --git a/src/components/country-blurb/country-blurb.jsx b/src/components/country-blurb/country-blurb.jsx new file mode 100644 index 000000000..2889d8b0a --- /dev/null +++ b/src/components/country-blurb/country-blurb.jsx @@ -0,0 +1,45 @@ +const classNames = require('classnames'); +const PropTypes = require('prop-types'); +const React = require('react'); + + +require('./country-blurb.scss'); + +const CountryBlurb = props => ( +
+ {props.className === 'regular' && +
+ +
+ } +
+
+ +
+
{props.title}
+
+ + {props.country} +
+
+
+

{props.paragraph}

+
+ {props.className === 'reverse' && +
+ +
+ } +
+); + +CountryBlurb.propTypes = { + icon: PropTypes.string, + title: PropTypes.string, + list_icon: PropTypes.string, + country: PropTypes.string, + paragraph: PropTypes.string, + className: PropTypes.string +}; + +module.exports = CountryBlurb; diff --git a/src/components/country-blurb/country-blurb.scss b/src/components/country-blurb/country-blurb.scss new file mode 100644 index 000000000..01f1136eb --- /dev/null +++ b/src/components/country-blurb/country-blurb.scss @@ -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; + } + } + } +} \ No newline at end of file diff --git a/src/views/annual-report/2020/index/annual-report.jsx b/src/views/annual-report/2020/index/annual-report.jsx index a2a030759..2e9bfc93d 100644 --- a/src/views/annual-report/2020/index/annual-report.jsx +++ b/src/views/annual-report/2020/index/annual-report.jsx @@ -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 { -
- -
-

- -

-

- - - - ), - weDoLink: ( - - - - ) - }} - /> -

-
- -
-
+
+ + + + +

diff --git a/src/views/annual-report/2020/index/annual-report.scss b/src/views/annual-report/2020/index/annual-report.scss index 5e98e1d5a..8d7186654 100644 --- a/src/views/annual-report/2020/index/annual-report.scss +++ b/src/views/annual-report/2020/index/annual-report.scss @@ -1303,272 +1303,15 @@ img.comment-viz{ padding-top: 32px; } - &.abhi { - padding-top: 0; - padding-bottom: 132px; + .flex-content{ + // display: flex; + // 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 { @@ -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 { diff --git a/src/views/annual-report/2020/index/l10n.json b/src/views/annual-report/2020/index/l10n.json index a01c1cf4d..d9dc05475 100644 --- a/src/views/annual-report/2020/index/l10n.json +++ b/src/views/annual-report/2020/index/l10n.json @@ -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.", diff --git a/static/images/annual-report/2020/connectivity/Scratch Around the World/Raspbery Pi graphic.svg b/static/images/annual-report/2020/connectivity/Scratch Around the World/Raspberry Pi graphic.svg similarity index 100% rename from static/images/annual-report/2020/connectivity/Scratch Around the World/Raspbery Pi graphic.svg rename to static/images/annual-report/2020/connectivity/Scratch Around the World/Raspberry Pi graphic.svg