Make steps possible to hide/show

Change-Id: Ice5036ea9801655032cb080537fbd471fb3fda3e
Signed-off-by: Sawyer Bergeron <sbergeron@iol.unh.edu>

1 files changed, 65 insertions, 29 deletions

diff --git a/src/templates/workflow/viewport-base.html b/src/templates/workflow/viewport-base.html
index 1329595..beea7d2 100644
--- a/src/templates/workflow/viewport-base.html
+++ b/src/templates/workflow/viewport-base.html
@@ -52,64 +52,104 @@
     }
 
     #breadcrumbs {
-        padding: 4px;
+        margin-bottom: 0;
     }
+
+    .btn_wrapper {
+        margin: 0;
+    }
+
     .step{
-        background: #DEEED3;
         display: inline;
-        padding: 5px;
+        padding: 7px;
         margin: 1px;
+        font-size: 14pt;
+        cursor: default;
+    }
+    .step:active {
+        -webkit-box-shadow: inherit;
+        box-shadow: inherit;
+    }
+    .step_active:active {
+        -webkit-box-shadow: inherit;
+        box-shadow: inherit;
     }
 
     .step_active{
-        background: #5EC392;
         display: inline;
-        padding: 5px;
+        padding: 7px;
         margin: 1px;
-        font-weight: bold;
+        cursor: default;
+        font-size: 14pt;
+        padding-bottom: 4px !important;
+        border-bottom: 4px solid #41ba78 !important;
     }
 
-    .step_untouched
+    .step_hidden
     {
-        background: #DDDDDD;
+        background: #EFEFEF;
+        color: #999999;
     }
 
-    .step_invalid
+    .step_invalid::after
     {
-        background: #CC3300;
+        content: " \2612";
+        color: #CC3300;
     }
 
-    .step_valid
+    .step_valid::after
     {
-        background: #0FD57D;
+        content: " \2611";
+        color: #41ba78;
     }
 
-    .iframe_div {
+    .step_untouched::after
+    {
+        content: " \2610";
+    }
 
+    .iframe_div {
         width: calc(100% - 450px);
         margin-left: 70px;
         height: calc(100vh - 155px);
         position: absolute;
         border: none;
     }
+
     .iframe_elem {
         width: 100%;
         height: calc(100vh - 155px);
         border: none;
     }
+
+    #breadcrumbs {
+        background-color: inherit;
+    }
+
+    #breadcrumbs.breadcrumb > li {
+        border: 1px solid #cccccc;
+        border-left: none;
+    }
+    #breadcrumbs.breadcrumb > li:first-child {
+        border-left: 1px solid #cccccc;
+    }
+    #breadcrumbs.breadcrumb > li + li:before {
+        content: "";
+        width: 0;
+        margin: 0;
+        padding: 0;
+    }
 </style>
 
-<button id="gof" onclick="go(step+1)" class="btn go_btn go_forward">Go Forward</button>
-<button id="gob" onclick="go(step-1)" class="btn go_btn go_back">Go Back</button>
+<button id="gof" onclick="go('next')" class="btn go_btn go_forward">Go Forward</button>
+<button id="gob" onclick="go('prev')" class="btn go_btn go_back">Go Back</button>
 
 <div class="options">
     <button id="cancel_btn" class="btn btn-primary" onclick="cancel_wf()">Cancel</button>
 </div>
 <div class="btn_wrapper">
-<div id="breadcrumbs" class="btn-group">
-    <div class="btn-group" id="breadcrumb-wrapper">
-    </div>
-</div>
+<ol id="breadcrumbs" class="btn-group breadcrumb">
+</ol>
 </div>
 {% csrf_token %}
 
@@ -153,14 +193,7 @@
                 return;
             }
         }
-        if( to >= page_count )
-        {
-            to = page_count-1;
-        }
-        else if( to < 0 )
-        {
-            to = 0;
-        }
+
         var problem = function() {
             alert("There was a problem");
         }
@@ -271,7 +304,7 @@
     }
 
     function create_step(step_json, active){
-        var step_dom = document.createElement("DIV");
+        var step_dom = document.createElement("li");
         if(active){
             step_dom.className = "step_active";
 
@@ -301,6 +334,10 @@
             stat = "valid";
             msg = step_json['message'];
         }
+        if( step_json['enabled'] == false )
+        {
+            step_dom.classList.add("step_hidden");
+        }
         if(active)
         {
             update_message(msg, stat);
@@ -308,7 +345,6 @@
         step_dom.classList.add("btn");
 
         var step_number = step_json['index'];
-        step_dom.onclick = function(){ go(step_number); }
         return step_dom;
     }