From 8d66a5cb38bdfce67a8087ab44868f7d000ad5a0 Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Mon, 20 Aug 2018 14:38:56 -0400 Subject: [PATCH 01/13] workspace report base markup --- templates/workspace_reports.html | 45 ++++++++++++++++++++++++++++++++ 1 file changed, 45 insertions(+) create mode 100644 templates/workspace_reports.html diff --git a/templates/workspace_reports.html b/templates/workspace_reports.html new file mode 100644 index 00000000..29bc5eaa --- /dev/null +++ b/templates/workspace_reports.html @@ -0,0 +1,45 @@ +{% extends "base_workspace.html" %} + +{% from "components/alert.html" import Alert %} + +{% block workspace_content %} + + {{ Alert('Funding Information & Reports for Workspace 123', + message="

On this screen you'll find detailed reporting information on this workspace. This message needs to be written better and be dismissable.

", + actions=[ + {"label": "Learn More", "href": "/", "icon": "info"}, + {"label": "Dismiss", "href": "/"} + ], + level='warning' + ) }} + +
+ +
+
+
+

Workspace Total Spend

+
+
+
Budget
+
$100,000,000
+
+ +
+
Remaining
+
$99,798,000
+
+
+
+ + $202,000 of $100,000,000 +
+
+ +
+
T.O. Summary
+
+ +
+ +{% endblock %} From 06caa21b585a7606cf79c1c6b003ca5f96c7760b Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Mon, 20 Aug 2018 14:39:11 -0400 Subject: [PATCH 02/13] add workspace report route --- atst/routes/workspaces.py | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/atst/routes/workspaces.py b/atst/routes/workspaces.py index e614c08c..13ba6115 100644 --- a/atst/routes/workspaces.py +++ b/atst/routes/workspaces.py @@ -36,3 +36,10 @@ def workspace_members(workspace_id): return render_template( "workspace_members.html", workspace_id=workspace_id, members=members ) + + +@bp.route("/workspaces//reports") +def workspace_reports(workspace_id): + return render_template( + "workspace_reports.html", workspace_id=workspace_id + ) From a05da67d71c78ec432d11261168a405313d70f65 Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Mon, 20 Aug 2018 14:39:26 -0400 Subject: [PATCH 03/13] correct link to workspace report screen --- templates/navigation/workspace_navigation.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/templates/navigation/workspace_navigation.html b/templates/navigation/workspace_navigation.html index f785c055..a622bf8c 100644 --- a/templates/navigation/workspace_navigation.html +++ b/templates/navigation/workspace_navigation.html @@ -32,7 +32,7 @@ {{ SidenavItem( "Funding & Reports", - href='/workspace_reports/123456', + href='/workspaces/123456/reports', active=g.matchesPath('\/workspaces\/[A-Za-z0-9]*\/reports') ) }} From 50792d9f3791b07cc274127b52800de639401699 Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Mon, 20 Aug 2018 14:43:08 -0400 Subject: [PATCH 04/13] refactor alert actions --- templates/components/alert.html | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/templates/components/alert.html b/templates/components/alert.html index 1fd30167..46be1549 100644 --- a/templates/components/alert.html +++ b/templates/components/alert.html @@ -38,7 +38,14 @@ {% endif %} {% if actions %} -
{{ actions | safe }}
+
+ {% for action in actions %} + + {% if 'icon' in action %}{{ Icon(action["icon"]) }}{% endif %} + {{ action["label"] }} + + {% endfor %} +
{% endif %} From ee20a81b3951704ab9519dceb4a993f94ab5a25a Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Mon, 20 Aug 2018 14:47:23 -0400 Subject: [PATCH 05/13] alert action styles --- styles/components/_alerts.scss | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/styles/components/_alerts.scss b/styles/components/_alerts.scss index f48042b9..75d6d7f7 100644 --- a/styles/components/_alerts.scss +++ b/styles/components/_alerts.scss @@ -56,6 +56,16 @@ } } } + + .alert__actions { + .icon-link { + @include icon-link-color($color-primary, $color-white); + + &:first-child { + margin-left: -$gap; + } + } + } } .alert { @@ -64,13 +74,31 @@ &.alert--success { @include alert-level('success'); + + .alert__actions { + .icon-link { + @include icon-link-color($color-green, $color-white); + } + } } &.alert--warning { @include alert-level('warning'); + + .alert__actions { + .icon-link { + @include icon-link-color($color-gold-dark, $color-white); + } + } } &.alert--error { @include alert-level('error'); + + .alert__actions { + .icon-link { + @include icon-link-color($color-red, $color-white); + } + } } } From 03bf7c9dc0bd9ba824d24de2b201193084f3a24b Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Mon, 20 Aug 2018 15:10:35 -0400 Subject: [PATCH 06/13] dark gold color --- styles/core/_variables.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/styles/core/_variables.scss b/styles/core/_variables.scss index 19945881..8a1db5c6 100644 --- a/styles/core/_variables.scss +++ b/styles/core/_variables.scss @@ -70,6 +70,7 @@ $color-gray-warm-dark: #494440; $color-gray-warm-light: #e4e2e0; $color-gray-cool-light: #dce4ef; +$color-gold-dark: #cd841b; $color-gold: #fdb81e; $color-gold-light: #f9c642; $color-gold-lighter: #fad980; From ca2db7b58f32b948c5091b33a829c4146612dc4a Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Mon, 20 Aug 2018 15:10:51 -0400 Subject: [PATCH 07/13] funding screen base styles --- styles/atat.scss | 1 + styles/sections/_funding.scss | 62 +++++++++++++++++++++++++++++++++++ 2 files changed, 63 insertions(+) create mode 100644 styles/sections/_funding.scss diff --git a/styles/atat.scss b/styles/atat.scss index bb29e97f..735e9278 100644 --- a/styles/atat.scss +++ b/styles/atat.scss @@ -38,3 +38,4 @@ @import 'sections/projects_list'; @import 'sections/project_edit'; @import 'sections/member_edit'; +@import 'sections/funding'; diff --git a/styles/sections/_funding.scss b/styles/sections/_funding.scss new file mode 100644 index 00000000..2e43170d --- /dev/null +++ b/styles/sections/_funding.scss @@ -0,0 +1,62 @@ +.funding-summary-row { + @include media($medium-screen) { + @include grid-row; + + .funding-summary-row__col { + @include grid-pad; + flex-grow: 1; + + .panel { + padding: $gap * 2; + + &.spend-summary { + .row { + justify-content: space-between; + } + + .spend-summary__heading { + @include h3; + margin: 0 $gap 0 0; + } + + .spend-summary__budget { + margin: 0 0 0 $gap; + + > div { + text-align: right; + margin: 0 0 ($gap / 2) 0; + + dd, dt { + display: inline; + } + + dt { + color: $color-gray; + margin-right: $gap; + font-weight: normal; + } + + dd { + font-weight: bold; + } + } + } + + meter { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + width: 100%; + height: 3rem; + display: block; + background: $color-gray-lightest; + } + + meter::-webkit-meter-bar { + background: $color-primary; + } + } + } + } + } +} From 9ba8fee233a53e88086aabbfb0a4db197be0e836 Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Mon, 20 Aug 2018 15:11:12 -0400 Subject: [PATCH 08/13] allow alert actions to be a string or a list of action dicts --- templates/components/alert.html | 20 ++++++++++++++------ 1 file changed, 14 insertions(+), 6 deletions(-) diff --git a/templates/components/alert.html b/templates/components/alert.html index 46be1549..80f99196 100644 --- a/templates/components/alert.html +++ b/templates/components/alert.html @@ -39,12 +39,20 @@ {% if actions %}
- {% for action in actions %} - - {% if 'icon' in action %}{{ Icon(action["icon"]) }}{% endif %} - {{ action["label"] }} - - {% endfor %} + {% if actions is string %} + + {{ actions | safe }} + + {% elif actions is iterable %} + + {% for action in actions %} + + {% if 'icon' in action %}{{ Icon(action["icon"]) }}{% endif %} + {{ action["label"] }} + + {% endfor %} + + {% endif %}
{% endif %} From 3a1e626b8df5a83aceb472b6b1b7538e0a09aa0c Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Mon, 20 Aug 2018 16:45:01 -0400 Subject: [PATCH 09/13] meter default styles --- styles/elements/_graphs.scss | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) create mode 100644 styles/elements/_graphs.scss diff --git a/styles/elements/_graphs.scss b/styles/elements/_graphs.scss new file mode 100644 index 00000000..c13b82f0 --- /dev/null +++ b/styles/elements/_graphs.scss @@ -0,0 +1,19 @@ +meter { + -moz-appearance: none; + appearance: none; + display: block; + background: $color-gray-lightest; + + &::-webkit-meter-bar { + background: $color-gray-lightest; + } + &::-webkit-meter-optimum-value, + &::-webkit-meter-suboptimum-value, + &::-webkit-meter-even-less-good-value { + background: $color-primary; + } + + &::-moz-meter-bar { + background: $color-primary; + } +} From 3016c766270768161d8c31dbfa6c561f938e4cdd Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Mon, 20 Aug 2018 16:45:31 -0400 Subject: [PATCH 10/13] reports screen styles --- styles/sections/_funding.scss | 62 ------------ styles/sections/_reports.scss | 173 ++++++++++++++++++++++++++++++++++ 2 files changed, 173 insertions(+), 62 deletions(-) delete mode 100644 styles/sections/_funding.scss create mode 100644 styles/sections/_reports.scss diff --git a/styles/sections/_funding.scss b/styles/sections/_funding.scss deleted file mode 100644 index 2e43170d..00000000 --- a/styles/sections/_funding.scss +++ /dev/null @@ -1,62 +0,0 @@ -.funding-summary-row { - @include media($medium-screen) { - @include grid-row; - - .funding-summary-row__col { - @include grid-pad; - flex-grow: 1; - - .panel { - padding: $gap * 2; - - &.spend-summary { - .row { - justify-content: space-between; - } - - .spend-summary__heading { - @include h3; - margin: 0 $gap 0 0; - } - - .spend-summary__budget { - margin: 0 0 0 $gap; - - > div { - text-align: right; - margin: 0 0 ($gap / 2) 0; - - dd, dt { - display: inline; - } - - dt { - color: $color-gray; - margin-right: $gap; - font-weight: normal; - } - - dd { - font-weight: bold; - } - } - } - - meter { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - width: 100%; - height: 3rem; - display: block; - background: $color-gray-lightest; - } - - meter::-webkit-meter-bar { - background: $color-primary; - } - } - } - } - } -} diff --git a/styles/sections/_reports.scss b/styles/sections/_reports.scss new file mode 100644 index 00000000..77383d8c --- /dev/null +++ b/styles/sections/_reports.scss @@ -0,0 +1,173 @@ +.funding-summary-row { + + @include media($medium-screen) { + @include grid-row; + flex-wrap: wrap; + } + + .funding-summary-row__col { + @include grid-pad; + + @include media($medium-screen) { + flex-grow: 1; + display: flex; + flex-direction: row; + flex-basis: 50%; + } + + align-items: stretch; + + .panel { + padding: $gap * 2; + flex-grow: 1; + + + // Spending Summary + // =============================== + &.spend-summary { + display: flex; + flex-direction: column; + justify-content: space-between; + + .row { + justify-content: space-between; + } + + .spend-summary__heading { + @include h3; + margin: 0 $gap 0 0; + } + + .spend-summary__budget { + margin: 0 0 0 $gap; + + > div { + text-align: right; + margin: 0 0 ($gap / 2) 0; + + dd, dt { + display: inline; + } + + dt { + color: $color-gray; + margin-right: $gap; + font-weight: normal; + } + + dd { + font-weight: bold; + } + } + } + + meter { + width: 100%; + height: 3rem; + margin: ($gap * 2) 0 0; + } + + .spend-summary__spent { + margin: $gap 0 0 0; + display: flex; + flex-direction: row-reverse; + justify-content: flex-end; + + dd, dt { + @include h5; + } + + dt { + font-weight: normal; + margin-left: $gap; + } + } + } + + + + // Task Order Summary + // =============================== + &.to-summary { + + .to-summary__row { + .to-summary__heading { + @include h3; + margin: 0; + } + + .to-summary__to-number { + margin: 0; + dd { + &::before { + content: '#'; + color: $color-gray; + margin-right: $gap; + } + } + } + + @include media($xlarge-screen) { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + + .to-summary__to { + margin: 0 $gap 0 0; + } + + .to-summary__expiration { + text-align: right; + flex-grow: 1; + + dl { + margin: 0 0 0 $gap; + + dd, dt { + display: inline; + } + } + } + } + } + + .to-summary__expiration { + + dl { + margin: ($gap * 2) 0 0 0; + + > div { + margin: 0 0 ($gap / 2) 0; + + dd, dt { + display: block; + } + + dt { + color: $color-gray; + margin-right: $gap; + font-weight: normal; + } + + dd { + font-weight: bold; + } + } + } + + .icon-link { + margin: 0 (-$gap); + } + } + + .to-summary__co { + margin: ($gap * 2) 0 0 0; + + @include media($xlarge-screen) { + margin: 0; + } + } + } + } + } +} From 6d6d3d14efea08c474808a505421ea84b7f2f609 Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Mon, 20 Aug 2018 16:45:47 -0400 Subject: [PATCH 11/13] fix dd margin in moz browsers --- styles/elements/_typography.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/styles/elements/_typography.scss b/styles/elements/_typography.scss index a207c0a1..d412f76f 100644 --- a/styles/elements/_typography.scss +++ b/styles/elements/_typography.scss @@ -52,6 +52,7 @@ dl { } dd { -webkit-margin-start: 0; + margin-inline-start: 0; .label { margin-left: 0; From 740900ebc69ef418939cf7b7bf992e5f4b2fbe2d Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Mon, 20 Aug 2018 16:45:57 -0400 Subject: [PATCH 12/13] imports --- styles/atat.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/styles/atat.scss b/styles/atat.scss index 735e9278..1b7b65fd 100644 --- a/styles/atat.scss +++ b/styles/atat.scss @@ -19,6 +19,7 @@ @import 'elements/diff'; @import 'elements/tooltip'; @import 'elements/kpi'; +@import 'elements/graphs'; @import 'components/topbar'; @import 'components/global_layout'; @@ -38,4 +39,4 @@ @import 'sections/projects_list'; @import 'sections/project_edit'; @import 'sections/member_edit'; -@import 'sections/funding'; +@import 'sections/reports'; From 4618abb08536e293d2cc9bae8e6c0b2b59d188ff Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Mon, 20 Aug 2018 16:46:20 -0400 Subject: [PATCH 13/13] dummy markup for workspace reports summary panels --- templates/workspace_reports.html | 59 +++++++++++++++++++++++++++----- 1 file changed, 51 insertions(+), 8 deletions(-) diff --git a/templates/workspace_reports.html b/templates/workspace_reports.html index 29bc5eaa..3f15244d 100644 --- a/templates/workspace_reports.html +++ b/templates/workspace_reports.html @@ -4,14 +4,12 @@ {% block workspace_content %} - {{ Alert('Funding Information & Reports for Workspace 123', + {{ Alert("Funding Information & Reports for Workspace " + workspace_id, message="

On this screen you'll find detailed reporting information on this workspace. This message needs to be written better and be dismissable.

", actions=[ {"label": "Learn More", "href": "/", "icon": "info"}, {"label": "Dismiss", "href": "/"} - ], - level='warning' - ) }} + ] ) }}
@@ -21,23 +19,68 @@

Workspace Total Spend

-
Budget
+
Budget
$100,000,000
Remaining
-
$99,798,000
+
$60,000,000
- $202,000 of $100,000,000 +
+ + +
+
Total spend to date
+
$40,000,00
+
+
-
T.O. Summary
+
+
+ +
+

Task Order

+
+
Task Order Number
+
1234567890
+
+
+ +
+
+
+
Expires
+
November 1, 2019
+
+ +
+
Remaining
+
200 days
+
+
+ + + Manage Task Order + +
+
+ +
+
Contracting Officer
+
+ Pietro Quirines + email@email.com +
+
+ +