From 4d4f9e720e960a65b6ec5d29f9771445129177d4 Mon Sep 17 00:00:00 2001 From: seotts Date: Tue, 25 Aug 2020 16:47:11 -0400 Subject: [PATCH] nearly complete financials section --- src/views/annual-report/annual-report.jsx | 140 +++++++++++++++--- src/views/annual-report/annual-report.scss | 138 ++++++++++++++++- src/views/annual-report/l10n.json | 8 +- static/images/annual-report/blue-circle.svg | 15 ++ .../images/annual-report/expenses-graph.svg | 22 +++ static/images/annual-report/green-circle.svg | 15 ++ static/images/annual-report/revenue-graph.svg | 22 +++ static/images/annual-report/yellow-circle.svg | 15 ++ 8 files changed, 350 insertions(+), 25 deletions(-) create mode 100644 static/images/annual-report/blue-circle.svg create mode 100644 static/images/annual-report/expenses-graph.svg create mode 100644 static/images/annual-report/green-circle.svg create mode 100644 static/images/annual-report/revenue-graph.svg create mode 100644 static/images/annual-report/yellow-circle.svg diff --git a/src/views/annual-report/annual-report.jsx b/src/views/annual-report/annual-report.jsx index a19c9dce7..7dbf0abb8 100644 --- a/src/views/annual-report/annual-report.jsx +++ b/src/views/annual-report/annual-report.jsx @@ -184,33 +184,131 @@ const AnnualReport = () => ( -
-
+
+

-
-

- -

-
-
- -
-

- -

-

- -

+

+ +

+
+
+
+
+ +
+

+ +

+

+ $3,898,078 + (82.7%) +

+
+
+
+ +
+

+ +

+

+ $700,000 + (14.8%) +

+
+
+
+ +
+

+ +

+

+ $114,982 + (2.4%) +

+
+
+
+
+

+ +

+

+ $4,713,060 +

+
+
-
-

- -

-
+

+ +

+
+
+
+
+ +
+

+ +

+

+ $1,135,767 + (48.8%) +

+
+
+
+ +
+

+ +

+

+ $224,104 + (9.6%) +

+
+
+
+ +
+

+ +

+

+ $962,958 + (41.4%) +

+
+
+
+
+

+ +

+

+ $2,322,829 +

+
+
+
+ +
+
diff --git a/src/views/annual-report/annual-report.scss b/src/views/annual-report/annual-report.scss index d950b4045..79445b067 100644 --- a/src/views/annual-report/annual-report.scss +++ b/src/views/annual-report/annual-report.scss @@ -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; diff --git a/src/views/annual-report/l10n.json b/src/views/annual-report/l10n.json index c4cdfac71..1ea8e44bb 100644 --- a/src/views/annual-report/l10n.json +++ b/src/views/annual-report/l10n.json @@ -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!", diff --git a/static/images/annual-report/blue-circle.svg b/static/images/annual-report/blue-circle.svg new file mode 100644 index 000000000..f51999c4b --- /dev/null +++ b/static/images/annual-report/blue-circle.svg @@ -0,0 +1,15 @@ + + + blue circle + + + + + + + + + + + + \ No newline at end of file diff --git a/static/images/annual-report/expenses-graph.svg b/static/images/annual-report/expenses-graph.svg new file mode 100644 index 000000000..94718b7ff --- /dev/null +++ b/static/images/annual-report/expenses-graph.svg @@ -0,0 +1,22 @@ + + + Expenses Graph + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/static/images/annual-report/green-circle.svg b/static/images/annual-report/green-circle.svg new file mode 100644 index 000000000..4dde45489 --- /dev/null +++ b/static/images/annual-report/green-circle.svg @@ -0,0 +1,15 @@ + + + green circle + + + + + + + + + + + + \ No newline at end of file diff --git a/static/images/annual-report/revenue-graph.svg b/static/images/annual-report/revenue-graph.svg new file mode 100644 index 000000000..7735efcaa --- /dev/null +++ b/static/images/annual-report/revenue-graph.svg @@ -0,0 +1,22 @@ + + + Revenue Graph + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/static/images/annual-report/yellow-circle.svg b/static/images/annual-report/yellow-circle.svg new file mode 100644 index 000000000..51e409c06 --- /dev/null +++ b/static/images/annual-report/yellow-circle.svg @@ -0,0 +1,15 @@ + + + yellow circle + + + + + + + + + + + + \ No newline at end of file