Merge pull request #626 from dod-ccpo/reskin-funding-page

Update styles on portfolio funding page

styles/components/_portfolio_layout.scss

@@ -105,10 +105,7 @@
 
   .member-list {
     .panel {
-      padding: $gap / 2 0;
-      box-shadow: 0 6px 18px 0 rgba(144,164,183,0.3);
-      border-top: none;
-      border-bottom: none;
+      @include shadow-panel;
     }
 
     table {
@@ -139,10 +136,7 @@
     }
 
     .panel {
-      padding: $gap / 2 0;
-      box-shadow: 0 6px 18px 0 rgba(144,164,183,0.3);
-      border-top: none;
-      border-bottom: none;
+      @include shadow-panel;
     }
 
     .application-list-item {
@@ -210,32 +204,18 @@
 }
 
 .portfolio-funding {
+  .panel {
+    @include shadow-panel;
+  }
+
+  .subheading {
+    @include subheading;
+    margin-top: 6 * $gap;
+    margin-bottom: $gap;
+  }
+
   .portfolio-funding__header {
-    padding: 0;
-    margin: 0 $gap;
-
-    align-items: center;
-
-    .portfolio-funding__header--funded-through {
-      padding: 2 * $gap;
-      flex-grow: 1;
-      text-align: left;
-      font-weight: bold;
-    }
-
-    .funded {
-      color: $color-green;
-      .icon {
-        @include icon-color($color-green);
-      }
-    }
-
-    .unfunded {
-      color: $color-red;
-      .icon {
-        @include icon-color($color-red);
-      }
-    }
+    flex-direction: row-reverse;
   }
 
   .pending-task-order {
@@ -243,6 +223,7 @@
 
     align-items: center;
     margin: 0;
+    margin-bottom: 2 * $gap;
     padding: 2 * $gap;
 
     dt {
@@ -275,34 +256,39 @@
     }
   }
 
-  .portfolio-total-balance {
-    margin-top: -$gap;
-    margin-bottom: 3rem;
-
-    .row {
-      flex-direction: row-reverse;
-      margin: 2 * $gap 0;
-      padding-right: 14rem;
-
-      .label {
-        margin: 0 2 * $gap;
-      }
+  .total-balance {
+    margin-right: 2 * $gap;
+    text-align: right;
   }
+
+  .responsive-table-wrapper {
+    margin: 0 (-2 * $gap);
+    padding: 2 * $gap;
+    padding-top: 0;
   }
 
   table {
-    th{
+    box-shadow: 0 6px 18px 0 rgba(144,164,183,0.3);
+    thead {
+      th:first-child {
+        padding-left: 3 * $gap;
+      }
+    }
+
+    th {
+      background-color: $color-gray-lightest;
+      padding: $gap 2 * $gap;
+      border-top: none;
+      border-bottom: none;
+      color: $color-gray;
+
       .icon {
         margin-left: 1rem;
       }
-
-      &.period-of-performance {
-        color: $color-blue;
-
-        .icon {
-          @include icon-color($color-primary)
-        }
     }
+
+    td {
+      border-bottom: 1px solid $color-gray-lightest;
     }
 
     td.unused-balance {

styles/elements/_panels.scss

@@ -46,6 +46,13 @@
   padding: $gap;
 }
 
+@mixin shadow-panel {
+  padding: $gap / 2 0;
+  box-shadow: 0 6px 18px 0 rgba(144,164,183,0.3);
+  border-top: none;
+  border-bottom: none;
+}
+
 .panel {
   @include panel-base;
   @include panel-theme-default;

templates/portfolios/task_orders/index.html

@@ -83,6 +83,7 @@
               </a>
             </td>
           </tr>
+          {{ caller and caller() }}
         </tbody>
       </table>
     </div>
@@ -91,33 +92,15 @@
 
 <div class="portfolio-funding">
 
-  <div class='panel'>
-    <div class='panel__content portfolio-funding__header row'>
-      <h3>Portfolio Funding</h3>
-      <div class='portfolio-funding__header--funded-through {{ "funded" if funding_end_date is not none and funded else "unfunded"}}'>
-        {% if funding_end_date and funded %}
-          {{ Icon('ok') }}
-          Funded through
-          <local-datetime
-            timestamp='{{ funding_end_date }}'
-            format="M/D/YYYY">
-          </local-datetime>
-        {% elif funding_end_date and not funded %}
-          {{ Icon('alert') }}
-          Funded period ends
-          <local-datetime
-            timestamp='{{ funding_end_date }}'
-            format="M/D/YYYY">
-          </local-datetime>
-        {% endif %}
-      </div>
+  <div class='portfolio-funding__header row'>
     <a href="{{ url_for("task_orders.new", screen=1, portfolio_id=portfolio.id) }}" class="usa-button">Start a New Task Order</a>
   </div>
-  </div>
 
   {% for task_order in pending_task_orders %}
-    <div class='panel'>
-      <div class='panel__content pending-task-order row'>
+    <div class='subheading'>
+      Pending
+    </div>
+    <div class='panel pending-task-order row'>
       <span class='label label--warning'>Pending</span>
       <div class="pending-task-order__started col">
         <dt>Started</dt>
@@ -134,7 +117,6 @@
       </div>
       {{ ViewLink(task_order) }}
     </div>
-    </div>
   {% endfor %}
 
 
@@ -148,16 +130,20 @@
   {% endif %}
 
   {% if active_task_orders %}
-    {{ TaskOrderList(active_task_orders, label='success', funded=funded) }}
-    <div class='panel portfolio-total-balance'>
-      <div class='panel__content row'>
-        <span>{{ total_balance | dollars }}</span>
+    <div class='subheading'>Active</div>
+    {% call TaskOrderList(active_task_orders, label='success', funded=funded) %}
+      <tr class='total-balance'>
+        <td colspan='4'>
           <span class='label label--success'>Total Active Balance</span>
-      </div>
-    </div>
+          <span>{{ total_balance | dollars }}</span>
+        </td>
+        <td>&nbsp;</td>
+      </tr>
+    {% endcall %}
   {% endif %}
 
   {% if expired_task_orders %}
+    <div class='subheading'>Expired</div>
     {{ TaskOrderList(expired_task_orders, label='expired', expired=True) }}
   {% endif %}
 </div>