Skip to content

GitLab

S
scratch-www
Commit aea79a7e authored by seotts's avatar seotts Committed by Karishma Chadha
Browse files
Options

continued work on initiatives section

parent 438c5ec0
Show whitespace changes
Inline Side-by-side
Showing with 95 additions and 9 deletions
src/components/video-preview/video-preview.jsx
View file @ aea79a7e
...@@ -24,7 +24,6 @@ class VideoPreview extends React.Component { ...@@ -24,7 +24,6 @@ class VideoPreview extends React.Component {
} }
render () { render () {
//console.log(this.props.videoHeight);
return ( return (
<div className="video-preview"> <div className="video-preview">
{this.state.videoOpen ? {this.state.videoOpen ?
......
src/views/annual-report/annual-report.jsx
View file @ aea79a7e
...@@ -781,17 +781,55 @@ class AnnualReport extends React.Component { ...@@ -781,17 +781,55 @@ class AnnualReport extends React.Component {
className="initiatives-section section" className="initiatives-section section"
ref={this.setRef(SECTIONS.initiatives)} ref={this.setRef(SECTIONS.initiatives)}
> >
<div className="initiatives-community"> <div className="initiatives-intro">
<div className="initiatives-subsection-header tools">
<div className="inner"> <div className="inner">
<h2> <h2>
<FormattedMessage id="annualReport.communityTitle" /> <FormattedMessage id="annualReport.initiativesTitle" />
</h2> </h2>
<div className="initiatives-pillars">
<div className="initiatives-pillar">
<img src="/images/annual-report/ScratchJr-Logo.svg" />
<h3>
<FormattedMessage id="annualReport.toolsTitle" />
</h3>
<p>
<FormattedMessage id="annualReport.toolsIntro" />
</p>
</div>
<div className="initiatives-pillar">
<img src="/images/annual-report/ScratchJr-Logo.svg" />
<h3>
<FormattedMessage id="annualReport.communityTitle" />
</h3>
<p> <p>
<FormattedMessage id="annualReport.communityIntro" /> <FormattedMessage id="annualReport.communityIntro" />
</p> </p>
</div> </div>
<div className="initiatives-pillar">
<img src="/images/annual-report/ScratchJr-Logo.svg" />
<h3>
<FormattedMessage id="annualReport.schoolsTitle" />
</h3>
<p>
<FormattedMessage id="annualReport.schoolsIntro" />
</p>
</div>
</div> </div>
</div>
</div>
<div className="initiatives-tools">
<div className="initiatives-subsection-header tools">
<div className="inner">
<h2>
<FormattedMessage id="annualReport.toolsTitle" />
</h2>
<p>
<FormattedMessage id="annualReport.toolsIntro" />
</p>
</div>
</div>
</div>
<div className="initiatives-community">
<div className="initiatives-subsection-header community"> <div className="initiatives-subsection-header community">
<div className="inner"> <div className="inner">
<h2> <h2>
...@@ -818,7 +856,10 @@ class AnnualReport extends React.Component { ...@@ -818,7 +856,10 @@ class AnnualReport extends React.Component {
<FormattedMessage id="annualReport.communityTeamIntro2" /> <FormattedMessage id="annualReport.communityTeamIntro2" />
</p> </p>
</div> </div>
<img className="hero" src="/images/annual-report/initiatives/community-hero.png" /> <img
className="hero"
src="/images/annual-report/initiatives/community-hero.png"
/>
<div className="moderation-and-guidelines"> <div className="moderation-and-guidelines">
<div className="community-moderation"> <div className="community-moderation">
<h4> <h4>
...@@ -1030,7 +1071,9 @@ class AnnualReport extends React.Component { ...@@ -1030,7 +1071,9 @@ class AnnualReport extends React.Component {
</div> </div>
<div className="video-container blm"> <div className="video-container blm">
<VideoPreview <VideoPreview
buttonMessage={this.props.intl.formatMessage({id: 'annualReport.watchVideo'})} buttonMessage={
this.props.intl.formatMessage({id: 'annualReport.watchVideo'})
}
thumbnail="/images/annual-report/initiatives/BLM Video Thumbnail.png" thumbnail="/images/annual-report/initiatives/BLM Video Thumbnail.png"
thumbnailWidth="580" thumbnailWidth="580"
videoHeight="320" videoHeight="320"
...@@ -1040,13 +1083,15 @@ class AnnualReport extends React.Component { ...@@ -1040,13 +1083,15 @@ class AnnualReport extends React.Component {
</div> </div>
</div> </div>
</div> </div>
</div>
<div className="initiatives-schools">
<div className="initiatives-subsection-header schools"> <div className="initiatives-subsection-header schools">
<div className="inner"> <div className="inner">
<h2> <h2>
<FormattedMessage id="annualReport.communityTitle" /> <FormattedMessage id="annualReport.schoolsTitle" />
</h2> </h2>
<p> <p>
<FormattedMessage id="annualReport.communityIntro" /> <FormattedMessage id="annualReport.schoolsIntro" />
</p> </p>
</div> </div>
</div> </div>
......
src/views/annual-report/annual-report.scss
View file @ aea79a7e
...@@ -505,6 +505,40 @@ p { ...@@ -505,6 +505,40 @@ p {
} }
.initiatives-section { .initiatives-section {
.initiatives-intro {
.inner {
display: flex;
flex-direction: column;
align-items: center;
padding: 88px 0;
}
.initiatives-pillars {
display: flex;
.initiatives-pillar {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 272px;
margin: 0 40px;
img {
width: 140px;
height: 140px;
align-self: center;
}
}
@media #{$intermediate-and-smaller} {
margin: 40px 0;
flex-direction: column;
}
}
}
.initiatives-subsection-header { .initiatives-subsection-header {
background-image: url("/images/annual-report/initiatives/Juice Pattern.svg"); background-image: url("/images/annual-report/initiatives/Juice Pattern.svg");
......
src/views/annual-report/l10n.json
View file @ aea79a7e
...@@ -64,6 +64,11 @@ ...@@ -64,6 +64,11 @@
"annualReport.reach22million": "22 {million}", "annualReport.reach22million": "22 {million}",
"annualReport.reachDownloads": "Downloads Since Launching in 2014", "annualReport.reachDownloads": "Downloads Since Launching in 2014",
"annualReport.initiativesTitle": "Initiatives",
"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.communityTitle": "Community", "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.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", "annualReport.communitySpotlight": "Community - Spotlight Story",
...@@ -99,6 +104,9 @@ ...@@ -99,6 +104,9 @@
"annualReport.communityChangeInfo": "We are committed to working with them, and with the educators and families who support them, to ensure that they develop the skills, the motivation, and the confidence they’ll need to lead fulfilling lives and bring about meaningful change in society.", "annualReport.communityChangeInfo": "We are committed to working with them, and with the educators and families who support them, to ensure that they develop the skills, the motivation, and the confidence they’ll need to lead fulfilling lives and bring about meaningful change in society.",
"annualReport.watchVideo": "Watch Video", "annualReport.watchVideo": "Watch Video",
"annualReport.schoolsTitle": "Schools",
"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.",
"annualReport.financialsTitle": "Financials - 2019", "annualReport.financialsTitle": "Financials - 2019",
"annualReport.financialsRevenue": "Revenues", "annualReport.financialsRevenue": "Revenues",
"annualReport.financialsGrants": "Grants, Individual, & Corporate Donations (Gala Included)", "annualReport.financialsGrants": "Grants, Individual, & Corporate Donations (Gala Included)",
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment