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

nearly complete financials section

Browse source
This commit is contained in:
seotts 2020-08-25 16:47:11 -04:00 committed by Karishma Chadha
parent 79d0bef2a0
commit 4d4f9e720e
8 changed files with 350 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -184,33 +184,131 @@ const AnnualReport = () => (
</section>
</div>
</div>
<div className="financials" id="financials">
<div className="financials-content">
<div className="financials-section" id="financials">
<div className="inner">
<h1 className="financials-h1">
<FormattedMessage id="annualReport.financialsTitle" />
</h1>
<div className="financials-subsection">
<h2>
<FormattedMessage id="annualReport.financialsRevenue" />
</h2>
<hr />
<div className="circle-and-words">
<span className="financials-dot" />
<div className="key-and-money">
<p>
<FormattedMessage id="annualReport.financialsGrants" />
</p>
<p>
<FormattedMessage id="annualReport.financialsGrantsAmt" />
</p>
<h2>
<FormattedMessage id="annualReport.financialsRevenue" />
</h2>
<hr />
<div className="financials-content">
<div className="financials-table">
<div className="circle-and-words">
<img src="/images/annual-report/blue-circle.svg" />
<div className="key-and-money">
<p className="key">
<FormattedMessage id="annualReport.financialsGrants" />
</p>
<p>
$3,898,078
<span className="percentage"> (82.7%)</span>
</p>
</div>
</div>
<div className="circle-and-words">
<img src="/images/annual-report/yellow-circle.svg" />
<div className="key-and-money">
<p className="key">
<FormattedMessage id="annualReport.financialsEvents" />
</p>
<p>
$700,000
<span className="percentage"> (14.8%)</span>
</p>
</div>
</div>
<div className="circle-and-words">
<img src="/images/annual-report/green-circle.svg" />
<div className="key-and-money">
<p className="key">
<FormattedMessage id="annualReport.financialsOther" />
</p>
<p>
$114,982
<span className="percentage"> (2.4%)</span>
</p>
</div>
</div>
<div className="circle-and-words">
<div className="key-and-money total">
<p className="key">
<FormattedMessage id="annualReport.financialsTotal" />
</p>
<p>
$4,713,060
</p>
</div>
</div>
</div>
<img className="graph" src="/images/annual-report/revenue-graph.svg" />
</div>
<div className="financials-subsection">
<h2>
<FormattedMessage id="annualReport.financialsExpenses" />
</h2>
<hr/>
<h2>
<FormattedMessage id="annualReport.financialsExpenses" />
</h2>
<hr/>
<div className="financials-content">
<div className="financials-table">
<div className="circle-and-words">
<img src="/images/annual-report/blue-circle.svg" />
<div className="key-and-money">
<p className="key">
<FormattedMessage id="annualReport.financialsProgram" />
</p>
<p>
$1,135,767
<span className="percentage"> (48.8%)</span>
</p>
</div>
</div>
<div className="circle-and-words">
<img src="/images/annual-report/yellow-circle.svg" />
<div className="key-and-money">
<p className="key">
<FormattedMessage id="annualReport.financialsGeneral" />
</p>
<p>
$224,104
<span className="percentage"> (9.6%)</span>
</p>
</div>
</div>
<div className="circle-and-words">
<img src="/images/annual-report/green-circle.svg" />
<div className="key-and-money">
<p className="key">
<FormattedMessage id="annualReport.financialsFundraising" />
</p>
<p>
$962,958
<span className="percentage"> (41.4%)</span>
</p>
</div>
</div>
<div className="circle-and-words">
<div className="key-and-money total">
<p className="key">
<FormattedMessage id="annualReport.financialsTotal" />
</p>
<p>
$2,322,829
</p>
</div>
</div>
</div>
<img className="graph" src="/images/annual-report/expenses-graph.svg" />
</div>
<div className="financials-button-wrapper">
<a href="https://secure.donationpay.org/scratchfoundation/">
<Button className="financials-button">
<FormattedMessage id="annualReport.financialsButton" />
<img
className="download-icon"
src="/images/ideas/download-icon.svg"
/>
</Button>
</a>
</div>
</div>
</div>

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

@ -127,6 +127,140 @@ $base-bg: $ui-white;
margin-bottom: 0;
}
.financials-section {
.inner {
max-width: 780px;
padding: 72px 0;
}
background-color: #575E75;
width: 100%;
color: #FFFFFF;
h1, h2, p {
color: #FFFFFF;
}
h1 {
font-size: 52px;
margin-bottom: 72px;
line-height: 64px;
}
hr {
border: 0;
height: 0;
border-top: .5px solid #FFFFFF;
}
.financials-content {
display: flex;
align-items: center;
justify-content: space-between;
}
.financials-table {
display: flex;
flex-direction: column;
margin: 64px 0;
}
.circle-and-words {
display: flex;
align-items: flex-start;
padding: 8px 0px;;
img {
margin-right: 16px;
}
p {
text-align: left;
line-height: 24px;
font-size: 16px;
font-weight: bold;
margin: 0;
}
.percentage {
font-weight: normal;
}
.key {
width: 264px;
}
.total {
margin-left: 36px;
margin-top: 52px;
p {
font-size: 20px;
}
}
.key-and-money {
display: flex;
}
}
.financials-button-wrapper {
width: 100%;
text-align: center;
}
.financials-button {
// margin-right: .75rem;
background-color: $ui-white;
color: $ui-blue;
padding: 20px;
border-radius: 6px;
font-family: "Helvetica Neue";
font-size: 24px;
font-weight: bold;
.download-icon {
height: 1.75rem;
vertical-align: middle;
}
}
@media #{$medium-and-smaller} {
h1 {
position: relative;
margin-bottom: 40px;
max-width: 300px;
left: 50%;
margin-left: -150px;
}
.financials-content {
flex-direction: column-reverse;
text-align: center;
}
.financials-table {
margin: 0 0 60px 0;
}
.graph {
margin: 28px;
}
}
@media #{$small} {
.key-and-money {
flex-direction: column;
}
.key {
padding-bottom: 8px;
}
}
}
.donate-section {
height: 500px;
background-color: #0EBD8C;
@ -134,7 +268,7 @@ $base-bg: $ui-white;
.donate-info {
justify-content: center;
align-items: flex-start;
padding: 82px 0px;
padding: 84px 0px;
}
.donate-content {
@ -177,8 +311,6 @@ $base-bg: $ui-white;
margin: 0px;
border-radius: 6px;
// font-size: 1rem;
font-family: "Helvetica Neue";
font-size: 24px;
font-weight: bold;

8
src/views/annual-report/l10n.json
View file

@ -65,8 +65,14 @@
"annualReport.financialsTitle": "Financials - 2019",
"annualReport.financialsRevenue": "Revenue",
"annualReport.financialsGrants": "Grants, Individual, & Corporate Donations (Gala Included)",
"annualReport.financialsGrantsAmt": "$3,898,078 (82.7%)",
"annualReport.financialsEvents": "Events",
"annualReport.financialsOther": "Other",
"annualReport.financialsTotal": "Total",
"annualReport.financialsExpenses": "Expenses",
"annualReport.financialsProgram": "Program",
"annualReport.financialsGeneral": "General & Administrative",
"annualReport.financialsFundraising": "Fundraising (Gala & Others)",
"annualReport.financialsButton": "2019 Audited Financials",
"annualReport.donateTitle": "Donate",
"annualReport.donateMessage": "Your support enables us to make Scratch free for everyone, keeps our servers running, and most importantly, we are able to provide kids around the world an opportunity to imagine, create and share. Thank you!",

15
static/images/annual-report/blue-circle.svg Normal file
View file

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>blue circle</title>
<g id="R2_Columns-12" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="R2---BOTTOM---12-Column-(grid)" transform="translate(-250.000000, -17814.000000)" fill="#4D97FF">
<g id="Financials" transform="translate(0.000000, 17459.000000)">
<g id="Revenue" transform="translate(250.000000, 230.000000)">
<g id="blue-circle" transform="translate(0.000000, 123.000000)">
<circle cx="10" cy="12" r="10"></circle>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 816 B

22
static/images/annual-report/expenses-graph.svg Normal file
View file

@ -0,0 +1,22 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="220px" height="220px" viewBox="0 0 220 220" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Expenses Graph</title>
<defs>
<path d="M108,0 C167.646753,0 216,48.353247 216,108 C216,167.646753 167.646753,216 108,216 C48.353247,216 0,167.646753 0,108 C0,48.353247 48.353247,0 108,0 Z M108,53.0847458 C77.6711426,53.0847458 53.0847458,77.6711426 53.0847458,108 C53.0847458,138.328857 77.6711426,162.915254 108,162.915254 C138.328857,162.915254 162.915254,138.328857 162.915254,108 C162.915254,77.6711426 138.328857,53.0847458 108,53.0847458 Z" id="path-1"></path>
</defs>
<g id="Expenses-Graph" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(2.000000, 2.000000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<path stroke-opacity="0.15" stroke="#000000" stroke-width="2" d="M108,-1 C138.099519,-1 165.349519,11.2002406 185.074639,30.9253609 C204.799759,50.6504811 217,77.9004811 217,108 C217,138.099519 204.799759,165.349519 185.074639,185.074639 C165.349519,204.799759 138.099519,217 108,217 C77.9004811,217 50.6504811,204.799759 30.9253609,185.074639 C11.2002406,165.349519 -1,138.099519 -1,108 C-1,77.9004811 11.2002406,50.6504811 30.9253609,30.9253609 C50.6504811,11.2002406 77.9004811,-1 108,-1 Z M108,54.0847458 C93.1117137,54.0847458 79.6329001,60.1194161 69.8761581,69.8761581 C60.1194161,79.6329001 54.0847458,93.1117137 54.0847458,108 C54.0847458,122.888286 60.1194161,136.3671 69.8761581,146.123842 C79.6329001,155.880584 93.1117137,161.915254 108,161.915254 C122.888286,161.915254 136.3671,155.880584 146.123842,146.123842 C155.880584,136.3671 161.915254,122.888286 161.915254,108 C161.915254,93.1117137 155.880584,79.6329001 146.123842,69.8761581 C136.3671,60.1194161 122.888286,54.0847458 108,54.0847458 Z"></path>
<g id="Chart" mask="url(#mask-2)">
<g transform="translate(-1.963636, -1.963636)">
<path d="M109.977082,109.958066 L55.1172319,204.976252 C2.64008765,174.679109 -15.3401674,107.577281 14.9579357,55.0991768 C34.9242588,20.5158532 70.0444354,0.240287352 109.977082,0.240287352 L109.977082,109.958066 Z" id="Fill-1" fill="#0EBD8C"></path>
<path d="M109.977082,109.958066 L117.630359,219.408859 C94.4179474,221.031903 75.2689086,216.611269 55.1172319,204.976252 L109.977082,109.958066 Z" id="Fill-5" fill="#FFBF00"></path>
<path d="M109.977082,109.958066 L109.977082,0.240287352 C170.572327,0.240287352 219.694861,49.36186 219.694861,109.958066 C219.694861,167.82679 175.357906,215.372377 117.630359,219.408859 L109.977082,109.958066 Z" id="Fill-9" fill="#4D97FF"></path>
</g>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.8 KiB

15
static/images/annual-report/green-circle.svg Normal file
View file

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>green circle</title>
<g id="R2_Columns-12" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="R2---BOTTOM---12-Column-(grid)" transform="translate(-250.000000, -17909.000000)" fill="#0EBD8C">
<g id="Financials" transform="translate(0.000000, 17459.000000)">
<g id="Revenue" transform="translate(250.000000, 230.000000)">
<g id="green-circle" transform="translate(0.000000, 123.000000)">
<circle cx="10" cy="107" r="10"></circle>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 819 B

22
static/images/annual-report/revenue-graph.svg Normal file
View file

@ -0,0 +1,22 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="220px" height="220px" viewBox="0 0 220 220" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Revenue Graph</title>
<defs>
<path d="M108,0 C167.646753,0 216,48.353247 216,108 C216,167.646753 167.646753,216 108,216 C48.353247,216 0,167.646753 0,108 C0,48.353247 48.353247,0 108,0 Z M108,53.0847458 C77.6711426,53.0847458 53.0847458,77.6711426 53.0847458,108 C53.0847458,138.328857 77.6711426,162.915254 108,162.915254 C138.328857,162.915254 162.915254,138.328857 162.915254,108 C162.915254,77.6711426 138.328857,53.0847458 108,53.0847458 Z" id="path-1"></path>
</defs>
<g id="Revenue-Graph" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(2.000000, 2.000000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<path stroke-opacity="0.15" stroke="#000000" stroke-width="2" d="M108,-1 C138.099519,-1 165.349519,11.2002406 185.074639,30.9253609 C204.799759,50.6504811 217,77.9004811 217,108 C217,138.099519 204.799759,165.349519 185.074639,185.074639 C165.349519,204.799759 138.099519,217 108,217 C77.9004811,217 50.6504811,204.799759 30.9253609,185.074639 C11.2002406,165.349519 -1,138.099519 -1,108 C-1,77.9004811 11.2002406,50.6504811 30.9253609,30.9253609 C50.6504811,11.2002406 77.9004811,-1 108,-1 Z M108,54.0847458 C93.1117137,54.0847458 79.6329001,60.1194161 69.8761581,69.8761581 C60.1194161,79.6329001 54.0847458,93.1117137 54.0847458,108 C54.0847458,122.888286 60.1194161,136.3671 69.8761581,146.123842 C79.6329001,155.880584 93.1117137,161.915254 108,161.915254 C122.888286,161.915254 136.3671,155.880584 146.123842,146.123842 C155.880584,136.3671 161.915254,122.888286 161.915254,108 C161.915254,93.1117137 155.880584,79.6329001 146.123842,69.8761581 C136.3671,60.1194161 122.888286,54.0847458 108,54.0847458 Z"></path>
<g id="Chart" mask="url(#mask-2)">
<g transform="translate(-1.963636, -1.963636)">
<path d="M110.053044,110.053133 L92.8717864,1.57692343 C98.623109,0.665796156 104.229908,0.224146286 110.053044,0.224146286 L110.053044,110.053133 Z" id="Fill-1" fill="#0EBD8C"></path>
<path d="M110.053044,110.053133 L13.0803765,58.4914086 C29.9384752,26.7859749 57.4051474,7.19449434 92.8717864,1.57692343 L110.053044,110.053133 Z" id="Fill-5" fill="#FFBF00"></path>
<path d="M110.053044,110.053133 L110.053044,0.224146286 C170.709883,0.224146286 219.882031,49.3962938 219.882031,110.053133 C219.882031,170.709973 170.709883,219.881223 110.053044,219.881223 C49.3962041,219.881223 0.224056519,170.709973 0.224056519,110.053133 C0.224056519,91.1887593 4.2240399,75.1475333 13.0803765,58.4914086 L110.053044,110.053133 Z" id="Fill-9" fill="#4D97FF"></path>
</g>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.9 KiB

15
static/images/annual-report/yellow-circle.svg Normal file
View file

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>yellow circle</title>
<g id="R2_Columns-12" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="R2---BOTTOM---12-Column-(grid)" transform="translate(-250.000000, -17874.000000)" fill="#FFBF00">
<g id="Financials" transform="translate(0.000000, 17459.000000)">
<g id="Revenue" transform="translate(250.000000, 230.000000)">
<g id="yellow-circle" transform="translate(0.000000, 123.000000)">
<circle cx="10" cy="72" r="10"></circle>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 820 B