Generalize class name to better reflect its use.

This commit is contained in:
leigh-mil 2020-01-02 12:57:21 -05:00
parent dcd0f4f6ae
commit ee2aa4bda9
4 changed files with 59 additions and 59 deletions

View File

@ -607,3 +607,28 @@
margin-right: $gap * 3; margin-right: $gap * 3;
} }
} }
.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;
&--large {
font-size: 3.4rem;
font-weight: $font-bold;
}
}
}

View File

@ -146,28 +146,3 @@
} }
} }
} }
.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;
&--large {
font-size: 3.4rem;
font-weight: $font-bold;
}
}
}

View File

@ -3,34 +3,34 @@
<section class="row"> <section class="row">
<div class='col col--grow reporting-summary-item'> <div class='col col--grow summary-item'>
<h5 class="reporting-summary-item__header"> <h5 class="summary-item__header">
<span class="reporting-summary-item__header-text">Total Portfolio Value</span> <span class="summary-item__header-text">Total Portfolio Value</span>
{{Tooltip(("common.lorem" | translate), title="", classes="reporting-summary-item__header-icon")}} {{Tooltip(("common.lorem" | translate), title="", classes="summary-item__header-icon")}}
</h5> </h5>
<p class="reporting-summary-item__value">{{ total_portfolio_value | dollars }}</p> <p class="summary-item__value">{{ total_portfolio_value | dollars }}</p>
</div> </div>
<div class='col col--grow reporting-summary-item'> <div class='col col--grow summary-item'>
<h5 class="reporting-summary-item__header"> <h5 class="summary-item__header">
<span class="reporting-summary-item__header-text">Funding Duration</span> <span class="summary-item__header-text">Funding Duration</span>
{{Tooltip(("common.lorem" | translate), title="", classes="reporting-summary-item__header-icon")}} {{Tooltip(("common.lorem" | translate), title="", classes="summary-item__header-icon")}}
</h5> </h5>
{% set earliest_pop_start_date, latest_pop_end_date = portfolio.funding_duration %} {% set earliest_pop_start_date, latest_pop_end_date = portfolio.funding_duration %}
{% if earliest_pop_start_date and latest_pop_end_date %} {% if earliest_pop_start_date and latest_pop_end_date %}
<p class="reporting-summary-item__value" > <p class="summary-item__value" >
{{ earliest_pop_start_date | formattedDate(formatter="%B %d, %Y") }} {{ earliest_pop_start_date | formattedDate(formatter="%B %d, %Y") }}
- -
{{ latest_pop_end_date | formattedDate(formatter="%B %d, %Y") }} {{ latest_pop_end_date | formattedDate(formatter="%B %d, %Y") }}
</p> </p>
{% else %} {% else %}
<p class="reporting-summary-item__value"> - </p> <p class="summary-item__value"> - </p>
{% endif %} {% endif %}
</div> </div>
<div class='col col--grow reporting-summary-item'> <div class='col col--grow summary-item'>
<h5 class="reporting-summary-item__header"> <h5 class="summary-item__header">
<span class="reporting-summary-item__header-text">Days Remaining</span> <span class="summary-item__header-text">Days Remaining</span>
{{Tooltip(("common.lorem" | translate), title="", classes="reporting-summary-item__header-icon")}} {{Tooltip(("common.lorem" | translate), title="", classes="summary-item__header-icon")}}
</h5> </h5>
<p class="reporting-summary-item__value">{{ portfolio.days_to_funding_expiration }} days</p> <p class="summary-item__value">{{ portfolio.days_to_funding_expiration }} days</p>
</div> </div>
</section> </section>

View File

@ -9,35 +9,35 @@
<div> <div>
<section class="row"> <section class="row">
<div class='col col--grow reporting-summary-item'> <div class='col col--grow summary-item'>
<h4 class="reporting-summary-item__header"> <h4 class="summary-item__header">
<span class="reporting-summary-item__header-text">Total obligated funds</span> <span class="summary-item__header-text">Total obligated funds</span>
{{ Tooltip(("task_orders.review.tooltip.obligated_funds" | translate), title="", classes="reporting-summary-item__header-icon") }} {{ Tooltip(("task_orders.review.tooltip.obligated_funds" | translate), title="", classes="summary-item__header-icon") }}
</h4> </h4>
<p class="reporting-summary-item__value--large"> <p class="summary-item__value--large">
{{ obligated_funds | dollars }} {{ obligated_funds | dollars }}
</p> </p>
</div> </div>
<div class='col col--grow reporting-summary-item'> <div class='col col--grow summary-item'>
<h4 class="reporting-summary-item__header"> <h4 class="summary-item__header">
<span class="reporting-summary-item__header-text">Total Task Order value</span> <span class="summary-item__header-text">Total Task Order value</span>
{{ Tooltip(("task_orders.review.tooltip.total_value" | translate), title="", classes="reporting-summary-item__header-icon") }} {{ Tooltip(("task_orders.review.tooltip.total_value" | translate), title="", classes="summary-item__header-icon") }}
</h4> </h4>
{% set earliest_pop_start_date, latest_pop_end_date = portfolio.funding_duration %} {% set earliest_pop_start_date, latest_pop_end_date = portfolio.funding_duration %}
{% if earliest_pop_start_date and latest_pop_end_date %} {% if earliest_pop_start_date and latest_pop_end_date %}
<p class="reporting-summary-item__value--large"> <p class="summary-item__value--large">
{{ contract_amount | dollars }} {{ contract_amount | dollars }}
</p> </p>
{% else %} {% else %}
<p class="reporting-summary-item__value--large"> - </p> <p class="summary-item__value--large"> - </p>
{% endif %} {% endif %}
</div> </div>
<div class='col col--grow reporting-summary-item'> <div class='col col--grow summary-item'>
<h4 class="reporting-summary-item__header"> <h4 class="summary-item__header">
<span class="reporting-summary-item__header-text">Total expended funds</span> <span class="summary-item__header-text">Total expended funds</span>
{{ Tooltip(("task_orders.review.tooltip.expended_funds" | translate), title="", classes="reporting-summary-item__header-icon") }} {{ Tooltip(("task_orders.review.tooltip.expended_funds" | translate), title="", classes="summary-item__header-icon") }}
</h4> </h4>
<p class="reporting-summary-item__value--large"> <p class="summary-item__value--large">
{{ expended_funds | dollars }} {{ expended_funds | dollars }}
</p> </p>
</div> </div>