From 95782804231d515fd8748406a6b7919ddff75537 Mon Sep 17 00:00:00 2001 From: Jeff Stieler Date: Wed, 22 May 2019 11:53:30 -0600 Subject: [PATCH 1/5] Move StoreAlerts below screen meta links on embed pages. --- plugins/woocommerce-admin/client/embedded.js | 15 ++++++- .../woocommerce-admin/client/layout/index.js | 41 ++++++++++++++----- .../client/stylesheets/shared/_embed.scss | 21 +++++++++- 3 files changed, 64 insertions(+), 13 deletions(-) diff --git a/plugins/woocommerce-admin/client/embedded.js b/plugins/woocommerce-admin/client/embedded.js index 230e6548dcc..c0803857f18 100644 --- a/plugins/woocommerce-admin/client/embedded.js +++ b/plugins/woocommerce-admin/client/embedded.js @@ -9,13 +9,26 @@ import { Provider as SlotFillProvider } from 'react-slot-fill'; * Internal dependencies */ import './stylesheets/_embedded.scss'; -import { EmbedLayout } from './layout'; +import { EmbedLayout, PrimaryLayout as NoticeArea } from './layout'; import 'store'; import 'wc-api/wp-data-store'; +// Render the header. render( , document.getElementById( 'woocommerce-embedded-root' ) ); + +// Render notices just above the WP content div. +const wpBody = document.getElementById( 'wpbody-content' ); +const wrap = wpBody.querySelector( '.wrap' ); +const noticeContainer = document.createElement( 'div' ); + +render( +
+ +
, + wpBody.insertBefore( noticeContainer, wrap ) +); diff --git a/plugins/woocommerce-admin/client/layout/index.js b/plugins/woocommerce-admin/client/layout/index.js index befbbc62eb6..3bb9b17de3a 100644 --- a/plugins/woocommerce-admin/client/layout/index.js +++ b/plugins/woocommerce-admin/client/layout/index.js @@ -24,6 +24,19 @@ import { recordPageView } from 'lib/tracks'; import TransientNotices from './transient-notices'; import StoreAlerts from './store-alerts'; +export class PrimaryLayout extends Component { + render() { + const { children } = this.props; + return ( +
+ { window.wcAdminFeatures[ 'store-alerts' ] && } + + { children } +
+ ); + } +} + class Layout extends Component { componentDidMount() { this.recordPageViewTrack(); @@ -60,30 +73,38 @@ class Layout extends Component { } render() { - const { isEmbeded, ...restProps } = this.props; + const { isEmbedded, ...restProps } = this.props; return (
- -
- { window.wcAdminFeatures[ 'store-alerts' ] && } - - { ! isEmbeded && ( + { ! isEmbedded && ( +
- ) } -
+ + ) }
); } } Layout.propTypes = { - isEmbededLayout: PropTypes.bool, + isEmbedded: PropTypes.bool, }; +export class NoticeArea extends Component { + render() { + return ( + + { window.wcAdminFeatures[ 'store-alerts' ] && } + + + ); + } +} + export class PageLayout extends Component { render() { return ( @@ -104,7 +125,7 @@ export class EmbedLayout extends Component { return (
- + ); } diff --git a/plugins/woocommerce-admin/client/stylesheets/shared/_embed.scss b/plugins/woocommerce-admin/client/stylesheets/shared/_embed.scss index 7f608ed2d45..99574d0bc6c 100644 --- a/plugins/woocommerce-admin/client/stylesheets/shared/_embed.scss +++ b/plugins/woocommerce-admin/client/stylesheets/shared/_embed.scss @@ -14,11 +14,28 @@ padding: 20px; } + #screen-meta, + #screen-meta-links { + top: $large-header-height; + + @include breakpoint( '782px-960px' ) { + top: $medium-header-height; + } + + @include breakpoint( '<782px' ) { + top: $small-header-height; + } + } + #screen-meta { border-right: 0; margin: 0; } + #screen-meta-links { + position: relative; + } + .notice { margin: 5px 15px 2px; padding: 1px 12px; @@ -46,10 +63,10 @@ .woocommerce-layout__primary { margin: 0; - padding-top: 80px; + padding-top: $large-header-height + 20; @include breakpoint( '782px-960px' ) { - padding-top: 60px; + padding-top: $medium-header-height + 20; } } From 37fab0227d7524d47bfc5d672ced29f688e7ced0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Albert=20Juh=C3=A9=20Lluveras?= Date: Thu, 23 May 2019 11:29:14 +0200 Subject: [PATCH 2/5] Prevent screen meta reflows --- plugins/woocommerce-admin/client/embedded.js | 6 +++++- .../client/stylesheets/shared/_embed.scss | 12 ++++++++++++ .../includes/class-wc-admin-loader.php | 5 +---- 3 files changed, 18 insertions(+), 5 deletions(-) diff --git a/plugins/woocommerce-admin/client/embedded.js b/plugins/woocommerce-admin/client/embedded.js index c0803857f18..00adc961403 100644 --- a/plugins/woocommerce-admin/client/embedded.js +++ b/plugins/woocommerce-admin/client/embedded.js @@ -13,14 +13,18 @@ import { EmbedLayout, PrimaryLayout as NoticeArea } from './layout'; import 'store'; import 'wc-api/wp-data-store'; +const embeddedRoot = document.getElementById( 'woocommerce-embedded-root' ); + // Render the header. render( , - document.getElementById( 'woocommerce-embedded-root' ) + embeddedRoot ); +embeddedRoot.classList.remove( 'is-embed-loading' ); + // Render notices just above the WP content div. const wpBody = document.getElementById( 'wpbody-content' ); const wrap = wpBody.querySelector( '.wrap' ); diff --git a/plugins/woocommerce-admin/client/stylesheets/shared/_embed.scss b/plugins/woocommerce-admin/client/stylesheets/shared/_embed.scss index 99574d0bc6c..e941b78b61e 100644 --- a/plugins/woocommerce-admin/client/stylesheets/shared/_embed.scss +++ b/plugins/woocommerce-admin/client/stylesheets/shared/_embed.scss @@ -14,6 +14,18 @@ padding: 20px; } + #woocommerce-embedded-root.is-embed-loading + #wpbody .wrap { + padding-top: $large-header-height + 40; + + @include breakpoint( '782px-960px' ) { + padding-top: $medium-header-height + 40; + } + + @include breakpoint( '<782px' ) { + padding-top: $small-header-height + 40; + } + } + #screen-meta, #screen-meta-links { top: $large-header-height; diff --git a/plugins/woocommerce-admin/includes/class-wc-admin-loader.php b/plugins/woocommerce-admin/includes/class-wc-admin-loader.php index a86030542b2..e26c95726d3 100644 --- a/plugins/woocommerce-admin/includes/class-wc-admin-loader.php +++ b/plugins/woocommerce-admin/includes/class-wc-admin-loader.php @@ -378,7 +378,7 @@ class WC_Admin_Loader { $sections = self::get_embed_breadcrumbs(); $sections = is_array( $sections ) ? $sections : array( $sections ); ?> -
+

@@ -391,9 +391,6 @@ class WC_Admin_Loader {

-
-
-
Date: Thu, 23 May 2019 10:38:45 -0600 Subject: [PATCH 3/5] Remove unused layout component and export. --- plugins/woocommerce-admin/client/layout/index.js | 11 ----------- 1 file changed, 11 deletions(-) diff --git a/plugins/woocommerce-admin/client/layout/index.js b/plugins/woocommerce-admin/client/layout/index.js index 3bb9b17de3a..2e97a6b2e94 100644 --- a/plugins/woocommerce-admin/client/layout/index.js +++ b/plugins/woocommerce-admin/client/layout/index.js @@ -94,17 +94,6 @@ Layout.propTypes = { isEmbedded: PropTypes.bool, }; -export class NoticeArea extends Component { - render() { - return ( - - { window.wcAdminFeatures[ 'store-alerts' ] && } - - - ); - } -} - export class PageLayout extends Component { render() { return ( From 5fc0f0371376b0bbdea42645b321edba17a67f12 Mon Sep 17 00:00:00 2001 From: Jeff Stieler Date: Thu, 23 May 2019 10:39:09 -0600 Subject: [PATCH 4/5] Reduce the top padding for StoreAlerts in mobile. --- .../woocommerce-admin/client/stylesheets/shared/_embed.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/plugins/woocommerce-admin/client/stylesheets/shared/_embed.scss b/plugins/woocommerce-admin/client/stylesheets/shared/_embed.scss index e941b78b61e..c4f4120c7d1 100644 --- a/plugins/woocommerce-admin/client/stylesheets/shared/_embed.scss +++ b/plugins/woocommerce-admin/client/stylesheets/shared/_embed.scss @@ -80,6 +80,10 @@ @include breakpoint( '782px-960px' ) { padding-top: $medium-header-height + 20; } + + @include breakpoint( '<782px' ) { + padding-top: 10px; + } } @keyframes isLoaded { From 34b1c194569f37ea70039a183e3f5424ae8e6836 Mon Sep 17 00:00:00 2001 From: Jeff Stieler Date: Thu, 23 May 2019 11:10:41 -0600 Subject: [PATCH 5/5] Fix reflow on mobile when no alerts are present. MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Albert Juhé Lluveras --- plugins/woocommerce-admin/client/stylesheets/shared/_embed.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/woocommerce-admin/client/stylesheets/shared/_embed.scss b/plugins/woocommerce-admin/client/stylesheets/shared/_embed.scss index c4f4120c7d1..c3977e4d71f 100644 --- a/plugins/woocommerce-admin/client/stylesheets/shared/_embed.scss +++ b/plugins/woocommerce-admin/client/stylesheets/shared/_embed.scss @@ -22,7 +22,7 @@ } @include breakpoint( '<782px' ) { - padding-top: $small-header-height + 40; + padding-top: 30px; } }