From: Mathieu Lutfy Date: Sat, 4 May 2013 18:09:45 +0000 (-0400) Subject: Merge credit card icons into one sprint file, and use the term 'icon' instead of... X-Git-Url: https://vcs.fsf.org/?a=commitdiff_plain;h=222fa50288db905e38be6e64c3702d218abb2665;p=civicrm-core.git Merge credit card icons into one sprint file, and use the term 'icon' instead of 'logo'. --- diff --git a/css/civicrm.css b/css/civicrm.css index 314ce761aa..286a2a205d 100644 --- a/css/civicrm.css +++ b/css/civicrm.css @@ -3961,44 +3961,46 @@ span.crm-status-icon { } /* Styles for credit card payment logos (FIXME: replace with sprite?) */ -#crm-container .credit_card_type-section .crm-credit_card_type-logos .crm-credit_card_type-logo-visa { - background: url(../i/cc-visa.png) no-repeat 0 0 transparent; +#crm-container .credit_card_type-section .crm-credit_card_type-icons a { + display: block; + float: left; + width: 50px; + height: 30px; + background: url(../i/creditcard-icons.png) no-repeat 0 0 transparent; + text-indent: -20000px; } -#crm-container .credit_card_type-section .crm-credit_card_type-logos .crm-credit_card_type-logo-mastercard { - background: url(../i/cc-mastercard.png) no-repeat 0 0 transparent; +#crm-container .credit_card_type-section .crm-credit_card_type-icons .crm-credit_card_type-icon-visa { + background-position: 0 0; + width: 75px; } -#crm-container .credit_card_type-section .crm-credit_card_type-logos .crm-credit_card_type-logo-amex { - background: url(../i/cc-amex.png) no-repeat 0 0 transparent; +#crm-container .credit_card_type-section .crm-credit_card_type-icons .crm-credit_card_type-icon-mastercard { + background-position: -75px 0; } -#crm-container .credit_card_type-section .crm-credit_card_type-logos .crm-credit_card_type-logo-discover { - background: url(../i/cc-discover.png) no-repeat 0 0 transparent; +#crm-container .credit_card_type-section .crm-credit_card_type-icons .crm-credit_card_type-icon-amex { + background-position: -125px 0; } -#crm-container .credit_card_type-section .crm-credit_card_type-logos .crm-credit_card_type-logo-jcb { - background: url(../i/cc-jcb.png) no-repeat 0 0 transparent; +#crm-container .credit_card_type-section .crm-credit_card_type-icons .crm-credit_card_type-icon-discover { + background-position: -175px 0; } -#crm-container .credit_card_type-section .crm-credit_card_type-logos a { - display: block; - float: left; - width: 50px; - height: 30px; - text-indent: -20000px; +#crm-container .credit_card_type-section .crm-credit_card_type-icons .crm-credit_card_type-icon-jcb { + background-position: -225px 0; } -#crm-container .credit_card_type-section .crm-credit_card_type-logos a.crm-credit_card_type-logo-visa { - width: 90px; +#crm-container .credit_card_type-section .crm-credit_card_type-icons .crm-credit_card_type-icon-unionpay { + background-position: -275px 0; } -/* Avoid weird border around the images */ -#crm-container .credit_card_type-section .crm-credit_card_type-logos a, -#crm-container .credit_card_type-section .crm-credit_card_type-logos a:link, -#crm-container .credit_card_type-section .crm-credit_card_type-logos a:hover, -#crm-container .credit_card_type-section .crm-credit_card_type-logos a:focus, -#crm-container .credit_card_type-section .crm-credit_card_type-logos a:active { +/* Avoid weird border around the images (some themes will add a border around images) */ +#crm-container .credit_card_type-section .crm-credit_card_type-icons a, +#crm-container .credit_card_type-section .crm-credit_card_type-icons a:link, +#crm-container .credit_card_type-section .crm-credit_card_type-icons a:hover, +#crm-container .credit_card_type-section .crm-credit_card_type-icons a:focus, +#crm-container .credit_card_type-section .crm-credit_card_type-icons a:active { color: #fff; } diff --git a/i/cc-amex.png b/i/cc-amex.png deleted file mode 100644 index a5ad9759f2..0000000000 Binary files a/i/cc-amex.png and /dev/null differ diff --git a/i/cc-discover.png b/i/cc-discover.png deleted file mode 100644 index 05311a8642..0000000000 Binary files a/i/cc-discover.png and /dev/null differ diff --git a/i/cc-jcb.png b/i/cc-jcb.png deleted file mode 100644 index cf43ae843f..0000000000 Binary files a/i/cc-jcb.png and /dev/null differ diff --git a/i/cc-mastercard.png b/i/cc-mastercard.png deleted file mode 100644 index 6254fb31cc..0000000000 Binary files a/i/cc-mastercard.png and /dev/null differ diff --git a/i/cc-unionpay.png b/i/cc-unionpay.png deleted file mode 100644 index 80a84f34bb..0000000000 Binary files a/i/cc-unionpay.png and /dev/null differ diff --git a/i/cc-visa.png b/i/cc-visa.png deleted file mode 100644 index 31635ebbc9..0000000000 Binary files a/i/cc-visa.png and /dev/null differ diff --git a/i/creditcard-icons.png b/i/creditcard-icons.png new file mode 100644 index 0000000000..00076366cf Binary files /dev/null and b/i/creditcard-icons.png differ diff --git a/templates/CRM/Core/BillingBlock.js b/templates/CRM/Core/BillingBlock.js index c67dd9f11c..6b8c23ca6a 100644 --- a/templates/CRM/Core/BillingBlock.js +++ b/templates/CRM/Core/BillingBlock.js @@ -2,25 +2,25 @@ (function($) { civicrm_billingblock_creditcard_helper(); - $('#crm-container').on('crmFormLoad', '*', function() { + $('#crm-container .credit_card_type-section').on('crmFormLoad', '*', function() { civicrm_billingblock_creditcard_helper(); }); /** - * Adds the logos of enabled credit cards - * Handles clicking on a logo. - * Changes the logo depending on the credit card number. + * Adds the icons of enabled credit cards + * Handles clicking on a icon. + * Changes the icon depending on the credit card number. * Removes spaces and dashes from credit card numbers. */ function civicrm_billingblock_creditcard_helper() { $.each(CRM.config.creditCardTypes, function(key, val) { - var html = '' + val + ''; - $('.crm-credit_card_type-logos').append(html); + var html = '' + val + ''; + $('.crm-credit_card_type-icons').append(html); - $('.crm-credit_card_type-logo-' + key).click(function() { + $('.crm-credit_card_type-icon-' + key).click(function() { $('#crm-container .credit_card_type-section #credit_card_type').val(val); $('#crm-container .credit_card_type-section a').css('opacity', 0.25); - $('#crm-container .credit_card_type-section .crm-credit_card_type-logo-' + key).css('opacity', 1); + $('#crm-container .credit_card_type-section .crm-credit_card_type-icon-' + key).css('opacity', 1); return false; }); }); @@ -73,7 +73,7 @@ $.each(card_types, function(key, pattern) { if (ccnumber.match('^' + pattern + '$')) { var value = card_values[key]; - $('#crm-container .credit_card_type-section .crm-credit_card_type-logo-' + key).css('opacity', 1); + $('#crm-container .credit_card_type-section .crm-credit_card_type-icon-' + key).css('opacity', 1); $('select#credit_card_type').val(value); return false; } diff --git a/templates/CRM/Core/BillingBlock.tpl b/templates/CRM/Core/BillingBlock.tpl index ec1fb2f26c..50d96dcfaf 100644 --- a/templates/CRM/Core/BillingBlock.tpl +++ b/templates/CRM/Core/BillingBlock.tpl @@ -83,7 +83,7 @@
{$form.credit_card_type.label} {$reqMark}
{$form.credit_card_type.html} -
+