Merge pull request #190 from dod-ccpo/ui/reports-summary-layout
Ui/reports summary layout
This commit is contained in:
andrewdds
GitHub
commit
e38bc2fa63
@ -36,3 +36,10 @@ def workspace_members(workspace_id):
|
||||
return render_template(
|
||||
"workspace_members.html", workspace_id=workspace_id, members=members
|
||||
)
|
||||
|
||||
|
||||
@bp.route("/workspaces/<workspace_id>/reports")
|
||||
def workspace_reports(workspace_id):
|
||||
return render_template(
|
||||
"workspace_reports.html", workspace_id=workspace_id
|
||||
)
|
||||
|
||||
@ -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';
|
||||
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
19
styles/elements/_graphs.scss
Normal file
19
styles/elements/_graphs.scss
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
@ -52,6 +52,7 @@ dl {
|
||||
}
|
||||
dd {
|
||||
-webkit-margin-start: 0;
|
||||
margin-inline-start: 0;
|
||||
|
||||
.label {
|
||||
margin-left: 0;
|
||||
|
||||
173
styles/sections/_reports.scss
Normal file
173
styles/sections/_reports.scss
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -38,7 +38,22 @@
|
||||
{% endif %}
|
||||
|
||||
{% if actions %}
|
||||
<div class='alert__actions'>{{ actions | safe }}</div>
|
||||
<div class='alert__actions'>
|
||||
{% if actions is string %}
|
||||
|
||||
{{ actions | safe }}
|
||||
|
||||
{% elif actions is iterable %}
|
||||
|
||||
{% for action in actions %}
|
||||
<a href={{ action["href"] }} class='icon-link'>
|
||||
{% if 'icon' in action %}{{ Icon(action["icon"]) }}{% endif %}
|
||||
<span>{{ action["label"] }}</span>
|
||||
</a>
|
||||
{% endfor %}
|
||||
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -32,7 +32,7 @@
|
||||
|
||||
{{ SidenavItem(
|
||||
"Funding & Reports",
|
||||
href='/workspace_reports/123456',
|
||||
href='/workspaces/123456/reports',
|
||||
active=g.matchesPath('\/workspaces\/[A-Za-z0-9]*\/reports')
|
||||
) }}
|
||||
</ul>
|
||||
|
||||
88
templates/workspace_reports.html
Normal file
88
templates/workspace_reports.html
Normal file
@ -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="<p>On this screen you'll find detailed reporting information on this workspace. This message needs to be written better and be dismissable.</p>",
|
||||
actions=[
|
||||
{"label": "Learn More", "href": "/", "icon": "info"},
|
||||
{"label": "Dismiss", "href": "/"}
|
||||
] ) }}
|
||||
|
||||
<div class='funding-summary-row'>
|
||||
|
||||
<div class='funding-summary-row__col'>
|
||||
<div class='panel spend-summary'>
|
||||
<div class='row'>
|
||||
<h2 class='spend-summary__heading col'>Workspace Total Spend</h2>
|
||||
<dl class='spend-summary__budget'>
|
||||
<div>
|
||||
<dt>Budget </dt>
|
||||
<dd>$100,000,000</dd>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<dt>Remaining</dt>
|
||||
<dd>$60,000,000</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<meter value='40000000' min='0' max='100000000' title='$40,000,000 Total spend to date'></meter>
|
||||
|
||||
<dl class='spend-summary__spent'>
|
||||
<dt>Total spend to date</dt>
|
||||
<dd>$40,000,00</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='funding-summary-row__col'>
|
||||
<div class='panel to-summary'>
|
||||
<div class='to-summary__row'>
|
||||
|
||||
<div class='to-summary__to'>
|
||||
<h2 class='to-summary__heading'>Task Order</h2>
|
||||
<dl class='to-summary__to-number'>
|
||||
<dt class='usa-sr-only'>Task Order Number</dt>
|
||||
<dd>1234567890</dd>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<div class='to-summary__expiration'>
|
||||
<dl>
|
||||
<div>
|
||||
<dt>Expires</dt>
|
||||
<dd>November 1, 2019</dd>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<dt>Remaining</dt>
|
||||
<dd>200 days</dd>
|
||||
</div>
|
||||
</dl>
|
||||
|
||||
<a href='/' class='icon-link'>
|
||||
Manage Task Order
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<dl class='to-summary__co'>
|
||||
<dt>Contracting Officer</dt>
|
||||
<dd>
|
||||
Pietro Quirines
|
||||
<a class='icon-link' href='mailto:email@email.com'>email@email.com</a>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{% endblock %}
|
||||
Loading…
x
Reference in New Issue
Block a user