woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-09-07 19:54:15 +08:00
Code Issues Projects Packages Wiki Activity Actions

Adjust the styling of the Edit links on the Axo checkout

Browse source
This commit is contained in:
Daniel Dudzic 2024-04-30 14:50:38 +02:00
parent 9027f15c0c
commit ef807aecf3
No known key found for this signature in database
GPG key ID: 31B40D33E3465483
4 changed files with 27 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

6
modules/ppcp-axo/resources/css/styles.scss
View file

@ -39,3 +39,9 @@
.ppcp-axo-customer-details {
margin-bottom: 40px;
}
.axo-checkout-header-section {
display: flex;
align-items: baseline;
gap: 1em;
}

11
modules/ppcp-axo/resources/js/Views/BillingView.js
View file

@ -26,14 +26,21 @@ class BillingView {
if (data.isEmpty()) {
return `
<div style="margin-bottom: 20px;">
<h3>Billing <a href="javascript:void(0)" ${this.el.changeBillingAddressLink.attributes} style="margin-left: 20px;">Edit</a></h3>
<div class="axo-checkout-header-section">
<h3>Billing</h3>
<a href="javascript:void(0)" ${this.el.changeBillingAddressLink.attributes}>Edit</a>
</div>
<div>Please fill in your billing details.</div>
</div>
`;
}
return `
<div style="margin-bottom: 20px;">
<h3>Billing <a href="javascript:void(0)" ${this.el.changeBillingAddressLink.attributes} style="margin-left: 20px;">Edit</a></h3>
<div class="axo-checkout-header-section">
<h3>Billing</h3>
<a href="javascript:void(0)" ${this.el.changeBillingAddressLink.attributes}>Edit</a>
</div>
<a href="javascript:void(0)" ${this.el.changeBillingAddressLink.attributes}>Edit</a>
<div>${data.value('email')}</div>
<div>${data.value('company')}</div>
<div>${data.value('firstName')} ${data.value('lastName')}</div>

5
modules/ppcp-axo/resources/js/Views/CardView.js
View file

@ -40,7 +40,10 @@ class CardView {
return `
<div style="margin-bottom: 20px;">
<h3>Card Details <a href="javascript:void(0)" ${this.el.changeCardLink.attributes} style="margin-left: 20px;">Edit</a></h3>
<div class="axo-checkout-header-section">
<h3>Card Details</h3>
<a href="javascript:void(0)" ${this.el.changeCardLink.attributes}>Edit</a>
</div>
<div style="border:2px solid #cccccc; border-radius: 10px; padding: 16px 20px; background-color:#f6f6f6">
<div style="float: right;">
<img

10
modules/ppcp-axo/resources/js/Views/ShippingView.js
View file

@ -26,14 +26,20 @@ class ShippingView {
if (data.isEmpty()) {
return `
<div style="margin-bottom: 20px;">
<h3>Shipping <a href="javascript:void(0)" ${this.el.changeShippingAddressLink.attributes} style="margin-left: 20px;">Edit</a></h3>
<div class="axo-checkout-header-section">
<h3>Shipping</h3>
<a href="javascript:void(0)" ${this.el.changeShippingAddressLink.attributes}>Edit</a>
</div>
<div>Please fill in your shipping details.</div>
</div>
`;
}
return `
<div style="margin-bottom: 20px;">
<h3>Shipping <a href="javascript:void(0)" ${this.el.changeShippingAddressLink.attributes} style="margin-left: 20px;">Edit</a></h3>
<div class="axo-checkout-header-section">
<h3>Shipping</h3>
<a href="javascript:void(0)" ${this.el.changeShippingAddressLink.attributes}>Edit</a>
</div>
<div>${data.value('company')}</div>
<div>${data.value('firstName')} ${data.value('lastName')}</div>
<div>${data.value('street1')}</div>