Styling for portfolio summary section of reporting
This commit is contained in:
graham-dds
parent
eac41d140c
commit
33711c9605
@ -1,62 +1,90 @@
|
||||
.reporting-section-header {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
&__header {
|
||||
margin-right: $gap;
|
||||
}
|
||||
&__subheader {
|
||||
@include small-copy;
|
||||
}
|
||||
}
|
||||
|
||||
.jedi-clin-funding {
|
||||
padding-top: $gap * 3;
|
||||
padding-bottom: $gap * 3;
|
||||
|
||||
&__clin-wrapper {
|
||||
border-bottom: 1px solid $color-gray-light;
|
||||
.portfolio-reports {
|
||||
.estimate-warning {
|
||||
margin-top: $gap * 3;
|
||||
margin-bottom: $gap * 3;
|
||||
padding-bottom: $gap * 3;
|
||||
}
|
||||
> div:nth-last-child(2) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&__header {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&__subheader {
|
||||
@include small-copy;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&__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;
|
||||
.reporting-section-header {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
&__header {
|
||||
margin-right: $gap;
|
||||
}
|
||||
}
|
||||
|
||||
&__meta {
|
||||
&--remaining {
|
||||
margin-left: auto;
|
||||
text-align: right;
|
||||
}
|
||||
&-header {
|
||||
&__subheader {
|
||||
@include small-copy;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
&-value {
|
||||
margin-bottom: 0;
|
||||
line-height: 1.2;
|
||||
|
||||
&__header {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&__subheader {
|
||||
@include small-copy;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&__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;
|
||||
}
|
||||
}
|
||||
|
||||
&__meta {
|
||||
&--remaining {
|
||||
margin-left: auto;
|
||||
text-align: right;
|
||||
}
|
||||
&-header {
|
||||
@include small-copy;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
&-value {
|
||||
margin-bottom: 0;
|
||||
line-height: 1.2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.reporting-summary-item {
|
||||
border-right: 1px solid $color-gray-light;
|
||||
margin-right: $gap * 3;
|
||||
padding-right: $gap * 3;
|
||||
&:last-child {
|
||||
border-right: none;
|
||||
margin-right: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
&__header {
|
||||
margin: 0;
|
||||
&-icon {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
&__value {
|
||||
font-size: $lead-font-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -6,6 +6,7 @@
|
||||
{% block portfolio_content %}
|
||||
{{ StickyCTA("Reports") }}
|
||||
<div class="portfolio-reports col col--grow">
|
||||
<p class="row estimate-warning">{{ "portfolios.reports.estimate_warning" | translate }}</p>
|
||||
{% include "portfolios/reports/portfolio_summary.html" %}
|
||||
<hr>
|
||||
{% include "portfolios/reports/obligated_funds.html" %}
|
||||
|
||||
@ -3,34 +3,34 @@
|
||||
|
||||
|
||||
<section class="row">
|
||||
<div class='col col--grow'>
|
||||
<p>
|
||||
Total Portfolio Value
|
||||
{{Tooltip(("common.lorem" | translate), title="")}}
|
||||
</p>
|
||||
<p>{{ total_portfolio_value | dollars }}</p>
|
||||
<div class='col col--grow reporting-summary-item'>
|
||||
<h5 class="reporting-summary-item__header">
|
||||
<span class="reporting-summary-item__header-text">Total Portfolio Value</span>
|
||||
{{Tooltip(("common.lorem" | translate), title="", classes="reporting-summary-item__header-icon")}}
|
||||
</h5>
|
||||
<p class="reporting-summary-item__value">{{ total_portfolio_value | dollars }}</p>
|
||||
</div>
|
||||
<div class='col col--grow'>
|
||||
<p>
|
||||
Funding Duration
|
||||
{{Tooltip(("common.lorem" | translate), title="")}}
|
||||
</p>
|
||||
<div class='col col--grow reporting-summary-item'>
|
||||
<h5 class="reporting-summary-item__header">
|
||||
<span class="reporting-summary-item__header-text">Funding Duration</span>
|
||||
{{Tooltip(("common.lorem" | translate), title="", classes="reporting-summary-item__header-icon")}}
|
||||
</h5>
|
||||
{% set earliest_pop_start_date, latest_pop_end_date = portfolio.funding_duration %}
|
||||
{% if earliest_pop_start_date and latest_pop_end_date %}
|
||||
<p>
|
||||
<p class="reporting-summary-item__value" >
|
||||
{{ earliest_pop_start_date | formattedDate(formatter="%B %d, %Y") }}
|
||||
-
|
||||
{{ latest_pop_end_date | formattedDate(formatter="%B %d, %Y") }}
|
||||
</p>
|
||||
{% else %}
|
||||
<p> - </p>
|
||||
<p class="reporting-summary-item__value"> - </p>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class='col col--grow'>
|
||||
<p>
|
||||
Days Remaining
|
||||
{{Tooltip(("common.lorem" | translate), title="")}}
|
||||
</p>
|
||||
<p>{{ portfolio.days_to_funding_expiration }} days</p>
|
||||
<div class='col col--grow reporting-summary-item'>
|
||||
<h5 class="reporting-summary-item__header">
|
||||
<span class="reporting-summary-item__header-text">Days Remaining</span>
|
||||
{{Tooltip(("common.lorem" | translate), title="", classes="reporting-summary-item__header-icon")}}
|
||||
</h5>
|
||||
<p class="reporting-summary-item__value">{{ portfolio.days_to_funding_expiration }} days</p>
|
||||
</div>
|
||||
</section>
|
||||
@ -446,6 +446,7 @@ portfolios:
|
||||
portfolio_mgmt: Portfolio management
|
||||
reporting: Reporting
|
||||
reports:
|
||||
estimate_warning: Reports displayed in JEDI are estimates and not a system of record.
|
||||
empty_state:
|
||||
message: Nothing to report.
|
||||
sub_message:
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user