Styling for portfolio summary section of reporting

styles/sections/_reports.scss

@@ -1,62 +1,90 @@
-.reporting-section-header {
+.portfolio-reports {
-  display: flex;
+  .estimate-warning {
-  align-items: baseline;
+    margin-top: $gap * 3;
-  &__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;
     margin-bottom: $gap * 3;
-    padding-bottom: $gap * 3;
-  }
-  > div:nth-last-child(2) {
-    margin-bottom: 0;
   }
 
-  &__header {
+  .reporting-section-header {
-    margin: 0;
+    display: flex;
-  }
+    align-items: baseline;
-
+    &__header {
-  &__subheader {
+      margin-right: $gap;
-    @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;
     }
-  }
+    &__subheader {
-
-  &__meta {
-    &--remaining {
-      margin-left: auto;
-      text-align: right;
-    }
-    &-header {
       @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;
+    &__header {
-      line-height: 1.2;
+      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;
     }
   }
 }

templates/portfolios/reports/index.html

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

templates/portfolios/reports/portfolio_summary.html

@@ -3,34 +3,34 @@
 
 
 <section class="row">
-  <div class='col col--grow'>
+  <div class='col col--grow reporting-summary-item'>
-    <p>
+    <h5 class="reporting-summary-item__header">
-      Total Portfolio Value
+      <span class="reporting-summary-item__header-text">Total Portfolio Value</span>
-      {{Tooltip(("common.lorem" | translate), title="")}}
+      {{Tooltip(("common.lorem" | translate), title="", classes="reporting-summary-item__header-icon")}}
-    </p>
+    </h5>
-    <p>{{ total_portfolio_value | dollars }}</p>
+    <p class="reporting-summary-item__value">{{ total_portfolio_value | dollars }}</p>
   </div>
-  <div class='col col--grow'>
+  <div class='col col--grow reporting-summary-item'>
-    <p>
+    <h5 class="reporting-summary-item__header">
-      Funding Duration
+      <span class="reporting-summary-item__header-text">Funding Duration</span>
-      {{Tooltip(("common.lorem" | translate), title="")}}
+      {{Tooltip(("common.lorem" | translate), title="", classes="reporting-summary-item__header-icon")}}
-    </p>
+    </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'>
+  <div class='col col--grow reporting-summary-item'>
-    <p>
+    <h5 class="reporting-summary-item__header">
-      Days Remaining
+      <span class="reporting-summary-item__header-text">Days Remaining</span>
-      {{Tooltip(("common.lorem" | translate), title="")}}
+      {{Tooltip(("common.lorem" | translate), title="", classes="reporting-summary-item__header-icon")}}
-    </p>
+    </h5>
-    <p>{{ portfolio.days_to_funding_expiration }} days</p>
+    <p class="reporting-summary-item__value">{{ portfolio.days_to_funding_expiration }} days</p>
   </div>
 </section>

translations.yaml

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