diff --git a/plugins/woocommerce-admin/client/homepage/index.js b/plugins/woocommerce-admin/client/homepage/index.js index 5789f1e59f6..8f21a578511 100644 --- a/plugins/woocommerce-admin/client/homepage/index.js +++ b/plugins/woocommerce-admin/client/homepage/index.js @@ -14,11 +14,11 @@ import { Spinner } from '@woocommerce/components'; */ import withSelect from 'wc-api/with-select'; import { isOnboardingEnabled } from 'dashboard/utils'; -import StatsOverview from './stats-overview'; const ProfileWizard = lazy( () => import( /* webpackChunkName: "profile-wizard" */ '../profile-wizard' ) ); +import Layout from './layout'; const Homepage = ( { profileItems, query } ) => { if ( isOnboardingEnabled() && ! profileItems.completed ) { @@ -29,7 +29,7 @@ const Homepage = ( { profileItems, query } ) => { ); } - return ; + return ; }; export default compose( diff --git a/plugins/woocommerce-admin/client/homepage/layout.js b/plugins/woocommerce-admin/client/homepage/layout.js new file mode 100644 index 00000000000..99dd12192a2 --- /dev/null +++ b/plugins/woocommerce-admin/client/homepage/layout.js @@ -0,0 +1,76 @@ +/** + * External dependencies + */ +import { useState, useRef, useEffect } from '@wordpress/element'; +import { Button } from '@wordpress/components'; +import classnames from 'classnames'; + +/** + * Internal dependencies + */ +import StatsOverview from './stats-overview'; +import './style.scss'; + +const Layout = () => { + const [ showInbox, setShowInbox ] = useState( true ); + const [ isContentSticky, setIsContentSticky ] = useState( false ); + const content = useRef( null ); + const maybeStickContent = () => { + if ( ! content.current ) { + return; + } + const { bottom } = content.current.getBoundingClientRect(); + const shouldBeSticky = showInbox && bottom < window.innerHeight; + + setIsContentSticky( shouldBeSticky ); + }; + + useEffect( () => { + maybeStickContent(); + window.addEventListener( 'resize', maybeStickContent ); + + return () => { + window.removeEventListener( 'resize', maybeStickContent ); + }; + }, [] ); + + return ( +
+ { showInbox && ( +
+
+ +
+
+
+
+
+
+
+
+ ) } +
+ +
+
+ ); +}; + +export default Layout; diff --git a/plugins/woocommerce-admin/client/homepage/style.scss b/plugins/woocommerce-admin/client/homepage/style.scss new file mode 100644 index 00000000000..c39c780888e --- /dev/null +++ b/plugins/woocommerce-admin/client/homepage/style.scss @@ -0,0 +1,45 @@ +.woocommerce-page #wpcontent, +.woocommerce-page.woocommerce_page_wc-admin #wpbody-content { + overflow-x: inherit !important; // Overwriting wc-admin css from elsewhere. Necessary to make the right-hand column 'stick' +} + +.woocommerce-homepage { + display: flex; + max-width: 1032px; + margin: 0 auto; + justify-content: space-between; + + &.hasInbox .woocommerce-homepage-column { + width: calc(50% - 12px); + margin: 0; + + @include breakpoint('<782px') { + width: 100%; + position: inherit; + top: auto; + } + } + + @include breakpoint('<782px') { + margin-left: -16px; + margin-right: -16px; + flex-direction: column-reverse; + } +} +.woocommerce-homepage-column { + width: 50%; + top: 130px; + margin: 0 auto; + align-self: flex-start; +} +.temp-content { + width: 100%; + height: 300px; + margin-bottom: 24px; + background-color: #9acd32; +} + +.is-inbox .temp-content { + height: 225px; + background-color: #6495ed; +}