From 228084cb7c9db76ce0350cb1b3e70c68e98a4ace Mon Sep 17 00:00:00 2001 From: raicem Date: Tue, 3 Oct 2023 13:09:35 +0300 Subject: [PATCH 1/2] Marketplace: Change the way we space out heading and content area Previous method caused issues when you go from WooCommerce > Home to WooCommerce > Marketplace. The header was going missing on the Marketplace page. --- .../client/marketplace/components/content/content.scss | 4 ++-- .../client/marketplace/components/header/header.scss | 3 --- .../client/marketplace/components/search/search.scss | 2 +- .../client/marketplace/marketplace.scss | 10 +++++----- .../client/marketplace/stylesheets/_variables.scss | 4 ---- 5 files changed, 8 insertions(+), 15 deletions(-) diff --git a/plugins/woocommerce-admin/client/marketplace/components/content/content.scss b/plugins/woocommerce-admin/client/marketplace/components/content/content.scss index bbd1b83ce4f..a9de18f6b92 100644 --- a/plugins/woocommerce-admin/client/marketplace/components/content/content.scss +++ b/plugins/woocommerce-admin/client/marketplace/components/content/content.scss @@ -4,11 +4,11 @@ box-sizing: content-box; margin: auto; max-width: $content-max-width; - padding: 0 $content-spacing-small $content-spacing-small; + padding: $grid-unit-30 $grid-unit-20; } @media screen and (min-width: $breakpoint-medium) { .woocommerce-marketplace__content { - padding: 0 $content-spacing-large $content-spacing-large; + padding: $grid-unit-60 $grid-unit-40; } } diff --git a/plugins/woocommerce-admin/client/marketplace/components/header/header.scss b/plugins/woocommerce-admin/client/marketplace/components/header/header.scss index 414d221d835..d1d4fe84b07 100644 --- a/plugins/woocommerce-admin/client/marketplace/components/header/header.scss +++ b/plugins/woocommerce-admin/client/marketplace/components/header/header.scss @@ -7,10 +7,7 @@ display: grid; grid-template: 'mktpl-title mktpl-search mktpl-meta' 60px 'mktpl-tabs mktpl-tabs mktpl-tabs' auto / 1fr 320px 36px; - left: 0; padding: 0 $content-spacing-large; - position: absolute; - top: -60px; width: 100%; /* On narrow screens, "stack" header items and hide the bottom border */ diff --git a/plugins/woocommerce-admin/client/marketplace/components/search/search.scss b/plugins/woocommerce-admin/client/marketplace/components/search/search.scss index 30b0596099f..f894525a472 100644 --- a/plugins/woocommerce-admin/client/marketplace/components/search/search.scss +++ b/plugins/woocommerce-admin/client/marketplace/components/search/search.scss @@ -20,7 +20,7 @@ } @media (width <= $breakpoint-medium) { - margin: $content-spacing-small; + margin: $grid-unit-20 $grid-unit-20 $grid-unit-10 $grid-unit-20; } } diff --git a/plugins/woocommerce-admin/client/marketplace/marketplace.scss b/plugins/woocommerce-admin/client/marketplace/marketplace.scss index 28937279955..dc8c5add40b 100644 --- a/plugins/woocommerce-admin/client/marketplace/marketplace.scss +++ b/plugins/woocommerce-admin/client/marketplace/marketplace.scss @@ -3,17 +3,17 @@ .woocommerce-admin-page__extensions { background: #fff; + #wpbody { + margin: 0; + } + #wpbody-content { /* Prevent double-scrollbar issue on WooCommerce > Extension pages */ overflow: hidden; } .woocommerce-layout__primary { - margin: $header-height-mobile 0 0; - - @media (min-width: $breakpoint-medium) { - margin-top: $header-height-desktop; - } + margin: 0; } .woocommerce-layout__main { diff --git a/plugins/woocommerce-admin/client/marketplace/stylesheets/_variables.scss b/plugins/woocommerce-admin/client/marketplace/stylesheets/_variables.scss index 8b706adf973..275941fd774 100644 --- a/plugins/woocommerce-admin/client/marketplace/stylesheets/_variables.scss +++ b/plugins/woocommerce-admin/client/marketplace/stylesheets/_variables.scss @@ -22,10 +22,6 @@ $breakpoint-large: 1024px; $breakpoint-xlarge: 1500px; $breakpoint-huge: 1920px; -// Header -$header-height-desktop: 96px; -$header-height-mobile: 129px; - // Colours $gutenberg-gray-100: $gray-0; // replaced with closest colour from _colors.native.scss $gutenberg-gray-300: $gray-300; // anything above gray-100 is from the default _colors.scss From 44f76f69f9ed1d87b88cc13548e9bb07b76f95f9 Mon Sep 17 00:00:00 2001 From: github-actions Date: Tue, 3 Oct 2023 13:34:55 +0000 Subject: [PATCH 2/2] Add changefile(s) from automation for the following project(s): woocommerce --- .../woocommerce/changelog/fix-wccom-18329-unvisible-header | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 plugins/woocommerce/changelog/fix-wccom-18329-unvisible-header diff --git a/plugins/woocommerce/changelog/fix-wccom-18329-unvisible-header b/plugins/woocommerce/changelog/fix-wccom-18329-unvisible-header new file mode 100644 index 00000000000..b3bacb9fd89 --- /dev/null +++ b/plugins/woocommerce/changelog/fix-wccom-18329-unvisible-header @@ -0,0 +1,4 @@ +Significance: patch +Type: fix +Comment: Fix the Marketplace header being invisible after viewing other WC Admin pages. +