scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-27 17:45:52 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

remove middle of financials section

Browse source
This commit is contained in:
seotts 2020-10-28 12:57:12 -04:00
parent b673d718d4
commit 367ada3452
2 changed files with 4 additions and 206 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1942,122 +1942,6 @@ class AnnualReport extends React.Component {
<div className="financials-future"> <div className="financials-future">
<FormattedMessage id="annualReport.financialsFutureYears" /> <FormattedMessage id="annualReport.financialsFutureYears" />
</div> </div>
<h3>
<FormattedMessage id="annualReport.financialsRevenue" />
</h3>
<hr />
<div className="financials-content">
<div className="financials-table">
<div className="circle-and-words">
<img src="/images/annual-report/financials/blue-circle.svg" />
<div className="key-and-money">
<p className="key">
<FormattedMessage id="annualReport.financialsGrants" />
</p>
<p>
$3,898,078
<span className="percentage"> (83%)</span>
</p>
</div>
</div>
<div className="circle-and-words">
<img src="/images/annual-report/financials/yellow-circle.svg" />
<div className="key-and-money">
<p className="key">
<FormattedMessage id="annualReport.financialsRestrictedGrants" />
</p>
<p>
$700,000
<span className="percentage"> (15%)</span>
</p>
</div>
</div>
<div className="circle-and-words">
<img src="/images/annual-report/financials/green-circle.svg" />
<div className="key-and-money">
<p className="key">
<FormattedMessage id="annualReport.financialsOther" />
</p>
<p>
$114,982
<span className="percentage"> (2%)</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/financials/revenue-graph.svg"
/>
</div>
<h3>
<FormattedMessage id="annualReport.financialsExpenses" />
</h3>
<hr />
<div className="financials-content">
<div className="financials-table">
<div className="circle-and-words">
<img src="/images/annual-report/financials/blue-circle.svg" />
<div className="key-and-money">
<p className="key">
<FormattedMessage id="annualReport.financialsProgram" />
</p>
<p>
$1,135,767
<span className="percentage"> (49%)</span>
</p>
</div>
</div>
<div className="circle-and-words">
<img src="/images/annual-report/financials/yellow-circle.svg" />
<div className="key-and-money">
<p className="key">
<FormattedMessage id="annualReport.financialsGeneral" />
</p>
<p>
$224,104
<span className="percentage"> (10%)</span>
</p>
</div>
</div>
<div className="circle-and-words">
<img src="/images/annual-report/financials/green-circle.svg" />
<div className="key-and-money">
<p className="key">
<FormattedMessage id="annualReport.financialsFundraising" />
</p>
<p>
$962,958
<span className="percentage"> (41%)</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/financials/expenses-graph.svg"
/>
</div>
<div className="financials-button-wrapper"> <div className="financials-button-wrapper">
<a <a
href="/pdfs/annual-report/2019/2019_audited_financials.pdf" href="/pdfs/annual-report/2019/2019_audited_financials.pdf"

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

@ -2154,23 +2154,17 @@ p {
width: 100%; width: 100%;
color: $ui-white; color: $ui-white;
h2, h3, p { h2, p {
color: $ui-white; color: $ui-white;
} }
h2 { h2 {
margin-bottom: 20px; margin-bottom: 20px;
text-align: center;
} }
h2, h3, .financials-future { h2, h3, .financials-future {
text-align: left; text-align: center;
}
hr {
border: 0;
height: 0;
border-top: .5px solid $type-white;
opacity: .25;
} }
.financials-future { .financials-future {
@ -2179,64 +2173,6 @@ p {
margin-bottom: 54px; margin-bottom: 54px;
} }
.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;
font-weight: bold;
line-height: 1.5rem;
margin: 0;
}
.percentage {
font-weight: normal;
}
.key {
width: 264px;
margin-right: 1rem;
}
.total {
margin-left: 36px;
margin-top: 52px;
p {
font-size: 1.25rem;
}
}
.key-and-money {
display: flex;
}
@media #{$intermediate} {
.key {
margin-right: 100px;
}
}
}
.financials-button-wrapper { .financials-button-wrapper {
width: 100%; width: 100%;
text-align: center; text-align: center;
@ -2267,20 +2203,6 @@ p {
max-width: 620px; max-width: 620px;
padding: 72px 0; padding: 72px 0;
} }
.financials-content {
flex-direction: column-reverse;
text-align: center;
}
.financials-table {
margin: 0 0 60px 0;
align-self: flex-start;
}
.graph {
margin: 28px;
}
} }
@media #{$medium-and-smaller} { @media #{$medium-and-smaller} {
@ -2304,16 +2226,8 @@ p {
text-align: center; text-align: center;
} }
.key-and-money {
flex-direction: column;
.key {
margin-bottom: 4px;
}
}
.financials-button { .financials-button {
font-size: 18px; font-size: 1.125rem;
} }
} }
} }