Updates for front end work

working on styling for mobile and for time entry.

diff --git a/css/front.css b/css/front.css
index 71fc70c..ef8e0ff 100644 (file)
--- a/css/front.css
+++ b/css/front.css
@@ -30,8 +30,7 @@
 .glm-reg-event-item {
     border: 1px solid black;
     padding: 10px;
-    margin: 1.2rem 1rem;
-    /* position: relative; */
+    margin: 1rem 0;
 }
 .glm-reg-event-item h2 {
     font-size: 1.5rem;
@@ -163,6 +162,9 @@ label.registrant-label {
 .glm-registrant-edit {
     cursor: pointer;
 }
+label.reg-time {
+    display: inline;
+}
 /*}}} End New Attendee Form */
 
 /*{{{ Login Page */

diff --git a/js/frontRegApp.js b/js/frontRegApp.js
index 03017b4..a981ee9 100644 (file)
--- a/js/frontRegApp.js
+++ b/js/frontRegApp.js
@@ -161,6 +161,8 @@ app.Models.Front.RegEvent = Backbone.Model.extend({
             var foundClass = this.classes.findWhere({ id: registrants[i].class_id });
             if ( foundClass != undefined ) {
                 foundClass.registrants.create( registrants[i] );
+                var newReg = foundClass.registrants.pop();
+                foundClass.set({selectedTime: newReg.get( 'reg_time' ) });
             }
         }
     },
@@ -471,7 +473,7 @@ app.Views.Front.RegClass = Backbone.View.extend({
         var timeParts = [];
         _.each( times, function(time){
             var testDate = new Date( time.start_datetime.datetime );
-            timeParts.push( {id: time.id,date: testDate} );
+            timeParts.push( {id: time.id,date: testDate, name: time.name} );
         });
         // console.log( timeParts );
         return timeParts;
@@ -700,6 +702,7 @@ app.Views.Front.RegClass = Backbone.View.extend({
     },
 
     addOne: function( item ){
+        this.model.set({selectedTime: item.get('reg_time') })
         this.render();
     },
 

diff --git a/js/models/front/regEvent.js b/js/models/front/regEvent.js
index 607bd46..b39f216 100644 (file)
--- a/js/models/front/regEvent.js
+++ b/js/models/front/regEvent.js
@@ -31,6 +31,8 @@ app.Models.Front.RegEvent = Backbone.Model.extend({
             var foundClass = this.classes.findWhere({ id: registrants[i].class_id });
             if ( foundClass != undefined ) {
                 foundClass.registrants.create( registrants[i] );
+                var newReg = foundClass.registrants.pop();
+                foundClass.set({selectedTime: newReg.get( 'reg_time' ) });
             }
         }
     },

diff --git a/js/views/front/regClass.js b/js/views/front/regClass.js
index d79124e..a0f7715 100644 (file)
--- a/js/views/front/regClass.js
+++ b/js/views/front/regClass.js
@@ -72,7 +72,7 @@ app.Views.Front.RegClass = Backbone.View.extend({
         var timeParts = [];
         _.each( times, function(time){
             var testDate = new Date( time.start_datetime.datetime );
-            timeParts.push( {id: time.id,date: testDate} );
+            timeParts.push( {id: time.id,date: testDate, name: time.name} );
         });
         // console.log( timeParts );
         return timeParts;
@@ -301,6 +301,7 @@ app.Views.Front.RegClass = Backbone.View.extend({
     },
 
     addOne: function( item ){
+        this.model.set({selectedTime: item.get('reg_time') })
         this.render();
     },
 

diff --git a/views/front/registrations/list.html b/views/front/registrations/list.html
index 6ea9e0d..da599af 100644 (file)
--- a/views/front/registrations/list.html
+++ b/views/front/registrations/list.html
@@ -1,12 +1,12 @@
 {include file='front/registrations/header.html'}
-<divi id="glm-reg-list" class="glm-reg-row">
+<div id="glm-reg-list" class="glm-row">
 {if $haveRegEvents}
     {foreach $regEvents as $event}
-    <div class="glm-columns glm-large-12 glm-reg-event-item">
+    <div class="glm-columns glm-small-12 glm-reg-event-item">
         <h3><a href="{$thisUrl}?page=registration&eventRegId={$event.id}">{$event.event_name}</a></h3>
         {if $event.image} <img style="float:right;" src="{$glmPluginMediaUrl}/images/thumb/{$event.image}"> {/if}
         <p>{$event.intro}</p>
-        <div class="glm-reg-row">
+        <div class="glm-row">
             <div class="glm-columns glm-large-2 glm-small-12">
                 <strong> Dates/Times: </strong>
             </div>
@@ -23,7 +23,7 @@
             </div>
         </div>
         {if $event.hide_address.name == 'No'}
-            <div class="glm-reg-row">
+            <div class="glm-row">
                 <div class="glm-columns glm-large-2 glm-small-12">
                     <strong> Location: </strong>
                 </div>

diff --git a/views/front/registrations/registration.html b/views/front/registrations/registration.html
index 009eea2..7c6b570 100644 (file)
--- a/views/front/registrations/registration.html
+++ b/views/front/registrations/registration.html
@@ -44,7 +44,7 @@
 {* Template for regClass *}{literal}
 <script type="text/template" id="regClass-template">
     <div class="glm-row">
-        <div class="glm-columns glm-small-12 glm-large-12">
+        <div class="glm-columns glm-small-12">
             <div class="glm-row">
                 <span class="glm-reg-level-title"><%= name %></span>
                 <span class="reg-class-count"><%= reg_count %>
@@ -63,14 +63,22 @@
                 <div class="glm-columns glm-small-12 glm-large-12">
                     <% if ( app.timeSpecific ) { %>
                         <b>Select a time</b>
+                        <% var curSchedule = ''; %>
                         <% _.each( this.getTimeArray(), function(time){ %>
-                        <label>
-                            <input class="timeSelection" type="radio" name="timeOption" value="<%= time.id %>"
-                            <% if ( selectedTime == time.id ) { %>
-                                checked
+                            <% if ( curSchedule != time.name ) { %>
+                                <div>
+                                    <%= time.name %>
+                                    <%= time.date.toLocaleDateString('en-US') %>
+                                </div>
                             <% } %>
-                            /> <%= time.date.toLocaleTimeString('en-US', {hour: '2-digit', minute: '2-digit'}) %>
-                        </label>
+                            <% curSchedule = time.name; %>
+                            <label class="reg-time">
+                                <input class="timeSelection" type="radio" name="timeOption" value="<%= time.id %>"
+                                <% if ( selectedTime == time.id ) { %>
+                                    checked
+                                <% } %>
+                                /> <%= time.date.toLocaleTimeString('en-US', {hour: '2-digit', minute: '2-digit'}) %>
+                            </label>
                         <% }); %>
                     <% } else { %>
                         <% _.each( this.getTimeArray(), function(time){ %>
@@ -99,7 +107,7 @@
     {/literal}{if $regEvent.time_specific.value}
     {/if}{literal}
         <div class="glm-row">
-            <div class="glm-columns glm-large-6">
+            <div class="glm-columns glm-small-12 glm-large-6">
                 <h4>{/literal}{$terms.reg_term_contact_information}{literal}</h4>
                 <div class="glm-row">
                     <div class="glm-columns glm-large-4 glm-small-12">First Name</div>