Restyling account header for mobile/tablet view

diff --git a/css/front.css b/css/front.css
index f951d78..4615d6a 100644 (file)
--- a/css/front.css
+++ b/css/front.css
@@ -113,13 +113,15 @@
 .glm-reg-row-bold {
     font-weight: bold;
 }
-.glm-reg-header-row.glm-cart-summary-event-name-row a { 
-    color: white;
-}
 .glm-reg-header-row.glm-cart-summary-event-name-row {
     background-color: #005779;
     padding: 5px;
-    height: 40px;
+    min-height: 40px;
+    height: auto;
+    float: left;
+}
+.glm-reg-header-row.glm-cart-summary-event-name-row a { 
+    color: white;
 }
 .glm-reg-header-row .glm-cart-summary-event-name {
     display: inline;
@@ -565,6 +567,11 @@ span.glm-error {
 }
 #accountHeader .glm-reg-header-btn{
     font-size: 16px;
+    height: 60px;
+    padding: 20px 20px;
+    border-radius: 0;
+    margin: 0;
+    width: 50%;
 }
 #accountHeader {
     background: -webkit-linear-gradient(top, #f2f2f2 45%, #FFFFFF 100%);
@@ -581,19 +588,45 @@ span.glm-error {
 #accountHeader .accountHeader-section {
 }
 #accountHeader #accountHeader-left {
-    padding-right: 0;
+    width: 33%;
+    padding: 0;
     float: left;
     text-align: left;
-    margin-top: 12px;
+/*    margin-top: 12px;*/
+}
+#accountHeader #accountHeader-left .glm-reg-header-btn {
+    float: left;
+}
+#accountHeader #accountHeader-left .glm-reg-header-btn:first-child {
+    border-top-left-radius: 4px;
+    border-bottom-left-radius: 4px;
+    border-right: 1px solid lightgrey;
+    padding: 10px 20px;
 }
 #accountHeader #accountHeader-center {
     text-align: center;
-    width: 255px;
+    width: 34%;
+    padding: 0;
 }
 #accountHeader #accountHeader-right {
+    padding: 0;
+    width: 33%;
     float: right;
     text-align: right;
-    margin-top: 12px;
+/*    margin-top: 12px;*/
+}
+#accountHeader #accountHeader-right .glm-reg-header-btn:first-child {
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+    border-left: 1px solid lightgrey;
+    float: right;
+}
+
+#accountHeader #accountHeader-right .glm-reg-header-btn:last-child {
+    padding: 10px 20px;
+}
+#accountHeader #accountHeader-right .glm-reg-header-btn {
+    float: right;
 }
 #accountHeader #glm-header-reg-widget {
     font-size: 14px;
@@ -606,6 +639,56 @@ span.glm-error {
     min-height: 60px;
     width: 100%;
 }
+
+@media(max-width: 1024px) {
+    #accountHeader {
+        max-width: 300px;
+    }
+    #accountHeader .accountHeader-section {
+        margin-bottom: 0;
+    }
+    #accountHeader #accountHeader-left {
+        width: 100%;
+    }
+    #accountHeader #accountHeader-center {
+        width: 100%;
+    }
+    #accountHeader #accountHeader-right {
+        width: 100%;
+    }
+    #accountHeader #accountHeader-center #glm-header-reg-widget {
+        margin: 0;
+    }
+    #accountHeader #accountHeader-left .glm-reg-header-btn,
+    #accountHeader #accountHeader-right .glm-reg-header-btn {
+        width: 100%;
+        height: 50px;
+        padding: 12px;
+        border-radius: 0;
+        border: 0;
+    }
+    #accountHeader #accountHeader-left .glm-reg-header-btn:first-child {
+        border-right: 0;
+        border-bottom: 1px solid lightgrey;
+        border-top-left-radius: 4px;
+        border-top-right-radius: 4px;
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+    }
+    #accountHeader #accountHeader-right .glm-reg-header-btn:first-child {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+        border-left: 0;
+    }
+    #accountHeader #accountHeader-right .glm-reg-header-btn:last-child {
+        border-left: 0;
+        border-top: 1px solid lightgrey;
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+        border-bottom-left-radius: 4px;
+        border-bottom-right-radius: 4px;
+    }
+}
 #registrations-cart-link-title {
     font-size: 16px;
     border-bottom: 1px solid lightgrey;
@@ -613,19 +696,13 @@ span.glm-error {
     width: 100%;
 }
 #registrations-cart-link-data {
-    padding: 0.625rem 1.25rem 0.6875rem 1.25rem;
+    padding: 5px;
     width: 100%;
 }
 .reg-class-time:not(:last-child){
     border-bottom: 1px solid lightgrey;
 }
 @media(max-width: 1024px) {
-    #accountHeader .accountHeader-section {
-        margin-bottom: 10px;
-    }
-    #glm-header-reg-widget{
-        margin-bottom: 15px;
-    }
     #glm-header-reg-widget a{
         display: block;
     }
@@ -659,10 +736,6 @@ span.glm-error {
         margin-left: 0;
     }
 }
-#accountHeader .button {
-    border-radius: 3px;
-    margin-bottom: 0;
-}
 #reg_bulletin {
     max-width: 1024px;
     margin: 10px auto;
@@ -672,10 +745,6 @@ span.glm-error {
     margin-bottom: 10px;
 }
 @media(max-width: 640px){
-    #accountHeader .button {
-        margin-bottom: 5px;
-    }
-
     .glm-reg-image-container {
         text-align: left;
     }
@@ -704,25 +773,6 @@ span.glm-error {
     .glm-reg-account-info,.glm-reg-billing-info {
         padding: 0;
     }
-    #accountHeader #accountHeader-center {
-        text-align: center;
-        float: none;
-        width: 255px;
-        margin: 0 auto;
-    }
-    #accountHeader #accountHeader-left {
-        float: none;
-        text-align: left;
-        max-width: 425px;
-        margin: 10px auto;
-    }
-    #accountHeader #accountHeader-right {
-        float: none;
-        text-align: center;
-        max-width: 425px;
-        margin: 10px auto;
-        clear: both;
-    }
 }
 
 @media(min-width: 1024px){
@@ -837,4 +887,36 @@ span.glm-error {
 }
 .glm-reg-checkout-field-data {
     padding: 0;
-}
\ No newline at end of file
+}
+
+/* Progress Bar */
+/*#glm-reg-progress-bar {
+    width: 100%;
+    margin: 10px auto;
+    border-radius: 6px;
+    border: 2px solid lightgrey;
+    background-color: white;
+    height: 30px;
+    overflow: hidden;
+    
+}
+.glm-reg-progress-bar-section {
+    height: 30px;
+    float: left;
+    text-align: center;
+    color: #005779;
+}
+.glm-reg-progress-bar-section.one-third {
+    background-color: aqua;
+    content: "one third";
+    width: 33.3%;
+}
+.glm-reg-progress-bar-section.two-thirds {
+    background-color: aquamarine;
+    content: "test";
+    width: 33.4%;
+}
+.glm-reg-progress-bar-section.three-thirds {
+    background-color: yellowgreen;
+    width: 33.3%;
+}*/

diff --git a/views/front/registrations/accountHeader.html b/views/front/registrations/accountHeader.html
index d9a7238..96fc21d 100644 (file)
--- a/views/front/registrations/accountHeader.html
+++ b/views/front/registrations/accountHeader.html
@@ -1,17 +1,20 @@
 <div id="accountHeader" class="row">
     
-    <div id="accountHeader-left" class="accountHeader-section small-12 medium-10 medium-centered large-5 large-uncentered columns">
+    <div id="accountHeader-left" class="accountHeader-section small-12 medium-12 medium-centered large-5 large-uncentered columns">
         {if $page != 'register'}
-            <a href="{$regUrl}" class="button tiny glm-reg-header-btn">Register for Another Event</a>
+            <a href="{$regUrl}" class="button tiny glm-reg-header-btn">
+                <span>Register for Another Event</span>
+            </a>
         {/if}
         {if $page != 'cart'}
-            <a href="{$regUrl}?page=cart" class="button tiny glm-reg-header-btn">Return to Cart</a>
+            <a href="{$regUrl}?page=cart" class="button tiny glm-reg-header-btn">
+                <span>Return to Cart</span>
+            </a>
         {/if}
-        &nbsp;
     </div>
-    <div id="accountHeader-center" class="accountHeader-section small-12 medium-10 medium-centered large-3 large-uncentered columns">
+    <div id="accountHeader-center" class="accountHeader-section small-12 medium-12 medium-centered large-3 large-uncentered columns">
         <div id="glm-header-reg-widget">
-            {if $haveCart}
+            {if $haveCart && $numb_registrants > 0 && $numb_events > 0}
                 <a href="{$cartUrl}">
                     <div id="registrations-cart-link-widget">
                         <div id="registrations-cart-link-title">CART</div>
@@ -64,13 +67,17 @@
             {/if}
         </div>
     </div>
-    <div id="accountHeader-right" class="accountHeader-section small-12 medium-10 medium-centered large-4 large-uncentered columns">
+    <div id="accountHeader-right" class="accountHeader-section small-12 medium-12 medium-centered large-4 large-uncentered columns">
     {if $loggedIn}
         Logged in as {$loggedIn.fname} {$loggedIn.lname}
         <a class="button tiny" href="{$regUrl}?page=login&option=logout">Logout</a>
     {else}
-        <a id="appLogin" class="button tiny glm-reg-header-btn" href="{$regUrl}?page=login">Login</a>
-        <a id="register" class="button tiny glm-reg-header-btn" href="{$regUrl}?page=register">Create an Account</a>
+        <a id="appLogin" class="button tiny glm-reg-header-btn" href="{$regUrl}?page=login">
+            <span>Login</span>
+        </a>
+        <a id="register" class="button tiny glm-reg-header-btn" href="{$regUrl}?page=register">
+            <span>Create an Account</span>
+        </a>
     {/if}
     </div>
 

diff --git a/views/front/registrations/cart.html b/views/front/registrations/cart.html
index c07539c..9a7b2a9 100644 (file)
--- a/views/front/registrations/cart.html
+++ b/views/front/registrations/cart.html
@@ -9,18 +9,15 @@
     </div>
   {/if}-->
 {if true} <!-- if checkout process steps are enabled -->
-    <div id="glm-reg-process-steps" class="glm-row">
-<!--        <span>Step 2/3</span>-->
-    </div>
-    <div class="row">
-        <div class="progress-container columns">
-            <ul class="progressbar">
-              <li>Register</li>
-              <li class="active">View Cart</li>
-              <li>Checkout</li>
-            </ul>
-        </div>
+<div class="row">
+    <div class="progress-container">
+        <ul class="progressbar">
+          <li>Register</li>
+          <li class="active">View Cart</li>
+          <li>Checkout</li>
+        </ul>
     </div>
+</div>
 {/if}
 
 {if $cartPageText}

diff --git a/views/front/registrations/cartSummary.html b/views/front/registrations/cartSummary.html
index e61456f..d38874e 100644 (file)
--- a/views/front/registrations/cartSummary.html
+++ b/views/front/registrations/cartSummary.html
@@ -56,7 +56,7 @@
     {/if}
                 </div>
             </div>
-    {if $registrant.registrantDiscounts == 0}
+    {if $registrant.registrantDiscounts > 0}
             <div class="glm-reg-row glm-reg-indent-2 glm-reg-cart-registrant-discount">
                 <div class="glm-small-8 glm-medium-8 glm-column glm-reg-cart-label">
                     Registrant Discount