Touch up styles on current task order panel

atst/routes/portfolios/index.py

@@ -78,7 +78,6 @@ def portfolio_reports(portfolio_id):
         cumulative_budget=Reports.cumulative_budget(portfolio),
         portfolio_totals=Reports.portfolio_totals(portfolio),
         monthly_totals=Reports.monthly_totals(portfolio),
-        jedi_request=portfolio.request,
         task_order=task_order,
         current_month=current_month,
         prev_month=prev_month,

static/icons/envelope.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M464 64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zm0 48v40.805c-22.422 18.259-58.168 46.651-134.587 106.49-16.841 13.247-50.201 45.072-73.413 44.701-23.208.375-56.579-31.459-73.413-44.701C106.18 199.465 70.425 171.067 48 152.805V112h416zM48 400V214.398c22.914 18.251 55.409 43.862 104.938 82.646 21.857 17.205 60.134 55.186 103.062 54.955 42.717.231 80.509-37.199 103.053-54.947 49.528-38.783 82.032-64.401 104.947-82.653V400H48z"/></svg>

styles/sections/_reports.scss

@@ -41,6 +41,11 @@
         max-width: 100%;
       }
 
+      .subheading {
+        @include h4;
+        margin: 0 $gap 2 * $gap 0;
+        -ms-flex-negative: 1;
+      }
 
       // Spending Summary
       // ===============================
@@ -58,12 +63,6 @@
           }
         }
 
-        .spend-summary__heading {
-          @include h4;
-          margin: 0 $gap 2 * $gap 0;
-          -ms-flex-negative: 1;
-        }
-
         .spend-summary__budget {
           margin: 0 0 0 $gap;
 
@@ -112,20 +111,22 @@
       // ===============================
       &.to-summary {
 
-        .to-summary__row {
+        .subheading {
-          .to-summary__heading {
+          margin-bottom: 0;
-            @include h3;
+        }
-            margin: 0;
-          }
 
-          .to-summary__to-number {
+        .to-summary__heading {
-            margin: 0;
+          @include h4;
-            dd {
+          margin: 0 $gap 0 0;
-              &::before {
+        }
-                content: '#';
+
-                color: $color-gray;
+        .to-summary__to-number {
-                margin-right: $gap;
+          margin: 0;
-              }
+          dd {
+            &::before {
+              content: '#';
+              color: $color-gray;
+              margin-right: $gap;
             }
           }
 
@@ -156,23 +157,26 @@
         .to-summary__expiration {
 
           dl {
-            margin: ($gap * 2) 0 0 0;
+            text-align: right;
 
-            > div {
+            dd, dt {
-              margin: 0 0 ($gap / 2) 0;
+              display: inline;
+            }
 
-              dd, dt {
+            dt {
-                display: block;
+              font-size: $small-font-size;
-              }
+              text-transform: uppercase;
+              font-weight: $font-bold;
+              color: $color-gray-light;
+            }
 
-              dt {
+            dd.ending-soon {
-                color: $color-gray;
+              color: $color-red-dark;
-                margin-right: $gap;
+              font-size: $h2-font-size;
-                font-weight: normal;
-              }
 
-              dd {
+              .icon {
-                font-weight: bold;
+                @include icon-size(28);
+                @include icon-color($color-red-dark);
               }
             }
           }

templates/portfolios/reports/index.html

@@ -12,7 +12,7 @@
 
     <div class='funding-summary-row__col'>
       <div class='panel spend-summary'>
-        <h4 class='spend-summary__heading'>Portfolio Total Spend</h4>
+        <h4 class='spend-summary__heading subheading'>Portfolio Total Spend</h4>
         <div class='row'>
           <dl class='spend-summary__budget col col--grow row'>
             {% set budget = portfolio_totals['budget'] %}
@@ -50,52 +50,68 @@
         <div class='to-summary__row'>
 
           <div class='to-summary__to'>
-            <h2 class='to-summary__heading'>Task Order</h2>
+            <h2 class='to-summary__heading subheading'>Current Task Order</h2>
             <dl class='to-summary__to-number'>
               <dt class='usa-sr-only'>Task Order Number</dt>
               <dd>{{ task_order.number }}</dd>
             </dl>
           </div>
 
-          <div class='to-summary__expiration'>
+          <hr></hr>
-            <dl>
-              <div>
-                <dt>Expires</dt>
-                <dd>
-                  {% if expiration_date %}
-                    <local-datetime
-                      timestamp='{{ expiration_date }}'
-                      format='MMMM D, YYYY'>
-                      </local-datetime>
-                  {% else %}
-                      -
-                  {% endif %}
-                </dd>
-              </div>
 
+          <div class='to-summary__expiration row'>
+            <div class='col col--grow'>
+              <h4 class='subheading'>Expiration Date</h4>
               <div>
-                <dt>Remaining</dt>
+                {% if expiration_date %}
-                <dd>
+                  <local-datetime
+                    timestamp='{{ expiration_date }}'
+                    format='MMMM D, YYYY'>
+                    </local-datetime>
+                {% else %}
+                    -
+                {% endif %}
+              </div>
+              <a href='{{ url_for("portfolios.portfolio_funding", portfolio_id=portfolio.id) }}' class='icon-link'>
+                {{ Icon('cog') }}
+                Manage Task Order
+              </a>
+            </div>
+            <div class='col col--grow'>
+              <dl>
+                <dt>Remaining Days</dt>
+                <dd class='{{ 'ending-soon' if remaining_days is not none and remaining_days < 190 }}'>
                   {% if remaining_days is not none %}
-                    {{ remaining_days }} days
+                  {{ Icon('arrow-down') }}
+                    {{ remaining_days }}
                   {% else %}
                     -
                   {% endif %}
                 </dd>
-              </div>
+              </dl>
-            </dl>
+            </div>
-
-            <a href='{{ url_for("portfolios.portfolio_funding", portfolio_id=portfolio.id) }}' class='icon-link'>
-              Manage Task Order
-            </a>
           </div>
         </div>
 
+        <hr></hr>
+
         <dl class='to-summary__co'>
-          <dt>Contracting Officer</dt>
+          <dt class='subheading'>Contracting Officer</dt>
-          <dd>
+          <dd class='row'>
-            {{ jedi_request.contracting_officer_full_name }}
+            <div class='col col--grow'>
-            <a class='icon-link' href='mailto:{{ jedi_request.contracting_officer_email }}'>{{ jedi_request.contracting_officer_email }}</a>
+            {% if task_order.ko_first_name and task_order.ko_last_name %}
+              {{ task_order.ko_first_name }} {{ task_order.ko_last_name }}
+            {% endif %}
+            </div>
+
+            <div class='col'>
+            {% if task_order.ko_email %}
+              <a class='icon-link' href='mailto:{{ task_order.ko_email }}'>
+                {{ Icon('envelope') }}
+                {{ task_order.ko_email }}
+              </a>
+            {% endif %}
+            </div>
           </dd>
         </dl>