Touch up styles on current task order panel
This commit is contained in:
parent
51687dabff
commit
fede9f81ee
@ -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,
|
||||
|
1
static/icons/envelope.svg
Normal file
1
static/icons/envelope.svg
Normal 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 |
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -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>
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user