mirror of
https://github.com/woocommerce/woocommerce-paypal-payments.git
synced 2025-09-07 19:54:15 +08:00
Final polish
This commit is contained in:
parent
457ac5a5cd
commit
7537967266
4 changed files with 36 additions and 21 deletions
|
@ -12,10 +12,17 @@
|
|||
}
|
||||
}
|
||||
|
||||
#ppcp-axo-billing-email-field-wrapper {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
#ppcp-axo-billing-email-submit-button {
|
||||
margin-top: 0;
|
||||
position: relative;
|
||||
transition: opacity 0.3s ease;
|
||||
flex: 0 1 auto;
|
||||
align-self: flex-start;
|
||||
|
||||
.loader:before {
|
||||
display: inline;
|
||||
|
@ -117,27 +124,20 @@
|
|||
}
|
||||
|
||||
.ppcp-axo-customer-details #billing_email_field .woocommerce-input-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
input {
|
||||
flex: 1;
|
||||
margin-right: 10px;
|
||||
}
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 719px) {
|
||||
#ppcp-axo-billing-email-submit-button {
|
||||
width: 100%;
|
||||
margin-top: 0.5rem;
|
||||
#ppcp-axo-billing-email {
|
||||
&-field-wrapper {
|
||||
flex-direction: column;
|
||||
}
|
||||
.ppcp-axo-customer-details #billing_email_field .woocommerce-input-wrapper {
|
||||
display: block;
|
||||
|
||||
input {
|
||||
margin-right: 0;
|
||||
&-submit-button {
|
||||
align-self: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
|
@ -225,8 +225,10 @@ class AxoManager {
|
|||
|
||||
if (scenario.defaultSubmitButton) {
|
||||
this.el.defaultSubmitButton.show();
|
||||
this.el.billingEmailSubmitButton.hide();
|
||||
} else {
|
||||
this.el.defaultSubmitButton.hide();
|
||||
this.el.billingEmailSubmitButton.show();
|
||||
}
|
||||
|
||||
if (scenario.defaultEmailField) {
|
||||
|
@ -252,8 +254,8 @@ class AxoManager {
|
|||
this.el.watermarkContainer.show();
|
||||
|
||||
// Move watermark to after email.
|
||||
this.$(this.el.fieldBillingEmail.selector).append(
|
||||
this.$(this.el.watermarkContainer.selector)
|
||||
document.querySelector('#billing_email_field .woocommerce-input-wrapper').append(
|
||||
document.querySelector(this.el.watermarkContainer.selector)
|
||||
);
|
||||
} else {
|
||||
this.el.emailWidgetContainer.hide();
|
||||
|
@ -433,10 +435,18 @@ class AxoManager {
|
|||
`);
|
||||
}
|
||||
|
||||
// billingEmailFieldWrapper
|
||||
const befw = this.el.billingEmailFieldWrapper;
|
||||
if (!document.querySelector(befw.selector)) {
|
||||
document.querySelector('#billing_email_field .woocommerce-input-wrapper').insertAdjacentHTML('afterend', `
|
||||
<div id="${befw.id}"></div>
|
||||
`);
|
||||
}
|
||||
|
||||
// Watermark container
|
||||
const wc = this.el.watermarkContainer;
|
||||
if (!document.querySelector(wc.selector)) {
|
||||
this.emailInput.insertAdjacentHTML('afterend', `
|
||||
document.querySelector(befw.selector).insertAdjacentHTML('beforeend', `
|
||||
<div class="${wc.className}" id="${wc.id}"></div>
|
||||
`);
|
||||
}
|
||||
|
@ -466,10 +476,10 @@ class AxoManager {
|
|||
}
|
||||
|
||||
} else {
|
||||
|
||||
// Move email to the AXO container.
|
||||
let emailRow = document.querySelector(this.el.fieldBillingEmail.selector);
|
||||
wrapperElement.prepend(emailRow);
|
||||
document.querySelector(this.el.billingEmailFieldWrapper.selector).prepend(document.querySelector('#billing_email_field .woocommerce-input-wrapper'))
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -515,7 +525,7 @@ class AxoManager {
|
|||
const billingEmailSubmitButtonSpinner = this.el.billingEmailSubmitButtonSpinner;
|
||||
|
||||
if (!document.querySelector(billingEmailSubmitButton.selector)) {
|
||||
this.emailInput.insertAdjacentHTML('afterend', `
|
||||
document.querySelector(this.el.billingEmailFieldWrapper.selector).insertAdjacentHTML('beforeend', `
|
||||
<button type="button" id="${billingEmailSubmitButton.id}" class="${billingEmailSubmitButton.className}">
|
||||
${this.axoConfig.billing_email_button_text}
|
||||
<span id="${billingEmailSubmitButtonSpinner.id}"></span>
|
||||
|
|
|
@ -60,6 +60,11 @@ class DomElementCollection {
|
|||
selector: '#billing_email_field'
|
||||
});
|
||||
|
||||
this.billingEmailFieldWrapper = new DomElement({
|
||||
id: 'ppcp-axo-billing-email-field-wrapper',
|
||||
selector: '#ppcp-axo-billing-email-field-wrapper',
|
||||
});
|
||||
|
||||
this.billingEmailSubmitButton = new DomElement({
|
||||
id: 'ppcp-axo-billing-email-submit-button',
|
||||
selector: '#ppcp-axo-billing-email-submit-button',
|
||||
|
|
|
@ -168,7 +168,7 @@ class AxoGateway extends WC_Payment_Gateway {
|
|||
? $this->ppcp_settings->get( 'axo_gateway_title' )
|
||||
: $this->get_option( 'title', $this->method_title );
|
||||
|
||||
$this->description = __( 'Enter your email address above to proceed.', 'woocommerce-paypal-payments' );
|
||||
$this->description = __( 'Enter your email address to continue.', 'woocommerce-paypal-payments' );
|
||||
|
||||
$this->init_form_fields();
|
||||
$this->init_settings();
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue