increasing padding in detail view to accommodate icons in mobile

mobile view had icons cut off due to padding issues, increasing detail
view image width

diff --git a/css/front.css b/css/front.css
index 1dcb590..27df7ce 100644 (file)
--- a/css/front.css
+++ b/css/front.css
@@ -25,7 +25,7 @@
 }
 #glm-reg-detail-map-button {
     height: 35px;
-    padding: 5px 7px;
+    padding: 5px 7px 5px 0;
     float: left;
     color: #008CBA;
     border-right: 1px solid white;
@@ -36,6 +36,8 @@
 }
 #glm-reg-detail-map-button:hover{
     cursor: pointer;
+    text-decoration: underline;
+    color: #e3a146;
 }
 #glm-reg-detail-directions-button {
     height: 35px;
@@ -64,6 +66,17 @@
     height: 24px;
     left: -12px;
 }
+.glm-reg-contact-container::before{
+    content: "";
+    background-image: url(../assets/events/contact-icon-24x24.png);
+    background-height: 24px;
+    background-width: 24px;
+    position: absolute;
+    width: 24px;
+    height: 24px;
+    left: -26px;
+    top: 5px;
+}
 .glm-reg-cost::before{
         /* top: 0px; */
     content: "";
@@ -131,7 +144,10 @@
     left: -12px;
     
 }
-.glm-reg-event-profile-details{
+glm-reg-contact-email{
+    word-wrap: break-word;
+}
+.glm-reg-event-profile-details:not(.glm-reg-contact-details){
     margin-bottom: 15px;
 }
 #glm-reg-map-container{
@@ -140,10 +156,7 @@
     padding: 0;
     overflow: hidden;
 }
-.glm-reg-event-profile-details-container{
-    padding: 0 0 0 50px;
 
-}
 .glm-reg-class-container{
 
 }
@@ -704,6 +717,7 @@ span.glm-error {
     margin-bottom: 25px !important;
 }
 @media(max-width: 1024px) {
+    
     #accountHeader {
         max-width: 300px;
     }
@@ -807,7 +821,28 @@ span.glm-error {
 /*        padding: 0;*/
     margin-bottom: 10px;
 }
+
+/* MOBILE ONLY ----------*/
 @media(max-width: 640px){
+    .glm-reg-date::before{
+        left: 10px;
+    }
+     .glm-reg-location::before{
+        left: 10px;
+    }
+    .glm-reg-time::before{
+        left: 10px;
+    }
+    .glm-reg-contact-container::before{
+        left: 10px;
+    }
+    
+    .glm-reg-cost::before{
+        left: 10px;
+    }
+    .glm-reg-has-icon, .glm-reg-contact-name,.glm-reg-contact-email,.glm-reg-contact-phone{
+        padding-left: 50px;
+    }
     .glm-reg-image-container {
         text-align: left;
     }
@@ -839,6 +874,9 @@ span.glm-error {
 }
 
 @media(min-width: 1024px){
+    .glm-reg-event-profile-details-container{
+        padding: 0 0 0 50px;
+    }
     .reg-class-accounts {
         padding: 5px;
         width: 50%;

diff --git a/views/front/registrations/registration.html b/views/front/registrations/registration.html
index baa84cc..22e737e 100644 (file)
--- a/views/front/registrations/registration.html
+++ b/views/front/registrations/registration.html
@@ -18,33 +18,36 @@
 
 {* Template for the regEvent *}{literal}
 <script type="text/template" id="regEvent-template">
+   
     <div class="row">
         <div class="columns small-12  glm-reg-event-profile">
             <h1 id="glm-reg-event-name"><%= event_name %></h1>
             <div class="row">
                 {/literal}
-
+<!--                 <pre>{$regEvent|@print_r}</pre>-->
                 {if $regEvent.image}
-                <div class="small-12 medium-6 large-4 columns glm-reg-image-container">
+                <div class="small-12 medium-6 large-7 columns glm-reg-image-container">
                     <img src="{$imgBaseUrl}/medium/{$regEvent.image}"/>
                 </div>
                 {/if}
                 <div class="small-12 medium-6 large-5 columns glm-reg-event-profile-details-container">
 
                     <div class="row">
-                        <div class="small-12 columns glm-reg-event-profile-details glm-reg-date"> {$regEvent.first_datetime.timestamp|date_format:"%A, %B %e, %Y"}</div>
+                        <div class="small-12 columns glm-reg-event-profile-details glm-reg-date glm-reg-has-icon"> {$regEvent.first_datetime.timestamp|date_format:"%A, %B %e, %Y"}</div>
 
                         {if $first_date.timestamp != $last_date.timestamp && !$time_specific}
-                            <div class="small-12 columns glm-reg-event-profile-details glm-reg-time"> {$first_date.timestamp|date_format:"%l:%M %p"} - {$last_date.timestamp|date_format:"%l:%M %p"}</div>
+                            <div class="small-12 columns glm-reg-event-profile-details glm-reg-time glm-reg-has-icon"> {$first_date.timestamp|date_format:"%l:%M %p"} - {$last_date.timestamp|date_format:"%l:%M %p"}</div>
                         {else}
-                             <div class="small-12 columns glm-reg-event-profile-details glm-reg-time"> {$regEvent.first_datetime.timestamp|date_format:"%l:%M %p"}</div>
+                             <div class="small-12 columns glm-reg-event-profile-details glm-reg-time glm-reg-has-icon"> {$regEvent.first_datetime.timestamp|date_format:"%l:%M %p"}</div>
                         {/if}
                        
                         {if $regEvent.eventCost}
-                            <div class="small-12 columns glm-reg-event-profile-details glm-reg-cost"> {$regEvent.eventCost}</div>
+                            <div class="small-12 columns glm-reg-event-profile-details glm-reg-cost glm-reg-has-icon"> {$regEvent.eventCost}</div>
                         {/if}
+                        
+           
                         {if $regEvent.locations.name || $regEvent.locations.address}
-                            <div class="small-12 columns glm-reg-event-profile-details glm-reg-location">
+                            <div class="small-12 columns glm-reg-event-profile-details glm-reg-location glm-reg-has-icon">
                                 <a href="https://maps.google.com/maps?daddr={$regEvent.locations.name|escape}%40{$regEvent.locations.lat},{$regEvent.locations.lon}" target="_blank">{$regEvent.locations.name}</a>
                                 {if $regEvent.locations.address}
                                     <br>{$regEvent.locations.address}
@@ -52,7 +55,14 @@
                                 <br> {if $regEvent.locations.city.name}{$regEvent.locations.city.name},{/if}{$regEvent.locations.state.name} {$regEvent.locations.zip}
                             </div>
                         {/if}
-                        
+                        {if $regEvent.contact_name || $regEvent.contact_email || $regEvent.contact_phone}
+                            <div class="glm-reg-contact-container glm-row">
+                                <div class="small-12 columns glm-reg-event-profile-details glm-reg-contact-name glm-reg-contact-details glm-reg-has-icon"> <b>Contact &amp; More Info</b></div>
+                                {if $regEvent.contact_name}<div class="small-12 columns glm-reg-event-profile-details glm-reg-contact-name glm-reg-contact-details"> Contact: {$regEvent.contact_name}</div>{/if}
+                                {if $regEvent.contact_phone}<div class="small-12 columns glm-reg-event-profile-details glm-reg-contact-phone glm-reg-contact-details">Phone: {$regEvent.contact_phone}</div>{/if}
+                                {if $regEvent.contact_email}<div class="small-12 columns glm-reg-event-profile-details glm-reg-contact-email glm-reg-contact-details"> Email: {$regEvent.contact_email}</div>{/if}
+                            </div>
+                        {/if}
                         {if $regEvent.locations.lat && $regEvent.locations.lon}
                             <div class="small-12 columns glm-reg-event-profile-map-container">
                                 <div id="glm-reg-map-container">
@@ -82,7 +92,7 @@
                         {/if}
                         {if $regEvent.terms}                          
                             <div class="small-12 columns glm-reg-event-profile-details">
-                                <h4> Terms and Condtions </h4>
+                                <h4> Terms &amp; Condtions </h4>
                                 {$regEvent.terms}
                             </div>
                         {/if}