adding visual separation between each attendee in the cart summary

front cart summary , using visual backgrounds to help separate each line item

diff --git a/css/front.css b/css/front.css
index 251165f..46de5bb 100644 (file)
--- a/css/front.css
+++ b/css/front.css
@@ -2,7 +2,9 @@
 
 /*{{{ Temp replacement for glm-row without max-width and other checkout form tampering */
 
-
+.glm-bold{
+    font-weight: bold;
+}
 .glm-reg-event-profile-details {
 }
 .reg-cart-summary-edit{
@@ -858,6 +860,13 @@ span.glm-error {
 #accountHeader #glm-header-reg-widget a {
     text-decoration: none;
 }
+.glm-reg-cart-registrant-item:nth-child(odd){
+    background-color: rgba(66,162,208, .1);
+}
+.glm-reg-cart-registrant-item{
+    margin: 5px 0;
+    clear: both;
+}
 /*#accountHeader .glm-reg-header-btn{
     font-size: 16px;
     height: 60px;
@@ -998,6 +1007,7 @@ span.glm-error {
 .reg-class-time:not(:last-child){
     border-bottom: 1px solid lightgrey;
 }
+
 @media(max-width: 1024px) {
 /*    #glm-header-reg-widget a{
         display: block;
@@ -1045,6 +1055,8 @@ span.glm-error {
 }
 hr.glm-reg-class-separator{
     max-width: 98%;
+    margin: .5rem auto;
+    border: none;
 }
 .glm-reg-cart-total{
     font-size: 22px;
@@ -1053,8 +1065,15 @@ hr.glm-reg-class-separator{
 .glm-reg-cart-total-attendees{
     font-size: 24px;
 }
+.glm-reg-cart-summary-custom-fields,.glm-reg-cart-custom-charge{
+    margin-top: -2px;
+}
+
 /* MOBILE ONLY ----------*/
 @media(max-width: 640px){
+    .glm-reg-cart-registrant-item{
+        padding-bottom: 5px;
+    }
     .glm-reg-date::before{
         left: 10px;
     }
@@ -1157,6 +1176,10 @@ hr.glm-reg-class-separator{
     }
     .glm-reg-cart-summary-custom-fields{
         padding-left: 30px;
+        margin-top: -5px;
+    }
+    .glm-reg-cart-custom-charge{
+        margin-top: -5px;
     }
 
 }
@@ -1248,7 +1271,7 @@ hr.glm-reg-class-separator{
     font-size: 0.875rem;
 }
 .glm-reg-cart-event-container {
-    padding-bottom: 10px
+    padding-bottom: 0px
 }
 .glm-reg-cart-event-class > div {
     font-size: 16px;

diff --git a/views/front/registrations/cartSummary.html b/views/front/registrations/cartSummary.html
index 2821c1a..23c7ee1 100644 (file)
--- a/views/front/registrations/cartSummary.html
+++ b/views/front/registrations/cartSummary.html
@@ -44,7 +44,7 @@
                 <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">
+                <div class="glm-small-4 glm-column text-right reg-cart-class-name glm-bold">
                     Charges
                 </div>
             </div>
@@ -60,7 +60,9 @@
                 </div>
             </div>-->
    {/if}
+   
    {foreach $rate.registrants as $registrant}
+   <div class="glm-reg-cart-registrant-item">
             <div class="glm-reg-row glm-reg-cart-registrant">
                 <div class="small-9 glm-column glm-reg-cart-item">
                     <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>
@@ -89,11 +91,11 @@
                     <span class="glm-reg-cart-data glm-reg-cart-data-value">{$customField.stored}</span>
                 </div>
           {if $customField.cost > 0}                
-                <div class="small-3 glm-column glm-reg-right glm-reg-cart-data glm-reg-cart-charge">
+                <div class="small-3 glm-column glm-reg-right glm-reg-cart-data glm-reg-cart-charge glm-reg-cart-custom-charge">
                   ${$customField.cost|number_format:2}
                 </div>
           {/if}
-            </div>      
+                </div>  
         {/if}
       {/foreach}
     {/if}                    
@@ -107,7 +109,9 @@
                 </div>
             </div>
     {/if}
+       </div> 
    {/foreach} {* registrants *} 
+   
   {/foreach} {* rates *}
   <hr class="glm-reg-class-separator">
  {/foreach} {* classes *}