From 1294ed3c7727f43decf0564652752c094ca91719 Mon Sep 17 00:00:00 2001 From: dmt0 Date: Wed, 5 Sep 2018 14:52:15 -0400 Subject: [PATCH 1/4] fix trace selector styling on IE --- scripts/postcss.js | 16 ++-- .../widgets/_trace-type-selector.scss | 93 +++++++++++++++++++ 2 files changed, 99 insertions(+), 10 deletions(-) diff --git a/scripts/postcss.js b/scripts/postcss.js index ab949a409..a3746eee8 100644 --- a/scripts/postcss.js +++ b/scripts/postcss.js @@ -27,7 +27,7 @@ const internetExplorerPostCSS = () => { combineSelectors, customProperties, removeRoot, - autoprefixer({browsers: ['ie 11']}), + autoprefixer({browsers: ['ie 11'], grid: true}), cssnano, ]; fs.readFile(`${BUILD_ENV}/${fileName}.ie.css`, (err, css) => { @@ -37,16 +37,12 @@ const internetExplorerPostCSS = () => { to: `${BUILD_ENV}/${fileName}.ie.min.css`, }) .then(result => { - fs.writeFile( - `${BUILD_ENV}/${fileName}.ie.min.css`, - result.css, - error => { - if (error) { - /* eslint-disable no-console */ - console.log(error); - } + fs.writeFile(`${BUILD_ENV}/${fileName}.ie.min.css`, result.css, error => { + if (error) { + /* eslint-disable no-console */ + console.log(error); } - ); + }); }); }); }; diff --git a/src/styles/components/widgets/_trace-type-selector.scss b/src/styles/components/widgets/_trace-type-selector.scss index 668f58fdc..8d7e25108 100644 --- a/src/styles/components/widgets/_trace-type-selector.scss +++ b/src/styles/components/widgets/_trace-type-selector.scss @@ -16,6 +16,52 @@ $image-size: 60px; flex-shrink: 0; flex-grow: 0; + &:nth-of-type(4n + 3) { + -ms-grid-column: 1; + } + &:nth-of-type(4n) { + -ms-grid-column: 2; + } + &:nth-of-type(4n + 1) { + -ms-grid-column: 3; + } + &:nth-of-type(4n + 2) { + -ms-grid-column: 4; + } + &:nth-of-type(3), + &:nth-of-type(4), + &:nth-of-type(5), + &:nth-of-type(6) { + -ms-grid-row: 2; + } + &:nth-of-type(7), + &:nth-of-type(8), + &:nth-of-type(9), + &:nth-of-type(10) { + -ms-grid-row: 3; + } + + .trace-item { + &:nth-of-type(2n + 1) { + -ms-grid-column: 1; + } + &:nth-of-type(2n + 2) { + -ms-grid-column: 2; + } + &:nth-of-type(3), + &:nth-of-type(4) { + -ms-grid-row: 2; + } + &:nth-of-type(5), + &:nth-of-type(6) { + -ms-grid-row: 3; + } + &:nth-of-type(7), + &:nth-of-type(8) { + -ms-grid-row: 4; + } + } + &:not(:first-of-type) { position: relative; &::before { @@ -37,6 +83,53 @@ $image-size: 60px; &--double { grid-column: span 2; flex-grow: 0; + + &:nth-of-type(2n + 1) { + -ms-grid-column: 1; + } + &:nth-of-type(2n + 2) { + -ms-grid-column: 3; + } + &:nth-of-type(5), + &:nth-of-type(6) { + -ms-grid-row: 2; + } + &:nth-of-type(7), + &:nth-of-type(8) { + -ms-grid-row: 3; + } + + .trace-item { + &:nth-of-type(4n + 1) { + -ms-grid-column: 1; + } + &:nth-of-type(4n + 2) { + -ms-grid-column: 2; + } + &:nth-of-type(4n + 3) { + -ms-grid-column: 3; + } + &:nth-of-type(4n) { + -ms-grid-column: 4; + } + &:nth-of-type(3), + &:nth-of-type(4) { + -ms-grid-row: 1; + } + &:nth-of-type(5), + &:nth-of-type(6), + &:nth-of-type(7), + &:nth-of-type(8) { + -ms-grid-row: 2; + } + &:nth-of-type(9), + &:nth-of-type(10), + &:nth-of-type(11), + &:nth-of-type(12) { + -ms-grid-row: 3; + } + } + .trace-grid__column__items { display: grid; grid-gap: 0; From 9ba48694314bf34deaf805479272b294742d83cc Mon Sep 17 00:00:00 2001 From: dmt0 Date: Wed, 5 Sep 2018 14:59:50 -0400 Subject: [PATCH 2/4] squeez trace selector --- src/styles/components/widgets/_trace-type-selector.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/styles/components/widgets/_trace-type-selector.scss b/src/styles/components/widgets/_trace-type-selector.scss index 8d7e25108..b70764c3c 100644 --- a/src/styles/components/widgets/_trace-type-selector.scss +++ b/src/styles/components/widgets/_trace-type-selector.scss @@ -143,7 +143,7 @@ $image-size: 60px; grid-template-columns: repeat(2, $item-size); flex-grow: 1; width: 100%; - padding: 0 var(--spacing-half-unit) var(--spacing-base-unit); + padding: 0 var(--spacing-half-unit) var(--spacing-half-unit); } &__header { @@ -156,7 +156,7 @@ $image-size: 60px; justify-content: flex-start; border-top: var(--border-light); width: 100%; - padding: var(--spacing-base-unit) var(--spacing-base-unit) 0; + padding: var(--spacing-half-unit) var(--spacing-base-unit) 0; box-sizing: border-box; } } @@ -169,7 +169,7 @@ $image-size: 60px; align-items: center; justify-content: flex-start; flex-grow: 0; - margin-top: var(--spacing-base-unit); + margin-top: var(--spacing-half-unit); color: var(--color-text-base); @include trans; position: relative; @@ -268,7 +268,7 @@ $image-size: 60px; font-weight: var(--font-weight-semibold); width: $item-size * 0.8; height: 34px; - margin-top: var(--spacing-half-unit); + margin-top: var(--spacing-quarter-unit); color: var(--color-text-base); text-transform: capitalize; font-size: var(--font-size-small); From 470a01cc3f40206f583dd9aeb5b8112260028a1f Mon Sep 17 00:00:00 2001 From: dmt0 Date: Wed, 5 Sep 2018 15:01:38 -0400 Subject: [PATCH 3/4] hide horizontal scrollbar on sidebar --- src/styles/components/sidebar/_main.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/styles/components/sidebar/_main.scss b/src/styles/components/sidebar/_main.scss index ab5df8109..93154bb3f 100644 --- a/src/styles/components/sidebar/_main.scss +++ b/src/styles/components/sidebar/_main.scss @@ -7,6 +7,7 @@ text-align: center; background: var(--sidebar-background); overflow-y: auto; + overflow-x: hidden; float: left; border-right: var(--border-default); flex-grow: 1; From d063676096148cfb3dadcc5ac27d76153ddb5ba5 Mon Sep 17 00:00:00 2001 From: dmt0 Date: Wed, 5 Sep 2018 16:02:39 -0400 Subject: [PATCH 4/4] remove scrollbar on IE --- src/styles/components/sidebar/_main.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/styles/components/sidebar/_main.scss b/src/styles/components/sidebar/_main.scss index 93154bb3f..b7b2ec987 100644 --- a/src/styles/components/sidebar/_main.scss +++ b/src/styles/components/sidebar/_main.scss @@ -12,6 +12,7 @@ border-right: var(--border-default); flex-grow: 1; @include scrollbar(0px); + -ms-overflow-style: none; &__group { background-color: var(--sidebar-group-background-base);