mirror of
https://github.com/woocommerce/storefront.git
synced 2025-08-21 04:11:59 +08:00
Merge pull request #779 from woocommerce/update/771
Remove columns wrapper and add legacy support
This commit is contained in:
Tiago Noronha
GitHub
commit
432c899080
5 changed files with 176 additions and 46 deletions
|
|
@ -25,6 +25,7 @@ module.exports = function( grunt ) {
|
|||
'assets/css/admin/customizer/customizer.css',
|
||||
'assets/css/woocommerce/extensions/*.css',
|
||||
'assets/css/woocommerce/woocommerce.css',
|
||||
'assets/css/woocommerce/woocommerce-legacy.css',
|
||||
'assets/css/jetpack/jetpack.css',
|
||||
'assets/css/base/*.css'
|
||||
]
|
||||
|
|
@ -144,6 +145,7 @@ module.exports = function( grunt ) {
|
|||
'assets/css/woocommerce/extensions/memberships.css': 'assets/css/woocommerce/extensions/memberships.scss',
|
||||
'assets/css/woocommerce/extensions/quick-view.css': 'assets/css/woocommerce/extensions/quick-view.scss',
|
||||
'assets/css/woocommerce/woocommerce.css': 'assets/css/woocommerce/woocommerce.scss',
|
||||
'assets/css/woocommerce/woocommerce-legacy.css': 'assets/css/woocommerce/woocommerce-legacy.scss',
|
||||
'assets/css/jetpack/jetpack.css': 'assets/css/jetpack/jetpack.scss',
|
||||
'assets/css/base/icons.css': 'assets/css/base/icons.scss'
|
||||
}]
|
||||
|
|
@ -401,6 +403,7 @@ module.exports = function( grunt ) {
|
|||
'assets/css/woocommerce/extensions/memberships.css',
|
||||
'assets/css/woocommerce/extensions/quick-view.css',
|
||||
'assets/css/woocommerce/woocommerce.css',
|
||||
'assets/css/woocommerce/woocommerce-legacy.css',
|
||||
'assets/css/admin/welcome-screen/welcome.css',
|
||||
'assets/css/jetpack/jetpack.css',
|
||||
'assets/css/base/icons.css'
|
||||
|
|
|
|||
144
assets/css/woocommerce/woocommerce-legacy.scss
Normal file
144
assets/css/woocommerce/woocommerce-legacy.scss
Normal file
|
|
@ -0,0 +1,144 @@
|
|||
/**
|
||||
* Legacy WooCommerce Styles
|
||||
*
|
||||
* @todo Remove in Storefront 2.4
|
||||
*/
|
||||
|
||||
/**
|
||||
* Imports
|
||||
*/
|
||||
@import 'bourbon';
|
||||
@import '../sass/utils/variables';
|
||||
@import '../sass/utils/mixins';
|
||||
@import '../../../node_modules/susy/sass/susy';
|
||||
@import '../sass/vendors/modular-scale';
|
||||
|
||||
@include susy-media($desktop) {
|
||||
/**
|
||||
* Full width content area product layout
|
||||
*/
|
||||
.page-template-template-fullwidth-php,
|
||||
.page-template-template-homepage-php,
|
||||
.storefront-full-width-content {
|
||||
.site-main {
|
||||
.columns-1 {
|
||||
ul.products {
|
||||
li.product {
|
||||
width: 100%;
|
||||
margin-right: 0;
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.columns-2 {
|
||||
ul.products {
|
||||
li.product {
|
||||
@include span(6 of 12);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.columns-3 {
|
||||
ul.products {
|
||||
li.product {
|
||||
@include span(4 of 12);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.columns-4 {
|
||||
ul.products {
|
||||
li.product {
|
||||
@include span(3 of 12);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// The grid wont work for 5 columns :-(
|
||||
.columns-5 {
|
||||
ul.products {
|
||||
li.product {
|
||||
width: 16.9%;
|
||||
margin-right: 3.8%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.columns-6 {
|
||||
ul.products {
|
||||
li.product {
|
||||
@include span(2 of 12);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Main content area (adjacent to sidebar) product layout
|
||||
*/
|
||||
.site-main {
|
||||
.columns-1 {
|
||||
ul.products {
|
||||
li.product {
|
||||
width: 100%;
|
||||
margin-right: 0;
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// The grid wont work for 2 columns :-(
|
||||
.columns-2 {
|
||||
ul.products {
|
||||
li.product {
|
||||
width: 48%;
|
||||
margin-right: 3.8%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.columns-3 {
|
||||
ul.products {
|
||||
li.product {
|
||||
@include span(3 of 9);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// The grid wont work for 4 columns :-(
|
||||
.columns-4 {
|
||||
ul.products {
|
||||
li.product {
|
||||
width: 22.05%;
|
||||
margin-right: 3.8%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// The grid wont work for 5 columns :-(
|
||||
.columns-5 {
|
||||
ul.products {
|
||||
li.product {
|
||||
width: 16.9%;
|
||||
margin-right: 3.8%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.columns-6 {
|
||||
ul.products {
|
||||
li.product {
|
||||
@include span(1.5 of 9);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul.products {
|
||||
li.product {
|
||||
@include span(3 of 9);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1984,52 +1984,42 @@ dl.variation {
|
|||
.page-template-template-homepage-php,
|
||||
.storefront-full-width-content {
|
||||
.site-main {
|
||||
.columns-1 {
|
||||
ul.products {
|
||||
ul.products {
|
||||
&.columns-1 {
|
||||
li.product {
|
||||
width: 100%;
|
||||
margin-right: 0;
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.columns-2 {
|
||||
ul.products {
|
||||
&.columns-2 {
|
||||
li.product {
|
||||
@include span(6 of 12);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.columns-3 {
|
||||
ul.products {
|
||||
&.columns-3 {
|
||||
li.product {
|
||||
@include span(4 of 12);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.columns-4 {
|
||||
ul.products {
|
||||
&.columns-4 {
|
||||
li.product {
|
||||
@include span(3 of 12);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// The grid wont work for 5 columns :-(
|
||||
.columns-5 {
|
||||
ul.products {
|
||||
// The grid wont work for 5 columns :-(
|
||||
&.columns-5 {
|
||||
li.product {
|
||||
width: 16.9%;
|
||||
margin-right: 3.8%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.columns-6 {
|
||||
ul.products {
|
||||
&.columns-6 {
|
||||
li.product {
|
||||
@include span(2 of 12);
|
||||
}
|
||||
|
|
@ -2042,67 +2032,55 @@ dl.variation {
|
|||
* Main content area (adjacent to sidebar) product layout
|
||||
*/
|
||||
.site-main {
|
||||
.columns-1 {
|
||||
ul.products {
|
||||
ul.products {
|
||||
li.product {
|
||||
@include span(3 of 9);
|
||||
}
|
||||
|
||||
&.columns-1 {
|
||||
li.product {
|
||||
width: 100%;
|
||||
margin-right: 0;
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// The grid wont work for 2 columns :-(
|
||||
.columns-2 {
|
||||
ul.products {
|
||||
// The grid wont work for 2 columns :-(
|
||||
&.columns-2 {
|
||||
li.product {
|
||||
width: 48%;
|
||||
margin-right: 3.8%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.columns-3 {
|
||||
ul.products {
|
||||
&.columns-3 {
|
||||
li.product {
|
||||
@include span(3 of 9);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// The grid wont work for 4 columns :-(
|
||||
.columns-4 {
|
||||
ul.products {
|
||||
// The grid wont work for 4 columns :-(
|
||||
&.columns-4 {
|
||||
li.product {
|
||||
width: 22.05%;
|
||||
margin-right: 3.8%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// The grid wont work for 5 columns :-(
|
||||
.columns-5 {
|
||||
ul.products {
|
||||
// The grid wont work for 5 columns :-(
|
||||
&.columns-5 {
|
||||
li.product {
|
||||
width: 16.9%;
|
||||
margin-right: 3.8%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.columns-6 {
|
||||
ul.products {
|
||||
&.columns-6 {
|
||||
li.product {
|
||||
@include span(1.5 of 9);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul.products {
|
||||
li.product {
|
||||
@include span(3 of 9);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -103,6 +103,11 @@ if ( ! class_exists( 'Storefront_WooCommerce' ) ) :
|
|||
|
||||
wp_register_script( 'storefront-header-cart', get_template_directory_uri() . '/assets/js/woocommerce/header-cart' . $suffix . '.js', array(), $storefront_version, true );
|
||||
wp_enqueue_script( 'storefront-header-cart' );
|
||||
|
||||
if ( defined( 'WC_VERSION' ) && version_compare( WC_VERSION, '3.3', '<' ) ) {
|
||||
wp_enqueue_style( 'storefront-woocommerce-legacy', get_template_directory_uri() . '/assets/css/woocommerce/woocommerce-legacy.css', array(), $storefront_version );
|
||||
wp_style_add_data( 'storefront-woocommerce-legacy', 'rtl', 'replace' );
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -36,20 +36,20 @@ add_action( 'woocommerce_after_shop_loop', 'woocommerce_catalog_ordering'
|
|||
add_action( 'woocommerce_after_shop_loop', 'woocommerce_result_count', 20 );
|
||||
add_action( 'woocommerce_after_shop_loop', 'woocommerce_pagination', 30 );
|
||||
add_action( 'woocommerce_after_shop_loop', 'storefront_sorting_wrapper_close', 31 );
|
||||
add_action( 'woocommerce_after_shop_loop', 'storefront_product_columns_wrapper_close', 40 );
|
||||
|
||||
add_action( 'woocommerce_before_shop_loop', 'storefront_sorting_wrapper', 9 );
|
||||
add_action( 'woocommerce_before_shop_loop', 'woocommerce_catalog_ordering', 10 );
|
||||
add_action( 'woocommerce_before_shop_loop', 'woocommerce_result_count', 20 );
|
||||
add_action( 'woocommerce_before_shop_loop', 'storefront_woocommerce_pagination', 30 );
|
||||
add_action( 'woocommerce_before_shop_loop', 'storefront_sorting_wrapper_close', 31 );
|
||||
add_action( 'woocommerce_before_shop_loop', 'storefront_product_columns_wrapper', 40 );
|
||||
|
||||
add_action( 'storefront_footer', 'storefront_handheld_footer_bar', 999 );
|
||||
|
||||
// Legacy WooCommerce columns filter.
|
||||
if ( defined( 'WC_VERSION' ) && version_compare( WC_VERSION, '3.3', '<' ) ) {
|
||||
add_filter( 'loop_shop_columns', 'storefront_loop_columns' );
|
||||
add_action( 'woocommerce_before_shop_loop', 'storefront_product_columns_wrapper', 40 );
|
||||
add_action( 'woocommerce_after_shop_loop', 'storefront_product_columns_wrapper_close', 40 );
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue
