Responsive/style fixes on registration, cart, checkout, summary

diff --git a/css/front.css b/css/front.css
index 2e54922..6bda288 100644 (file)
--- a/css/front.css
+++ b/css/front.css
@@ -113,7 +113,21 @@
 .glm-reg-row-bold {
     font-weight: bold;
 }
-.glm-reg-headder-row {
+.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;
+}
+.glm-reg-header-row .glm-cart-summary-event-name {
+    display: inline;
+    font-size: 22px;
+    font-weight: bold;
+    color: white;
+}
+.glm-reg-header-row {
     clear: both;
     background-color: #eee;
     height: 2rem;
@@ -130,15 +144,6 @@
 }
 /*}}} end of tampering */
 
-.glm-reg-cart-container {
-    clear: both;
-    border: solid 1px black;
-    background-color: white;
-    margin: 1rem auto;
-    max-width: 64rem;
-    font-size: 0.875rem;
-}
-
 /*{{{ Event Registration List */
 #glm-reg-list{
     max-width: 800px;
@@ -146,9 +151,11 @@
 #glm-reg-list h3 a {
     text-transform: uppercase;
 }
-.glm-reg-event-list {
+#glm-reg-detail {
     width: 100%;
     padding: 0;
+    max-width: 64rem;
+    margin: 0 auto;
 }
 .glm-reg-list-details{
     padding: 0;
@@ -202,6 +209,7 @@
 }
 .glm-reg-level {
     margin-bottom: 25px;
+    padding: 0 15px;
     /* width: 48%; */
     /* float: left; */
     /* clear: left; */
@@ -320,7 +328,7 @@ body .glm-reg-proceed-to-checkout{
     font-size: 16px !important;
 }
 .reg-class-detail {
-    /* display: none; */
+    display: none; 
     padding: 5px 10px;
 }
 .toggle-class-open {
@@ -739,4 +747,40 @@ span.glm-error {
     
     }
     
+}
+
+
+/* Cart Styles */
+#glm-cart-checkout-button {
+    
+}
+.button.glm-reg-button {
+    font-size: 16px;
+}
+.glm-reg-cart-container {
+    clear: both;
+    border: solid 1px black;
+    background-color: white;
+    margin: 1rem auto;
+    max-width: 64rem;
+    font-size: 0.875rem;
+}
+.glm-reg-cart-event-container {
+    padding-bottom: 20px
+}
+.glm-reg-cart-event-class > div {
+    font-size: 16px;
+    text-decoration: underline;
+}
+.glm-reg-cart-registrant {
+
+}
+
+/* Checkout styles */
+.glm-reg-checkout-field-label {
+    font-size: 14px;
+    padding: 0;
+}
+.glm-reg-checkout-field-data {
+    padding: 0;
 }
\ No newline at end of file

diff --git a/views/front/registrations/cart.html b/views/front/registrations/cart.html
index 3bc74cf..65031fb 100644 (file)
--- a/views/front/registrations/cart.html
+++ b/views/front/registrations/cart.html
@@ -8,6 +8,12 @@
         <div class="glm-reg-warning">You have not yet submitted your registration! <img src="{$assetUrl}/fingerRightRed.svg" style="height: 2em;"> <a href="{$regUrl}?page=checkout" class="button tiny">Proceed to Checkout</a></div>
     </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>
+{/if}
+
 {if $cartPageText}
 <div id="cart-page-text" class="glm-row">
     {$cartPageText}
@@ -39,8 +45,8 @@
         <div class="glm-reg-warning">You have not yet submitted your registration. See above notes! <img src="{$assetUrl}/fingerUpRed.svg" style="height: 2em;"></div>
     </div>
   {else}
-    <div class="glm-right">
-        <div class="glm-reg-warning">You have not yet submitted your registration! <img src="{$assetUrl}/fingerRightRed.svg" style="height: 2em;"> <a href="{$regUrl}?page=checkout" class="button tiny glm-reg-proceed-to-checkout">Proceed to Checkout</a></div>
+    <div id="glm-cart-checkout-button" class="glm-right">
+        <div class="glm-reg-warning">You have not yet submitted your registration! <img src="{$assetUrl}/fingerRightRed.svg" style="height: 2em;"> <a href="{$regUrl}?page=checkout" class="button tiny glm-reg-button">Proceed to Checkout</a></div>
     </div>
   {/if}
     

diff --git a/views/front/registrations/cartSummary.html b/views/front/registrations/cartSummary.html
index b3305b6..a27ccd3 100644 (file)
--- a/views/front/registrations/cartSummary.html
+++ b/views/front/registrations/cartSummary.html
@@ -1,9 +1,10 @@
     <div class="glm-reg-cart-container">
 {foreach $cart.events as $event}
-        <div class="glm-reg-row glm-reg-headder-row">
-            <div class="glm-small-12 glm-column">
+        <div class="glm-reg-cart-event-container">
+            <div class="glm-reg-row glm-reg-header-row glm-cart-summary-event-name-row">
+                <div class="glm-small-12 glm-column">
  {if $summaryType=="cart"}
-                <a href="{$regUrl}?page=registration&eventRegId={$event.reg_event}"><span class="dashicons dashicons-edit"></span></a>
+                    <a href="{$regUrl}?page=registration&eventRegId={$event.reg_event}"><span class="dashicons dashicons-edit"></span></a>
  {/if}
  {if $summaryType=="checkout"}
     {assign var="summaryClass2Col" value="glm-small-12 "}
@@ -14,86 +15,87 @@
     {assign var="summaryClass3Col" value="glm-small-12 glm-medium-3 "}
     {assign var="summaryClass4Col" value="glm-small-12 glm-medium-4 "}
  {/if}
-                {$event.event_name}
+                    <span class="glm-cart-summary-event-name">{$event.event_name}</span>
+                </div>
             </div>
-        </div>
  {foreach $event.classes as $class}
-        <div class="glm-reg-row">
-            <div class="glm-small-12 glm-column">
-                {$class.class_name}
+            <div class="glm-reg-row glm-reg-cart-event-class">
+                <div class="glm-small-12 glm-column">
+                    {$class.class_name}
+                </div>
             </div>
-        </div>
   {foreach $class.rates as $rate}
    {if $rate.rateBaseCharge > 0}
-        <div class="glm-reg-row glm-reg-indent-1">
-            <div class="glm-small-8 glm-medium-8 glm-column">
-                Base Rate:
-            </div>
-            <div class="glm-small-4 glm-medium-4 glm-column glm-reg-right">
-                ${$rate.rateBaseCharge|number_format:2}
+            <div class="glm-reg-row glm-reg-indent-1 glm-reg-cart-class-rate">
+                <div class="glm-small-8 glm-medium-8 glm-column glm-reg-cart-label">
+                    Base Rate:
+                </div>
+                <div class="glm-small-4 glm-medium-4 glm-column glm-reg-right glm-reg-cart-data">
+                    ${$rate.rateBaseCharge|number_format:2}
+                </div>
             </div>
-        </div>
    {/if}
    {foreach $rate.registrants as $registrant}
-        <div class="glm-reg-row glm-reg-indent-1">
-            <div class="{$summaryClass2Col} glm-reg-row-bold">
-                {$registrant.fname} {$registrant.lname}
-            </div>
-            <div class="{$summaryClass3Col} glm-column glm-reg-space-left">
-                {$registrant.timeReformatted}
-            </div>
-            <div class="{$summaryClass4Col} glm-column glm-reg-space-left">
-                Cookies and Milk (temp test data)
-            </div>
-            <div class="{$summaryClass3Col} glm-column glm-reg-right">
+            <div class="glm-reg-row glm-reg-indent-1 glm-reg-cart-registrant">
+                <div class="{$summaryClass2Col} glm-reg-row-bold">
+                    {$registrant.fname} {$registrant.lname}
+                </div>
+                <div class="{$summaryClass3Col} glm-column glm-reg-space-left">
+                    {$registrant.timeReformatted}
+                </div>
+                <div class="{$summaryClass6Col} glm-column glm-reg-space-left">
+                    Cookies and Milk (temp test data)
+                </div>
+                <div class="{$summaryClass3Col} glm-column glm-reg-right">
     {if $registrant.registrantRate > 0}
                         ${$registrant.registrantRate|number_format:2}
     {else}
                         (included)
     {/if}
+                </div>
             </div>
-        </div>
     {if $registrant.registrantDiscounts == 0}
-        <div class="glm-reg-row glm-reg-indent-2">
-            <div class="glm-small-8 glm-medium-8 glm-column">
-                Registrant Discount
+            <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
+                </div>
+                <div class="glm-small-4 glm-medium-4 glm-column glm-reg-right glm-reg-cart-data">
+                    -${$registrant.registrantDiscounts|number_format:2}
+                </div>
             </div>
-            <div class="glm-small-4 glm-medium-4 glm-column glm-reg-right">
-                -${$registrant.registrantDiscounts|number_format:2}
-            </div>
-        </div>
     {/if}
    {/foreach} {* registrants *} 
   {/foreach} {* rates *}
  {/foreach} {* classes *}
-        <div class="glm-reg-row">
-            <div class="glm-small-8 glm-medium-8 glm-column glm-reg-right">
-                Event Discounts
-            </div>
-            <div class="glm-small-4 glm-medium-4 glm-column glm-reg-right">
-                 ${$event.eventDiscounts|number_format:2}
-            </div>
+            <div class="glm-reg-row glm-reg-cart-event-discount">
+                <div class="glm-small-8 glm-medium-8 glm-column glm-reg-right glm-reg-cart-label">
+                    Event Discounts
+                </div>
+                <div class="glm-small-4 glm-medium-4 glm-column glm-reg-right glm-reg-cart-data">
+                     ${$event.eventDiscounts|number_format:2}
+                </div>
+            </div>
+            <div class="glm-reg-row glm-reg-row-bold glm-reg-cart-event-registrants">
+                <div class="glm-small-8 glm-medium-8 glm-column glm-reg-right glm-reg-cart-label">
+                    Registrants: {$event.eventRegistrants}
+                </div>
+                <div class="glm-small-4 glm-medium-4 glm-column glm-reg-right glm-reg-cart-data">
+                    ${$event.eventCharges|number_format:2}
+                </div>
+            </div> 
         </div>
-        <div class="glm-reg-row glm-reg-row-bold">
-            <div class="glm-small-8 glm-medium-8 glm-column glm-reg-right">
-                Registrants: {$event.eventRegistrants}
-            </div>
-            <div class="glm-small-4 glm-medium-4 glm-column glm-reg-right">
-                ${$event.eventCharges|number_format:2}
-            </div>
-        </div> 
 {/foreach} {* events *}
-        <div class="glm-reg-row glm-reg-headder-row">
+        <div class="glm-reg-row glm-reg-header-row glm-reg-cart-request-totals">
             <div class="glm-small-12 glm-medium-12 glm-column">
                 Registration Request Totals
             </div>        
         </div>
 {if $cart.totalDiscounts == 0}
-        <div class="glm-reg-row">
-            <div class="glm-small-8 glm-medium-8 glm-column glm-reg-right">
+        <div class="glm-reg-row glm-reg-cart-total-discounts">
+            <div class="glm-small-8 glm-medium-8 glm-column glm-reg-right glm-reg-cart-label">
                 Total Discounts
             </div>
-            <div class="glm-small-4 glm-medium-4 glm-column glm-reg-right">
+            <div class="glm-small-4 glm-medium-4 glm-column glm-reg-right glm-reg-cart-data">
                 ${$cart.totalDiscounts|number_format:2}
             </div>
         </div>

diff --git a/views/front/registrations/checkout.html b/views/front/registrations/checkout.html
index a9f8fc4..4620a97 100644 (file)
--- a/views/front/registrations/checkout.html
+++ b/views/front/registrations/checkout.html
@@ -1,5 +1,11 @@
 {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>
+{/if}
+
 {if $checkoutPageText}
     <div id="checkout-page-text" class="glm-row">
         {$checkoutPageText}
@@ -38,58 +44,58 @@
                 <div class="glm-large-6 glm-small-12 glm-columns">
                     <div class="glm-reg-account-info">
                         <h4>Account Information</h4>
-      {if $regAccountId == 0}
-                        <div class="glm-reg-row">
-                            <div class="glm-small-12 glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.email} glm-reg-required{/if}">E-Mail Address:</div>
-                            <div class="glm-small-12 glm-large-9 glm-columns{if $regAccount.fieldFail.email} glm-reg-fail{/if}"><input type="email" name="email" value="{$regAccount.fieldData.email}"{if $regAccount.fieldRequired.email} required{/if}></div>
+      {if $regAccountId == 0 || true}
+                        <div class="glm-reg-row glm-reg-account-field">
+                            <div class="glm-reg-checkout-field-label glm-small-12 glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.email} glm-reg-required{/if}">E-Mail Address:</div>
+                            <div class="glm-reg-checkout-field-data glm-small-12 glm-large-9 glm-columns{if $regAccount.fieldFail.email} glm-reg-fail{/if}"><input type="email" name="email" value="{$regAccount.fieldData.email}"{if $regAccount.fieldRequired.email} required{/if}></div>
                         </div>
-                        <div class="glm-reg-row">
-                            <div class="glm-small-12 glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.password} glm-reg-required{/if}">Password:</div>
-                            <div class="glm-small-12 glm-large-9 glm-columns{if $regAccount.fieldFail.password} glm-reg-fail{/if}">
+                        <div class="glm-reg-row glm-reg-account-field">
+                            <div class="glm-reg-checkout-field-label glm-small-12 glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.password} glm-reg-required{/if}">Password:</div>
+                            <div class="glm-reg-checkout-field-data glm-small-12 glm-large-9 glm-columns{if $regAccount.fieldFail.password} glm-reg-fail{/if}">
                                 <input type="text" name="password" value="{$regAccount.fieldData.password}"{if $regAccount.fieldRequired.password} required{/if} title="Must be at least 8 characters long and contain at least one number and one puncuation character such as one of these #.-_,$%&!">
                                 <p>A password is required to access your registrations and submissions in the future. A suggested password has been supplied.</p>
                             </div>
                         </div>
       {else}
-                        <div class="glm-reg-row">
-                            <div class="glm-small-12 glm-large-3 glm-columns glm-reg-nowrap">E-Mail Address:</div>
-                            <div class="glm-small-12 glm-large-9 glm-columns">
+                        <div class="glm-reg-row glm-reg-account-field">
+                            <div class="glm-reg-checkout-field-label glm-small-12 glm-large-3 glm-columns glm-reg-nowrap">E-Mail Address:</div>
+                            <div class="glm-reg-checkout-field-data glm-small-12 glm-large-9 glm-columns">
                                 {$regAccount.fieldData.email}
                                 <input type="hidden" name="email" value="{$regAccount.fieldData.email}"> {* Required to keep E-Mail address from being cleared *}
                             </div>
                         </div>
       {/if}
-                        <div class="glm-reg-row">
-                            <div class="glm-small-12 glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.fname} glm-reg-required{/if}">First Name:</div>
-                            <div class="glm-small-12 glm-large-9 glm-columns{if $regAccount.fieldFail.fname} glm-reg-fail{/if}"><input type="text" name="fname" value="{$regAccount.fieldData.fname}"{if $regAccount.fieldRequired.fname} required{/if}></div>
+                        <div class="glm-reg-row glm-reg-account-field">
+                            <div class="glm-reg-checkout-field-label glm-small-12 glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.fname} glm-reg-required{/if}">First Name:</div>
+                            <div class="glm-reg-checkout-field-data glm-small-12 glm-large-9 glm-columns{if $regAccount.fieldFail.fname} glm-reg-fail{/if}"><input type="text" name="fname" value="{$regAccount.fieldData.fname}"{if $regAccount.fieldRequired.fname} required{/if}></div>
                         </div>
-                        <div class="glm-reg-row">
-                            <div class="glm-small-12 glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.lname} glm-reg-required{/if}">Last Name:</div>
-                            <div class="glm-small-12 glm-large-9 glm-columns{if $regAccount.fieldFail.lname} glm-reg-fail{/if}"><input type="text" name="lname" value="{$regAccount.fieldData.lname}"{if $regAccount.fieldRequired.lname} required{/if}></div>
+                        <div class="glm-reg-row glm-reg-account-field">
+                            <div class="glm-reg-checkout-field-label glm-small-12 glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.lname} glm-reg-required{/if}">Last Name:</div>
+                            <div class="glm-reg-checkout-field-data glm-small-12 glm-large-9 glm-columns{if $regAccount.fieldFail.lname} glm-reg-fail{/if}"><input type="text" name="lname" value="{$regAccount.fieldData.lname}"{if $regAccount.fieldRequired.lname} required{/if}></div>
                         </div>
-                        <div class="glm-reg-row">
-                            <div class="glm-small-12 glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.org} glm-reg-required{/if}">Organization:</div>
-                            <div class="glm-small-12 glm-large-9 glm-columns{if $regAccount.fieldFail.org} glm-reg-fail{/if}"><input type="text" name="org" value="{$regAccount.fieldData.org}"{if $regAccount.fieldRequired.org} required{/if}></div>
+                        <div class="glm-reg-row glm-reg-account-field">
+                            <div class="glm-reg-checkout-field-label glm-small-12 glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.org} glm-reg-required{/if}">Organization:</div>
+                            <div class="glm-reg-checkout-field-data glm-small-12 glm-large-9 glm-columns{if $regAccount.fieldFail.org} glm-reg-fail{/if}"><input type="text" name="org" value="{$regAccount.fieldData.org}"{if $regAccount.fieldRequired.org} required{/if}></div>
                         </div>
-                        <div class="glm-reg-row">
-                            <div class="glm-small-12 glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.title} glm-reg-required{/if}">Title:</div>
-                            <div class="glm-small-12 glm-large-9 glm-columns{if $regAccount.fieldFail.title} glm-reg-fail{/if}"><input type="text" name="title" value="{$regAccount.fieldData.title}"{if $regAccount.fieldRequired.title} required{/if}></div>
+                        <div class="glm-reg-row glm-reg-account-field">
+                            <div class="glm-reg-checkout-field-label glm-small-12 glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.title} glm-reg-required{/if}">Title:</div>
+                            <div class="glm-reg-checkout-field-data glm-small-12 glm-large-9 glm-columns{if $regAccount.fieldFail.title} glm-reg-fail{/if}"><input type="text" name="title" value="{$regAccount.fieldData.title}"{if $regAccount.fieldRequired.title} required{/if}></div>
                         </div>
-                        <div class="glm-reg-row">
-                            <div class="glm-small-12 glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.addr1} glm-reg-required{/if}">Address:</div>
-                            <div class="glm-small-12 glm-large-9 glm-columns{if $regAccount.fieldFail.addr1} glm-reg-fail{/if}"><input type="text" name="addr1" value="{$regAccount.fieldData.addr1}"{if $regAccount.fieldRequired.addr1} required{/if}></div>
+                        <div class="glm-reg-row glm-reg-account-field">
+                            <div class="glm-reg-checkout-field-label glm-small-12 glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.addr1} glm-reg-required{/if}">Address:</div>
+                            <div class="glm-reg-checkout-field-data glm-small-12 glm-large-9 glm-columns{if $regAccount.fieldFail.addr1} glm-reg-fail{/if}"><input type="text" name="addr1" value="{$regAccount.fieldData.addr1}"{if $regAccount.fieldRequired.addr1} required{/if}></div>
                         </div>
-                        <div class="glm-reg-row">
-                            <div class="glm-small-12 glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.addr2} glm-reg-required{/if}">&nbsp;</div>
-                            <div class="glm-small-12 glm-large-9 glm-columns{if $regAccount.fieldFail.addr2} glm-reg-fail{/if}"><input type="text" name="addr2" value="{$regAccount.fieldData.addr2}"{if $regAccount.fieldRequired.addr2} required{/if}></div>
+                        <div class="glm-reg-row glm-reg-account-field">
+                            <div class="glm-reg-checkout-field-label glm-small-12 glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.addr2} glm-reg-required{/if}">&nbsp;</div>
+                            <div class="glm-reg-checkout-field-data glm-small-12 glm-large-9 glm-columns{if $regAccount.fieldFail.addr2} glm-reg-fail{/if}"><input type="text" name="addr2" value="{$regAccount.fieldData.addr2}"{if $regAccount.fieldRequired.addr2} required{/if}></div>
                         </div>
-                        <div class="glm-reg-row">
-                            <div class="glm-small-12 glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.city} glm-reg-required{/if}">City:</div>
-                            <div class="glm-small-12 glm-large-9 glm-columns{if $regAccount.fieldFail.city} glm-reg-fail{/if}"><input type="text" name="city" value="{$regAccount.fieldData.city}"{if $regAccount.fieldRequired.city} required{/if}></div>
+                        <div class="glm-reg-row glm-reg-account-field">
+                            <div class="glm-reg-checkout-field-label glm-small-12 glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.city} glm-reg-required{/if}">City:</div>
+                            <div class="glm-reg-checkout-field-data glm-small-12 glm-large-9 glm-columns{if $regAccount.fieldFail.city} glm-reg-fail{/if}"><input type="text" name="city" value="{$regAccount.fieldData.city}"{if $regAccount.fieldRequired.city} required{/if}></div>
                         </div>
-                        <div class="glm-reg-row">
-                            <div class="glm-small-12 glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.state} glm-reg-required{/if}">State/Province:</div>
-                            <div class="glm-small-12 glm-large-9 glm-columns{if $regAccount.fieldFail.state} glm-reg-fail{/if}">
+                        <div class="glm-reg-row glm-reg-account-field">
+                            <div class="glm-reg-checkout-field-label glm-small-12 glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.state} glm-reg-required{/if}">State/Province:</div>
+                            <div class="glm-reg-checkout-field-data glm-small-12 glm-large-9 glm-columns{if $regAccount.fieldFail.state} glm-reg-fail{/if}">
                                 <select name="state">
                                     <option value=""></option>
                         {foreach $regAccount.fieldData.state.list as $s}
@@ -100,13 +106,13 @@
                                 </select>
                             </div>
                         </div>
-                        <div class="glm-reg-row">
-                            <div class="glm-small-12 glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.zip} glm-reg-required{/if}">Zip/Postal Code:</div>
-                            <div class="glm-small-12 glm-large-9 glm-columns{if $regAccount.fieldFail.zip} glm-reg-fail{/if}"><input type="text" name="zip" value="{$regAccount.fieldData.zip}"{if $regAccount.fieldRequired.zip} required{/if}></div>
+                        <div class="glm-reg-row glm-reg-account-field">
+                            <div class="glm-reg-checkout-field-label glm-small-12 glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.zip} glm-reg-required{/if}">Zip/Postal Code:</div>
+                            <div class="glm-reg-checkout-field-data glm-small-12 glm-large-9 glm-columns{if $regAccount.fieldFail.zip} glm-reg-fail{/if}"><input type="text" name="zip" value="{$regAccount.fieldData.zip}"{if $regAccount.fieldRequired.zip} required{/if}></div>
                         </div>
-                        <div class="glm-reg-row">
-                            <div class="glm-small-12 glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.country} glm-reg-required{/if}">Country:</div>
-                            <div class="glm-small-12 glm-large-9 glm-columns{if $regAccount.fieldFail.country} glm-reg-fail{/if}">
+                        <div class="glm-reg-row glm-reg-account-field">
+                            <div class="glm-reg-checkout-field-label glm-small-12 glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.country} glm-reg-required{/if}">Country:</div>
+                            <div class="glm-reg-checkout-field-data glm-small-12 glm-large-9 glm-columns{if $regAccount.fieldFail.country} glm-reg-fail{/if}">
                                 <select name="country">
                                     <option value=""></option>
                         {foreach $regAccount.fieldData.country.list as $c}
@@ -123,28 +129,28 @@
                         <div class="glm-reg-row"><div class="glm-small-12 glm-columns"><h4>Billing Information</h4></div></div>
                         <div class="glm-reg-row"><div class="glm-small-12 glm-columns"><input id="glm-reg-bill-same" checked type="checkbox" name="billing_same" value="1"{if $regAccount.billingSame} checked{/if}>&nbsp;Same as Account Information</div></div>
                         <div class="glm-reg-row glm-reg-bill-field glm-hidden">
-                            <div class="glm-small-12 glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.bill_fname} glm-reg-required{/if}">First Name:</div>
-                            <div class="glm-small-12 glm-large-9 glm-columns{if $regAccount.fieldFail.bill_fname} glm-reg-fail{/if}"><input type="text" name="bill_fname" value="{$regAccount.fieldData.bill_fname}"{if $regAccount.fieldRequired.bill_fname} required{/if}></div>
+                            <div class="glm-reg-checkout-field-label glm-small-12 glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.bill_fname} glm-reg-required{/if}">First Name:</div>
+                            <div class="glm-reg-checkout-field-data glm-small-12 glm-large-9 glm-columns{if $regAccount.fieldFail.bill_fname} glm-reg-fail{/if}"><input type="text" name="bill_fname" value="{$regAccount.fieldData.bill_fname}"{if $regAccount.fieldRequired.bill_fname} required{/if}></div>
                         </div>
                         <div class="glm-reg-row glm-reg-bill-field glm-hidden">
-                            <div class="glm-small-12 glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.bill_lname} glm-reg-required{/if}">Last Name:</div>
-                            <div class="glm-small-12 glm-large-9 glm-columns{if $regAccount.fieldFail.bill_lname} glm-reg-fail{/if}"><input type="text" name="bill_lname" value="{$regAccount.fieldData.bill_lname}"{if $regAccount.fieldRequired.bill_lname} required{/if}></div>
+                            <div class="glm-reg-checkout-field-label glm-small-12 glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.bill_lname} glm-reg-required{/if}">Last Name:</div>
+                            <div class="glm-reg-checkout-field-data glm-small-12 glm-large-9 glm-columns{if $regAccount.fieldFail.bill_lname} glm-reg-fail{/if}"><input type="text" name="bill_lname" value="{$regAccount.fieldData.bill_lname}"{if $regAccount.fieldRequired.bill_lname} required{/if}></div>
                         </div>
                         <div class="glm-reg-row glm-reg-bill-field glm-hidden">
-                            <div class="glm-small-12 glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.bill_addr1} glm-reg-required{/if}">Address:</div>
-                            <div class="glm-small-12 glm-large-9 glm-columns{if $regAccount.fieldFail.bill_addr1} glm-reg-fail{/if}"><input type="text" name="bill_addr1" value="{$regAccount.fieldData.bill_addr1}"{if $regAccount.fieldRequired.bill_addr1} required{/if}></div>
+                            <div class="glm-reg-checkout-field-label glm-small-12 glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.bill_addr1} glm-reg-required{/if}">Address:</div>
+                            <div class="glm-reg-checkout-field-data glm-small-12 glm-large-9 glm-columns{if $regAccount.fieldFail.bill_addr1} glm-reg-fail{/if}"><input type="text" name="bill_addr1" value="{$regAccount.fieldData.bill_addr1}"{if $regAccount.fieldRequired.bill_addr1} required{/if}></div>
                         </div>
                         <div class="glm-reg-row glm-reg-bill-field glm-hidden">
-                            <div class="glm-small-12 glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.bill_addr2} glm-reg-required{/if}">&nbsp;</div>
-                            <div class="glm-small-12 glm-large-9 glm-columns{if $regAccount.fieldFail.bill_addr2} glm-reg-fail{/if}"><input type="text" name="bill_addr2" value="{$regAccount.fieldData.bill_addr2}"{if $regAccount.fieldRequired.bill_addr2} required{/if}></div>
+                            <div class="glm-reg-checkout-field-label glm-small-12 glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.bill_addr2} glm-reg-required{/if}">&nbsp;</div>
+                            <div class="glm-reg-checkout-field-data glm-small-12 glm-large-9 glm-columns{if $regAccount.fieldFail.bill_addr2} glm-reg-fail{/if}"><input type="text" name="bill_addr2" value="{$regAccount.fieldData.bill_addr2}"{if $regAccount.fieldRequired.bill_addr2} required{/if}></div>
                         </div>
                         <div class="glm-reg-row glm-reg-bill-field glm-hidden">
-                            <div class="glm-small-12 glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.bill_city} glm-reg-required{/if}">City:</div>
-                            <div class="glm-small-12 glm-large-9 glm-columns{if $regAccount.fieldFail.bill_city} glm-reg-fail{/if}"><input type="text" name="bill_city" value="{$regAccount.fieldData.bill_city}"{if $regAccount.fieldRequired.bill_city} required{/if}></div>
+                            <div class="glm-reg-checkout-field-label glm-small-12 glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.bill_city} glm-reg-required{/if}">City:</div>
+                            <div class="glm-reg-checkout-field-data glm-small-12 glm-large-9 glm-columns{if $regAccount.fieldFail.bill_city} glm-reg-fail{/if}"><input type="text" name="bill_city" value="{$regAccount.fieldData.bill_city}"{if $regAccount.fieldRequired.bill_city} required{/if}></div>
                         </div>
-                        <div class="glm-reg-row glm-reg-bill-field glm-hidden">
-                            <div class="glm-small-12 glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.bill_state} glm-reg-required{/if}">State:</div>
-                            <div class="glm-small-12 glm-large-9 glm-columns{if $regAccount.fieldFail.bill_state} glm-reg-fail{/if}">
+                        <div class="glm-reg-row glm-reg-bill-field glm-hiddendid you">
+                            <div class="glm-reg-checkout-field-label glm-small-12 glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.bill_state} glm-reg-required{/if}">State:</div>
+                            <div class="glm-reg-checkout-field-data glm-small-12 glm-large-9 glm-columns{if $regAccount.fieldFail.bill_state} glm-reg-fail{/if}">
                                 <select name="bill_state">
                                     <option value=""></option>
                         {foreach $regAccount.fieldData.bill_state.list as $s}
@@ -156,12 +162,12 @@
                             </div>
                         </div>
                         <div class="glm-reg-row glm-reg-bill-field glm-hidden">
-                            <div class="glm-small-12 glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.bill_zip} glm-reg-required{/if}">Zip/Postal Code:</div>
-                            <div class="glm-small-12 glm-large-9 glm-columns{if $regAccount.fieldFail.bill_zip} glm-reg-fail{/if}"><input type="text" name="bill_zip" value="{$regAccount.fieldData.bill_zip}"{if $regAccount.fieldRequired.bill_zip} required{/if}></div>
+                            <div class="glm-reg-checkout-field-label glm-small-12 glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.bill_zip} glm-reg-required{/if}">Zip/Postal Code:</div>
+                            <div class="glm-reg-checkout-field-data glm-small-12 glm-large-9 glm-columns{if $regAccount.fieldFail.bill_zip} glm-reg-fail{/if}"><input type="text" name="bill_zip" value="{$regAccount.fieldData.bill_zip}"{if $regAccount.fieldRequired.bill_zip} required{/if}></div>
                         </div>
                         <div class="glm-reg-row glm-reg-bill-field glm-hidden">
-                            <div class="glm-small-12 glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.bill_country} glm-reg-required{/if}">Country:</div>
-                            <div class="glm-small-12 glm-large-9 glm-columns{if $regAccount.fieldFail.bill_country} glm-reg-fail{/if}">
+                            <div class="glm-reg-checkout-field-label glm-small-12 glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.bill_country} glm-reg-required{/if}">Country:</div>
+                            <div class="glm-reg-checkout-field-data glm-small-12 glm-large-9 glm-columns{if $regAccount.fieldFail.bill_country} glm-reg-fail{/if}">
                                 <select name="bill_country">
                                     <option value=""></option>
                         {foreach $regAccount.fieldData.bill_country.list as $c}
@@ -173,12 +179,12 @@
                             </div>
                         </div>
                         <div class="glm-reg-row glm-reg-bill-field glm-hidden">
-                            <div class="glm-small-12 glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.bill_phone} glm-reg-required{/if}">Phone:</div>
-                            <div class="glm-small-12 glm-large-9 glm-columns{if $regAccount.fieldFail.bill_phone} glm-reg-fail{/if}"><input type="text" name="bill_phone" value="{$regAccount.fieldData.bill_phone}"{if $regAccount.fieldRequired.bill_phone} required{/if}></div>
+                            <div class="glm-reg-checkout-field-label glm-small-12 glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.bill_phone} glm-reg-required{/if}">Phone:</div>
+                            <div class="glm-reg-checkout-field-data glm-small-12 glm-large-9 glm-columns{if $regAccount.fieldFail.bill_phone} glm-reg-fail{/if}"><input type="text" name="bill_phone" value="{$regAccount.fieldData.bill_phone}"{if $regAccount.fieldRequired.bill_phone} required{/if}></div>
                         </div>
                         <div class="glm-reg-row glm-reg-bill-field glm-hidden">
-                            <div class="glm-small-12 glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.bill_fax} glm-reg-required{/if}">FAX:</div>
-                            <div class="glm-small-12 glm-large-9 glm-columns{if $regAccount.fieldFail.bill_fax} glm-reg-fail{/if}"><input type="text" name="bill_fax" value="{$regAccount.fieldData.bill_fax}"{if $regAccount.fieldRequired.fax} required{/if}></div>
+                            <div class="glm-reg-checkout-field-label glm-small-12 glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.bill_fax} glm-reg-required{/if}">FAX:</div>
+                            <div class="glm-reg-checkout-field-data glm-small-12 glm-large-9 glm-columns{if $regAccount.fieldFail.bill_fax} glm-reg-fail{/if}"><input type="text" name="bill_fax" value="{$regAccount.fieldData.bill_fax}"{if $regAccount.fieldRequired.fax} required{/if}></div>
                         </div>
                     </div>
                     
@@ -201,12 +207,12 @@
                         {$pm = $payMethodsNumb.{$pmname}}
                         {if $payMethods.{$pm}.default} 
                             
-                            <h5><input id="payMethodButton_{$pm}" type="radio" name="payMethod" value="{$pm}" class="payMethodSelector" required {if $payMethod == {$pm}} checked{/if}><label for="payMethodButton_{$pm}">  {$payMethods.{$pm}.name}</label></h5>
+                            <div><input id="payMethodButton_{$pm}" type="radio" name="payMethod" value="{$pm}" class="payMethodSelector" required {if $payMethod == {$pm}} checked{/if}><label for="payMethodButton_{$pm}">  {$payMethods.{$pm}.name}</label></div>
                             {if $pmname == "CompCode"} 
                                 <div id="payMethod_{$pm}" class="payMethodSelection glm-hidden">
                                     <div class="glm-reg-row">
-                                        <div class="glm-small-12 glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.comp_code} glm-reg-required{/if}">Enter code:</div>
-                                        <div class="glm-small-12 glm-large-9 glm-columns{if $regAccount.fieldFail.comp_code} glm-reg-fail{/if}">
+                                        <div class="glm-reg-checkout-field-label glm-small-12 glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.comp_code} glm-reg-required{/if}">Enter code:</div>
+                                        <div class="glm-reg-checkout-field-data glm-small-12 glm-large-9 glm-columns{if $regAccount.fieldFail.comp_code} glm-reg-fail{/if}">
                                             <input type="text" name="comp_code" value="{$regAccount.fieldData.comp_code}"{if $regAccount.fieldRequired.comp_code} required{/if} class="payMethodInput payMethodInput_{$pm}">
                                         </div>
                                     </div>
@@ -215,14 +221,14 @@
                                 
                                 <div id="payMethod_{$pm}" class="payMethodSelection glm-hidden">
                                     <div class="glm-reg-row">
-                                        <div class="glm-small-12 glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.cc_name} glm-reg-required{/if}">Name on Card:</div>
-                                        <div class="glm-small-12 glm-large-9 glm-columns{if $regAccount.fieldFail.cc_name} glm-reg-fail{/if}">
+                                        <div class="glm-reg-checkout-field-label glm-small-12 glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.cc_name} glm-reg-required{/if}">Name on Card:</div>
+                                        <div class="glm-reg-checkout-field-data glm-small-12 glm-large-9 glm-columns{if $regAccount.fieldFail.cc_name} glm-reg-fail{/if}">
                                             <input type="text" name="cc_name" value="{$regAccount.fieldData.cc_name}"{if $regAccount.fieldRequired.cc_name} required{/if} class="payMethodInput payMethodInput_{$pm}">
                                         </div>
                                     </div>
                                     <div class="glm-reg-row">
-                                        <div class="glm-small-12 glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.cc_type} glm-reg-required{/if}">Card Type:</div>
-                                        <div class="glm-small-12 glm-large-9 glm-columns{if $regAccount.fieldFail.cc_type} glm-reg-fail{/if}">
+                                        <div class="glm-reg-checkout-field-label glm-small-12 glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.cc_type} glm-reg-required{/if}">Card Type:</div>
+                                        <div class="glm-reg-checkout-field-data glm-small-12 glm-large-9 glm-columns{if $regAccount.fieldFail.cc_type} glm-reg-fail{/if}">
                                             <select name="cc_type" class="payMethodInput payMethodInput_{$pm}">
                                                 <option value=""></option>
                                     {foreach $regAccount.fieldData.cc_type.list as $c}
@@ -234,20 +240,20 @@
                                         </div>
                                     </div>
                                     <div class="glm-reg-row">
-                                        <div class="glm-small-12 glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.cc_numb} glm-reg-required{/if}">Card Number:</div>
-                                        <div class="glm-small-12 glm-large-9 glm-columns{if $regAccount.fieldFail.cc_numb} glm-reg-fail{/if}">
+                                        <div class="glm-reg-checkout-field-label glm-small-12 glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.cc_numb} glm-reg-required{/if}">Card Number:</div>
+                                        <div class="glm-reg-checkout-field-data glm-small-12 glm-large-9 glm-columns{if $regAccount.fieldFail.cc_numb} glm-reg-fail{/if}">
                                             <input type="text" placeholder="Numbers Only" name="cc_numb" value="{$regAccount.fieldData.cc_numb}"{if $regAccount.fieldRequired.cc_numb} required{/if} class="payMethodInput payMethodInput_{$pm} cc-input">
                                        </div>
                                     </div>
                                     <div class="glm-reg-row">
-                                        <div class="glm-small-12 glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.cc_exp} glm-reg-required{/if}">Card Expiration:</div>
-                                        <div class="glm-small-12 glm-large-9 glm-columns{if $regAccount.fieldFail.cc_exp} glm-reg-fail{/if}">
+                                        <div class="glm-reg-checkout-field-label glm-small-12 glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.cc_exp} glm-reg-required{/if}">Card Expiration:</div>
+                                        <div class="glm-reg-checkout-field-data glm-small-12 glm-large-9 glm-columns{if $regAccount.fieldFail.cc_exp} glm-reg-fail{/if}">
                                             <input type="text" placeholder="MM/YY" name="cc_exp" value="{$regAccount.fieldData.cc_exp}"{if $regAccount.fieldRequired.cc_exp} required{/if} class="payMethodInput payMethodInput_{$pm} expire-input">
                                         </div>
                                     </div>
                                     <div class="glm-reg-row">
-                                        <div class="glm-small-12 glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.cc_cvv} glm-reg-required{/if}">CVV:</div>
-                                        <div class="glm-small-12 glm-large-9 glm-columns{if $regAccount.fieldFail.cc_cvv} glm-reg-fail{/if}">
+                                        <div class="glm-reg-checkout-field-label glm-small-12 glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.cc_cvv} glm-reg-required{/if}">CVV:</div>
+                                        <div class="glm-reg-checkout-field-data glm-small-12 glm-large-9 glm-columns{if $regAccount.fieldFail.cc_cvv} glm-reg-fail{/if}">
                                             <input type="text" placeholder="3 or 4 digit security code on back of card" name="cc_cvv" value="{$regAccount.fieldData.cc_cvv}"{if $regAccount.fieldRequired.cc_cvv} required{/if} class="payMethodInput payMethodInput_{$pm} cvv-input">
                                         </div>
                                     </div>

diff --git a/views/front/registrations/list.html b/views/front/registrations/list.html
index 9b1df37..fe28d31 100644 (file)
--- a/views/front/registrations/list.html
+++ b/views/front/registrations/list.html
@@ -1,12 +1,18 @@
 {apply_filters('glm_members_registrations_header', 'accountHeader')}
 
-{if $reg_bulletin}
-<div id="reg_bulletin">
-    {$reg_bulletin}
-</div>
-{/if}
-
 <div id="glm-reg-list" class="glm-reg-row">
+    
+    {if true} <!-- if checkout process steps are enabled -->
+        <div id="glm-reg-process-steps">
+            <span>Step 1/3</span>
+        </div>
+    {/if}
+
+    {if $reg_bulletin}
+    <div id="reg_bulletin">
+        {$reg_bulletin}
+    </div>
+    {/if}
 {if $haveRegEvents}
     {foreach $regEvents as $event}
         <!-- EVENT REG ITEM START -->

diff --git a/views/front/registrations/registration.html b/views/front/registrations/registration.html
index 3abc64a..97f4ef1 100644 (file)
--- a/views/front/registrations/registration.html
+++ b/views/front/registrations/registration.html
@@ -173,7 +173,7 @@ jQuery(document).ready(function($) {
                     <% } %>
                 </div>
             </div>
-            <div class="row reg-class-detail">
+            <div class="row reg-class-detail collapsed">
                 &nbsp;
                 <div class="reg-class-times"> </div>
                 
@@ -327,17 +327,23 @@ jQuery(document).ready(function($) {
     <% } %>
 </script>
 {/literal}
-<div class="glm-reg-event-list">
+<div id="glm-reg-detail">
     <h1>{$terms.reg_term_registrations_name}</h1>
     <!-- {include file='front/registrations/header.html'} -->
     {apply_filters('glm_members_registrations_header', 'accountHeader')}
 
-{if $reg_bulletin}
-    <div id="reg_bulletin">
-        {$reg_bulletin}
-    </div>
-{/if}
+    {if true} <!-- if checkout process steps are enabled -->
+        <div id="glm-reg-process-steps">
+            <span>Step 1/3</span>
+        </div>
+    {/if}
 
+    {if $reg_bulletin}
+        <div id="reg_bulletin">
+            {$reg_bulletin}
+        </div>
+    {/if}
+    
     <div class="row">
         <div id="regApp" class="columns small-12">
         </div>

diff --git a/views/front/registrations/summaryStore.html b/views/front/registrations/summaryStore.html
index 624739a..13232b0 100644 (file)
--- a/views/front/registrations/summaryStore.html
+++ b/views/front/registrations/summaryStore.html
@@ -76,7 +76,7 @@
             .glm-reg-row-bold {
                 font-weight: bold;
             }
-            .glm-reg-headder-row {
+            .glm-reg-header-row {
                 clear: both;
                 background-color: #eee;
                 height: 2rem;