diff --git a/plugins/woocommerce-admin/TESTING-INSTRUCTIONS.md b/plugins/woocommerce-admin/TESTING-INSTRUCTIONS.md index 23e7bc81bb5..6103e5da1c7 100644 --- a/plugins/woocommerce-admin/TESTING-INSTRUCTIONS.md +++ b/plugins/woocommerce-admin/TESTING-INSTRUCTIONS.md @@ -97,6 +97,15 @@ Testing `woocommerce_navigation_intro_modal_dismissed` 8. Navigate to WooCommerce -> Customers. 9. Make sure that customer data has been deleted. +### Fix "Themes" step visibility in IE 11 #6578 + +1. Get an IE 11 test environment. I downloaded a trial version of Parallels Desktop on [here](https://www.parallels.com/) and IE 11 virtual machine from [developer.microsoft.com](https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/) +2. Make a zip version of this branch by running `npm run test:zip` +3. Make a JN site -> install and activate the zip file. +4. Open IE 11 and start OBW +5. Confirm that the themes are displayed correctly. + + ### Fix hidden menu title on smaller screens #6562 1. Enable the new navigation. diff --git a/plugins/woocommerce-admin/client/ie.scss b/plugins/woocommerce-admin/client/ie.scss index d83704d6eeb..e8d41160761 100644 --- a/plugins/woocommerce-admin/client/ie.scss +++ b/plugins/woocommerce-admin/client/ie.scss @@ -3,3 +3,27 @@ * * @format */ + +.woocommerce-profile-wizard__body .woocommerce-profile-wizard__container { + > .woocommerce-profile-wizard__themes-tab-panel { + @include breakpoint( '>782px' ) { + .woocommerce-profile-wizard__themes { + @for $i from 1 through 40 { + .components-card:nth-child(#{$i}) { + margin-bottom: $gap-large; + @if $i % 2 == 0 { + grid-column: 2; + grid-row: $i /2; + margin-left: $gap-large / 2; + } + @else { + grid-column: 1; + grid-row: ($i / 2) +0.5; + margin-right: $gap-large / 2; + } + } + } + } + } + } +} diff --git a/plugins/woocommerce-admin/client/profile-wizard/steps/theme/style.scss b/plugins/woocommerce-admin/client/profile-wizard/steps/theme/style.scss index 43fa1a604be..a45feec9a38 100644 --- a/plugins/woocommerce-admin/client/profile-wizard/steps/theme/style.scss +++ b/plugins/woocommerce-admin/client/profile-wizard/steps/theme/style.scss @@ -103,12 +103,13 @@ p.woocommerce-profile-wizard__themes-skip-this-step { } .components-form-file-upload { - flex: 1; + flex: 1 1 auto; width: 100%; + display: flex; } .components-form-file-upload > .components-button { - flex: 1; + flex: 1 1 auto; flex-direction: column; justify-content: center; margin: 0; diff --git a/plugins/woocommerce-admin/readme.txt b/plugins/woocommerce-admin/readme.txt index e4fb95a749f..516bd340793 100644 --- a/plugins/woocommerce-admin/readme.txt +++ b/plugins/woocommerce-admin/readme.txt @@ -81,6 +81,7 @@ Release and roadmap notes are available on the [WooCommerce Developers Blog](htt - Fix: Allow the manager role to query certain options #6577 - Dev: Refactor profile wizard benefits step and add tests #6583 - Fix: Delete customer data on network user deletion #6574 +- Fix: Fix Themes step visibility in IE 11 #6578 - Fix: Fix hidden menu title on smaller screens #6562 - Fix: Add gross sales column to CSV export #6567 - Dev: Add filter to profile wizard steps #6564