fixing layout of cart summary for checkout and cart page

adjusting the cart layout for checkout and cart pages, mobile first

diff --git a/css/front.css b/css/front.css
index b319bd6..51ec8d9 100644 (file)
--- a/css/front.css
+++ b/css/front.css
@@ -5,6 +5,9 @@
 
 .glm-reg-event-profile-details {
 }
+.reg-cart-summary-edit{
+    margin-right: 10px;
+}
 .glm-reg-image-container {
 /*    padding: 0 10px 0 10px;*/
     max-height: 350px;
@@ -1087,6 +1090,23 @@ span.glm-error {
     .glm-reg-account-info,.glm-reg-billing-info {
         padding: 0;
     }
+    .glm-reg-cart-data{
+        display: block;
+        font-size: 13px;
+    }
+    .glm-reg-cart-data-value{
+        margin-top: -7px;
+    }
+    .glm-reg-cart-summary{
+        padding: 0;
+    }
+    .glm-reg-cart-registrant {
+        padding-left: 12px !important;
+    }
+    .reg-cart-class-name{
+        line-height: 1;
+        padding-bottom: 10px;
+    }
 }
 
 @media(min-width: 1024px){
@@ -1193,6 +1213,7 @@ span.glm-error {
 #glm-reg-cart-continue:hover, .glm-reg-checkout:hover,#regSubmitButton:hover {
     background-color: #41a364;
 }
+
 .glm-reg-cart-container {
     clear: both;
     border: solid 1px black;
@@ -1206,7 +1227,9 @@ span.glm-error {
 }
 .glm-reg-cart-event-class > div {
     font-size: 16px;
-    text-decoration: underline;
+}
+.reg-cart-class-name > span {
+    font-weight: bold;
 }
 .glm-reg-cart-registrant {
     padding-left: 25px;

diff --git a/views/front/registrations/cartSummary.html b/views/front/registrations/cartSummary.html
index d8a1e01..7145deb 100644 (file)
--- a/views/front/registrations/cartSummary.html
+++ b/views/front/registrations/cartSummary.html
@@ -1,78 +1,85 @@
+{if $summaryType=="checkout"}
+   {assign var="summaryClass2Col" value="glm-small-12 "}
+   {assign var="summaryClass3Col" value="glm-small-12 "}
+   {assign var="summaryClass4Col" value="glm-small-12 "}
+   {assign var="summaryClass6Col" value="glm-small-12 "}
+
+{else}
+   {assign var="summaryClass2Col" value="glm-small-12 glm-medium-2 "}
+   {assign var="summaryClass3Col" value="glm-small-12 glm-medium-3 "}
+   {assign var="summaryClass4Col" value="glm-small-12 glm-medium-4 "}
+   {assign var="summaryClass6Col" value="glm-small-12 glm-medium-6 "}
+{/if}  
+{assign var="summaryCustomClass4Col" value="glm-small-4 "}
+   
     <div class="glm-reg-cart-container">
 {foreach $cart.events as $event}
         <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">
+                <div class="glm-small-12 glm-medium-6 glm-column">
  {if $summaryType=="cart"}
-                    <a href="{$regUrl}?page=registration&eventRegId={$event.reg_event}"><span class="dashicons dashicons-edit"></span></a>
- {/if}
- {assign var="summaryCustomClass4Col" value="glm-small-4 "}
- {if $summaryType=="checkout"}
-    {assign var="summaryClass2Col" value="glm-small-12 "}
-    {assign var="summaryClass3Col" value="glm-small-12 "}
-    {assign var="summaryClass4Col" value="glm-small-12 "}
-    {assign var="summaryClass6Col" value="glm-small-12 "}
-    
- {else if}
-    {assign var="summaryClass2Col" value="glm-small-12 glm-medium-2 "}
-    {assign var="summaryClass3Col" value="glm-small-12 glm-medium-3 "}
-    {assign var="summaryClass4Col" value="glm-small-12 glm-medium-4 "}
-    {assign var="summaryClass6Col" value="glm-small-12 glm-medium-6 "}
+                    <a href="{$regUrl}?page=registration&eventRegId={$event.reg_event}"><span class="reg-cart-summary-edit dashicons dashicons-edit"></span></a>
  {/if}
                     <span class="glm-cart-summary-event-name">{$event.event_name}</span>
                 </div>
+                <div class="glm-small-12 glm-medium-6 glm-column glm-reg-right glm-reg-cart-label">
+                    {$terms.reg_term_attendee_plur_cap}: {$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>
  {foreach $event.classes as $class}
             <div class="glm-reg-row glm-reg-cart-event-class">
-                <div class="glm-small-12 glm-column">
-                    {$class.class_name}
+                <div class="glm-small-8 glm-column reg-cart-class-name">
+                    <span>Registration Level:</span> {$class.class_name}
+                </div>
+                <div class="glm-small-4 glm-column text-right reg-cart-class-name">
+                    Charges
                 </div>
             </div>
+ 
   {foreach $class.rates as $rate}
    {if $rate.rateBaseCharge > 0}
-            <div class="glm-reg-row glm-reg-indent-1 glm-reg-cart-class-rate">
+<!--            <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 glm-reg-cart-registrant">
-                <div class="{$summaryClass2Col} glm-reg-row">
-                    <span class="glm-reg-label">{$terms.reg_term_attendee_cap}: </span><span class="glm-reg-front">{$registrant.fname} {$registrant.lname}</span>
-                </div>
-                <div class="{$summaryClass4Col} glm-column glm-reg-row">
-                    <span class="glm-reg-label">Date & Time: </span>
+            <div class="glm-reg-row glm-reg-cart-registrant">
+                <div class="small-9 glm-column">
+                    <span class="glm-reg-label glm-reg-cart-data">{$terms.reg_term_attendee_cap}: </span><span class="glm-reg-front glm-reg-cart-data glm-reg-cart-data-value">{$registrant.fname} {$registrant.lname}</span>
+                    
                 </div>
-                <div class="{$summaryClass4Col} glm-column">
-                    {$registrant.timeReformatted}
-                </div>
-                <div class="{$summaryClass4Col} glm-column glm-reg-space-left glm-reg-right glm-reg-row-bold">
-                    {$terms.reg_term_attendee_cap} Charge:
-                </div>
-                <div class="{$summaryClass4Col} glm-column glm-reg-right">
-    {if $registrant.registrantRate > 0}
+                <div class="small-3 glm-column glm-reg-right">
+                    {if $registrant.registrantRate > 0}
                         ${$registrant.registrantRate|number_format:2}
-    {else}
+                    {else}
                         (included)
-    {/if}
+                    {/if}
                 </div>
+
+                
+<!--                <div class="{$summaryClass4Col} glm-column glm-reg-space-left glm-reg-right glm-reg-row-bold">
+                    {$terms.reg_term_attendee_cap} Charge:
+                </div>-->
+                
             </div>
     {if $registrant.event_attendee_custom_form}
       {foreach $registrant.event_attendee_custom_form.form as $customField}
         {if $customField.priority_display.value || $customField.cost > 0}
-            <div class="glm-reg-row glm-reg-indent-1 glm-reg-cart-registrant">
-                <div class="{$summaryCustomClass4Col} glm-column glm-reg-row-bold glm-reg-cart-label">
-                  {$customField.field_name}:
-                </div>
-                <div class="{$summaryCustomClass4Col} glm-column glm-reg-cart-data">
-                  {$customField.stored}
+            <div class="glm-reg-row glm-reg-cart-registrant">
+                <div class="small-9 glm-column" >
+                    <span class="glm-reg-label glm-reg-cart-data glm-reg-cart-data-label">{$customField.field_name}: </span>
+                    <span class="glm-reg-cart-data glm-reg-cart-data-value">{$customField.stored}</span>
                 </div>
           {if $customField.cost > 0}                
-                <div class="{$summaryCustomClass4Col} glm-column glm-reg-right glm-reg-cart-data">
+                <div class="small-3 glm-column glm-reg-right glm-reg-cart-data">
                   ${$customField.cost|number_format:2}
                 </div>
           {/if}
@@ -104,11 +111,8 @@
             </div>
  {/if}
             <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">
-                    {$terms.reg_term_attendee_plur_cap} this event: {$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 class="glm-small-12 glm-column glm-reg-right glm-reg-cart-data">
+                    Subtotal: &nbsp;&nbsp;${$event.eventCharges|number_format:2}
                 </div>
             </div> 
         </div>