Styles for reg list and header, payment overhaul start

diff --git a/css/front.css b/css/front.css
index d3b1d76..3b1f303 100644 (file)
--- a/css/front.css
+++ b/css/front.css
@@ -360,3 +360,50 @@ span.glm-error {
     }
 }
 /*}}} */
+
+
+/* Reg list styles */
+#glm-reg-list .glm-reg-event-item {
+    padding: 0;
+    border: 1px solid lightgrey;
+    overflow: hidden;
+    border-radius: 4px;
+    background: -webkit-linear-gradient(top, #f2f2f2 45%, #FFFFFF 100%);
+    background: -moz-linear-gradient(center top, #f2f2f2 45%, #FFFFFF 100%);
+    background: -ms-linear-gradient(top, #f2f2f2 45%, #FFFFFF 100%);
+}
+#glm-reg-list .glm-reg-event-item .glm-reg-list-details-wrapper {
+    padding: 0 10px;
+}
+#glm-reg-list .glm-reg-event-item .glm-reg-list-data {
+    padding: 5px 10px;
+}
+#glm-reg-list .glm-reg-event-item .glm-reg-list-image-container {
+    padding: 0;
+    
+}
+
+/* Reg detail styles */
+#regApp {
+    
+}
+
+#accountHeader {
+    background: -webkit-linear-gradient(top, #f2f2f2 45%, #FFFFFF 100%);
+    background: -moz-linear-gradient(center top, #f2f2f2 45%, #FFFFFF 100%);
+    background: -ms-linear-gradient(top, #f2f2f2 45%, #FFFFFF 100%);
+    border: 1px solid lightgrey;
+    border-radius: 4px;
+    height: 60px;
+    margin: 0 auto;
+    max-width: 1024px;
+    padding: 10px 20px;   
+}
+#accountHeader .button {
+    border-radius: 3px;
+    margin-bottom: 0;
+}
+#reg_bulletin {
+    max-width: 1024px;
+    margin: 10px auto;
+}
\ No newline at end of file

diff --git a/views/front/registrations/checkout.html b/views/front/registrations/checkout.html
index 286030a..5901fb9 100644 (file)
--- a/views/front/registrations/checkout.html
+++ b/views/front/registrations/checkout.html
@@ -287,7 +287,87 @@
             <div class="glm-reg-row">
                 <div class="glm-large-6 glm-small-12 glm-columns">
                     <h4>Payment Information</h4>
-
+                    
+                    <select>
+                    {foreach $payMethods as $payMethod}
+                        
+                        {$pmname = array_search($payMethod.value, $payMethodsNumb)}
+                        {$pm = $payMethodsNumb.{$pmname}}
+                        {if $payMethods.{$pm}.default} 
+                            <option value="{$pm}">{$payMethods.{$pm}.name}</option>
+                        {/if}
+                    {/foreach}
+                    </select>
+                    Currently the 'select' foreach iterates without also dumping the payment method detail div
+                    Either iterate over it once again (as below) or find some way to spit it out outside of the 'select' element
+                    
+                    {foreach $payMethods as $payMethod}
+                        
+                        {$pmname = array_search($payMethod.value, $payMethodsNumb)}
+                        {$pm = $payMethodsNumb.{$pmname}}
+                        {if $payMethods.{$pm}.default} 
+                            
+                            <h5><input id="payMethodButton_{$pm}" type="radio" name="payMethod" value="{$pm}" class="payMethodSelector" required {if $payMethod == {$pm}} checked{/if}><label for="payMethodButton_{$pm}">  {$payMethods.{$pm}.name}</label></h5>
+                            {if $pmname == "CompCode"} 
+                                <div id="payMethod_{$pm}" class="payMethodSelection glm-hidden">
+                                    <div class="glm-reg-row">
+                                        <div class="glm-small-12 glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.comp_code} glm-reg-required{/if}">Enter code:</div>
+                                        <div class="glm-small-12 glm-large-9 glm-columns{if $regAccount.fieldFail.comp_code} glm-reg-fail{/if}">
+                                            <input type="text" name="comp_code" value="{$regAccount.fieldData.comp_code}"{if $regAccount.fieldRequired.comp_code} required{/if} class="payMethodInput payMethodInput_{$pm}">
+                                        </div>
+                                    </div>
+                                </div>
+                            {else if $pmname == "CreditCard"} 
+                                
+                                <div id="payMethod_{$pm}" class="payMethodSelection glm-hidden">
+                                    <div class="glm-reg-row">
+                                        <div class="glm-small-12 glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.cc_name} glm-reg-required{/if}">Name on Card:</div>
+                                        <div class="glm-small-12 glm-large-9 glm-columns{if $regAccount.fieldFail.cc_name} glm-reg-fail{/if}">
+                                            <input type="text" name="cc_name" value="{$regAccount.fieldData.cc_name}"{if $regAccount.fieldRequired.cc_name} required{/if} class="payMethodInput payMethodInput_{$pm}">
+                                        </div>
+                                    </div>
+                                    <div class="glm-reg-row">
+                                        <div class="glm-small-12 glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.cc_type} glm-reg-required{/if}">Card Type:</div>
+                                        <div class="glm-small-12 glm-large-9 glm-columns{if $regAccount.fieldFail.cc_type} glm-reg-fail{/if}">
+                                            <select name="cc_type" class="payMethodInput payMethodInput_{$pm}">
+                                                <option value=""></option>
+                                    {foreach $regAccount.fieldData.cc_type.list as $c}
+                                                <option value="{$c.value}"{if $c.default} selected="selected"{/if}>
+                                                    {$c.name}
+                                                </option>
+                                    {/foreach}
+                                            </select>
+                                        </div>
+                                    </div>
+                                    <div class="glm-reg-row">
+                                        <div class="glm-small-12 glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.cc_numb} glm-reg-required{/if}">Card Number:</div>
+                                        <div class="glm-small-12 glm-large-9 glm-columns{if $regAccount.fieldFail.cc_numb} glm-reg-fail{/if}">
+                                            <input type="text" placeholder="Numbers Only" name="cc_numb" value="{$regAccount.fieldData.cc_numb}"{if $regAccount.fieldRequired.cc_numb} required{/if} class="payMethodInput payMethodInput_{$pm} cc-input">
+                                       </div>
+                                    </div>
+                                    <div class="glm-reg-row">
+                                        <div class="glm-small-12 glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.cc_exp} glm-reg-required{/if}">Card Expiration:</div>
+                                        <div class="glm-small-12 glm-large-9 glm-columns{if $regAccount.fieldFail.cc_exp} glm-reg-fail{/if}">
+                                            <input type="text" placeholder="MM/YY" name="cc_exp" value="{$regAccount.fieldData.cc_exp}"{if $regAccount.fieldRequired.cc_exp} required{/if} class="payMethodInput payMethodInput_{$pm} expire-input">
+                                        </div>
+                                    </div>
+                                    <div class="glm-reg-row">
+                                        <div class="glm-small-12 glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.cc_cvv} glm-reg-required{/if}">CVV:</div>
+                                        <div class="glm-small-12 glm-large-9 glm-columns{if $regAccount.fieldFail.cc_cvv} glm-reg-fail{/if}">
+                                            <input type="text" placeholder="3 or 4 digit security code on back of card" name="cc_cvv" value="{$regAccount.fieldData.cc_cvv}"{if $regAccount.fieldRequired.cc_cvv} required{/if} class="payMethodInput payMethodInput_{$pm} cvv-input">
+                                        </div>
+                                    </div>
+                                </div>
+                            {else}
+                                <div id="payMethod_{$pm}" class="payMethodSelection glm-hidden">
+                                    <p>*** {$pmname} ****</p>
+                                </div>
+                            {/if}
+                        {/if}
+                    {/foreach}
+                    the code below is the same, but doesn't utilize a foreach loop
+                    
+                    
     {$pm = $payMethodsNumb.NoCharge}
     {if $payMethods.{$pm}.default}
                     <h5><input id="payMethodButton_{$pm}" type="radio" name="payMethod" value="{$pm}" class="payMethodSelector" required {if $payMethod == {$pm}} checked{/if}><label for="payMethodButton_{$pm}">  {$payMethods.{$pm}.name}</label></h5>

diff --git a/views/front/registrations/header.html b/views/front/registrations/header.html
index ef96418..f9572d8 100644 (file)
--- a/views/front/registrations/header.html
+++ b/views/front/registrations/header.html
@@ -2,7 +2,7 @@
     <div class="glm-right">
     {if $loggedIn}
         Logged in as {$loggedIn.fname} {$loggedIn.lname}
-        <a class="button tiny" href="{$regUrl}?page=login&option=logout">Logout</a>
+        <a class="accountHeader-logout button tiny" href="{$regUrl}?page=login&option=logout">Logout</a>
     {else}
         <a id="appLogin" class="button tiny" href="{$regUrl}?page=login">Login</a>
         <a id="register" class="button tiny" href="{$regUrl}?page=register">Create an Account</a>
@@ -12,7 +12,7 @@
         <a href="{$regUrl}" class="button tiny">Register for Another Event</a>
     {/if}
     {if $page != 'cart'}
-        <a href="{$regUrl}?page=cart" class="button tiny">Return to Cart</a>
+        <a href="{$regUrl}?page=cart" class="button tiny">&#8629; Return to Cart</a>
     {/if}
     &nbsp;
 </div>

diff --git a/views/front/registrations/list.html b/views/front/registrations/list.html
index 2d6f812..c8a75a5 100644 (file)
--- a/views/front/registrations/list.html
+++ b/views/front/registrations/list.html
@@ -1,7 +1,7 @@
 {include file='front/registrations/header.html'}
 
 {if $reg_bulletin}
-<div>
+<div id="reg_bulletin">
     {$reg_bulletin}
 </div>
 {/if}
@@ -15,94 +15,100 @@
             <div class="glm-small-12 glm-large-9 glm-columns glm-reg-list-data">
                 <h3><a href="{$thisUrl}?page=registration&eventRegId={$event.id}">{$event.event_name}</a></h3>
                 <!-- START EVENT REG TIMES -->
-                <div class="glm-row">
-<!--                    <div class="glm-columns glm-large-2 glm-small-12 glm-reg-list-label">
-                        <strong> Dates/Times: </strong>
-                    </div>-->
+                <div class="glm-reg-list-details-wrapper">
+                    <div class="glm-row">
+    <!--                    <div class="glm-columns glm-large-2 glm-small-12 glm-reg-list-label">
+                            <strong> Dates/Times: </strong>
+                        </div>-->
 
-                    <div class="glm-columns glm-small-12 glm-reg-list-details">
-                        {$lastDate = ''}
-                        {foreach $event.recurrences as $rec}
+                        <div class="glm-columns glm-small-12 glm-reg-list-details">
+                            {$lastDate = ''}
+                            {foreach $event.recurrences as $rec}
 
-                            {$eDate = $rec.from_date.timestamp|date_format:"%A, %B %e, %Y"}
-                            {if $eDate != $lastDate}
-                                {$lastDate = $eDate}
+                                {$eDate = $rec.from_date.timestamp|date_format:"%A, %B %e, %Y"}
+                                {if $eDate != $lastDate}
+                                    {$lastDate = $eDate}
                                     <div>
-                                {if $event.recurrences.0.recurring.value == 1} Occurring {/if}
+                                        <b>When: </b>
+                                    {if $event.recurrences.0.recurring.value == 1} Occurring {/if}
 
-                                {$eDate}
-                                    {if $rec.from_date.date != $rec.to_date.date}
-                                        - {$rec.to_date.timestamp|date_format:"%B %e, %Y"}
-                                    {else if $rec.specific_dates}
-                                        - {$rec.specific_dates|@end|date_format:"%B %e, %Y"}
-                                    {/if}
+                                    {$eDate}
+                                        {if $rec.from_date.date != $rec.to_date.date}
+                                            - {$rec.to_date.timestamp|date_format:"%B %e, %Y"}
+                                        {else if $rec.specific_dates}
+                                            - {$rec.specific_dates|@end|date_format:"%B %e, %Y"}
+                                        {/if}
 
 
-                                    {if $rec.day_of_week.names|@count < 7 && $rec.day_of_week.names|@count > 0 }
-                                        on
-                                        {foreach $rec.day_of_week.names as $day}
-                                            {if $day == "Thursday"}
-                                                <span> {$day|substr:0:4} </span>
-                                            {else}
-                                                <span> {$day|substr:0:3} </span>
-                                             {/if}
-                                         {/foreach}
+                                        {if $rec.day_of_week.names|@count < 7 && $rec.day_of_week.names|@count > 0 }
+                                            on
+                                            {foreach $rec.day_of_week.names as $day}
+                                                {if $day == "Thursday"}
+                                                    <span> {$day|substr:0:4} </span>
+                                                {else}
+                                                    <span> {$day|substr:0:3} </span>
+                                                 {/if}
+                                             {/foreach}
 
-                                    {/if}
-
-                                </div>
-                            {/if}
-                            {if isset($event.all_day) && !$event.all_day}
-                                <div>
-                                        {if $rec.start_time.time == $rec.end_time.time || $rec.start_time_only.value}
-                                            {$rec.start_time.time|strtotime|date_format:"%l:%M %P"}
-                                        {else}
-                                            {$rec.start_time.time|strtotime|date_format:"%l:%M %P"} - {$rec.end_time.time|strtotime|date_format:"%l:%M %P"}
-                                        {/if}
-                                        {if $rec.name && $rec.name != 'Imported' && $rec.name != 'Imported Event Schedule' }
-                                            {$rec.name}
                                         {/if}
 
-                                </div>
-                            {else}
-                                {if $rec.name && $rec.name != 'Imported' && $rec.name != 'Imported Event Schedule' }
-                                    {$rec.name}
+                                    </div>
                                 {/if}
+                                {if isset($event.all_day) && !$event.all_day}
+                                    <div>
+                                            {if $rec.start_time.time == $rec.end_time.time || $rec.start_time_only.value}
+                                                {$rec.start_time.time|strtotime|date_format:"%l:%M %P"}
+                                            {else}
+                                                {$rec.start_time.time|strtotime|date_format:"%l:%M %P"} - {$rec.end_time.time|strtotime|date_format:"%l:%M %P"}
+                                            {/if}
+                                            {if $rec.name && $rec.name != 'Imported' && $rec.name != 'Imported Event Schedule' }
+                                                {$rec.name}
+                                            {/if}
 
-                            {/if}
+                                    </div>
+                                {else}
+                                    {if $rec.name && $rec.name != 'Imported' && $rec.name != 'Imported Event Schedule' }
+                                        {$rec.name}
+                                    {/if}
 
-                        {/foreach}
+                                {/if}
+
+                            {/foreach}
 
-                    </div>
-                </div>
-                <!-- EVENT REG TIMES END -->
-                <!-- EVENT REG LOCATION -->
-                {if $event.hide_address.name == 'No'}
-                    <div class="glm-row">
-<!--                        <div class="glm-columns glm-large-2 glm-small-12 glm-reg-list-label">
-                            <strong> Location: </strong>
-                        </div>-->
-                        <div class="glm-columns glm-small-12 glm-reg-list-details">
-                            {if !$event.use_member_location.value && isset($event.locations) && ($event.locations.name || $event.locations.address)}
-                                {if $event.locations.name}{$event.locations.name}<br>{/if}
-                                {if $event.locations.address} {$event.locations.address}<br> {/if}
-                                {if $event.locations.city.name}{$event.locations.city.name}{/if}{if $event.locations.state.value}, {$event.locations.state.value} {/if}
-                                {if $event.locations.zip} {$event.locations.zip} {/if}
-                                {if $event.locations.phone} {apply_filters('glm_associate_phone_filter', $event.locations.phone)} {/if}
-                            {elseif isset($event.member) && $event.use_member_location.value}
-                                {if $event.member.member} {$event.member.member}<br> {/if}
-                                {if $event.member.addr1} {$event.member.addr1}<br> {/if}
-                                {if $event.member.city}{$event.member.city}{/if}{if $event.member.state.value}, {$event.member.state.value}{/if}
-                                {if $event.member.zip} {$event.member.zip} {/if}
-                                {if $event.member.phone} {apply_filters('glm_associate_phone_filter', $event.member.phone)} {/if}
-                            {/if}
                         </div>
                     </div>
-                {/if}
+                    <!-- EVENT REG TIMES END -->
+                    <!-- EVENT REG LOCATION -->
+                    {if $event.hide_address.name == 'No'}
+                        <div class="glm-row">
+    <!--                        <div class="glm-columns glm-large-2 glm-small-12 glm-reg-list-label">
+                                <strong> Location: </strong>
+                            </div>-->
+                            <div class="glm-columns glm-small-12 glm-reg-list-details">
+                            <b>Where: </b>
+                                {if !$event.use_member_location.value && isset($event.locations) && ($event.locations.name || $event.locations.address)}
+                                    {if $event.locations.name}{$event.locations.name}<br>{/if}
+                                    {if $event.locations.address} {$event.locations.address}<br> {/if}
+                                    {if $event.locations.city.name}{$event.locations.city.name}{/if}{if $event.locations.state.value}, {$event.locations.state.value} {/if}
+                                    {if $event.locations.zip} {$event.locations.zip} {/if}
+                                    {if $event.locations.phone} {apply_filters('glm_associate_phone_filter', $event.locations.phone)} {/if}
+                                {elseif isset($event.member) && $event.use_member_location.value}
+                                    {if $event.member.member} {$event.member.member}<br> {/if}
+                                    {if $event.member.addr1} {$event.member.addr1}<br> {/if}
+                                    {if $event.member.city}{$event.member.city}{/if}{if $event.member.state.value}, {$event.member.state.value}{/if}
+                                    {if $event.member.zip} {$event.member.zip} {/if}
+                                    {if $event.member.phone} {apply_filters('glm_associate_phone_filter', $event.member.phone)} {/if}
+                                {/if}
+                            </div>
+                        </div>
+                    {/if}
 
-                <!-- EVENT REG LOCATION END -->
-                <div class="glm-small-12 glm-columns glm-reg-list-description">
-                    {$event.intro}
+                    <!-- EVENT REG LOCATION END -->
+                    <div class="glm-small-12 glm-columns glm-reg-list-description">
+                        
+                        <b>What: </b>
+                        {$event.intro}
+                    </div>
                 </div>
             </div>
             {if $event.image}

diff --git a/views/front/registrations/registration.html b/views/front/registrations/registration.html
index 84abd58..b4248c4 100644 (file)
--- a/views/front/registrations/registration.html
+++ b/views/front/registrations/registration.html
@@ -271,7 +271,7 @@
     {include file='front/registrations/header.html'}
 
 {if $reg_bulletin}
-    <div>
+    <div id="reg_bulletin">
         {$reg_bulletin}
     </div>
 {/if}