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 + ) diff --git a/styles/atat.scss b/styles/atat.scss index bb29e97f..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,3 +39,4 @@ @import 'sections/projects_list'; @import 'sections/project_edit'; @import 'sections/member_edit'; +@import 'sections/reports'; 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); + } + } } } 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; 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; + } +} 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; 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; + } + } + } + } + } +} diff --git a/templates/components/alert.html b/templates/components/alert.html index 1fd30167..80f99196 100644 --- a/templates/components/alert.html +++ b/templates/components/alert.html @@ -38,7 +38,22 @@ {% endif %} {% if actions %} -
{{ actions | safe }}
+
+ {% 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 %} 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') ) }} diff --git a/templates/workspace_reports.html b/templates/workspace_reports.html new file mode 100644 index 00000000..3f15244d --- /dev/null +++ b/templates/workspace_reports.html @@ -0,0 +1,88 @@ +{% extends "base_workspace.html" %} + +{% from "components/alert.html" import Alert %} + +{% block workspace_content %} + + {{ 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": "/"} + ] ) }} + +
+ +
+
+
+

Workspace Total Spend

+
+
+
Budget
+
$100,000,000
+
+ +
+
Remaining
+
$60,000,000
+
+
+
+ +
+ + +
+
Total spend to date
+
$40,000,00
+
+
+
+
+ +
+
+
+ +
+

Task Order

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