new layout for the front end of the registrations page

diff --git a/css/front.css b/css/front.css
index f0fe467..d1d8d02 100644 (file)
--- a/css/front.css
+++ b/css/front.css
@@ -1,6 +1,45 @@
 /* Event Registration Edit Page */
 
 /*{{{ Temp replacement for glm-row without max-width and other checkout form tampering */
+@media(max-width: 641px){
+    #regApp{
+        padding: 0;
+    }
+    .glm-reg-classes{
+        padding: 0;
+    }
+    .glm-reg-image-container{
+        padding: 0;
+    }
+    #glm-reg-event-name{
+        padding: 0;
+        line-height: 1.2;
+    }
+    .glm-reg-event-profile-details{
+        padding-left: 0;
+    }
+}
+.glm-reg-map{
+    width: 100%;
+    margin: 0;
+    height: 250px;
+    overflow: hidden;
+    background: url('../assets/fingerUpRed.png');
+    background-position: center center;
+    background-size: cover;
+    position: relative;
+}
+#glm-reg-map-container{
+    height: 0px;
+    margin: 0;
+    overflow: hidden;
+}
+.glm-reg-event-profile-details-container{
+    padding: 0;
+}
+.glm-reg-class-container{
+    padding: 0;
+}
 .glm-reg-row {
     clear: both;
     margin-left: auto;
@@ -28,7 +67,7 @@
     padding: 0;
 }
 .glm-reg-event-item {
-    border: 1px solid black;
+/*    border: 1px solid black;*/
     /* padding: 10px; */
     margin: 1rem 0;
 }
@@ -52,16 +91,22 @@
     margin: 0 1rem;
 }
 .glm-reg-level {
+    margin-bottom: 25px;
     /* width: 48%; */
     /* float: left; */
     /* clear: left; */
 }
+.glm-reg-level-info{
+    padding: 0 2px;
+    font-size: 14px;
+}
+
 .glm-reg-level-title {
-    font-size: 1rem;
+    font-size: 1.3rem;
     font-weight: bold;
     text-decoration: none;
-    padding: .3rem;
-    width: 80%;
+/*    padding: .3rem;
+    width: 80%;*/
 }
 .glm-class-row-header {
     border-bottom: 4px solid black;
@@ -82,6 +127,7 @@
     padding: .4rem;
     margin: .4rem;
     background-color: lightgrey;
+    max-width: 425px;
 }
 .glm-reg-level-registrant span {
     padding: .3rem 1rem .3rem .2rem;
@@ -134,6 +180,9 @@
 .glm-reg-level-registrant-delete {
     float: right;
 }
+.glm-reg-event-details{
+    border-bottom: 2px solid darkslategrey;
+}
 label.registrant-label {
     width: 80%;
 }
@@ -153,8 +202,17 @@ label.registrant-label {
 .reg-class-count {
     float: right;
 }
+.glm-reg-event-profile{
+    margin-bottom: 25px;
+    padding: 0;
+}
+
 .reg-class-accounts {
     padding: 5px;
+/*    -moz-column-count: 2;
+    column-count: 2;
+    -webkit-column-count: 2;*/
+    
 }
 /*}}} End Event Registration Page */
 
@@ -244,6 +302,7 @@ span.glm-error {
 
 .glm-add-new-account {
     font-size: 1rem;
+    margin-left: 10px;
 }
 
 #glm-reg-widget {

diff --git a/models/front/registrations/registration.php b/models/front/registrations/registration.php
index 65f6ada..58f10e7 100644 (file)
--- a/models/front/registrations/registration.php
+++ b/models/front/registrations/registration.php
@@ -357,6 +357,7 @@
             'regClassesJSON'    => $regClassJSON,
             'regTimesJSON'      => $regTimesJSON,
             'regCartJSON'       => $regCartJSON,
+            'imgBaseUrl'        => GLM_MEMBERS_PLUGIN_MEDIA_URL ."/images/",
             'regRequestJSON'    => $regRequestJSON,
             'loginAccount'      => $loginAccount,
             'termsJSON'         => $termsJSON,

diff --git a/views/front/registrations/registration.html b/views/front/registrations/registration.html
index b08e22e..6ed6e04 100644 (file)
--- a/views/front/registrations/registration.html
+++ b/views/front/registrations/registration.html
@@ -1,6 +1,7 @@
 {* Even Registration App - Backbone.js *}
 {* Underscore Templates for the Event Registration App *}
 {* Template for Logged in Account *}{literal}
+<script src="//maps.googleapis.com/maps/api/js?sensor=true&key={$settings.google_maps_api_key}"></script>
 <script type="text/template" id="account-template">
     <span>Logged in as <%= fname %><%= lname %></span>
     <a id="accountLogout">Logout</a>
@@ -9,25 +10,62 @@
 {* Template for the regEvent *}{literal}
 <script type="text/template" id="regEvent-template">
     <div class="glm-row">
-        <div class="glm-columns glm-small-12">
-            <h2><%= event_name %></h2>
-            <div>
-                <% if ( this.getClassCount() == 0 ) { %>
-                    <p> Registrations not available at this time. </p>
-                <% } else { %>
-                    <% if ( !time_specific ) { %>
-                        <p>Attend any time during event</p>
-                        <% _.each(reg_time, function(rTime){ %>
-                            <% if ( rTime.attendee_max > 0 ) { %>
-                        <p> Maximum Registrants: <%= rTime.attendee_max %><br>
-                            Currently Available: <%= rTime.attendees_available %> </p>
+        <div class="glm-columns glm-small-12  glm-reg-event-profile">
+            <h2 id="glm-reg-event-name"><%= event_name %></h2>
+            <div class="glm-row">
+                {/literal}
+              
+                {if $regEvent.image}
+                <div class="glm-small-12 glm-medium-4 glm-columns glm-reg-image-container"> 
+                    <img src="{$imgBaseUrl}/medium/{$regEvent.image}"/>
+                    
+                </div>
+                {/if}
+                <div class="glm-small-12 glm-medium-4 glm-columns glm-reg-event-profile-details-container">
+                
+                    <div class="glm-row"> 
+                        <div class="glm-small-12 glm-columns glm-reg-event-profile-details"> {$regEvent.last_datetime.timestamp|date_format:"%A, %B %e, %Y"}</div>
+                        {if $regEvent.first_datetime.timestamp != $regEvent.last_datetime.timestamp}
+                            <div class="glm-small-12 glm-columns glm-reg-event-profile-details"> {$regEvent.first_datetime.timestamp|date_format:"%l:%M %p"} - {$regEvent.last_datetime.timestamp|date_format:"%l:%M %p"}</div>
+                        {else}
+                             <div class="glm-small-12 glm-columns glm-reg-event-profile-details"> {$regEvent.first_datetime.timestamp|date_format:"%l:%M %p"}</div>
+                        {/if}
+                        <div class="glm-small-12 glm-columns glm-reg-event-profile-details"> {$regEvent.locations.name}</div>
+                    </div>
+                </div>
+                
+                <div class="glm-row">
+                    {if $regEvent.locations.lat && $regEvent.locations.lon}
+                        <div class="glm-small-12 glm-medium-4 glm-columns glm-reg-event-profile-map-container">
+                            <div id="glm-reg-map-container">
+                                <div id="glm-reg-map" class="glm-reg-map">(map loads here)</div>
+                            </div>
+                        </div>
+                        <div class="glm-small-12 glm-columns glm-reg-event-profile-details">
+                            <div id="glm-reg-detail-map-button" class="button map-button">View Map</div>
+                        </div>
+                    {/if}
+                    {literal}
+                    <% if ( descr ) { %><div class="glm-small-12 glm-columns glm-reg-event-profile-details"><%= descr %></div><% } %>
+                    <% if ( terms ) { %><div class="glm-small-12 glm-columns glm-reg-event-profile-details"><%= terms %></div><% } %>
+                
+                    <div class="glm-small-12 glm-columns glm-reg-event-profile-details">
+                        <% if ( this.getClassCount() == 0 ) { %>
+                            <p> Registrations not available at this time. </p>
+                        <% } else { %>
+                            <% if ( !time_specific ) { %>
+                                <p>Attend any time during event</p>
+                                <% _.each(reg_time, function(rTime){ %>
+                                    <% if ( rTime.attendee_max > 0 ) { %>
+                                <p> Maximum Registrants: <%= rTime.attendee_max %><br>
+                                    Currently Available: <%= rTime.attendees_available %> </p>
+                                    <% } %>
+                                <% }); %>
+                            <% } else { %>
                             <% } %>
-                        <% }); %>
-                    <% } else { %>
-                    <% } %>
-                <% } %>
-
-                <% if ( terms ) { %><p><%= terms %></p><% } %>
+                        <% } %>
+                    </div>
+                </div>
             </div>
         </div>
         <div class="glm-columns glm-small-12 glm-reg-classes"></div>
@@ -44,16 +82,24 @@
 {* Template for regClass *}{literal}
 <script type="text/template" id="regClass-template">
     <div class="glm-row">
-        <div class="glm-columns glm-small-12 glm-large-6">
-            <div class="glm-row">
-                <span class="glm-reg-level-title"><%= name %></span>
-                <div class="glm-columns glm-small-12">
+        <div class="glm-columns glm-small-12 glm-reg-class-container">
+            <div class="glm-row glm-reg-event-details">
+                <span class="glm-columns glm-small-12 glm-large-3 glm-reg-level-title glm-reg-level-info"><%= name %></span>
+                
+                <div class="glm-columns glm-small-12 glm-large-2 glm-reg-level-info"> <%= reg_rate_name  %> </div>
+                <% if( reg_rate_base_price ){ %>
+                    <div class="glm-columns glm-small-12 glm-large-2 glm-reg-level-info"> Base Rate: $<%= reg_rate_base_price %> </div>
+                <% } %>
+                <% if( reg_rate_per_reg ){ %>
+                    <div class="glm-columns glm-small-12 glm-large-2 glm-reg-level-info"> Per Registrant: $<%= reg_rate_per_reg %> </div>
+                <% } %>
+                <% if( registrant_credits ){ %>
+                    <div class="glm-columns glm-small-12 glm-large-2 glm-reg-level-info"> Per Registrant: $<%= registrant_credits %> </div>
+                <% } %>
+
+                <div class="glm-columns glm-small-12 glm-reg-level-info">
                     <%- descr %>
                 </div>
-                <div class="glm-columns glm-small-12"> <%= reg_rate_name  %> </div>
-                <div class="glm-columns glm-small-12"> Base Rate: $<%= reg_rate_base_price %> </div>
-                <div class="glm-columns glm-small-12"> Per Registrant: $<%= reg_rate_per_reg %> </div>
-                <div class="glm-columns glm-small-12"> Registrant Credits: <%= registrant_credits %> </div>
                 <div class="glm-columns glm-small-12 glm-hidden">
                     <% if ( app.timeSpecific ) { %>
                         <input class="timeSelection" type="hidden" name="timeOption">
@@ -67,7 +113,7 @@
             <div class="reg-class-detail">
                 &nbsp;
                 <div class="reg-class-times"> </div>
-
+                
                 <% if ( app.timeSpecific ) { %>
                     <div class="glm-reg-warning glm-medium-up">
                         Please select a Date / Time!
@@ -80,18 +126,19 @@
                 <% } %>
             </div>
         </div>
-        <div class="glm-columns glm-small-12 glm-large-6">
+<!--        <div class="glm-columns glm-small-12 glm-large-6">
             <div id="eventCalendar-<%= id %>" style="width: 95%;"></div>
-        </div>
+        </div>-->
     </div>
 </script>
 {/literal}
 {* Template for regTime *}{literal}
 <script type="text/template" id="regTime-template">
-    <b><%= start_datetime.datetime %></b>
-    <div class="reg-class-accounts">
-        <button class="glm-add-new-account tiny">Add {/literal}{$terms.reg_term_attendee_cap}{literal}</button>
-    </div>
+    <% if ( app.timeSpecific ) { %>
+        <b><%= start_datetime.datetime %></b>
+    <% } %>
+    <button class="glm-add-new-account tiny">Add {/literal}{$terms.reg_term_attendee_cap}{literal}</button>
+    <div class="reg-class-accounts"></div>
 </script>
 {/literal}
 {* Template for registrant add form *}{literal}
@@ -285,5 +332,41 @@ jQuery(function($){
     regEvent.setClasses( {$regClassesJSON} );
     regEvent.setClassRegistrants( {$regJSON} );
     var glmApp = new app.Views.Front.App();
+    
+    $("#glm-reg-detail-map-button").click(function() {
+        var map_container   = "#glm-reg-map-container";
+        var map             = "#glm-reg-map";
+        var mapNewH         = 0;
+        var mapOverflow     = 'hidden';
+        var mapBtnTxt       = 'view map';
+        
+        if ($(map_container).height() == 0) {
+            mapNewH = 250;
+            mapV = 'visible';
+            mapBtnTxt = 'hide map'
+        }
+        $(map_container).animate({
+            overflow: mapOverflow,
+            height: mapNewH
+        }, 250, "swing", function() {
+
+        });
+        $(this).html(mapBtnTxt);
+    });
+    function initMap() {
+
+        // Set default - Need to make this configurable
+        var map = new google.maps.Map(document.getElementById('glm-reg-map'), {
+                zoom: {$settings.maps_default_zoom},
+         
+            disableDefaultUI: false,
+            mapTypeId: google.maps.MapTypeId.MAP,
+        });
+        
+        // Create a marker for this member
+ 
+
+    }
+    google.maps.event.addDomListener(window, 'load', initMap);
 });
 </script>