Touch up styles on current task order panel

This commit is contained in:
Patrick Smith 2019-02-09 14:49:59 -05:00
parent 51687dabff
commit fede9f81ee
4 changed files with 83 additions and 63 deletions

View File

@ -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,

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M464 64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zm0 48v40.805c-22.422 18.259-58.168 46.651-134.587 106.49-16.841 13.247-50.201 45.072-73.413 44.701-23.208.375-56.579-31.459-73.413-44.701C106.18 199.465 70.425 171.067 48 152.805V112h416zM48 400V214.398c22.914 18.251 55.409 43.862 104.938 82.646 21.857 17.205 60.134 55.186 103.062 54.955 42.717.231 80.509-37.199 103.053-54.947 49.528-38.783 82.032-64.401 104.947-82.653V400H48z"/></svg>

After

Width:  |  Height:  |  Size: 574 B

View File

@ -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,10 +111,13 @@
// ===============================
&.to-summary {
.to-summary__row {
.subheading {
margin-bottom: 0;
}
.to-summary__heading {
@include h3;
margin: 0;
@include h4;
margin: 0 $gap 0 0;
}
.to-summary__to-number {
@ -127,7 +129,6 @@
margin-right: $gap;
}
}
}
@include media($xlarge-screen) {
display: flex;
@ -156,23 +157,26 @@
.to-summary__expiration {
dl {
margin: ($gap * 2) 0 0 0;
> div {
margin: 0 0 ($gap / 2) 0;
text-align: right;
dd, dt {
display: block;
display: inline;
}
dt {
color: $color-gray;
margin-right: $gap;
font-weight: normal;
font-size: $small-font-size;
text-transform: uppercase;
font-weight: $font-bold;
color: $color-gray-light;
}
dd {
font-weight: bold;
dd.ending-soon {
color: $color-red-dark;
font-size: $h2-font-size;
.icon {
@include icon-size(28);
@include icon-color($color-red-dark);
}
}
}

View File

@ -12,7 +12,7 @@
<div class='funding-summary-row__col'>
<div class='panel spend-summary'>
<h4 class='spend-summary__heading'>Portfolio Total Spend</h4>
<h4 class='spend-summary__heading subheading'>Portfolio Total Spend</h4>
<div class='row'>
<dl class='spend-summary__budget col col--grow row'>
{% set budget = portfolio_totals['budget'] %}
@ -50,18 +50,19 @@
<div class='to-summary__row'>
<div class='to-summary__to'>
<h2 class='to-summary__heading'>Task Order</h2>
<h2 class='to-summary__heading subheading'>Current Task Order</h2>
<dl class='to-summary__to-number'>
<dt class='usa-sr-only'>Task Order Number</dt>
<dd>{{ task_order.number }}</dd>
</dl>
</div>
<div class='to-summary__expiration'>
<dl>
<hr></hr>
<div class='to-summary__expiration row'>
<div class='col col--grow'>
<h4 class='subheading'>Expiration Date</h4>
<div>
<dt>Expires</dt>
<dd>
{% if expiration_date %}
<local-datetime
timestamp='{{ expiration_date }}'
@ -70,32 +71,47 @@
{% else %}
-
{% endif %}
</dd>
</div>
<div>
<dt>Remaining</dt>
<dd>
<a href='{{ url_for("portfolios.portfolio_funding", portfolio_id=portfolio.id) }}' class='icon-link'>
{{ Icon('cog') }}
Manage Task Order
</a>
</div>
<div class='col col--grow'>
<dl>
<dt>Remaining Days</dt>
<dd class='{{ 'ending-soon' if remaining_days is not none and remaining_days < 190 }}'>
{% if remaining_days is not none %}
{{ remaining_days }} days
{{ Icon('arrow-down') }}
{{ remaining_days }}
{% else %}
-
{% endif %}
</dd>
</div>
</dl>
</div>
</div>
</div>
<a href='{{ url_for("portfolios.portfolio_funding", portfolio_id=portfolio.id) }}' class='icon-link'>
Manage Task Order
</a>
</div>
</div>
<hr></hr>
<dl class='to-summary__co'>
<dt>Contracting Officer</dt>
<dd>
{{ jedi_request.contracting_officer_full_name }}
<a class='icon-link' href='mailto:{{ jedi_request.contracting_officer_email }}'>{{ jedi_request.contracting_officer_email }}</a>
<dt class='subheading'>Contracting Officer</dt>
<dd class='row'>
<div class='col col--grow'>
{% if task_order.ko_first_name and task_order.ko_last_name %}
{{ task_order.ko_first_name }} {{ task_order.ko_last_name }}
{% endif %}
</div>
<div class='col'>
{% if task_order.ko_email %}
<a class='icon-link' href='mailto:{{ task_order.ko_email }}'>
{{ Icon('envelope') }}
{{ task_order.ko_email }}
</a>
{% endif %}
</div>
</dd>
</dl>