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;
+      @include shadow-panel;
-      box-shadow: 0 6px 18px 0 rgba(144,164,183,0.3);
-      border-top: none;
-      border-bottom: none;
     }
 
     table {
@@ -139,10 +136,7 @@
     }
 
     .panel {
-      padding: $gap / 2 0;
+      @include shadow-panel;
-      box-shadow: 0 6px 18px 0 rgba(144,164,183,0.3);
-      border-top: none;
-      border-bottom: none;
     }
 
     .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;
+    flex-direction: row-reverse;
-    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);
-      }
-    }
   }
 
   .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 {
+  .total-balance {
-    margin-top: -$gap;
+    margin-right: 2 * $gap;
-    margin-bottom: 3rem;
+    text-align: right;
+  }
 
-    .row {
+  .responsive-table-wrapper {
-      flex-direction: row-reverse;
+    margin: 0 (-2 * $gap);
-      margin: 2 * $gap 0;
+    padding: 2 * $gap;
-      padding-right: 14rem;
+    padding-top: 0;
-
-      .label {
-        margin: 0 2 * $gap;
-      }
-    }
   }
 
   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 {
+    td {
-        color: $color-blue;
+      border-bottom: 1px solid $color-gray-lightest;
-
-        .icon {
-          @include icon-color($color-primary)
-        }
-      }
     }
 
     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,49 +92,30 @@
 
 <div class="portfolio-funding">
 
-  <div class='panel'>
+  <div class='portfolio-funding__header row'>
-    <div class='panel__content 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>
-      <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>
-      <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='subheading'>
-      <div class='panel__content pending-task-order row'>
+      Pending
-        <span class='label label--warning'>Pending</span>
+    </div>
-        <div class="pending-task-order__started col">
+    <div class='panel pending-task-order row'>
-          <dt>Started</dt>
+      <span class='label label--warning'>Pending</span>
-          <dd>
+      <div class="pending-task-order__started col">
-            <local-datetime
+        <dt>Started</dt>
-              timestamp="{{ task_order.time_created }}"
+        <dd>
-              format="M/D/YYYY">
+          <local-datetime
-              </local-datetime>
+            timestamp="{{ task_order.time_created }}"
-          </dd>
+            format="M/D/YYYY">
-        </div>
+            </local-datetime>
-        <div class="pending-task-order__value col">
+        </dd>
-          <dt>Value</dt>
-          <dd>{{ task_order.budget | dollars }}</dd>
-        </div>
-        {{ ViewLink(task_order) }}
       </div>
+      <div class="pending-task-order__value col">
+        <dt>Value</dt>
+        <dd>{{ task_order.budget | dollars }}</dd>
+      </div>
+      {{ ViewLink(task_order) }}
     </div>
   {% endfor %}
 
@@ -148,16 +130,20 @@
   {% endif %}
 
   {% if active_task_orders %}
-    {{ TaskOrderList(active_task_orders, label='success', funded=funded) }}
+    <div class='subheading'>Active</div>
-    <div class='panel portfolio-total-balance'>
+    {% call TaskOrderList(active_task_orders, label='success', funded=funded) %}
-      <div class='panel__content row'>
+      <tr class='total-balance'>
-        <span>{{ total_balance | dollars }}</span>
+        <td colspan='4'>
-        <span class='label label--success'>Total Active Balance</span>
+          <span class='label label--success'>Total Active Balance</span>
-      </div>
+          <span>{{ total_balance | dollars }}</span>
-    </div>
+        </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>