From ec74cba71e587dc6edd771f44b5f23f374eb1441 Mon Sep 17 00:00:00 2001 From: laury Date: Thu, 21 Dec 2017 14:39:09 -0500 Subject: [PATCH] Accountheader styles, checkout page billing/account switched Accountheader has been gutted and restyled, now only having 3 sections. Checkout page has had the billing and account sections switched and asterisks added for required fields. Minor adjustment to the spacing of the icons on the registration list. --- css/front.css | 129 +++++++++-- setup/frontHooks.php | 2 +- views/front/registrations/accountHeader.html | 38 ++-- views/front/registrations/cart.html | 2 +- views/front/registrations/checkout.html | 227 ++++++++++--------- views/front/registrations/loginWidget.html | 45 ++++ views/front/registrations/registration.html | 12 +- 7 files changed, 298 insertions(+), 157 deletions(-) create mode 100644 views/front/registrations/loginWidget.html diff --git a/css/front.css b/css/front.css index 42f8471..1665863 100644 --- a/css/front.css +++ b/css/front.css @@ -62,7 +62,7 @@ position: absolute; width: 24px; height: 24px; - left: -12px; + left: -5px; } .glm-reg-contact-container::before{ content: ""; @@ -94,7 +94,7 @@ position: absolute; width: 24px; height: 24px; - left: -12px; + left: -5px; } .glm-reg-time::before{ content: ""; @@ -114,7 +114,7 @@ position: absolute; width: 24px; height: 24px; - left: -12px; + left: -5px; } .glm-reg-event-profile-map-container{ padding: 0; @@ -139,7 +139,7 @@ position: absolute; width: 24px; height: 24px; - left: -12px; + left: -5px; } .glm-reg-terms-conditions{ @@ -243,7 +243,7 @@ } .glm-reg-list-details{ padding: 0; - margin: 0 0 5px 10px; + margin: 0 0 5px 15px; } .glm-reg-list-data{ padding: 0; @@ -413,7 +413,6 @@ body .glm-reg-proceed-to-checkout{ font-size: 16px !important; } .reg-class-detail { - display: none; padding: 5px 10px; } .toggle-class-open { @@ -555,7 +554,7 @@ span.glm-error { margin-left: 10px; } -#glm-reg-widget { +/*#glm-reg-widget { display: inline-block; } #glm-header-reg-widget{ @@ -565,7 +564,7 @@ span.glm-error { } #glm-header-reg-widget a{ text-decoration: none; -} +}*/ /*{{{ Media Queries */ @media (min-width: 64.063em) { @@ -651,7 +650,89 @@ span.glm-error { padding: 10px; margin-left: 10px; } -#accountHeader .glm-reg-header-btn{ +#accountHeader { + max-width: 1024px; +} +#accountHeader .glm-reg-header-btn { + border-radius: 4px; + margin-bottom: 0; + padding: 12px 24px; +} +#accountHeader .glm-reg-header-btn:hover { + text-decoration: none; + +} +#accountHeader #register { + clear: both; +} +#accountHeader-left { + float: left; + text-align: center; +} +#accountHeader-left > * { + float: left; +} +#accountHeader-right > * { + float: right; +} +@media (max-width: 1024px) { + #accountHeader-left .glm-reg-header-btn { + float: none; + margin: 10px auto; + width: 250px; + } + #accountHeader-right .glm-reg-header-btn { + float: none; + margin: 10px auto; + width: 250px; + } + #accountHeader .glm-reg-header-btn { + + } +} +#accountHeader-right { + float: right; + position: relative; + text-align: center; +} + +#glm-header-reg-widget { + background-color: white; + border: 1px solid lightgrey; + clear: both; + float: none; + margin: 0 auto; + width: 250px; +} +#glm-header-reg-widget > a:hover { + text-decoration: none; +} +#glm-header-reg-widget > a:hover #registrations-cart-link-data { + text-decoration: underline; +} +#registrations-cart-link-title { + background-color: #008CBA; + color: white; + text-align: center; +} +#registrations-cart-link-title:hover { + color: white; + text-decoration: none; +} +#appLogin { + display: block; + width: 100px; +;} +#appLogin-box { + position: absolute; + top: 20px; + right: 0; +} +#appLogin-box.hidden { + height: 0; + overflow: hidden; +} +/*#accountHeader .glm-reg-header-btn{ font-size: 16px; height: 60px; padding: 20px 20px; @@ -678,7 +759,7 @@ span.glm-error { padding: 0; float: left; text-align: left; -/* margin-top: 12px;*/ + margin-top: 12px; } #accountHeader #accountHeader-left .glm-reg-header-btn { float: left; @@ -699,7 +780,7 @@ span.glm-error { width: 33%; float: right; text-align: right; -/* margin-top: 12px;*/ + margin-top: 12px; } #accountHeader #accountHeader-right .glm-reg-header-btn:first-child { border-top-right-radius: 4px; @@ -725,9 +806,9 @@ span.glm-error { min-height: 60px; width: 100%; } -.progress-row{ - margin-bottom: 25px !important; -} +*/.progress-row{ + margin-bottom: 10px !important; +}/* @media(max-width: 1024px) { #accountHeader { @@ -777,7 +858,7 @@ span.glm-error { border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; } -} +}*/ #registrations-cart-link-title { font-size: 16px; border-bottom: 1px solid lightgrey; @@ -792,9 +873,9 @@ span.glm-error { border-bottom: 1px solid lightgrey; } @media(max-width: 1024px) { - #glm-header-reg-widget a{ +/* #glm-header-reg-widget a{ display: block; - } + }*/ /* #accountHeader #accountHeader-center { text-align: center; float: none; @@ -813,11 +894,11 @@ span.glm-error { margin: 10px auto; clear: both; }*/ - #accountHeader #glm-header-reg-widget { +/* #accountHeader #glm-header-reg-widget { margin-top: 0; min-height: 0; border-width: 1px; - } + }*/ .reg-class-accounts{ padding-left: 0; } @@ -858,13 +939,13 @@ span.glm-error { .glm-reg-image-container { text-align: left; } - +/* #accountHeader #glm-header-reg-widget { width: 100%; } #accountHeader #glm-header-reg-widget #registrations-cart-link-widget { width: 100% !important; - } + }*/ #regApp #glm-reg-event-name { width: auto; white-space: normal; @@ -973,6 +1054,10 @@ span.glm-error { } .button.glm-reg-button { font-size: 16px; + border-radius: 4px; +} +.button.glm-reg-button:hover { + text-decoration: none; } #glm-reg-cart-continue, .glm-reg-checkout,#regSubmitButton{ @@ -994,7 +1079,7 @@ span.glm-error { text-decoration: underline; } .glm-reg-cart-registrant { - + padding-left: 25px; } /* Checkout styles */ diff --git a/setup/frontHooks.php b/setup/frontHooks.php index f241572..6bf8e0f 100644 --- a/setup/frontHooks.php +++ b/setup/frontHooks.php @@ -73,4 +73,4 @@ add_filter( add_filter( 'glm_members_registrations_header', function($view ){ echo do_shortcode( '[glm-members-registrations-cart-link-widget view="accountHeader"]' ); -},10,1); \ No newline at end of file +},10,1); diff --git a/views/front/registrations/accountHeader.html b/views/front/registrations/accountHeader.html index 1aa339f..a360b6c 100644 --- a/views/front/registrations/accountHeader.html +++ b/views/front/registrations/accountHeader.html @@ -1,18 +1,12 @@ -
+
+ +
+ + Event Registration List + -
- {if $page != 'register'} - - Register for Another Event - - {/if} - {if $page != 'cart'} - - Return to Cart - - {/if}
-
+
{if $haveCart && $numb_registrants > 0 && $numb_events > 0} @@ -69,17 +63,24 @@
{if $loggedIn} - + Logout Logged in as {$loggedIn.fname} {$loggedIn.lname} {else} - + Login - - Create an Account + + + Create an Account? + {/if}
@@ -116,5 +117,8 @@ jQuery(document).ready(function($) { } }); }); + loginBox = $("appLogin-box").click(function () { + this.toggleClass("hidden"); + }); }); diff --git a/views/front/registrations/cart.html b/views/front/registrations/cart.html index 96ea03c..65e1020 100644 --- a/views/front/registrations/cart.html +++ b/views/front/registrations/cart.html @@ -52,7 +52,7 @@
{else}
-
You have not yet submitted your registration! Proceed to Checkout
+
You have not yet submitted your registration! Proceed to Checkout
{/if} diff --git a/views/front/registrations/checkout.html b/views/front/registrations/checkout.html index 033a3dd..71a9b2f 100644 --- a/views/front/registrations/checkout.html +++ b/views/front/registrations/checkout.html @@ -1,5 +1,5 @@ {apply_filters('glm_members_registrations_header', 'accountHeader')} - +{debug} {if true}
@@ -38,69 +38,139 @@
- +
-
+
+ {if true} +
+
+
+ * Required Fields +
+
+

Billing Information

+ +
+
First Name{if $regAccount.fieldRequired.bill_fname} *{/if}
+
+
+
+
Last Name{if $regAccount.fieldRequired.bill_lname} *{/if}
+
+
+
+
Address{if $regAccount.fieldRequired.bill_addr1} *{/if}
+
+
+
+
 {if $regAccount.fieldRequired.bill_addr2} *{/if}
+
+
+
+
City{if $regAccount.fieldRequired.bill_city} *{/if}
+
+
+
+
State{if $regAccount.fieldRequired.bill_state} *{/if}
+
+ +
+
+
+
Zip/Postal Code{if $regAccount.fieldRequired.bill_zip} *{/if}
+
+
+
+
Country{if $regAccount.fieldRequired.bill_country} *{/if}
+
+ +
+
+
+
Phone{if $regAccount.fieldRequired.bill_phone} *{/if}
+
+
+
+
FAX{if $regAccount.fieldRequired.bill_fax} *{/if}
+
+
+
+ + {/if}