diff --git a/styles/elements/_typography.scss b/styles/elements/_typography.scss index 1ae28d9f..48784659 100644 --- a/styles/elements/_typography.scss +++ b/styles/elements/_typography.scss @@ -102,3 +102,7 @@ dl { font-weight: $font-bold; color: $color-black; } + +@mixin small-copy { + font-size: $small-font-size; +} diff --git a/styles/sections/_reports.scss b/styles/sections/_reports.scss index a53e2842..2d8708ba 100644 --- a/styles/sections/_reports.scss +++ b/styles/sections/_reports.scss @@ -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; } } } diff --git a/templates/portfolios/reports/obligated_funds.html b/templates/portfolios/reports/obligated_funds.html index 04ba4883..a774c0f9 100644 --- a/templates/portfolios/reports/obligated_funds.html +++ b/templates/portfolios/reports/obligated_funds.html @@ -1,29 +1,42 @@ +{% from "components/icon.html" import Icon %}
-
-

Current Obligated funds

- As of DATE +
+

Current Obligated funds

+ As of {{ now | formattedDate(formatter="%B %d, %Y at %H:%M") }}
-
-
- {% for JEDI_clin, funds in current_obligated_funds.items() %} - {{ JEDI_clin }} - -
+
+ {% for JEDI_clin, funds in current_obligated_funds.items() %} + {% set remaining_funds = (funds["obligated_funds"] - funds["expended_funds"]) %} +
+

+ {{ JEDI_clin }} +

+

Total obligated amount: {{ funds["obligated_funds"] | dollars }}

+ +
-
-

Remaining funds:

-

{{ (funds["obligated_funds"] - funds["expended_funds"]) | dollars }}

+
+
+

Funds expended:

+

{{ funds["expended_funds"] | dollars }}

+
+
+

Remaining funds:

+

{{ remaining_funds | dollars }}

+
+
-
-

Funds expended to date:

-

{{ funds["expended_funds"] | dollars }}

-
-
- {% endfor %} + {% endfor %} +
+

+ Active Task Orders +

{% for task_order in portfolio.active_task_orders %} - {{ task_order.number }} + + {{ task_order.number }} {{ Icon("caret_right", classes="icon--tiny icon--blue" ) }} + {% endfor %}