From 8dc3398636c48fc856750c1d94dfa76c82664ff3 Mon Sep 17 00:00:00 2001 From: Joshua T Flowers Date: Sat, 29 Dec 2018 01:58:03 +0800 Subject: [PATCH] Extract IE11 specific styles to IE stylesheet (https://github.com/woocommerce/woocommerce-admin/pull/1199) * Extract IE11 specific styles to IE stylesheet * Enqueue IE stylesheet conditionally * Use server-side http user agent to detect IE11 IE11 and up does not detect conditional comments for stylesheets so match user agent string and conditionally load stylesheet. --- plugins/woocommerce-admin/lib/admin.php | 10 +++ .../woocommerce-admin/lib/client-assets.php | 7 ++ .../packages/components/src/ie.scss | 6 ++ .../src/segmented-selection/ie.scss | 17 +++++ .../src/segmented-selection/style.scss | 18 ------ .../packages/components/src/summary/ie.scss | 64 +++++++++++++++++++ .../components/src/summary/style.scss | 64 ------------------- .../packages/components/src/table/ie.scss | 24 +++++++ .../packages/components/src/table/style.scss | 18 ------ 9 files changed, 128 insertions(+), 100 deletions(-) create mode 100644 plugins/woocommerce-admin/packages/components/src/ie.scss create mode 100644 plugins/woocommerce-admin/packages/components/src/segmented-selection/ie.scss create mode 100644 plugins/woocommerce-admin/packages/components/src/summary/ie.scss create mode 100644 plugins/woocommerce-admin/packages/components/src/table/ie.scss diff --git a/plugins/woocommerce-admin/lib/admin.php b/plugins/woocommerce-admin/lib/admin.php index 2adbb706106..b44ac05158f 100644 --- a/plugins/woocommerce-admin/lib/admin.php +++ b/plugins/woocommerce-admin/lib/admin.php @@ -214,6 +214,16 @@ function wc_admin_enqueue_script() { wp_enqueue_script( WC_ADMIN_APP ); wp_enqueue_style( WC_ADMIN_APP ); + + // Use server-side detection to prevent unneccessary stylesheet loading in other browsers. + $user_agent = isset( $_SERVER['HTTP_USER_AGENT'] ) ? $_SERVER['HTTP_USER_AGENT'] : ''; // WPCS: sanitization ok. + preg_match( '/MSIE (.*?);/', $user_agent, $matches ); + if ( count( $matches ) < 2 ) { + preg_match( '/Trident\/\d{1,2}.\d{1,2}; rv:([0-9]*)/', $user_agent, $matches ); + } + if ( count( $matches ) > 1 ) { + wp_enqueue_style( 'wc-components-ie' ); + } } add_action( 'admin_enqueue_scripts', 'wc_admin_enqueue_script' ); diff --git a/plugins/woocommerce-admin/lib/client-assets.php b/plugins/woocommerce-admin/lib/client-assets.php index d8f7a440464..8e876376ceb 100644 --- a/plugins/woocommerce-admin/lib/client-assets.php +++ b/plugins/woocommerce-admin/lib/client-assets.php @@ -102,6 +102,13 @@ function wc_admin_register_script() { filemtime( wc_admin_dir_path( 'dist/components/style.css' ) ) ); + wp_register_style( + 'wc-components-ie', + wc_admin_url( 'dist/components/ie.css' ), + array( 'wp-edit-blocks' ), + filemtime( wc_admin_dir_path( 'dist/components/ie.css' ) ) + ); + wp_register_style( WC_ADMIN_APP, wc_admin_url( "dist/{$entry}/style.css" ), diff --git a/plugins/woocommerce-admin/packages/components/src/ie.scss b/plugins/woocommerce-admin/packages/components/src/ie.scss new file mode 100644 index 00000000000..d14445447f1 --- /dev/null +++ b/plugins/woocommerce-admin/packages/components/src/ie.scss @@ -0,0 +1,6 @@ +/** + * Internal Dependencies + */ +@import 'segmented-selection/ie.scss'; +@import 'summary/ie.scss'; +@import 'table/ie.scss'; diff --git a/plugins/woocommerce-admin/packages/components/src/segmented-selection/ie.scss b/plugins/woocommerce-admin/packages/components/src/segmented-selection/ie.scss new file mode 100644 index 00000000000..66457620c86 --- /dev/null +++ b/plugins/woocommerce-admin/packages/components/src/segmented-selection/ie.scss @@ -0,0 +1,17 @@ +.woocommerce-segmented-selection__item { + display: block; + @include set-grid-item-position( 2, 10 ); + + &:nth-child(2n) { + border-left: 1px solid $core-grey-light-700; + border-top: 1px solid $core-grey-light-700; + } + + &:nth-child(2n + 1) { + border-top: 1px solid $core-grey-light-700; + } + + &:nth-child(-n + 2) { + border-top: 0; + } +} \ No newline at end of file diff --git a/plugins/woocommerce-admin/packages/components/src/segmented-selection/style.scss b/plugins/woocommerce-admin/packages/components/src/segmented-selection/style.scss index 04efce1bf90..152c3980c34 100644 --- a/plugins/woocommerce-admin/packages/components/src/segmented-selection/style.scss +++ b/plugins/woocommerce-admin/packages/components/src/segmented-selection/style.scss @@ -14,24 +14,6 @@ background-color: $core-grey-light-700; } -.woocommerce-segmented-selection__item { - display: block; - @include set-grid-item-position( 2, 10 ); - - &:nth-child(2n) { - border-left: 1px solid $core-grey-light-700; - border-top: 1px solid $core-grey-light-700; - } - - &:nth-child(2n + 1) { - border-top: 1px solid $core-grey-light-700; - } - - &:nth-child(-n + 2) { - border-top: 0; - } -} - .woocommerce-segmented-selection__label { background-color: $core-grey-light-100; padding: $gap-small $gap-small $gap-small $gap-larger; diff --git a/plugins/woocommerce-admin/packages/components/src/summary/ie.scss b/plugins/woocommerce-admin/packages/components/src/summary/ie.scss new file mode 100644 index 00000000000..be81ee415c4 --- /dev/null +++ b/plugins/woocommerce-admin/packages/components/src/summary/ie.scss @@ -0,0 +1,64 @@ + +// IE11 doesn't auto-position grid children, so their position must be set manually +.has-1-items .woocommerce-summary__item-container { + @include set-grid-item-position( 1, 1 ); +} + +.has-2-items .woocommerce-summary__item-container { + @include set-grid-item-position( 2, 2 ); +} + +.has-3-items .woocommerce-summary__item-container { + @include set-grid-item-position( 3, 3 ); +} + +.has-4-items .woocommerce-summary__item-container { + @include set-grid-item-position( 4, 4 ); +} + +.has-5-items .woocommerce-summary__item-container { + @include set-grid-item-position( 5, 5 ); +} + +.has-6-items .woocommerce-summary__item-container { + @include set-grid-item-position( 6, 6 ); + + @include breakpoint( '<1440px' ) { + @include set-grid-item-position( 3, 6 ); + } +} + +.has-7-items .woocommerce-summary__item-container { + @include set-grid-item-position( 4, 7 ); +} + +.has-8-items .woocommerce-summary__item-container { + @include set-grid-item-position( 4, 8 ); +} + +.has-9-items .woocommerce-summary__item-container { + @include set-grid-item-position( 5, 9 ); + + @include breakpoint( '<1440px' ) { + @include set-grid-item-position( 3, 9 ); + } +} + +.has-10-items .woocommerce-summary__item-container { + @include set-grid-item-position( 5, 10 ); + + @include breakpoint( '<1440px' ) { + @include set-grid-item-position( 4, 10 ); + } +} + +@include breakpoint( '<960px' ) { + @for $i from 1 through 10 { + .woocommerce-summary > .woocommerce-summary__item-container:nth-child(#{$i}) { + grid-column-start: 1; + grid-column-end: 2; + grid-row-start: #{$i}; + grid-row-end: #{$i+1}; + } + } +} diff --git a/plugins/woocommerce-admin/packages/components/src/summary/style.scss b/plugins/woocommerce-admin/packages/components/src/summary/style.scss index 6e333c29db3..3848e112870 100644 --- a/plugins/woocommerce-admin/packages/components/src/summary/style.scss +++ b/plugins/woocommerce-admin/packages/components/src/summary/style.scss @@ -257,70 +257,6 @@ $inner-border: $core-grey-light-500; } } -// IE11 doesn't auto-position grid children, so their position must be set manually -.has-1-items .woocommerce-summary__item-container { - @include set-grid-item-position( 1, 1 ); -} - -.has-2-items .woocommerce-summary__item-container { - @include set-grid-item-position( 2, 2 ); -} - -.has-3-items .woocommerce-summary__item-container { - @include set-grid-item-position( 3, 3 ); -} - -.has-4-items .woocommerce-summary__item-container { - @include set-grid-item-position( 4, 4 ); -} - -.has-5-items .woocommerce-summary__item-container { - @include set-grid-item-position( 5, 5 ); -} - -.has-6-items .woocommerce-summary__item-container { - @include set-grid-item-position( 6, 6 ); - - @include breakpoint( '<1440px' ) { - @include set-grid-item-position( 3, 6 ); - } -} - -.has-7-items .woocommerce-summary__item-container { - @include set-grid-item-position( 4, 7 ); -} - -.has-8-items .woocommerce-summary__item-container { - @include set-grid-item-position( 4, 8 ); -} - -.has-9-items .woocommerce-summary__item-container { - @include set-grid-item-position( 5, 9 ); - - @include breakpoint( '<1440px' ) { - @include set-grid-item-position( 3, 9 ); - } -} - -.has-10-items .woocommerce-summary__item-container { - @include set-grid-item-position( 5, 10 ); - - @include breakpoint( '<1440px' ) { - @include set-grid-item-position( 4, 10 ); - } -} - -@include breakpoint( '<960px' ) { - @for $i from 1 through 10 { - .woocommerce-summary > .woocommerce-summary__item-container:nth-child(#{$i}) { - grid-column-start: 1; - grid-column-end: 2; - grid-row-start: #{$i}; - grid-row-end: #{$i+1}; - } - } -} - .woocommerce-summary__item { display: block; padding: $spacing; diff --git a/plugins/woocommerce-admin/packages/components/src/table/ie.scss b/plugins/woocommerce-admin/packages/components/src/table/ie.scss new file mode 100644 index 00000000000..a40f6a78712 --- /dev/null +++ b/plugins/woocommerce-admin/packages/components/src/table/ie.scss @@ -0,0 +1,24 @@ +.woocommerce-table { + &.has-compare, + &.has-search { + .woocommerce-card__action { + .woocommerce-table__compare { + align-self: center; + grid-column-start: 1; + grid-column-end: 2; + } + + .woocommerce-search { + align-self: center; + grid-column-start: 2; + grid-column-end: 3; + } + + .woocommerce-table__download-button { + align-self: center; + grid-column-start: 3; + grid-column-end: 4; + } + } + } +} \ No newline at end of file diff --git a/plugins/woocommerce-admin/packages/components/src/table/style.scss b/plugins/woocommerce-admin/packages/components/src/table/style.scss index 2a21ffa9f20..06488097d76 100644 --- a/plugins/woocommerce-admin/packages/components/src/table/style.scss +++ b/plugins/woocommerce-admin/packages/components/src/table/style.scss @@ -27,24 +27,6 @@ display: grid; width: 100%; grid-template-columns: auto 1fr auto; - - .woocommerce-table__compare { - align-self: center; - grid-column-start: 1; - grid-column-end: 2; - } - - .woocommerce-search { - align-self: center; - grid-column-start: 2; - grid-column-end: 3; - } - - .woocommerce-table__download-button { - align-self: center; - grid-column-start: 3; - grid-column-end: 4; - } } @include breakpoint( '<960px' ) {