Skip to content
This repository was archived by the owner on Feb 23, 2024. It is now read-only.

Commit d0fb8f8

Browse files
mikejolleymikejolley
authored
Fix Checkout i2 mobile styling (#4699)
* Align fields based on mobile vs desktop views * Improve string appearance in form steps * Remove comment * fix wrapper in editor
1 parent 2c26920 commit d0fb8f8

File tree

14 files changed

+102
-58
lines changed

14 files changed

+102
-58
lines changed

‎assets/js/base/components/cart-checkout/form-step/style.scss‎

Lines changed: 36 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -5,22 +5,13 @@
55
.wc-block-components-form .wc-block-components-checkout-step {
66
position: relative;
77
border: none;
8-
padding: 0 0 0 $gap-larger;
8+
padding: 0 0 0 $gap-large;
99
background: none;
1010
margin: 0;
1111

12-
.is-large & {
13-
padding-right: $gap-large;
14-
}
15-
16-
.wc-block-components-checkout-step__heading::after {
17-
content: "";
18-
border-left: 1px solid;
19-
opacity: 0.3;
20-
position: absolute;
21-
left: -$gap-larger*0.5;
22-
top: 2.5em;
23-
bottom: em($gap) * -1;
12+
.is-mobile &,
13+
.is-small & {
14+
padding-left: 0;
2415
}
2516
}
2617

@@ -49,6 +40,10 @@
4940
position: relative;
5041
align-items: center;
5142
gap: em($gap);
43+
44+
.wc-block-components-express-payment-continue-rule + .wc-block-components-checkout-step & {
45+
margin-top: 0;
46+
}
5247
}
5348

5449
.wc-block-components-checkout-step:first-child .wc-block-components-checkout-step__heading {
@@ -82,11 +77,21 @@
8277
content: "\00a0" counter(checkout-step) ".";
8378
content: "\00a0" counter(checkout-step) "." / "";
8479
position: absolute;
85-
width: $gap-larger;
86-
left: -$gap-larger*0.5;
80+
width: $gap-large;
81+
left: -$gap-large;
8782
top: 0;
8883
text-align: center;
8984
transform: translateX(-50%);
85+
86+
.is-mobile &,
87+
.is-small & {
88+
position: static;
89+
transform: none;
90+
left: auto;
91+
top: auto;
92+
content: counter(checkout-step) ".\00a0";
93+
content: counter(checkout-step) ".\00a0" / "";
94+
}
9095
}
9196

9297
.wc-block-components-checkout-step__container::after {
@@ -95,7 +100,22 @@
95100
border-left: 1px solid;
96101
opacity: 0.3;
97102
position: absolute;
98-
left: -$gap-larger*0.5;
103+
left: -$gap-large;
99104
top: 0;
100105
}
106+
107+
.is-mobile &,
108+
.is-small & {
109+
.wc-block-components-checkout-step__title::before {
110+
position: static;
111+
transform: none;
112+
left: auto;
113+
top: auto;
114+
content: counter(checkout-step) ".\00a0";
115+
content: counter(checkout-step) ".\00a0" / "";
116+
}
117+
.wc-block-components-checkout-step__container::after {
118+
content: unset;
119+
}
120+
}
101121
}

‎assets/js/blocks/cart-checkout/checkout-i2/form-step/editor.scss‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,10 @@
22
.wc-block-checkout__additional_fields {
33
margin: 1.5em 0 -1.5em;
44
}
5+
.wc-block-components-checkout-step__description-placeholder {
6+
opacity: 0.5;
7+
}
8+
9+
.wc-block-components-checkout-step__title {
10+
display: flex;
11+
}

‎assets/js/blocks/cart-checkout/checkout-i2/form-step/form-step-block.tsx‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,6 @@ export const FormStepBlock = ( {
3535
} ),
3636
attributes,
3737
} );
38-
3938
return (
4039
<div { ...blockProps }>
4140
<InspectorControls>
@@ -69,10 +68,20 @@ export const FormStepBlock = ( {
6968
<div className="wc-block-components-checkout-step__container">
7069
<p className="wc-block-components-checkout-step__description">
7170
<PlainText
72-
className={ '' }
71+
className={
72+
! description
73+
? 'wc-block-components-checkout-step__description-placeholder'
74+
: ''
75+
}
7376
value={ description }
77+
placeholder={ __(
78+
'Optional text for this form step.',
79+
'woo-gutenberg-products-block'
80+
) }
7481
onChange={ ( value ) =>
75-
setAttributes( { description: value } )
82+
setAttributes( {
83+
description: value,
84+
} )
7685
}
7786
/>
7887
</p>

‎assets/js/blocks/cart-checkout/checkout-i2/inner-blocks/checkout-actions-block/style.scss‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
display: flex;
33
justify-content: space-between;
44
align-items: center;
5-
margin-left: 9px;
65

76
.wc-block-components-checkout-place-order-button {
87
width: 50%;
@@ -35,7 +34,6 @@
3534
.is-large {
3635
.wc-block-checkout__actions {
3736
@include with-translucent-border(1px 0 0);
38-
margin-right: $gap-large;
3937
padding: em($gap-large) 0;
4038
}
4139
}

‎assets/js/blocks/cart-checkout/checkout-i2/inner-blocks/checkout-express-payment-block/editor.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,8 @@
1212

1313
&.wp-block-woocommerce-checkout-express-payment-block--has-express-payment-methods {
1414
padding: 14px 0;
15-
margin: 14px 0;
15+
margin: -14px 0 14px 0 !important;
16+
position: relative;
1617
}
1718
}
1819

‎assets/js/blocks/cart-checkout/checkout-i2/inner-blocks/checkout-payment-block/attributes.tsx‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,8 @@ import formStepAttributes from '../../form-step/attributes';
1010

1111
export default {
1212
...formStepAttributes( {
13-
defaultTitle: __( 'Payment Method', 'woo-gutenberg-products-block' ),
14-
defaultDescription: __(
15-
'Select a payment method below.',
16-
'woo-gutenberg-products-block'
17-
),
13+
defaultTitle: __( 'Payment options', 'woo-gutenberg-products-block' ),
14+
defaultDescription: '',
1815
} ),
1916
lock: {
2017
type: 'object',

‎assets/js/blocks/cart-checkout/checkout-i2/inner-blocks/checkout-shipping-methods-block/attributes.tsx‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,7 @@ import formStepAttributes from '../../form-step/attributes';
1111
export default {
1212
...formStepAttributes( {
1313
defaultTitle: __( 'Shipping options', 'woo-gutenberg-products-block' ),
14-
defaultDescription: __(
15-
'Select shipping options below.',
16-
'woo-gutenberg-products-block'
17-
),
14+
defaultDescription: '',
1815
} ),
1916
allowCreateAccount: {
2017
type: 'boolean',

‎assets/js/blocks/cart-checkout/checkout-i2/inner-blocks/checkout-terms-block/editor.scss‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,21 @@
11
// Adjust padding and margins in the editor to improve selected block outlines.
22
.wc-block-checkout__terms {
3-
margin: 20px 0 20px 9px;
3+
margin: 20px 0;
44
padding-top: 4px;
55
padding-bottom: 4px;
66
display: flex;
77
align-items: flex-start;
88

99
.block-editor-rich-text__editable {
10-
padding-left: $gap;
1110
vertical-align: middle;
1211
line-height: em(24px);
1312
}
1413
}
1514

16-
.wc-block-checkout__terms_notice {
17-
margin-left: 9px;
15+
.wc-block-components-checkbox {
16+
margin-right: $gap;
17+
}
1818

19-
.components-notice__action {
20-
margin-left: 0;
21-
}
19+
.wc-block-checkout__terms_notice .components-notice__action {
20+
margin-left: 0;
2221
}

‎assets/js/blocks/cart-checkout/checkout-i2/inner-blocks/checkout-terms-block/style.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
.wc-block-checkout__terms {
2-
margin: 1.5em 0 1.5em 9px;
2+
margin: 1.5em 0;
3+
text-align: justify;
34

45
textarea {
56
top: -5px;

‎assets/js/blocks/cart-checkout/checkout-i2/styles/editor.scss‎

Lines changed: 26 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,32 @@
1-
[data-type="woocommerce/checkout-i2"] {
1+
.wp-block-woocommerce-checkout-i2 {
2+
margin-top: 0;
3+
24
.wc-block-components-sidebar-layout {
35
display: block;
46
}
57
.block-editor-block-list__layout {
68
display: flex;
79
flex-flow: row wrap;
8-
align-items: baseline;
10+
align-items: flex-start;
11+
12+
.wc-block-checkout__additional_fields {
13+
padding: 0;
14+
}
915
}
10-
}
1116

12-
[data-type="woocommerce/checkout-fields-block"] {
17+
.wc-block-components-main,
18+
.wc-block-components-sidebar,
1319
.block-editor-block-list__layout {
14-
display: block;
20+
> :first-child {
21+
margin-top: 0;
22+
}
1523
}
16-
}
1724

18-
[data-type="woocommerce/checkout-totals-block"] {
19-
.block-editor-block-list__layout {
20-
display: block;
25+
.wp-block-woocommerce-checkout-totals-block,
26+
.wp-block-woocommerce-checkout-fields-block {
27+
.block-editor-block-list__layout {
28+
display: block;
29+
}
2130
}
2231
}
2332

@@ -32,7 +41,6 @@ body.wc-lock-selected-block--move {
3241
}
3342
}
3443

35-
3644
body.wc-lock-selected-block--remove {
3745
.block-editor-block-settings-menu__popover {
3846
.components-menu-group:last-child {
@@ -43,3 +51,11 @@ body.wc-lock-selected-block--remove {
4351
}
4452
}
4553
}
54+
55+
.is-mobile,
56+
.is-small,
57+
.is-medium {
58+
.wc-block-checkout__sidebar {
59+
margin-bottom: 0;
60+
}
61+
}

0 commit comments

Comments
 (0)