From 16b71376a1457f1ad498e9f927366fd7c31d386e Mon Sep 17 00:00:00 2001
From: dandds <dan-ctr@friends.dds.mil>
Date: Wed, 23 Jan 2019 11:06:01 -0500
Subject: [PATCH] add edit button to TO steps, update some styles

---
 styles/sections/_task_order.scss           | 20 ++++++++++++++++
 templates/portfolios/task_orders/show.html | 28 ++++++++++++----------
 2 files changed, 36 insertions(+), 12 deletions(-)

diff --git a/styles/sections/_task_order.scss b/styles/sections/_task_order.scss
index b524158e..dd118de9 100644
--- a/styles/sections/_task_order.scss
+++ b/styles/sections/_task_order.scss
@@ -120,8 +120,19 @@
       width: 100%;
     }
 
+    .task-order-next-steps__panel-head {
+      border-bottom: 1px solid black;
+      padding: ($gap * 4) ($gap * 2);
+      margin: 0;
+    }
+
     .task-order-next-steps__step {
+      border-bottom: 1px dotted $color-gray;
+      padding: ($gap * 4) ($gap * 2);
+      margin: 0;
+
       .task-order-next-steps__icon {
+        width: 8%;
         padding: $gap $gap 0 0;
         justify-content: center;
         .complete {
@@ -133,11 +144,20 @@
       }
 
       .task-order-next-steps__text {
+        width: 60%;
         @include ie-only {
           width: 100%
         }
       }
 
+      .task-order-next-steps__action {
+        padding: $gap 0 0 $gap;
+        width: 32%;
+        a.usa-button {
+          width: 100%;
+        }
+      }
+
       .task-order-next-steps__heading {
         h4 {
           margin: $gap $gap 0 0;
diff --git a/templates/portfolios/task_orders/show.html b/templates/portfolios/task_orders/show.html
index 38dadacf..4a487bf1 100644
--- a/templates/portfolios/task_orders/show.html
+++ b/templates/portfolios/task_orders/show.html
@@ -4,25 +4,22 @@
 
 {% block portfolio_content %}
 
-{% macro Step(title="", description="", link_text=None, link_url=None, complete=True) %}
+{% macro Step(title="", description="", link_text=None, complete=True) %}
   <div class="task-order-next-steps__step panel__content row">
     <div class="task-order-next-steps__icon col">
       <span>{{ Icon("ok", classes="complete" if complete else "incomplete") }}</span>
     </div>
-    <div class="task-order-next-steps__text">
+    <div class="task-order-next-steps__text col">
       <div class="task-order-next-steps__heading row">
         <h4>{{ title }}</h4>
-        {% if link_url %}
-          <a href="{{ link_url }}" class="icon-link">
-            {{ Icon("edit") }}
-            <span>{{ link_text }}</span>
-          </a>
-        {% endif %}
       </div>
       <div class="task-order-next-steps__description">
         {{ description }}
       </div>
     </div>
+    {% if caller %}
+      {{ caller() }}
+    {% endif %}
   </div>
 {% endmacro %}
 
@@ -88,13 +85,20 @@
   <div class="task-order-details">
     <div id="next-steps" class="task-order-next-steps">
       <div class="panel">
-        <h3 class="panel__content">What's next?</h3>
-        {{ Step(
+        <h3 class="task-order-next-steps__panel-head panel__content">What's next?</h3>
+        {% call Step(
           title="Submit draft Task Order",
           description="Complete initial task order request form.",
           link_text="edit",
-          link_url=url_for("task_orders.new", screen=1, task_order_id=task_order.id),
-          complete=True) }}
+          complete=True) %}
+          <div class="task-order-next-steps__action col">
+            <a
+              href="{{ url_for("task_orders.new", screen=1, task_order_id=task_order.id) }}"
+              class="usa-button usa-button-primary">
+                Edit
+            </a>
+          </div>
+        {% endcall %}
         {{ Step(
           title="Complete a Security Requirements Document",
           description="The IA Security Official you specified received an email invitation to complete and sign a DD-254: Security Requirements document that's been customized for the JEDI program here.",