Updating the forms.
authorSteve Sutton <steve@gaslightmedia.com>
Fri, 27 Oct 2017 20:36:23 +0000 (16:36 -0400)
committerSteve Sutton <steve@gaslightmedia.com>
Fri, 27 Oct 2017 20:36:23 +0000 (16:36 -0400)
Switch them to use the glm grid classes.

css/front.css
models/front/registrations/list.php
views/front/registrations/checkout.html
views/front/registrations/registration.html

index ee8458d..eb38cc2 100644 (file)
@@ -1,6 +1,6 @@
 /* Event Registration Edit Page */
 
-/* Temp replacement for glm-row without max-width and other checkout form tampering */
+/*{{{ Temp replacement for glm-row without max-width and other checkout form tampering */
 .glm-reg-row {
     clear: both;
     margin-left: auto;
@@ -17,9 +17,9 @@
 .glm-reg-fail input {
     border: 4px #FFaBa9 solid;
 }
-/* end of tampering */
-
+/*}}} end of tampering */
 
+/*{{{ Event Registration List */
 .glm-reg-event-list {
     width: 100%;
     padding: 0;
@@ -37,6 +37,9 @@
     padding: .4rem;
     width: 80%;
 }
+/*}}} end Event Registration List */
+
+/*{{{ Event Registration Page */
 .glm-reg-dates {
     width: 48%;
     float: right;
@@ -47,9 +50,9 @@
     margin: 0 1rem;
 }
 .glm-reg-level {
-    width: 48%;
-    float: left;
-    clear: left;
+    /* width: 48%; */
+    /* float: left; */
+    /* clear: left; */
 }
 .glm-reg-level-title {
     font-size: 1rem;
 .registrant-edit input[type='text'],
 .registrant-add input[type='text']
 {
-    width: 40% !important;
+    /* width: 40% !important; */
     float: left;
     margin-right: 1rem;
 }
@@ -151,98 +154,15 @@ label.registrant-label {
 .reg-class-accounts {
     padding: 5px;
 }
+/*}}} End Event Registration Page */
 
-.new-reg {
-    background-color: white;
-    border: 1px solid black;
-    padding: 2rem;
-    position: absolute;
-    left: 1rem;
-    top: 0;
-    width: 60rem;
-    z-index: 999;
-}
-.new-reg h2 {
-    width: auto;
-}
-.new-reg .add_reg_fname,
-.new-reg .add_reg_lname,
-.new-reg .add_reg_addr1,
-.new-reg .add_reg_addr2,
-.new-reg .add_reg_city,
-.new-reg .add_reg_state,
-.new-reg .add_reg_zip,
-.new-reg .add_reg_country {
-    width: 46%;
-    margin-right: 1rem;
-    float: left;
-}
-.new-reg .add_reg_email {
-    width: 96%;
-}
-
-.new-reg-notime {
-    background-color: white;
-    border: 1px solid black;
-    padding: 2rem;
-    position: absolute;
-    left: 1rem;
-    top: 0;
-    width: 40rem;
-    z-index: 999;
-}
-.new-reg-notime h2 {
-    width: auto;
-}
-.new-reg-notime .add_reg_fname,
-.new-reg-notime .add_reg_lname,
-.new-reg-notime .add_reg_addr1,
-.new-reg-notime .add_reg_addr2,
-.new-reg-notime .add_reg_city,
-.new-reg-notime .add_reg_state,
-.new-reg-notime .add_reg_zip,
-.new-reg-notime .add_reg_country {
-    width: 46%;
-    margin-right: 1rem;
-    float: left;
-}
-.new-reg-notime .add_reg_email {
-    width: 95%;
-}
-#reg-select-time {
-    width: 150px;
-}
-.reg-edit-form {
-    display: none;
-    background-color: white;
-    border: 1px solid black;
-    padding: 2rem;
-    position: absolute;
-    left: 1rem;
-    top: 0;
-    width: 60rem;
-    z-index: 999;
-}
-.reg-edit-form .reg_fname,
-.reg-edit-form .reg_lname,
-.reg-edit-form .reg_addr1,
-.reg-edit-form .reg_addr2,
-.reg-edit-form .reg_city,
-.reg-edit-form .reg_state,
-.reg-edit-form .reg_zip,
-.reg-edit-form .reg_country {
-    width: 46%;
-    margin-right: 1rem;
-    float: left;
-}
-.reg-edit-form  .reg_email {
-    width: 96%;
-}
+/*{{{ New Attendee Form */
 .glm-registrant-edit {
     cursor: pointer;
 }
+/*}}} End New Attendee Form */
 
-/* Login Page */
+/*{{{ Login Page */
 div.glm-reg-login {
     background-color: white;
     border: solid 1px black;
@@ -267,12 +187,14 @@ div.glm-reg-forgot {
 div.glm-reg-forgot h4 {
     color: black;
 }
-/* New register account form */
+/*}}} End Login Page */
+
+/*{{{ New Register Account Form */
 div.glm-reg-register {
     background-color: white;
     border: solid 1px black;
     padding: 2rem;
-    width: 30rem;
+    /* width: 30rem; */
 }
 div.glm-reg-register div {
     clear: both;
@@ -287,7 +209,9 @@ div.glm-reg-register input.error {
 }
 div.glm-reg-register div {
     position: relative;
-}
+}/*}}} End New Register Account */
+
+/*{{{ Errors */
 span.glm-error {
     position: absolute;
     bottom: -56px;
@@ -298,4 +222,4 @@ span.glm-error {
 .glm-reg-warning {
     color: red;
 }
-
+/*}}} End Errors */
index 992f808..09db5f7 100644 (file)
 
            // Get a current list of reg events
             $listResult = $this->getSimpleRegEventsList($where.$alphaWhere, 'event_name', true, 'id', $start, $limit, true);
-            echo '<pre>$listResult: ' . print_r( $listResult, true ) . '</pre>';
+            // echo '<pre>$listResult: ' . print_r( $listResult, true ) . '</pre>';
 
             // Get paging results
             $numbDisplayed = $listResult['returned'];
index 5def0b1..392e7f6 100644 (file)
@@ -14,7 +14,7 @@
                 </div>
                 <h3 class="glm-left" style="clear: none;">Checkout</h3>
             </div>
-            
+
             <div class="glm-reg-row">
                 <div class="glm-large-6 glm-columns">
                     <h4>Account Information</h4>
@@ -32,7 +32,7 @@
                         <div class="glm-large-3 glm-columns glm-reg-nowrap">E-Mail Address:</div>
                         <div class="glm-large-9 glm-columns">{$regAccount.fieldData.email}</div>
                     </div>
-  {/if}                    
+  {/if}
                     <div class="glm-reg-row">
                         <div class="glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.fname} glm-reg-required{/if}">First Name:</div>
                         <div class="glm-large-9 glm-columns{if $regAccount.fieldFail.fname} glm-reg-fail{/if}"><input type="text" name="fname" value="{$regAccount.fieldData.fname}"{if $regAccount.fieldRequired.fname} required{/if}></div>
                     </div>
                 </div>
             </div>
-  {if $cart.totalCharges > 0}            
+  {if $cart.totalCharges > 0}
             <div class="glm-reg-row">
                 <div class="glm-large-6 glm-columns">
                     <h4>Payment Information</h4>
                     <div class="glm-reg-row">
                         <div class="glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.cc_cvv} glm-reg-required{/if}">CVV:</div>
                         <div class="glm-large-9 glm-columns{if $regAccount.fieldFail.cc_name} glm-reg-fail{/if}"><input type="text" placeholder="3 digit number on back of card" name="cc_name" value="{$regAccount.fieldData.cc_name}"{if $regAccount.fieldRequired.cc_name} required{/if}></div>
-                    </div>                    
+                    </div>
                 </div>
-  {/if}                
+  {/if}
                 <div class="glm-large-6 glm-columns">
                     <h4>Additional Contact Information</h4>
                     <div class="glm-reg-row">
         </div>
     </div>
 
-    {if $cart.totalCharges > 0} 
+    {if $cart.totalCharges > 0}
         <div style="text-align: right;"><h2>Total Charged: ${$cart.totalCharges|number_format:2}</h2></div>
     {else}
         <div style="text-align: right;">(There is no charge for your request.)</div>
index 47b5b72..64cec84 100644 (file)
@@ -1,59 +1,11 @@
 {* Even Registration App - Backbone.js *}
 {* Underscore Templates for the Event Registration App *}
-{* Template for Account Login *}{literal}
-<script type="text/template" id="eventReg-account-login">
-    <a id="loginCancel">Close</a>
-    <h4>Login</h4>
-    <% if ( message ) { %>
-        <span style="color: red;"><%= message %></span>
-    <% } %>
-    <input class="login" placeholder="Email Address" type="email">
-    <input class="password" placeholder="Password" type="password">
-    <input type="submit" id="accountLogin" value="Login">
-    <a id="forgotLogin">Forgot Password</a>
-</script>
-{/literal}
 {* Template for Logged in Account *}{literal}
 <script type="text/template" id="account-template">
     <span>Logged in as <%= fname %><%= lname %></span>
     <a id="accountLogout">Logout</a>
 </script>
 {/literal}
-{* Template for Register New Account *}{literal}
-<script type="text/template" id="register-new-account">
-    <a id="registerCancel">Close</a>
-    <h3>Register New Account</h3>
-    <div>
-        {/literal}{$terms.reg_term_contact_information}{literal}
-    </div>
-    <div>
-        <input class="account_email" placeholder="*Email Address">
-        <% if ( emailError !== undefined && emailError !== '' ) { %>
-            <span class="error"><%= emailError %></span>
-        <% } %>
-        <input class="account_password" placeholder="*Password">
-    </div>
-    <div>
-        <input class="account_fname" placeholder="*First Name">
-        <input class="account_lname" placeholder="*Last Name">
-    </div>
-    <div>
-        <input class="account_addr1" placeholder="Address 1">
-        <input class="account_addr2" placeholder="Address 2">
-    </div>
-    <div>
-        <input class="account_city" placeholder="City">
-        <input class="account_state" placeholder="State">
-    </div>
-    <div>
-        <input class="account_zip" placeholder="Zip/Postal Code">
-        <input class="account_country" placeholder="Country">
-    </div>
-    <div>
-        <input type="submit" id="accountRegister" value="Register">
-    </div>
-</script>
-{/literal}
 {* Template for the regEvent *}{literal}
 <script type="text/template" id="regEvent-template">
     <h2><%= event_name %></h2>
@@ -98,9 +50,7 @@
 <script type="text/template" id="regClass-template">
     <div class="glm-class-row-header">
         <span class="glm-reg-level-title"><%= name %></span>
-        <span class="reg-class-count"><%= reg_count %></span>
-        <span class="toggle-class-open">+</span>
-        <span class="toggle-class-close">-</span>
+        <span class="reg-class-count"><%= reg_count %>  {/literal}{$terms.reg_term_attendee_plur_cap}{literal}</span>
     </div>
     <div class="reg-class-detail">
         <div><%- descr %></div>
 {* Template for registrant add form *}{literal}
 <script type="text/template" id="eventReg-registrant-add">
     {/literal}{if $regEvent.time_specific.value}
-        <div style="float: right; width: 48%;">
-            <div id="eventCalendar" style="width: 90%;"></div>
-        </div>
-    {/if}{literal}
-    {/literal}{if $regEvent.time_specific.value}
-        <div style="width: 48%;">
-        {else}
-        <div>
+        <div id="eventCalendar" style="width: 90%;"></div>
     {/if}{literal}
         <div>
-            {/literal}{$terms.reg_term_contact_information}{literal}
-        </div>
-        <div>
-            <input class="add_reg_fname" placeholder="First Name" value="<%- fname %>">
-            <input class="add_reg_lname" placeholder="Last Name" value="<%- lname %>">
-        </div>
-        <div>
-            <input class="add_reg_email" placeholder="Email Address" value="<%- email %>">
-            (Email is optional)
-        </div>
-        <div>
-            <input class="add_reg_addr1" placeholder="Address 1" value="<%- addr1 %>">
-            <input class="add_reg_addr2" placeholder="Address 2" value="<%- addr2 %>">
-        </div>
-        <div>
-            <input class="add_reg_city" placeholder="City" value="<%- city %>">
-            <input class="add_reg_state" placeholder="State" value="<%- state %>">
-        </div>
-        <div>
-            <input class="add_reg_zip" placeholder="Zip/Postal Code" value="<%- zip %>">
-            <input class="add_reg_country" placeholder="Country" value="<%- country %>">
-        </div>
-        {/literal}{if $regEvent.time_specific.value}
-            <div>
-                Selected Time: <span id="add_reg-select-time-display"></span>
-                <input type="hidden" id="add_reg-select-time">
+            <div class="glm-reg-row">
+                <div class="glm-columns glm-large-6 glm-small-12">
+                    {/literal}{$terms.reg_term_contact_information}{literal}
+                </div>
             </div>
-        {/if}{literal}
-    </div>
-
-    <div>
+            <div class="glm-reg-row">
+                <div class="glm-columns glm-large-6 glm-small-12">
+                    <input class="add_reg_fname" placeholder="First Name" value="<%- fname %>">
+                </div>
+                <div class="glm-columns glm-large-6 glm-small-12">
+                    <input class="add_reg_lname" placeholder="Last Name" value="<%- lname %>">
+                </div>
+            </div>
+            <div class="glm-reg-row">
+                <div class="glm-columns glm-large-6 glm-small-12">
+                    <input class="add_reg_email" placeholder="Email Address" value="<%- email %>">
+                    (Email is optional)
+                </div>
+                <div class="glm-columns glm-large-6 glm-small-12">
+                    <input class="add_reg_addr1" placeholder="Address 1" value="<%- addr1 %>">
+                </div>
+            </div>
+            <div class="glm-reg-row">
+                <div class="glm-columns glm-large-6 glm-small-12">
+                    <input class="add_reg_addr2" placeholder="Address 2" value="<%- addr2 %>">
+                </div>
+                <div class="glm-columns glm-large-6 glm-small-12">
+                    <input class="add_reg_city" placeholder="City" value="<%- city %>">
+                </div>
+            </div>
+            <div class="glm-reg-row">
+                <div class="glm-columns glm-large-6 glm-small-12">
+                    <input class="add_reg_state" placeholder="State" value="<%- state %>">
+                </div>
+                <div class="glm-columns glm-large-6 glm-small-12">
+                    <input class="add_reg_zip" placeholder="Zip/Postal Code" value="<%- zip %>">
+                </div>
+            </div>
+            <div class="glm-reg-row">
+                <div class="glm-columns glm-large-6 glm-small-12">
+                    <input class="add_reg_country" placeholder="Country" value="<%- country %>">
+                </div>
+                {/literal}{if $regEvent.time_specific.value}
+                    Selected Time: <span id="add_reg-select-time-display"></span>
+                    <input type="hidden" id="add_reg-select-time">
+                {/if}{literal}
+            </div>
+        </div>
+    <div class="glm-reg-row">
         <input class="add-new-registrant button tiny" value="Add {/literal}{$terms.reg_term_attendee_cap}{literal}" type="submit">
         <a class="add-new-registrant-cancel">Cancel</a>
     </div>