woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-08-30 05:00:51 +08:00
Code Issues Projects Packages Wiki Activity Actions 18

Improve mobile styles

Browse source
This commit is contained in:
Narek Zakarian 2024-11-08 14:02:05 +04:00
parent ce61b661ab
commit d3accc0d8c
No known key found for this signature in database
GPG key ID: 07AFD7E7A9C164A7
3 changed files with 76 additions and 64 deletions
Download patch file Download diff file Expand all files Collapse all files

52
modules/ppcp-settings/resources/js/Components/ReusableComponents/Navigation.js
View file

@ -29,6 +29,8 @@ const Navigation = ( {
let navigationTitle = '';
let disabled = false;
let isLastStep = currentStep + 1 === stepperOrder.length;
let isFistStep = currentStep === 0;
switch ( currentStep ) {
case 1:
@ -49,31 +51,35 @@ const Navigation = ( {
}
return (
<div className="ppcp-r-navigation">
<div className="ppcp-r-navigation--left">
<Button variant="tertiary" onClick={ () => navigateBy( -1 ) }>
<span>{ data().getImage( 'icon-arrow-left.svg' ) }</span>{ navigationTitle }
</Button>
</div>
{ currentStep > 0 && (
<div className="ppcp-r-navigation--right">
<a href="wp-admin/admin.php?page=wc-settings&amp;tab=checkout"
aria-label="Return to payments">{__('Save and exit', 'woocommerce-paypal-payments')}</a>
<Button
variant="primary"
disabled={ disabled }
onClick={ () => navigateBy( 1 ) }
>
{ __('Continue', 'woocommerce-paypal-payments') }
<div className="ppcp-r-navigation-container">
<div className="ppcp-r-navigation">
<div className="ppcp-r-navigation--left">
<Button variant="tertiary" onClick={ () => navigateBy( -1 ) }>
<span>{ data().getImage( 'icon-arrow-left.svg' ) }</span>{ navigationTitle }
</Button>
</div>
) }
<div
className="ppcp-r-navigation--progress-bar"
style={ {
width: `${ ( currentStep / ( stepperOrder.length - 1 ) ) * 90 }%`
} }
></div>
{ ! isFistStep && (
<div className="ppcp-r-navigation--right">
<a href="wp-admin/admin.php?page=wc-settings&amp;tab=checkout"
aria-label="Return to payments">{__('Save and exit', 'woocommerce-paypal-payments')}</a>
{ ! isLastStep && (
<Button
variant="primary"
disabled={ disabled }
onClick={ () => navigateBy( 1 ) }
>
{ __('Continue', 'woocommerce-paypal-payments') }
</Button>
) }
</div>
) }
<div
className="ppcp-r-navigation--progress-bar"
style={ {
width: `${ ( currentStep / ( stepperOrder.length - 1 ) ) * 90 }%`
} }
></div>
</div>
</div>
);
};