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;
|
||||
color: $color-black;
|
||||
}
|
||||
|
||||
@mixin small-copy {
|
||||
font-size: $small-font-size;
|
||||
}
|
||||
|
||||
@ -1,264 +1,62 @@
|
||||
.funding-summary-row {
|
||||
@include media($medium-screen) {
|
||||
@include grid-row;
|
||||
.reporting-section-header {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
&__header {
|
||||
margin-right: $gap;
|
||||
}
|
||||
&__subheader {
|
||||
@include small-copy;
|
||||
}
|
||||
}
|
||||
|
||||
flex-wrap: wrap;
|
||||
.jedi-clin-funding {
|
||||
padding-top: $gap * 3;
|
||||
padding-bottom: $gap * 3;
|
||||
|
||||
&__clin-wrapper {
|
||||
border-bottom: 1px solid $color-gray-light;
|
||||
margin-bottom: $gap * 3;
|
||||
padding-bottom: $gap * 3;
|
||||
}
|
||||
> div:nth-last-child(2) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&__col {
|
||||
hr {
|
||||
margin: (2 * $gap) 0;
|
||||
}
|
||||
&__header {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@include media($medium-screen) {
|
||||
@include grid-pad;
|
||||
&__subheader {
|
||||
@include small-copy;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
flex-grow: 1;
|
||||
&__meter {
|
||||
margin: 10px 0;
|
||||
-moz-transform: scale(-1, 1);
|
||||
-webkit-transform: scale(-1, 1);
|
||||
-o-transform: scale(-1, 1);
|
||||
-ms-transform: scale(-1, 1);
|
||||
transform: scale(-1, 1);
|
||||
width: 100%;
|
||||
|
||||
&-values {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-basis: 50%;
|
||||
|
||||
@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;
|
||||
font-weight: bold;
|
||||
font-size: $small-font-size;
|
||||
}
|
||||
}
|
||||
|
||||
meter {
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
margin: ($gap * 2) 0 0;
|
||||
}
|
||||
|
||||
&__spent {
|
||||
margin: (2 * $gap) 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
|
||||
dt {
|
||||
letter-spacing: 0.47px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Task Order Summary
|
||||
// ===============================
|
||||
&.to-summary {
|
||||
.icon-link {
|
||||
font-weight: $font-normal;
|
||||
}
|
||||
|
||||
.subheading {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.to-summary__heading {
|
||||
@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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.spend-table__month-select {
|
||||
margin: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
table {
|
||||
.spend-table__portfolio {
|
||||
th,
|
||||
td {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
&.previous-month {
|
||||
color: $color-gray;
|
||||
&__meta {
|
||||
&--remaining {
|
||||
margin-left: auto;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
&.meter-cell {
|
||||
padding-left: 0;
|
||||
position: relative;
|
||||
min-width: 4rem;
|
||||
|
||||
@include media($medium-screen) {
|
||||
min-width: 12rem;
|
||||
}
|
||||
|
||||
meter {
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
background: $color-white;
|
||||
display: none;
|
||||
|
||||
@include media($medium-screen) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&::-webkit-meter-bar {
|
||||
background: $color-white;
|
||||
}
|
||||
}
|
||||
|
||||
.spend-table__meter-value {
|
||||
@include h5;
|
||||
|
||||
@include media($medium-screen) {
|
||||
display: block;
|
||||
color: $color-white;
|
||||
background-color: rgba($color-blue, 0.65);
|
||||
border-radius: $gap / 2;
|
||||
position: absolute;
|
||||
top: 2.3rem;
|
||||
left: $gap / 2;
|
||||
padding: 0 ($gap / 2);
|
||||
}
|
||||
}
|
||||
&-header {
|
||||
@include small-copy;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
&-value {
|
||||
margin-bottom: 0;
|
||||
line-height: 1.2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,29 +1,42 @@
|
||||
{% from "components/icon.html" import Icon %}
|
||||
|
||||
<section>
|
||||
<header>
|
||||
<h2>Current Obligated funds</h2>
|
||||
<span>As of DATE</span>
|
||||
<header class="reporting-section-header">
|
||||
<h2 class="reporting-section-header__header">Current Obligated funds</h2>
|
||||
<span class="reporting-section-header__subheader">As of {{ now | formattedDate(formatter="%B %d, %Y at %H:%M") }}</span>
|
||||
</header>
|
||||
<div class='panel'>
|
||||
<div class='panel__content'>
|
||||
<div>
|
||||
{% for JEDI_clin, funds in current_obligated_funds.items() %}
|
||||
{{ JEDI_clin }}
|
||||
<meter value='{{ funds["expended_funds"] }}' min='0' max='{{ funds["obligated_funds"] }}' title='{{ JEDI_clin }}'>
|
||||
<div class='meter__fallback' style='width:{{ (funds["expended_funds"] / funds["obligated_funds"]) * 100 }}%;'></div>
|
||||
<div class='panel__content jedi-clin-funding'>
|
||||
{% 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 }}
|
||||
</h3>
|
||||
<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>
|
||||
<div>
|
||||
<p>Remaining funds:</p>
|
||||
<p>{{ (funds["obligated_funds"] - funds["expended_funds"]) | dollars }}</p>
|
||||
<div class="jedi-clin-funding__meter-values">
|
||||
<div class="jedi-clin-funding__meta">
|
||||
<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>
|
||||
<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 %}
|
||||
<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 %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user