mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2024-11-27 09:35:56 -05:00
work on blm section
This commit is contained in:
seotts
Karishma Chadha
parent
04b76feea1
commit
51904492e9
3 changed files with 122 additions and 7 deletions
|
|
@ -21,6 +21,7 @@ const CountryUsage = require('./country-usage.json');
|
|||
const PeopleGrid = require('../../components/people-grid/people-grid.jsx');
|
||||
const People = require('./people.json');
|
||||
const BLMProjects = require('./blm-projects.json');
|
||||
const Video = require('../../components/Video/video.jsx');
|
||||
|
||||
require('./annual-report.scss');
|
||||
|
||||
|
|
@ -69,7 +70,8 @@ class AnnualReport extends React.Component {
|
|||
|
||||
this.state = {
|
||||
currentlyVisible: SECTIONS.message, // The currently visible section
|
||||
dropdownVisible: false
|
||||
dropdownVisible: false,
|
||||
videoOpen: false
|
||||
};
|
||||
|
||||
bindAll(this, [
|
||||
|
|
@ -780,6 +782,16 @@ class AnnualReport extends React.Component {
|
|||
ref={this.setRef(SECTIONS.initiatives)}
|
||||
>
|
||||
<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="inner">
|
||||
<h2>
|
||||
|
|
@ -977,7 +989,7 @@ class AnnualReport extends React.Component {
|
|||
<FormattedMessage id="annualReport.communitySpotlight" />
|
||||
</div>
|
||||
<div className="community-blm">
|
||||
<div>
|
||||
<div className="blm-intro">
|
||||
<h2>Black Lives Matter</h2>
|
||||
<p>
|
||||
<FormattedMessage
|
||||
|
|
@ -992,7 +1004,7 @@ class AnnualReport extends React.Component {
|
|||
/>
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<div className="blm-image">
|
||||
<img src="/images/annual-report/initiatives/BLM Hero.svg" />
|
||||
<b>
|
||||
<FormattedMessage id="annualReport.communityArtwork" />
|
||||
|
|
@ -1007,7 +1019,7 @@ class AnnualReport extends React.Component {
|
|||
showViews={false}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<div className="blm-change">
|
||||
<h3>
|
||||
<FormattedMessage id="annualReport.communityChangeTitle" />
|
||||
</h3>
|
||||
|
|
@ -1016,6 +1028,39 @@ class AnnualReport extends React.Component {
|
|||
</p>
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -506,15 +506,27 @@ p {
|
|||
|
||||
.initiatives-section {
|
||||
.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;
|
||||
|
||||
//>.initiatives-community {
|
||||
// background-color: $ui-blue-dark;
|
||||
//}
|
||||
|
||||
&.tools {
|
||||
background-color: $ui-aqua;
|
||||
background-position: 50% 0%;
|
||||
}
|
||||
|
||||
&.community {
|
||||
background-color: $ui-blue-dark;
|
||||
background-color: $ui-blue;
|
||||
background-position: 50% 50%;
|
||||
}
|
||||
|
||||
&.schools {
|
||||
background-color: $ui-purple;
|
||||
background-position: 50% 100%;
|
||||
}
|
||||
|
||||
.inner {
|
||||
|
|
@ -581,12 +593,13 @@ p {
|
|||
|
||||
.guidelines-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
ul {
|
||||
list-style-image: url('/images/annual-report/initiatives/guideline-splash.svg');
|
||||
}
|
||||
li {
|
||||
vertical-align: middle;
|
||||
// vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -638,6 +651,49 @@ p {
|
|||
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
14
static/images/annual-report/initiatives/Juice Pattern.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 7.9 KiB |
Loading…
Reference in a new issue