Skip to content

GitLab

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

work on blm section

parent 04b76fee
Hide whitespace changes
Inline Side-by-side
Showing with 122 additions and 7 deletions
src/views/annual-report/annual-report.jsx
View file @ 51904492
...@@ -21,6 +21,7 @@ const CountryUsage = require('./country-usage.json'); ...@@ -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 { ...@@ -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 { ...@@ -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 { ...@@ -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 { ...@@ -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 { ...@@ -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 { ...@@ -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>
......
src/views/annual-report/annual-report.scss
View file @ 51904492
...@@ -506,15 +506,27 @@ p { ...@@ -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 { ...@@ -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 { ...@@ -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;
} }
} }
} }
......
static/images/annual-report/initiatives/Juice Pattern.svg 0 → 100644
View file @ 51904492
<?xml version="1.0" encoding="UTF-8"?>
<svg width="1400px" height="720px" viewBox="0 0 1400 720" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Juice Pattern</title>
<defs>
<rect id="path-1" x="0" y="0" width="1400" height="720"></rect>
</defs>
<g id="Juice-Pattern" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<g id="Rectangle"></g>
<path d="M1021.87213,507.255853 C1086.13018,493.464122 1022.75271,580.407114 961.068385,608.612836 C933.440827,621.245055 966.521819,638.08008 993.10561,625.172434 C1065.34661,590.10485 1096.76505,617.04565 1022.16452,666.659839 C1003.61809,678.99623 946.312835,708.201648 876.730553,717.12411 C806.488692,726.134979 808.314437,700.275483 830.049975,690.581148 C861.308623,676.643202 882.721171,646.424486 798.913723,671.947349 C649.100685,717.569553 560.356588,709.973219 594.460949,671.947349 C626.314579,636.437722 733.703709,643.867439 883.516747,568.985411 C890.459165,565.515036 897.32325,561.934797 904.142588,558.320045 L906.868016,556.872482 C908.683483,555.906451 910.496087,554.93868 912.306464,553.970599 L915.020439,552.518422 C949.830397,533.883745 983.933233,515.398619 1021.87213,507.255853 Z M401.439987,617.826705 C519.936578,607.142874 522.707494,490.256592 562.278889,514.664148 C589.48826,531.441368 562.652878,599.917177 545.16721,635.620623 C498.000446,731.938319 401.157795,722.475206 414.753981,689.597433 C428.346767,656.719659 372.42527,683.504045 346.521459,677.509266 C320.621048,671.521288 305.260316,626.494142 401.439987,617.826705 Z M-29.0086653,512.08976 C-102.07244,474.009484 -40.9491017,409.240033 21.7891879,467.793684 C111.175866,551.220737 189.829071,506.030375 213.747342,536.609526 C245.69277,577.450868 147.003975,579.732489 110.557085,592.000873 C74.1101946,604.269257 149.217307,610.498658 215.290895,609.811792 C281.371283,609.124926 271.372188,659.871424 196.268475,684.731223 C80.8793885,722.920309 -21.9810793,683.262281 66.4366283,657.923036 C99.4122241,648.466723 75.9733379,621.19269 39.3700525,625.12687 C-29.7498427,632.556587 -80.9794827,598.441094 -69.3484369,571.789322 C-56.2214366,541.710019 -23.7388257,561.958973 9.11097392,564.20659 C41.9607736,566.457607 13.5274394,534.2599 -29.0086653,512.08976 Z M1304.55143,421.896394 C1390.30021,390.103326 1479.90109,400.702149 1429.32083,426.714659 C1378.74057,452.733971 1245.78422,538.884686 1314.21733,544.797857 C1347.89671,547.708538 1385.96535,572.694149 1314.21733,631.955069 C1268.67232,669.5763 1109.93795,721.563918 1101.26822,688.32231 C1092.59848,655.080701 1283.35647,597.268321 1224.10648,591.484363 C1164.85648,585.703805 1085.5199,635.641025 1092.68348,597.931385 C1108.01361,517.289202 1250.05449,442.111345 1304.55143,421.896394 Z M768.80594,332.668722 C758.069067,342.461667 730.472107,351.839772 746.958205,361.503505 C796.770088,390.698723 948.585665,239.040685 973.700701,288.797688 C985.777133,312.722397 925.228377,366.226561 859.137789,399.651787 C810.349275,424.324569 828.137533,469.528532 900.551928,424.991033 C972.969723,380.450134 985.746534,432.951201 945.631155,467.406727 C905.519177,501.858852 649.234981,621.18657 631.773113,557.416815 C618.183727,507.819628 761.370366,516.905305 743.551509,484.860612 C730.472107,461.347342 630.88914,523.780768 595.639013,483.235255 C561.524452,444.002268 689.224563,418.006759 681.047812,394.483288 C674.591409,375.920897 613.48507,402.076221 612.301906,356.634235 C611.387334,321.413636 677.375924,332.536109 738.404066,280.885124 C763.621098,259.537864 815.190727,290.365239 768.80594,332.668722 Z M464.857916,351.61025 C549.134549,331.463306 596.556305,365.238766 577.68008,388.316793 C557.290901,413.237799 508.485387,413.179993 504.650304,461.971302 C497.483322,553.263314 407.681857,569.418273 445.99869,505.682521 C459.421481,483.352566 439.712281,469.2038 428.159433,497.752956 C421.182846,514.982419 388.098453,538.628301 370.616185,547.370545 C291.269402,587.042174 228.004128,529.403211 284.7552,513.384265 C321.684876,502.962259 354.861065,477.895039 376.05262,420.490699 C387.343676,389.901346 427.839843,360.461305 464.857916,351.61025 Z M1252.58503,199.734591 C1331.58502,186.157081 1349.08089,213.359706 1316.19029,235.132008 C1295.79431,248.638111 1216.36933,291.706668 1274.37836,295.926476 C1332.3942,300.146283 1289.15771,355.303007 1221.02719,406.651363 C1152.90006,457.999719 1004.0594,485.739596 1010.5634,442.436417 C1017.0708,399.133237 1192.34226,378.353832 1160.78102,332.653421 C1147.07264,312.802305 1080.03008,395.131051 1050.26739,347.761079 C1020.5013,300.391107 1203.06214,208.242212 1252.58503,199.734591 Z M318.300279,226.200706 C309.038961,252.97149 280.734823,260.027171 236.434172,277.249833 C192.13692,294.475896 248.466405,317.434912 321.557379,282.945383 C363.365906,263.220079 408.162942,296.471888 357.681279,330.716594 C315.485164,359.337156 218.261725,367.542148 220.917044,392.092518 C222.385799,405.727834 292.96425,372.928268 305.78866,402.320705 C316.450735,426.748663 291.186104,454.821772 220.587254,460.520722 C148.662444,466.328483 92.7239478,451.533655 91.8875732,416.200845 C90.9390021,376.199384 175.324432,365.359137 137.408787,352.992144 C127.114649,349.63653 113.80712,347.459356 100.232203,345.216218 L97.2122695,344.716151 C61.4507195,338.773876 25.2467466,331.738052 38.532998,300.980724 C49.1508746,276.406552 168.17785,272.479173 256.687355,193.105311 C288.530785,164.545955 327.564996,199.429922 318.300279,226.200706 Z M856.238017,-6.11821755 C840.785488,44.51947 684.448049,72.2049422 681.619335,116.368405 C678.787221,160.535268 840.3979,62.588814 851.957548,88.5367185 C863.517196,114.488023 685.05323,245.570675 590.600707,283.888974 C533.68644,306.977202 488.787407,274.347653 554.317011,223.845979 C598.158676,190.060318 577.524705,161.028315 537.184933,180.886232 C496.845162,200.747549 475.381615,149.528405 531.112718,105.75258 C586.843821,61.9801553 873.720285,-63.4239487 856.238017,-6.11821755 Z M821.943602,230.589849 C849.781954,219.446974 857.003334,239.869345 857.003334,256.371138 C857.003334,272.876331 829.161582,279.061528 813.692053,269.778632 C798.222524,260.499136 802.557392,238.345998 821.943602,230.589849 Z M423.790226,226.541079 C432.079174,214.170685 447.429706,202.653773 465.731349,215.377801 C479.946316,225.262555 480.388303,237.867572 465.279163,255.35546 C445.692359,278.032249 413.002355,276.978147 403.401047,268.684746 C393.79974,260.391346 415.504679,238.914873 423.790226,226.541079 Z M1311.05509,-13.737333 C1315.84894,14.2031639 1239.92925,35.309001 1145.61613,80.5265654 C1100.01671,102.387275 1148.26124,120.810254 1177.94574,109.000914 C1276.12795,69.9481444 1268.45778,129.627305 1185.56151,171.702966 C1120.78668,204.584139 1065.99735,221.830604 1033.53854,229.743168 C986.463572,241.219275 976.651471,210.813541 1003.52765,193.655485 C1055.99145,160.162252 1030.76422,129.246468 983.801453,155.235176 C954.055759,171.696165 878.629056,260.091097 865.757048,197.147622 C857.80129,158.230865 954.905733,35.6150305 1073.98711,3.28811034 C1193.68726,-29.2054259 1306.22723,-41.8410455 1311.05509,-13.737333 Z M248.052298,-138.953399 C291.594772,-136.811192 252.703356,-53.4793488 178.769208,10.4468213 C126.387003,55.7391929 177.541845,78.7220112 227.775315,51.679201 C288.480467,18.9986467 335.800226,40.8661574 257.453011,112.521273 C179.105797,184.17979 60.1434199,236.908679 -4.74700408,223.388974 C-69.6340282,209.86927 86.3974204,168.575684 92.5886319,113.878004 C98.6710467,60.1324169 4.04172829,168.633489 -45.2975692,132.539006 C-93.1885109,97.5088245 10.7463241,57.418955 76.1807315,-6.05497145 C146.633386,-74.4015682 206.145174,-141.013998 248.052298,-138.953399 Z M358.513914,80.844156 C404.915701,20.9405742 553.956962,-41.1426181 561.239541,-7.80240011 C566.587578,16.6833632 483.004523,48.2928142 432.087674,124.266347 C388.810391,188.835179 306.073911,148.554891 358.513914,80.844156 Z" id="Combined-Shape" fill="#FFFFFF" opacity="0.1" mask="url(#mask-2)"></path>
</g>
</svg>
\ No newline at end of file
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