Styling for Obligated Funding section of reports
This commit is contained in:
graham-dds
parent
60ad0d1844
commit
fa9986f9bf
@ -102,3 +102,7 @@ dl {
|
|||||||
font-weight: $font-bold;
|
font-weight: $font-bold;
|
||||||
color: $color-black;
|
color: $color-black;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@mixin small-copy {
|
||||||
|
font-size: $small-font-size;
|
||||||
|
}
|
||||||
|
|||||||
@ -1,264 +1,62 @@
|
|||||||
.funding-summary-row {
|
.reporting-section-header {
|
||||||
@include media($medium-screen) {
|
|
||||||
@include grid-row;
|
|
||||||
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__col {
|
|
||||||
hr {
|
|
||||||
margin: (2 * $gap) 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include media($medium-screen) {
|
|
||||||
@include grid-pad;
|
|
||||||
|
|
||||||
flex-grow: 1;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
align-items: baseline;
|
||||||
flex-basis: 50%;
|
&__header {
|
||||||
|
|
||||||
@include ie-only {
|
|
||||||
max-width: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:first-child {
|
|
||||||
padding-left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
padding-right: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
align-items: stretch;
|
|
||||||
|
|
||||||
.panel {
|
|
||||||
padding: $gap * 2;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
@include ie-only {
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.subheading {
|
|
||||||
@include h4;
|
|
||||||
|
|
||||||
margin: 0 $gap (2 * $gap) 0;
|
|
||||||
-ms-flex-negative: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Spending Summary
|
|
||||||
// ===============================
|
|
||||||
&.spend-summary {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: space-between;
|
|
||||||
|
|
||||||
.row {
|
|
||||||
justify-content: space-between;
|
|
||||||
|
|
||||||
@include ie-only {
|
|
||||||
max-width: 100%;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__budget {
|
|
||||||
@include ie-only {
|
|
||||||
margin: $gap 0 0 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
dl {
|
|
||||||
text-align: left;
|
|
||||||
margin: 0 0 ($gap / 2) 0;
|
|
||||||
|
|
||||||
@include ie-only {
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
dt {
|
|
||||||
text-transform: uppercase;
|
|
||||||
color: $color-gray-light;
|
|
||||||
margin-right: $gap;
|
margin-right: $gap;
|
||||||
font-weight: bold;
|
}
|
||||||
font-size: $small-font-size;
|
&__subheader {
|
||||||
|
@include small-copy;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
meter {
|
.jedi-clin-funding {
|
||||||
width: 100%;
|
padding-top: $gap * 3;
|
||||||
height: 3rem;
|
padding-bottom: $gap * 3;
|
||||||
margin: ($gap * 2) 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__spent {
|
&__clin-wrapper {
|
||||||
margin: (2 * $gap) 0;
|
border-bottom: 1px solid $color-gray-light;
|
||||||
display: flex;
|
margin-bottom: $gap * 3;
|
||||||
flex-direction: column;
|
padding-bottom: $gap * 3;
|
||||||
justify-content: flex-end;
|
|
||||||
|
|
||||||
dt {
|
|
||||||
letter-spacing: 0.47px;
|
|
||||||
}
|
}
|
||||||
}
|
> div:nth-last-child(2) {
|
||||||
}
|
|
||||||
|
|
||||||
// Task Order Summary
|
|
||||||
// ===============================
|
|
||||||
&.to-summary {
|
|
||||||
.icon-link {
|
|
||||||
font-weight: $font-normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
.subheading {
|
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.to-summary__heading {
|
&__header {
|
||||||
@include h4;
|
|
||||||
|
|
||||||
margin: 0 $gap 0 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 {
|
|
||||||
text-align: right;
|
|
||||||
margin-top: -2 * $gap;
|
|
||||||
|
|
||||||
dd,
|
|
||||||
dt {
|
|
||||||
display: inline;
|
|
||||||
}
|
|
||||||
|
|
||||||
dt {
|
|
||||||
font-size: $small-font-size;
|
|
||||||
text-transform: uppercase;
|
|
||||||
font-weight: $font-bold;
|
|
||||||
color: $color-gray-light;
|
|
||||||
}
|
|
||||||
|
|
||||||
dd.ending-soon {
|
|
||||||
font-size: $h2-font-size;
|
|
||||||
white-space: nowrap;
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
@include icon-size(28);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-link {
|
|
||||||
margin: 0 (-$gap);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.to-summary__co {
|
|
||||||
margin: ($gap * 2) 0 0 0;
|
|
||||||
|
|
||||||
@include media($xlarge-screen) {
|
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.spend-table__month-select {
|
&__subheader {
|
||||||
|
@include small-copy;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
flex: 1;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
table {
|
&__meter {
|
||||||
.spend-table__portfolio {
|
margin: 10px 0;
|
||||||
th,
|
-moz-transform: scale(-1, 1);
|
||||||
td {
|
-webkit-transform: scale(-1, 1);
|
||||||
font-weight: bold;
|
-o-transform: scale(-1, 1);
|
||||||
}
|
-ms-transform: scale(-1, 1);
|
||||||
}
|
transform: scale(-1, 1);
|
||||||
|
|
||||||
th,
|
|
||||||
td {
|
|
||||||
&.previous-month {
|
|
||||||
color: $color-gray;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.meter-cell {
|
|
||||||
padding-left: 0;
|
|
||||||
position: relative;
|
|
||||||
min-width: 4rem;
|
|
||||||
|
|
||||||
@include media($medium-screen) {
|
|
||||||
min-width: 12rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
meter {
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 3rem;
|
|
||||||
background: $color-white;
|
|
||||||
display: none;
|
|
||||||
|
|
||||||
@include media($medium-screen) {
|
&-values {
|
||||||
display: block;
|
display: flex;
|
||||||
}
|
|
||||||
|
|
||||||
&::-webkit-meter-bar {
|
|
||||||
background: $color-white;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.spend-table__meter-value {
|
&__meta {
|
||||||
@include h5;
|
&--remaining {
|
||||||
|
margin-left: auto;
|
||||||
@include media($medium-screen) {
|
text-align: right;
|
||||||
display: block;
|
}
|
||||||
color: $color-white;
|
&-header {
|
||||||
background-color: rgba($color-blue, 0.65);
|
@include small-copy;
|
||||||
border-radius: $gap / 2;
|
margin-bottom: 0;
|
||||||
position: absolute;
|
}
|
||||||
top: 2.3rem;
|
&-value {
|
||||||
left: $gap / 2;
|
margin-bottom: 0;
|
||||||
padding: 0 ($gap / 2);
|
line-height: 1.2;
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,29 +1,42 @@
|
|||||||
|
{% from "components/icon.html" import Icon %}
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<header>
|
<header class="reporting-section-header">
|
||||||
<h2>Current Obligated funds</h2>
|
<h2 class="reporting-section-header__header">Current Obligated funds</h2>
|
||||||
<span>As of DATE</span>
|
<span class="reporting-section-header__subheader">As of {{ now | formattedDate(formatter="%B %d, %Y at %H:%M") }}</span>
|
||||||
</header>
|
</header>
|
||||||
<div class='panel'>
|
<div class='panel'>
|
||||||
<div class='panel__content'>
|
<div class='panel__content jedi-clin-funding'>
|
||||||
<div>
|
|
||||||
{% for JEDI_clin, funds in current_obligated_funds.items() %}
|
{% for JEDI_clin, funds in current_obligated_funds.items() %}
|
||||||
|
{% set remaining_funds = (funds["obligated_funds"] - funds["expended_funds"]) %}
|
||||||
|
<div class="jedi-clin-funding__clin-wrapper">
|
||||||
|
<h3 class="h5 jedi-clin-funding__header">
|
||||||
{{ JEDI_clin }}
|
{{ JEDI_clin }}
|
||||||
<meter value='{{ funds["expended_funds"] }}' min='0' max='{{ funds["obligated_funds"] }}' title='{{ JEDI_clin }}'>
|
</h3>
|
||||||
<div class='meter__fallback' style='width:{{ (funds["expended_funds"] / funds["obligated_funds"]) * 100 }}%;'></div>
|
<p class="jedi-clin-funding__subheader">Total obligated amount: {{ funds["obligated_funds"] | dollars }}</p>
|
||||||
|
<meter class="jedi-clin-funding__meter" value='{{remaining_funds}}' min='0' max='{{ funds["obligated_funds"] }}' title='{{ JEDI_clin }}'>
|
||||||
|
<div class='jedi-clin-funding__meter-fallback' style='width:{{ (funds["expended_funds"] / funds["obligated_funds"]) * 100 }}%;'></div>
|
||||||
</meter>
|
</meter>
|
||||||
<div>
|
<div class="jedi-clin-funding__meter-values">
|
||||||
<p>Remaining funds:</p>
|
<div class="jedi-clin-funding__meta">
|
||||||
<p>{{ (funds["obligated_funds"] - funds["expended_funds"]) | dollars }}</p>
|
<p class="jedi-clin-funding__meta-header">Funds expended:</p>
|
||||||
|
<p class="h3 jedi-clin-funding__meta-value">{{ funds["expended_funds"] | dollars }}</p>
|
||||||
|
</div>
|
||||||
|
<div class="jedi-clin-funding__meta jedi-clin-funding__meta--remaining">
|
||||||
|
<p class="jedi-clin-funding__meta-header">Remaining funds:</p>
|
||||||
|
<p class="h3 jedi-clin-funding__meta-value">{{ remaining_funds | dollars }}</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
|
||||||
<p>Funds expended to date:</p>
|
|
||||||
<p>{{ funds["expended_funds"] | dollars }}</p>
|
|
||||||
</div>
|
</div>
|
||||||
<hr>
|
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
|
<div class="jedi-clin-funding__active-task-orders">
|
||||||
|
<h3 class="h4">
|
||||||
|
Active Task Orders
|
||||||
|
</h3>
|
||||||
{% for task_order in portfolio.active_task_orders %}
|
{% for task_order in portfolio.active_task_orders %}
|
||||||
<a href="{{ url_for("task_orders.review_task_order", task_order_id=task_order.id) }}">{{ task_order.number }}</a>
|
<a href="{{ url_for("task_orders.review_task_order", task_order_id=task_order.id) }}">
|
||||||
|
{{ task_order.number }} {{ Icon("caret_right", classes="icon--tiny icon--blue" ) }}
|
||||||
|
</a>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user