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

work on blm section

Browse source
This commit is contained in:
seotts 2020-10-07 16:09:01 -04:00 committed by Karishma Chadha
parent 04b76feea1
commit 51904492e9
3 changed files with 122 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -21,6 +21,7 @@ const CountryUsage = require('./country-usage.json');
const PeopleGrid = require('../../components/people-grid/people-grid.jsx'); const PeopleGrid = require('../../components/people-grid/people-grid.jsx');
const People = require('./people.json'); const People = require('./people.json');
const BLMProjects = require('./blm-projects.json'); const BLMProjects = require('./blm-projects.json');
const Video = require('../../components/Video/video.jsx');
require('./annual-report.scss'); require('./annual-report.scss');
@ -69,7 +70,8 @@ class AnnualReport extends React.Component {
this.state = { this.state = {
currentlyVisible: SECTIONS.message, // The currently visible section currentlyVisible: SECTIONS.message, // The currently visible section
dropdownVisible: false dropdownVisible: false,
videoOpen: false
}; };
bindAll(this, [ bindAll(this, [
@ -780,6 +782,16 @@ class AnnualReport extends React.Component {
ref={this.setRef(SECTIONS.initiatives)} ref={this.setRef(SECTIONS.initiatives)}
> >
<div className="initiatives-community"> <div className="initiatives-community">
<div className="initiatives-subsection-header tools">
<div className="inner">
<h2>
<FormattedMessage id="annualReport.communityTitle" />
</h2>
<p>
<FormattedMessage id="annualReport.communityIntro" />
</p>
</div>
</div>
<div className="initiatives-subsection-header community"> <div className="initiatives-subsection-header community">
<div className="inner"> <div className="inner">
<h2> <h2>
@ -977,7 +989,7 @@ class AnnualReport extends React.Component {
<FormattedMessage id="annualReport.communitySpotlight" /> <FormattedMessage id="annualReport.communitySpotlight" />
</div> </div>
<div className="community-blm"> <div className="community-blm">
<div> <div className="blm-intro">
<h2>Black Lives Matter</h2> <h2>Black Lives Matter</h2>
<p> <p>
<FormattedMessage <FormattedMessage
@ -992,7 +1004,7 @@ class AnnualReport extends React.Component {
/> />
</p> </p>
</div> </div>
<div> <div className="blm-image">
<img src="/images/annual-report/initiatives/BLM Hero.svg" /> <img src="/images/annual-report/initiatives/BLM Hero.svg" />
<b> <b>
<FormattedMessage id="annualReport.communityArtwork" /> <FormattedMessage id="annualReport.communityArtwork" />
@ -1007,7 +1019,7 @@ class AnnualReport extends React.Component {
showViews={false} showViews={false}
/> />
</div> </div>
<div> <div className="blm-change">
<h3> <h3>
<FormattedMessage id="annualReport.communityChangeTitle" /> <FormattedMessage id="annualReport.communityChangeTitle" />
</h3> </h3>
@ -1016,6 +1028,39 @@ class AnnualReport extends React.Component {
</p> </p>
</div> </div>
</div> </div>
<FlexRow className="blm-video-container">
{this.state.videoOpen ?
(
<Video
className="intro-video"
videoId="joal01i8b1"
/>
) : (
<div
className="video-image"
>
<img src="/images/annual-report/initiatives/BLM Video Thumbnail.png" />
<a
href="#"
>
<div className="watch-button button">
{'Watch Video'}
</div>
</a>
</div>
)
}
</FlexRow>
</div>
</div>
<div className="initiatives-subsection-header schools">
<div className="inner">
<h2>
<FormattedMessage id="annualReport.communityTitle" />
</h2>
<p>
<FormattedMessage id="annualReport.communityIntro" />
</p>
</div> </div>
</div> </div>
</div> </div>

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

@ -506,15 +506,27 @@ p {
.initiatives-section { .initiatives-section {
.initiatives-subsection-header { .initiatives-subsection-header {
// background-image: url("/images/annual-report/initiatives/guideline-splash.svg"); background-image: url("/images/annual-report/initiatives/Juice Pattern.svg");
padding: 92px 0; padding: 92px 0;
//>.initiatives-community { //>.initiatives-community {
// background-color: $ui-blue-dark; // background-color: $ui-blue-dark;
//} //}
&.tools {
background-color: $ui-aqua;
background-position: 50% 0%;
}
&.community { &.community {
background-color: $ui-blue-dark; background-color: $ui-blue;
background-position: 50% 50%;
}
&.schools {
background-color: $ui-purple;
background-position: 50% 100%;
} }
.inner { .inner {
@ -581,12 +593,13 @@ p {
.guidelines-list { .guidelines-list {
display: flex; display: flex;
flex-wrap: wrap;
ul { ul {
list-style-image: url('/images/annual-report/initiatives/guideline-splash.svg'); list-style-image: url('/images/annual-report/initiatives/guideline-splash.svg');
} }
li { li {
vertical-align: middle; // vertical-align: middle;
} }
} }
@ -638,6 +651,49 @@ p {
line-height: 40px; line-height: 40px;
} }
} }
.comment-text, .comment-text::before, .comment-text::after {
border-color: $ui-blue;
}
}
}
.community-blm {
display: flex;
flex-wrap: wrap;
.blm-intro {
max-width: 460px;
}
.blm-image {
max-width: 380px;
font-size: .875rem;
text-align: center;
}
.blm-projects {
.flex-row {
max-width: 500px;
flex-wrap: true;
}
}
.blm-change {
width: 380px;
}
}
.blm-video-container {
background-image: url("/images/annual-report/initiatives/BLM Video Splash.svg");
width: 1020px;
height: 500px;
background-size: 100% auto;
background-repeat: no-repeat;
background-position: 50% 50%;
img {
width: 576px;
} }
} }
} }

14
static/images/annual-report/initiatives/Juice Pattern.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 7.9 KiB