From 51a73fe3e41b154408beffae87ca5d4bfad8aba1 Mon Sep 17 00:00:00 2001
From: Anthony Talarico <talarico@gaslightmedia.com>
Date: Fri, 15 Dec 2017 13:12:42 -0500
Subject: [PATCH] adding progress bar css

adding a pre built status bar that we can start with for now
---
 css/front.css                               | 56 ++++++++++++++++++++-
 views/front/registrations/cart.html         |  7 +++
 views/front/registrations/checkout.html     | 11 +++-
 views/front/registrations/registration.html | 12 +++--
 4 files changed, 80 insertions(+), 6 deletions(-)

diff --git a/css/front.css b/css/front.css
index 8330734..d130e01 100644
--- a/css/front.css
+++ b/css/front.css
@@ -748,7 +748,61 @@ span.glm-error {
     }
     
 }
-
+/* PROGRESS BAR */
+.progress-container {
+/*      width: 600px;*/
+      margin: 10px auto; 
+  }
+  .progressbar {
+      counter-reset: step;
+  }
+  .progressbar li {
+      list-style-type: none;
+      width: 25%;
+      float: left;
+      font-size: 12px;
+      position: relative;
+      text-align: center;
+      text-transform: uppercase;
+      color: #7d7d7d;
+  }
+  .progressbar li:before {
+      width: 30px;
+      height: 30px;
+      content: counter(step);
+      counter-increment: step;
+      line-height: 30px;
+      border: 2px solid #7d7d7d;
+      display: block;
+      text-align: center;
+      margin: 0 auto 10px auto;
+      border-radius: 50%;
+      background-color: white;
+  }
+  .progressbar li:after {
+      width: 100%;
+      height: 2px;
+      content: '';
+      position: absolute;
+      background-color: #7d7d7d;
+      top: 15px;
+      left: -50%;
+      z-index: -1;
+  }
+  .progressbar li:first-child:after {
+      content: none;
+  }
+  .progressbar li.active {
+      color: green;
+  }
+  .progressbar li.active:before {
+      border-color: #55b776;
+      background: #55b776;
+      color: white;
+  }
+  .progressbar li.active + li:after {
+      background-color: #55b776;
+  }
 
 /* Cart Styles */
 #glm-cart-checkout-button {
diff --git a/views/front/registrations/cart.html b/views/front/registrations/cart.html
index 9d4311a..7dbd0a0 100644
--- a/views/front/registrations/cart.html
+++ b/views/front/registrations/cart.html
@@ -12,6 +12,13 @@
     <div id="glm-reg-process-steps" class="glm-row">
         <span>Step 2/3</span>
     </div>
+    <div class="progress-container">
+        <ul class="progressbar">
+          <li>Register</li>
+          <li class="active">View Cart</li>
+          <li>Checkout</li>
+        </ul>
+    </div>
 {/if}
 
 {if $cartPageText}
diff --git a/views/front/registrations/checkout.html b/views/front/registrations/checkout.html
index 8bc2229..bb6329e 100644
--- a/views/front/registrations/checkout.html
+++ b/views/front/registrations/checkout.html
@@ -1,9 +1,16 @@
 {apply_filters('glm_members_registrations_header', 'accountHeader')}
 
 {if true} <!-- if checkout process steps are enabled -->
-    <div id="glm-reg-process-steps" class="glm-row">
-        <span>Step 3/3</span>
+    <div class="progress-container">
+        <ul class="progressbar">
+          <li>Register</li>
+          <li >View Cart</li>
+          <li class="active">Checkout</li>
+        </ul>
     </div>
+<!--    <div id="glm-reg-process-steps" class="glm-row">
+        <span>Step 3/3</span>
+    </div>-->
 {/if}
 
 {if $checkoutPageText}
diff --git a/views/front/registrations/registration.html b/views/front/registrations/registration.html
index 97f4ef1..b9e7cf7 100644
--- a/views/front/registrations/registration.html
+++ b/views/front/registrations/registration.html
@@ -331,11 +331,17 @@ jQuery(document).ready(function($) {
     <h1>{$terms.reg_term_registrations_name}</h1>
     <!-- {include file='front/registrations/header.html'} -->
     {apply_filters('glm_members_registrations_header', 'accountHeader')}
-
+    <div class="progress-container glm-row">
+      <ul class="progressbar">
+          <li class="active">Register</li>
+          <li >View Cart</li>
+          <li>Checkout</li>
+  </ul>
+    </div>
     {if true} <!-- if checkout process steps are enabled -->
-        <div id="glm-reg-process-steps">
+<!--        <div id="glm-reg-process-steps">
             <span>Step 1/3</span>
-        </div>
+        </div>-->
     {/if}
 
     {if $reg_bulletin}
-- 
2.17.1