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

Prevent screen meta reflows

This commit is contained in:
Albert Juhé Lluveras 2019-05-23 11:29:14 +02:00
parent 9578280423
commit 37fab0227d
3 changed files with 18 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
plugins/woocommerce-admin/client/embedded.js
View File

@ -13,14 +13,18 @@ import { EmbedLayout, PrimaryLayout as NoticeArea } from './layout';
import 'store'; import 'store';
import 'wc-api/wp-data-store'; import 'wc-api/wp-data-store';
const embeddedRoot = document.getElementById( 'woocommerce-embedded-root' );
// Render the header. // Render the header.
render( render(
<SlotFillProvider> <SlotFillProvider>
<EmbedLayout /> <EmbedLayout />
</SlotFillProvider>, </SlotFillProvider>,
document.getElementById( 'woocommerce-embedded-root' ) embeddedRoot
); );
embeddedRoot.classList.remove( 'is-embed-loading' );
// Render notices just above the WP content div. // Render notices just above the WP content div.
const wpBody = document.getElementById( 'wpbody-content' ); const wpBody = document.getElementById( 'wpbody-content' );
const wrap = wpBody.querySelector( '.wrap' ); const wrap = wpBody.querySelector( '.wrap' );

12
plugins/woocommerce-admin/client/stylesheets/shared/_embed.scss
View File

@ -14,6 +14,18 @@
padding: 20px; 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,
#screen-meta-links { #screen-meta-links {
top: $large-header-height; top: $large-header-height;

5
plugins/woocommerce-admin/includes/class-wc-admin-loader.php
View File

@ -378,7 +378,7 @@ class WC_Admin_Loader {
$sections = self::get_embed_breadcrumbs(); $sections = self::get_embed_breadcrumbs();
$sections = is_array( $sections ) ? $sections : array( $sections ); $sections = is_array( $sections ) ? $sections : array( $sections );
?> ?>
<div id="woocommerce-embedded-root"> <div id="woocommerce-embedded-root" class="is-embed-loading">
<div class="woocommerce-layout"> <div class="woocommerce-layout">
<div class="woocommerce-layout__header is-embed-loading"> <div class="woocommerce-layout__header is-embed-loading">
<h1 class="woocommerce-layout__header-breadcrumbs"> <h1 class="woocommerce-layout__header-breadcrumbs">
@ -391,9 +391,6 @@ class WC_Admin_Loader {
</h1> </h1>
</div> </div>
</div> </div>
<div class="woocommerce-layout__primary is-embed-loading" id="woocommerce-layout__primary">
<div id="woocommerce-layout__notice-list" class="woocommerce-layout__notice-list"></div>
</div>
</div> </div>
<?php <?php
} }