From 1165b60fce25c2f92c371d683a389ce682f7aab8 Mon Sep 17 00:00:00 2001
From: leigh-mil <leigh-ctr@friends.dds.mil>
Date: Wed, 4 Dec 2019 14:31:37 -0500
Subject: [PATCH] Finalize styling for Task Order index page.

---
 styles/core/_grid.scss              |  3 +--
 styles/core/_variables.scss         |  1 +
 styles/elements/_accordions.scss    | 11 ++++------
 styles/sections/_task_order.scss    | 24 ++++++++++++++++++++
 templates/components/accordion.html |  8 +++----
 templates/task_orders/index.html    | 34 ++++++++++++++++++++++++-----
 6 files changed, 62 insertions(+), 19 deletions(-)

diff --git a/styles/core/_grid.scss b/styles/core/_grid.scss
index ff07cca6..d060198d 100644
--- a/styles/core/_grid.scss
+++ b/styles/core/_grid.scss
@@ -40,8 +40,7 @@
   }
 
   &.col--grow {
-    flex: 1;
-    flex-grow: 1;
+    flex: 1 auto;
     padding-right: $spacing-small;
   }
 
diff --git a/styles/core/_variables.scss b/styles/core/_variables.scss
index dc609fe4..fe81b498 100644
--- a/styles/core/_variables.scss
+++ b/styles/core/_variables.scss
@@ -16,6 +16,7 @@ $footer-height: 5rem;
 $usa-banner-height: 2.8rem;
 $sidenav-expanded-width: 25rem;
 $sidenav-collapsed-width: 10rem;
+$max-panel-width: 80rem;
 
 /*
  * USWDS Variables
diff --git a/styles/elements/_accordions.scss b/styles/elements/_accordions.scss
index f5d89c11..560d246c 100644
--- a/styles/elements/_accordions.scss
+++ b/styles/elements/_accordions.scss
@@ -1,14 +1,11 @@
 .accordion {
+  @include shadow-panel;
+
   &__header {
     margin: 0;
   }
 
-  ul {
-    margin: 0;
-    list-style: none;
-
-    li {
-      background-color: $color-white;
-    }
+  &__content {
+    padding: 0 ($gap * 3) $gap;
   }
 }
diff --git a/styles/sections/_task_order.scss b/styles/sections/_task_order.scss
index 2e093b37..3ef5c6e4 100644
--- a/styles/sections/_task_order.scss
+++ b/styles/sections/_task_order.scss
@@ -189,4 +189,28 @@
 .task-order__list {
   margin-top: $gap;
   margin-bottom: $gap;
+  max-width: $max-panel-width;
+
+  &--item {
+    border-bottom: 1px solid $color-gray-lightest;
+
+    &:last-child {
+      border-bottom: none;
+      padding-bottom: $gap;
+    }
+
+    .col {
+      padding-right: $gap * 2;
+    }
+
+    h4 {
+      margin: $gap * 2 0 $gap;
+    }
+
+    h5 {
+      font-size: 1rem;
+      color: $color-gray;
+      margin: 0;
+    }
+  }
 }
diff --git a/templates/components/accordion.html b/templates/components/accordion.html
index 3fd38e01..1ca1cd22 100644
--- a/templates/components/accordion.html
+++ b/templates/components/accordion.html
@@ -8,8 +8,8 @@
   content_tag="div",
   content_classes="") %}
   <accordion v-cloak inline-template>
-    <{{wrapper_tag}} class="{{ wrapper_classes }}">
-      <{{heading_tag}} class="{{ heading_classes }}">
+    <{{wrapper_tag}} class="usa-accordion accordion {{ wrapper_classes }}">
+      <{{heading_tag}} class="accordion__header {{ heading_classes }}">
         <button
           v-on:click="toggle($event)" 
           class="usa-accordion-button"
@@ -20,8 +20,8 @@
         </button>
       </{{heading_tag}}>
       <{{content_tag}}
-        id="{{ id }}" 
-        class="usa-accordion-content {{ content_classes }}"  
+        id="{{ id }}"
+        class="usa-accordion-content accordion__content {{ content_classes }}"
         v-bind:aria-hidden="isVisible ? 'false' : 'true'">
         {{ caller() }}
       </{{content_tag}}>
diff --git a/templates/task_orders/index.html b/templates/task_orders/index.html
index 24435dd5..1480f26a 100644
--- a/templates/task_orders/index.html
+++ b/templates/task_orders/index.html
@@ -15,13 +15,35 @@
 {% macro TaskOrderList(task_orders, status) %}
   {% set status = "All Task Orders" %}
   <section class="task-order__list">
-    {% call Accordion(title=status, id=status, heading_tag="h4", content_tag="ul") %}
+    {% call Accordion(title=status, id=status, heading_tag="h4") %}
       {% for task_order in task_orders %}
-        <li class="">
-          <h4><a href="{{ url_for('task_orders.review_task_order', task_order_id=task_order.id) }}">Task Order #{{ task_order.number }}</a></h4>
-          <b>Total amount: </b>{{ task_order.total_contract_amount | dollars }}
-          <b>Obligated amount: </b>{{ task_order.total_obligated_funds | dollars }}
-        </li>
+        <div class="task-order__list--item">
+          <h4><a href="{{ url_for('task_orders.review_task_order', task_order_id=task_order.id) }}">Task Order #{{ task_order.number }} {{ Icon("caret_right", classes="icon--tiny icon--blue" ) }}</a></h4>
+          <div class="row">
+            <div class="col col--grow">
+              <h5>
+                Current Period of Performance
+              </h5>
+              <p>
+                {{ task_order.start_date | formattedDate(formatter="%b %d, %Y") }}
+                -
+                {{ task_order.end_date | formattedDate(formatter="%b %d, %Y") }}
+              </p>
+            </div>
+            <div class="col col--grow">
+              <h5>Total Value</h5>
+              <p>{{ task_order.total_contract_amount | dollars }}</p>
+            </div>
+            <div class="col col--grow">
+              <h5>Total Obligated</h5>
+              <p>{{ task_order.total_obligated_funds | dollars }}</p>
+            </div>
+            <div class="col col--grow">
+              <h5>Total Expended</h5>
+              <p>$0</p>
+            </div>
+          </div>
+        </div>
       {% endfor %}
     {% endcall %}
   </section>