Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

In-App: make in-app header sticky (#51187) 

* In-App: make in-app header sticky

z-index: 1 is required to make sure the header appears above product
cards.

Also had to remove a parent `overflow: hidden` property. Apparently,
it's there to remove a second scrollbar. Upon removal, I didn't see
any double scrollbars, although it can be platform differences. Will
check it out in the PR review.

* Add changefile(s) from automation for the following project(s): woocommerce

* Update Change Your Store width for Marketplace search listing

Setting it 450px hardcoded causes overflows and breaks the layout.

See:
https://github.com/woocommerce/woocommerce/pull/51187#issuecomment-2344003169

* Move CYS tweak to the component

It was placed in the marketplace SCSS code previously. GitHub:
https://github.com/woocommerce/woocommerce/pull/51187#discussion_r1758381473

* Remove marketplace-specific styles from customize store banner

---------

Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Herman <KokkieH@users.noreply.github.com>
This commit is contained in:
Cem Ünalan 2024-09-13 18:55:47 +03:00 committed by GitHub
parent 737afc62e1
commit 3854f710df
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 17 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
plugins/woocommerce-admin/client/marketplace/components/content/content.scss
View File

@ -8,8 +8,18 @@
min-height: 500px; min-height: 500px;
} }
.woocommerce-marketplace__content .woocommerce-customize-store-banner .woocommerce-customize-store-banner-content {
width: 100%;
}
@media screen and (min-width: $breakpoint-medium) { @media screen and (min-width: $breakpoint-medium) {
.woocommerce-marketplace__content { .woocommerce-marketplace__content {
padding: $grid-unit-60 $grid-unit-40; padding: $grid-unit-60 $grid-unit-40;
} }
} }
@media screen and (max-width: $breakpoint-medium) {
.woocommerce-marketplace__content .woocommerce-customize-store-banner .woocommerce-customize-store-banner-content {
margin-top: 40px;
}
}

3
plugins/woocommerce-admin/client/marketplace/components/header/header.scss
View File

@ -9,6 +9,9 @@
"mktpl-tabs mktpl-tabs mktpl-tabs" auto / 1fr 320px 36px; "mktpl-tabs mktpl-tabs mktpl-tabs" auto / 1fr 320px 36px;
padding: 0 $content-spacing-large; padding: 0 $content-spacing-large;
width: 100%; width: 100%;
position: sticky;
top: var(--wp-admin--admin-bar--height, 32px);
z-index: 1;
/* On narrow screens, "stack" header items and hide the bottom border */ /* On narrow screens, "stack" header items and hide the bottom border */
@media (width <= $breakpoint-medium) { @media (width <= $breakpoint-medium) {

5
plugins/woocommerce-admin/client/marketplace/marketplace.scss
View File

@ -7,11 +7,6 @@
margin: 0; margin: 0;
} }
#wpbody-content {
/* Prevent double-scrollbar issue on WooCommerce > Extension pages */
overflow: hidden;
}
.woocommerce-layout__primary { .woocommerce-layout__primary {
margin: 0; margin: 0;
} }

4
plugins/woocommerce/changelog/51187-update-21566-in-app-marketaplace-header-sticky Normal file
View File

@ -0,0 +1,4 @@
Significance: patch
Type: update
Make In-App Marketplace header sticky to improve discoverability.