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

Use container queries to load Cart and Checkout responsive styles (https://github.com/woocommerce/woocommerce-blocks/pull/2370) 

* Use container queries to load Cart and Checkout responsive styles

* Update package-lock.json

* Make form-step react to container queries instead of media queries

* Make sidebar layout inner padding relative to the full-width

* Make container queries breakpoints smaller
This commit is contained in:
Albert Juhé Lluveras 2020-05-05 10:10:02 +02:00 committed by GitHub
parent b7d4b48b57
commit 30c281c524
13 changed files with 104 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
plugins/woocommerce-blocks/assets/css/abstracts/_breakpoints.scss
View File

@ -5,7 +5,7 @@
// Think very carefully before adding a new breakpoint. // Think very carefully before adding a new breakpoint.
// The list below is based on wp-admin's main breakpoints // The list below is based on wp-admin's main breakpoints
// See https://github.com/WordPress/gutenberg/tree/master/packages/viewport#breakpoints // See https://github.com/WordPress/gutenberg/tree/master/packages/viewport#usage
$breakpoints: 480px, 600px, 782px, 960px, 1280px, 1440px; $breakpoints: 480px, 600px, 782px, 960px, 1280px, 1440px;
@mixin breakpoint( $sizes... ) { @mixin breakpoint( $sizes... ) {

4
plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/form-step/style.scss
View File

@ -12,8 +12,8 @@ $line-offset-from-circle-size: 8px;
background: none; background: none;
margin: 0; margin: 0;
@include breakpoint( ">782px" ) { .is-large & {
padding-right: $gap-larger; padding-right: $gap-large;
} }
} }

12
plugins/woocommerce-blocks/assets/js/base/components/sidebar-layout/sidebar-layout.js
View File

@ -3,6 +3,7 @@
*/ */
import classNames from 'classnames'; import classNames from 'classnames';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { useContainerQueries } from '@woocommerce/base-hooks';
/** /**
* Internal dependencies * Internal dependencies
@ -10,8 +11,17 @@ import PropTypes from 'prop-types';
import './style.scss'; import './style.scss';
const SidebarLayout = ( { children, className } ) => { const SidebarLayout = ( { children, className } ) => {
const [ resizeListener, containerQueryClassName ] = useContainerQueries();
return ( return (
<div className={ classNames( 'wc-block-sidebar-layout', className ) }> <div
className={ classNames(
'wc-block-sidebar-layout',
className,
containerQueryClassName
) }
>
{ resizeListener }
{ children } { children }
</div> </div>
); );

11
plugins/woocommerce-blocks/assets/js/base/components/sidebar-layout/style.scss
View File

@ -2,17 +2,18 @@
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin: 0 auto $gap; margin: 0 auto $gap;
position: relative;
.wc-block-main { .wc-block-main {
margin: 0; margin: 0;
padding-right: $gap-largest; padding-right: percentage($gap-largest / 1060px); // ~1060px is the default width of the content area in Storefront.
width: 65%; width: 65%;
} }
} }
.wc-block-sidebar { .wc-block-sidebar {
margin: 0; margin: 0;
padding-left: $gap-largest; padding-left: percentage($gap-largest / 1060px);
width: 35%; width: 35%;
// Reset Gutenberg <Panel> styles when used in the sidebar. // Reset Gutenberg <Panel> styles when used in the sidebar.
@ -60,8 +61,10 @@
} }
} }
@include breakpoint( "<782px" ) { .is-medium,
.wc-block-sidebar-layout { .is-small,
.is-mobile {
&.wc-block-sidebar-layout {
flex-direction: column; flex-direction: column;
margin: 0 0 $gap; margin: 0 0 $gap;

1
plugins/woocommerce-blocks/assets/js/base/hooks/index.js
View File

@ -6,6 +6,7 @@ export * from './shipping';
export * from './use-collection'; export * from './use-collection';
export * from './use-collection-header'; export * from './use-collection-header';
export * from './use-collection-data'; export * from './use-collection-data';
export * from './use-container-queries';
export * from './use-previous'; export * from './use-previous';
export * from './use-shallow-equal'; export * from './use-shallow-equal';
export * from './use-store-products'; export * from './use-store-products';

47
plugins/woocommerce-blocks/assets/js/base/hooks/use-container-queries.js Normal file
View File

@ -0,0 +1,47 @@
/**
* External dependencies
*/
import { useResizeObserver } from 'wordpress-compose';
/**
* Returns a resizeListener element and a class name based on its width.
* Class names are based on the smaller of the breakpoints:
* https://github.com/WordPress/gutenberg/tree/master/packages/viewport#usage
* Values are also based on those breakpoints minus ~80px which is aproximately
* the left + right margin in Storefront with a font-size of 16px.
* _Note: `useContainerQueries` will return an empty class name `` until after
* first render_
*
* @return {Array} An array of {Element} `resizeListener` and {string} `className`.
*
* @example
*
* ```js
* const App = () => {
* const [ resizeListener, containerQueryClassName ] = useContainerQueries();
*
* return (
* <div className={ containerQueryClassName }>
* { resizeListener }
* Your content here
* </div>
* );
* };
* ```
*/
export const useContainerQueries = () => {
const [ resizeListener, { width } ] = useResizeObserver();
let className = '';
if ( width > 700 ) {
className = 'is-large';
} else if ( width > 520 ) {
className = 'is-medium';
} else if ( width > 400 ) {
className = 'is-small';
} else if ( width ) {
className = 'is-mobile';
}
return [ resizeListener, className ];
};

8
plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/full-cart/editor.scss
View File

@ -34,11 +34,3 @@
position: static; position: static;
} }
} }
@include breakpoint( "<782px" ) {
.editor-styles-wrapper {
table td.wc-block-cart-item__total {
vertical-align: bottom;
}
}
}

23
plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/full-cart/style.scss
View File

@ -179,9 +179,10 @@ table.wc-block-cart-items {
display: flex; display: flex;
} }
// Mobile styles. .is-medium,
@include breakpoint( "<782px" ) { .is-small,
.wc-block-cart { .is-mobile {
&.wc-block-cart {
.wc-block-sidebar { .wc-block-sidebar {
.wc-block-cart__totals-title { .wc-block-cart__totals-title {
display: none; display: none;
@ -247,7 +248,9 @@ table.wc-block-cart-items {
} }
} }
} }
}
@include breakpoint( "<782px" ) {
// Submit button is sticky to bottom of screen on mobile. // Submit button is sticky to bottom of screen on mobile.
.wc-block-cart__submit-container { .wc-block-cart__submit-container {
background: $white; background: $white;
@ -264,15 +267,13 @@ table.wc-block-cart-items {
} }
} }
@include breakpoint( ">782px" ) { .is-large.wc-block-cart {
.wc-block-cart { .wc-block-radio-control__option {
.wc-block-radio-control__option { padding-left: $gap-large;
padding-left: $gap-large; }
}
.wc-block-radio-control__input { .wc-block-radio-control__input {
left: 0; left: 0;
}
} }
} }

12
plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/style.scss
View File

@ -239,7 +239,7 @@
} }
} }
@include breakpoint( "<480px" ) { .is-mobile {
.wc-block-checkout__actions { .wc-block-checkout__actions {
.wc-block-components-checkout-return-to-cart-button { .wc-block-components-checkout-return-to-cart-button {
display: none; display: none;
@ -251,7 +251,9 @@
} }
} }
@include breakpoint( "<782px" ) { .is-mobile,
.is-small,
.is-medium {
.wc-block-checkout__main { .wc-block-checkout__main {
order: 1; order: 1;
} }
@ -266,7 +268,9 @@
} }
} }
@include breakpoint( ">480px" ) { .is-small,
.is-medium,
.is-large {
.wc-block-checkout__billing-fields, .wc-block-checkout__billing-fields,
.wc-block-checkout__shipping-fields { .wc-block-checkout__shipping-fields {
.wc-block-address-form { .wc-block-address-form {
@ -309,7 +313,7 @@
} }
} }
@include breakpoint( ">782px" ) { .is-large {
.wc-block-checkout__sidebar { .wc-block-checkout__sidebar {
.wc-block-order-summary { .wc-block-order-summary {
margin: -20px; margin: -20px;

23
plugins/woocommerce-blocks/package-lock.json generated
View File

@ -30367,15 +30367,16 @@
} }
}, },
"wordpress-compose": { "wordpress-compose": {
"version": "npm:@wordpress/compose@3.11.0", "version": "npm:@wordpress/compose@3.13.1",
"resolved": "https://registry.npmjs.org/@wordpress/compose/-/compose-3.11.0.tgz", "resolved": "https://registry.npmjs.org/@wordpress/compose/-/compose-3.13.1.tgz",
"integrity": "sha512-CNbLn9NtG2A0X71wjEux126uEHpWp3v546FtSgMoWlq73z3LEEBDoEeS2glIPAbIK6e1X2UibsKrn5Tn651tlg==", "integrity": "sha512-RlPWcePmsnVj6jxPIq92lh7zbc3vPJzZC5BCHC9v38zUxUSd0pd7q+vvs/Wzpv4t4pYy0saslUM9HTq+bS6nxA==",
"requires": { "requires": {
"@babel/runtime": "^7.8.3", "@babel/runtime": "^7.9.2",
"@wordpress/element": "^2.11.0", "@wordpress/element": "^2.13.1",
"@wordpress/is-shallow-equal": "^1.8.0", "@wordpress/is-shallow-equal": "^2.0.0",
"lodash": "^4.17.15", "lodash": "^4.17.15",
"mousetrap": "^1.6.2" "mousetrap": "^1.6.2",
"react-resize-aware": "^3.0.0"
}, },
"dependencies": { "dependencies": {
"@wordpress/element": { "@wordpress/element": {
@ -30391,11 +30392,11 @@
} }
}, },
"@wordpress/is-shallow-equal": { "@wordpress/is-shallow-equal": {
"version": "1.8.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/@wordpress/is-shallow-equal/-/is-shallow-equal-1.8.0.tgz", "resolved": "https://registry.npmjs.org/@wordpress/is-shallow-equal/-/is-shallow-equal-2.0.0.tgz",
"integrity": "sha512-OV3qJqP9LhjuOzt85TsyBwv+//CvC8Byf/81D3NmjPKlstLaD/bBCC5nBhH6dKAv4bShYtQ2Hmut+V4dZnOM1A==", "integrity": "sha512-Xv8b3Jno/3Td6nyj1J+skW96sbyfX7W4sk0TLwN2C2Pz6iQTSTQyGrXmTZWShITt4SOeA8gKpP6kAwSZ4O0HOQ==",
"requires": { "requires": {
"@babel/runtime": "^7.8.3" "@babel/runtime": "^7.9.2"
} }
} }
} }

2
plugins/woocommerce-blocks/package.json
View File

@ -162,7 +162,7 @@
"trim-html": "0.1.9", "trim-html": "0.1.9",
"use-debounce": "3.4.0", "use-debounce": "3.4.0",
"wordpress-components": "npm:@wordpress/components@8.5.0", "wordpress-components": "npm:@wordpress/components@8.5.0",
"wordpress-compose": "npm:@wordpress/compose@3.11.0", "wordpress-compose": "npm:@wordpress/compose@3.13.1",
"wordpress-element": "npm:@wordpress/element@2.11.0" "wordpress-element": "npm:@wordpress/element@2.11.0"
}, },
"husky": { "husky": {

2
plugins/woocommerce-blocks/src/BlockTypes/Cart.php
View File

@ -130,7 +130,7 @@ class Cart extends AbstractBlock {
*/ */
protected function get_skeleton() { protected function get_skeleton() {
return ' return '
<div class="wc-block-sidebar-layout wc-block-cart wc-block-cart--is-loading wc-block-cart--skeleton" aria-hidden="true"> <div class="wc-block-sidebar-layout wc-block-cart wc-block-cart--is-loading wc-block-cart--skeleton is-large" aria-hidden="true">
<div class="wc-block-main wc-block-cart__main"> <div class="wc-block-main wc-block-cart__main">
<h2><span></span></h2> <h2><span></span></h2>
<table class="wc-block-cart-items"> <table class="wc-block-cart-items">

2
plugins/woocommerce-blocks/src/BlockTypes/Checkout.php
View File

@ -170,7 +170,7 @@ class Checkout extends AbstractBlock {
*/ */
protected function get_skeleton() { protected function get_skeleton() {
return ' return '
<div class="wc-block-sidebar-layout wc-block-checkout wc-block-checkout--is-loading wc-block-checkout--skeleton" aria-hidden="true"> <div class="wc-block-sidebar-layout wc-block-checkout wc-block-checkout--is-loading wc-block-checkout--skeleton is-large" aria-hidden="true">
<div class="wc-block-main wc-block-checkout__main"> <div class="wc-block-main wc-block-checkout__main">
<div class="wc-block-component-express-checkout"></div> <div class="wc-block-component-express-checkout"></div>
<div class="wc-block-component-express-checkout-continue-rule"><span></span></div> <div class="wc-block-component-express-checkout-continue-rule"><span></span></div>