pk/atst
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Styling for portfolio summary section of reporting

Browse Source
This commit is contained in:
graham-dds 2019-11-26 16:16:05 -05:00
parent eac41d140c
commit 33711c9605
4 changed files with 101 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
styles/sections/_reports.scss
View File

@ -1,4 +1,10 @@
.reporting-section-header {
.portfolio-reports {
.estimate-warning {
margin-top: $gap * 3;
margin-bottom: $gap * 3;
}
.reporting-section-header {
display: flex;
align-items: baseline;
&__header {
@ -7,9 +13,9 @@
&__subheader {
@include small-copy;
}
}
}
.jedi-clin-funding {
.jedi-clin-funding {
padding-top: $gap * 3;
padding-bottom: $gap * 3;
@ -59,4 +65,26 @@
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;
}
}
}

1
templates/portfolios/reports/index.html
View File

@ -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" %}

38
templates/portfolios/reports/portfolio_summary.html
View File

@ -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>

1
translations.yaml
View File

@ -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: