From 43cb6477f16b04d504ae89b199511715097e8b04 Mon Sep 17 00:00:00 2001 From: Patrick Smith Date: Fri, 8 Feb 2019 11:00:53 -0500 Subject: [PATCH 1/9] Remove alert on reports page --- styles/components/_portfolio_layout.scss | 26 ++++++++++++++++++------ templates/portfolios/reports/index.html | 11 ++-------- 2 files changed, 22 insertions(+), 15 deletions(-) diff --git a/styles/components/_portfolio_layout.scss b/styles/components/_portfolio_layout.scss index c15027ab..6eb2e5ef 100644 --- a/styles/components/_portfolio_layout.scss +++ b/styles/components/_portfolio_layout.scss @@ -89,17 +89,21 @@ margin: 6 * $gap $gap 0 $gap; } +@mixin subheading { + color: $color-gray-dark; + padding: $gap 0; + text-transform: uppercase; + opacity: 0.54; + font-size: $small-font-size; + font-weight: bold; +} + .portfolio-applications { .portfolio-applications__header { margin-bottom: 4 * $gap; .portfolio-applications__header--title { - color: $color-gray-dark; - padding: $gap 0; - text-transform: uppercase; - opacity: 0.54; - font-size: $small-font-size; - font-weight: bold; + @include subheading; } .portfolio-applications__header--actions { @@ -281,3 +285,13 @@ } } } + +.portfolio-reports { + .portfolio-reports__header { + margin-bottom: 4 * $gap; + + .portfolio-reports__header--title { + @include subheading; + } + } +} diff --git a/templates/portfolios/reports/index.html b/templates/portfolios/reports/index.html index 9a455ddc..c63965df 100644 --- a/templates/portfolios/reports/index.html +++ b/templates/portfolios/reports/index.html @@ -1,6 +1,5 @@ {% extends "portfolios/base.html" %} -{% from "components/alert.html" import Alert %} {% from "components/icon.html" import Icon %} {% from "components/empty_state.html" import EmptyState %} @@ -8,13 +7,7 @@ {% block portfolio_content %} - {{ Alert("Budget Report for Portfolio " + portfolio.name, - message="

Track your monthly and cumulative expenditures for your portfolio, applications, and environments below.

\ -

Please note that the projected spend is based on the average expense over the last three completed months and therefore does not account for future changes that might be made in scale or configuration of your cloud services.

", - actions=[ - {"label": "Learn More", "href": url_for('atst.helpdocs'), "icon": "info"} - ] ) }} - +
@@ -442,7 +435,7 @@
- {% endif %} +
{% endblock %} From 4d999d1423c4f43f6d12775c9228c494523eecd2 Mon Sep 17 00:00:00 2001 From: Patrick Smith Date: Sat, 9 Feb 2019 09:57:55 -0500 Subject: [PATCH 2/9] Update styles on "total spend" panel --- styles/components/_portfolio_layout.scss | 6 +++ styles/sections/_reports.scss | 53 ++++++++++-------------- templates/portfolios/reports/index.html | 18 ++++---- 3 files changed, 39 insertions(+), 38 deletions(-) diff --git a/styles/components/_portfolio_layout.scss b/styles/components/_portfolio_layout.scss index 6eb2e5ef..0cfca353 100644 --- a/styles/components/_portfolio_layout.scss +++ b/styles/components/_portfolio_layout.scss @@ -294,4 +294,10 @@ @include subheading; } } + + .panel { + box-shadow: 0 6px 18px 0 rgba(144,164,183,0.3); + border-top: none; + border-bottom: none; + } } diff --git a/styles/sections/_reports.scss b/styles/sections/_reports.scss index 8f2d5fd5..966ce7f5 100644 --- a/styles/sections/_reports.scss +++ b/styles/sections/_reports.scss @@ -7,6 +7,11 @@ .funding-summary-row__col { + hr { + margin: 2 * $gap 0; + border-bottom: 1px solid $color-gray-lightest; + } + @include media($medium-screen) { @include grid-pad; flex-grow: 1; @@ -54,8 +59,8 @@ } .spend-summary__heading { - @include h3; - margin: 0 $gap 0 0; + @include h4; + margin: 0 $gap 2 * $gap 0; -ms-flex-negative: 1; } @@ -65,28 +70,22 @@ @include ie-only { margin: $gap 0 0 0; } + } - > div { - text-align: right; - margin: 0 0 ($gap / 2) 0; + dl { + text-align: left; + margin: 0 0 ($gap / 2) 0; - @include ie-only { - text-align: left; - } + @include ie-only { + text-align: left; + } - dd, dt { - display: inline; - } - - dt { - color: $color-gray; - margin-right: $gap; - font-weight: normal; - } - - dd { - font-weight: bold; - } + dt { + text-transform: uppercase; + color: $color-gray-light; + margin-right: $gap; + font-weight: bold; + font-size: $small-font-size; } } @@ -97,24 +96,18 @@ } .spend-summary__spent { - margin: $gap 0 0 0; + margin: 2 * $gap 0; display: flex; - flex-direction: row-reverse; + flex-direction: column; justify-content: flex-end; - dd, dt { - @include h5; - } - dt { - font-weight: normal; - margin-left: $gap; + letter-spacing: 0.47px; } } } - // Task Order Summary // =============================== &.to-summary { diff --git a/templates/portfolios/reports/index.html b/templates/portfolios/reports/index.html index c63965df..932ff570 100644 --- a/templates/portfolios/reports/index.html +++ b/templates/portfolios/reports/index.html @@ -12,31 +12,33 @@
+

Portfolio Total Spend

-

Portfolio Total Spend

-
+
{% set budget = portfolio_totals['budget'] %} {% set spent = portfolio_totals['spent'] %} {% set remaining = budget - spent %} -
-
Budget
+
+
Budget
{{ budget | dollars }}
-
+
-
+
Remaining
{{ remaining | dollars }}
-
+
+
+
-
Total spend to date
+
Total spending to date
{{ spent | dollars }}
From 288d2073869e5ca2a053271656349aab88bac348 Mon Sep 17 00:00:00 2001 From: Patrick Smith Date: Sat, 9 Feb 2019 09:58:51 -0500 Subject: [PATCH 3/9] Fix link to manage task orders --- templates/portfolios/reports/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/templates/portfolios/reports/index.html b/templates/portfolios/reports/index.html index 932ff570..7e6128d7 100644 --- a/templates/portfolios/reports/index.html +++ b/templates/portfolios/reports/index.html @@ -85,7 +85,7 @@
- + Manage Task Order
From 51687dabffaafa9a94b472deb324cdf58589edf9 Mon Sep 17 00:00:00 2001 From: Patrick Smith Date: Sat, 9 Feb 2019 14:15:30 -0500 Subject: [PATCH 4/9] Pass active task order to reports page instead of legacy task order --- atst/routes/portfolios/index.py | 8 +++++--- templates/portfolios/reports/index.html | 2 +- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/atst/routes/portfolios/index.py b/atst/routes/portfolios/index.py index 647d68be..e3815cdc 100644 --- a/atst/routes/portfolios/index.py +++ b/atst/routes/portfolios/index.py @@ -62,9 +62,11 @@ def portfolio_reports(portfolio_id): prev_month = current_month - timedelta(days=28) two_months_ago = prev_month - timedelta(days=28) - expiration_date = ( - portfolio.legacy_task_order and portfolio.legacy_task_order.expiration_date + task_order = next( + (task_order for task_order in portfolio.task_orders if task_order.is_active), + None, ) + expiration_date = task_order and task_order.end_date if expiration_date: remaining_difference = expiration_date - today remaining_days = remaining_difference.days @@ -77,7 +79,7 @@ def portfolio_reports(portfolio_id): portfolio_totals=Reports.portfolio_totals(portfolio), monthly_totals=Reports.monthly_totals(portfolio), jedi_request=portfolio.request, - legacy_task_order=portfolio.legacy_task_order, + task_order=task_order, current_month=current_month, prev_month=prev_month, two_months_ago=two_months_ago, diff --git a/templates/portfolios/reports/index.html b/templates/portfolios/reports/index.html index 7e6128d7..07b43348 100644 --- a/templates/portfolios/reports/index.html +++ b/templates/portfolios/reports/index.html @@ -53,7 +53,7 @@

Task Order

Task Order Number
-
{{ legacy_task_order.number }}
+
{{ task_order.number }}
From fede9f81eef8701396440fef18c7994170bf3450 Mon Sep 17 00:00:00 2001 From: Patrick Smith Date: Sat, 9 Feb 2019 14:49:59 -0500 Subject: [PATCH 5/9] Touch up styles on current task order panel --- atst/routes/portfolios/index.py | 1 - static/icons/envelope.svg | 1 + styles/sections/_reports.scss | 68 +++++++++++----------- templates/portfolios/reports/index.html | 76 +++++++++++++++---------- 4 files changed, 83 insertions(+), 63 deletions(-) create mode 100644 static/icons/envelope.svg diff --git a/atst/routes/portfolios/index.py b/atst/routes/portfolios/index.py index e3815cdc..1d7739e7 100644 --- a/atst/routes/portfolios/index.py +++ b/atst/routes/portfolios/index.py @@ -78,7 +78,6 @@ def portfolio_reports(portfolio_id): cumulative_budget=Reports.cumulative_budget(portfolio), portfolio_totals=Reports.portfolio_totals(portfolio), monthly_totals=Reports.monthly_totals(portfolio), - jedi_request=portfolio.request, task_order=task_order, current_month=current_month, prev_month=prev_month, diff --git a/static/icons/envelope.svg b/static/icons/envelope.svg new file mode 100644 index 00000000..a2557ef2 --- /dev/null +++ b/static/icons/envelope.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/styles/sections/_reports.scss b/styles/sections/_reports.scss index 966ce7f5..a97de1c6 100644 --- a/styles/sections/_reports.scss +++ b/styles/sections/_reports.scss @@ -41,6 +41,11 @@ max-width: 100%; } + .subheading { + @include h4; + margin: 0 $gap 2 * $gap 0; + -ms-flex-negative: 1; + } // Spending Summary // =============================== @@ -58,12 +63,6 @@ } } - .spend-summary__heading { - @include h4; - margin: 0 $gap 2 * $gap 0; - -ms-flex-negative: 1; - } - .spend-summary__budget { margin: 0 0 0 $gap; @@ -112,20 +111,22 @@ // =============================== &.to-summary { - .to-summary__row { - .to-summary__heading { - @include h3; - margin: 0; - } + .subheading { + margin-bottom: 0; + } - .to-summary__to-number { - margin: 0; - dd { - &::before { - content: '#'; - color: $color-gray; - margin-right: $gap; - } + .to-summary__heading { + @include h4; + margin: 0 $gap 0 0; + } + + .to-summary__to-number { + margin: 0; + dd { + &::before { + content: '#'; + color: $color-gray; + margin-right: $gap; } } @@ -156,23 +157,26 @@ .to-summary__expiration { dl { - margin: ($gap * 2) 0 0 0; + text-align: right; - > div { - margin: 0 0 ($gap / 2) 0; + dd, dt { + display: inline; + } - dd, dt { - display: block; - } + dt { + font-size: $small-font-size; + text-transform: uppercase; + font-weight: $font-bold; + color: $color-gray-light; + } - dt { - color: $color-gray; - margin-right: $gap; - font-weight: normal; - } + dd.ending-soon { + color: $color-red-dark; + font-size: $h2-font-size; - dd { - font-weight: bold; + .icon { + @include icon-size(28); + @include icon-color($color-red-dark); } } } diff --git a/templates/portfolios/reports/index.html b/templates/portfolios/reports/index.html index 07b43348..10b7d01c 100644 --- a/templates/portfolios/reports/index.html +++ b/templates/portfolios/reports/index.html @@ -12,7 +12,7 @@
-

Portfolio Total Spend

+

Portfolio Total Spend

{% set budget = portfolio_totals['budget'] %} @@ -50,52 +50,68 @@
-

Task Order

+

Current Task Order

Task Order Number
{{ task_order.number }}
-
-
-
-
Expires
-
- {% if expiration_date %} - - - {% else %} - - - {% endif %} -
-
+
+
+
+

Expiration Date

-
Remaining
-
+ {% if expiration_date %} + + + {% else %} + - + {% endif %} +
+ + {{ Icon('cog') }} + Manage Task Order + +
+
+
+
Remaining Days
+
{% if remaining_days is not none %} - {{ remaining_days }} days + {{ Icon('arrow-down') }} + {{ remaining_days }} {% else %} - {% endif %}
-
-
- - - Manage Task Order - +
+
+
+
-
Contracting Officer
-
- {{ jedi_request.contracting_officer_full_name }} - {{ jedi_request.contracting_officer_email }} +
Contracting Officer
+
+
+ {% if task_order.ko_first_name and task_order.ko_last_name %} + {{ task_order.ko_first_name }} {{ task_order.ko_last_name }} + {% endif %} +
+ +
+ {% if task_order.ko_email %} + + {{ Icon('envelope') }} + {{ task_order.ko_email }} + + {% endif %} +
From 727865039507b5f5d8d71562023c6fc3bcc53dbb Mon Sep 17 00:00:00 2001 From: Patrick Smith Date: Sat, 9 Feb 2019 18:05:32 -0500 Subject: [PATCH 6/9] Update styles on spend table in reports --- styles/sections/_reports.scss | 40 +++++++++++++++++-------- templates/portfolios/reports/index.html | 11 ++++--- 2 files changed, 32 insertions(+), 19 deletions(-) diff --git a/styles/sections/_reports.scss b/styles/sections/_reports.scss index a97de1c6..18f9187b 100644 --- a/styles/sections/_reports.scss +++ b/styles/sections/_reports.scss @@ -200,9 +200,12 @@ .spend-table { + box-shadow: 0 6px 18px 0 rgba(144,164,183,0.3); + .spend-table__header { @include panel-base; @include panel-theme-default; + border-top: none; border-bottom: 0; display: flex; flex-direction: row; @@ -212,8 +215,8 @@ padding: $gap * 2; .spend-table__title { - @include h3; - margin: 0; + @include h4; + font-size: $lead-font-size; flex: 2; } @@ -224,6 +227,12 @@ } table { + thead th { + text-transform: uppercase; + border-bottom: 1px solid $color-gray-lightest; + border-top: none; + } + th, td { white-space: nowrap; @@ -231,10 +240,6 @@ margin: 0; } - &.current-month { - background-color: $color-aqua-lightest; - } - &.previous-month { color: $color-gray; } @@ -283,13 +288,15 @@ .spend-table__portfolio { th, td { font-weight: bold; + border-bottom: 1px solid $color-gray-lightest; } } .spend-table__application { .spend-table__application__toggler { - @include icon-link-color($color-black-light, $color-gray-lightest); + @include icon-link-color($color-blue, $color-gray-lightest); margin-left: -$gap; + color: $color-blue; .icon { @include icon-size(12); @@ -297,14 +304,21 @@ } } - .spend-table__application__env { - margin-left: $gap; + th, td { + border-bottom: none; + } - &:last-child { - td, th { - padding-bottom: $gap * 5; - box-shadow: inset 0 (-$gap * 2.5) 0 $color-gray-lightest; + .spend-table__application__env { + margin-left: 2 * $gap; + + th, td { + .icon-link { + font-weight: $font-normal; + font-size: $base-font-size; } + + border-bottom: 1px dashed $color-white; + background-color: $color-blue-light; } } } diff --git a/templates/portfolios/reports/index.html b/templates/portfolios/reports/index.html index 10b7d01c..9522995a 100644 --- a/templates/portfolios/reports/index.html +++ b/templates/portfolios/reports/index.html @@ -342,7 +342,7 @@
-

Total spend per month

+

Total spent per month