Fix: #453 Marketplace UI issues on IE (dev portal) (#518)

Fix: #453 Marketplace UI issues on IE (DEV portal)
reapit · Mar 4, 2020 · 7725e4f · 7725e4f
1 parent 31014db
commit 7725e4f
Show file tree

Hide file tree

Showing 14 changed files with 111 additions and 19 deletions.
diff --git a/packages/elements/.storybook/webpack.config.js b/packages/elements/.storybook/webpack.config.js
@@ -4,7 +4,29 @@ module.exports = ({ config }) => {
   config.module.rules.push(
     {
       test: /\.(ts|tsx)$/,
-      use: [require.resolve('awesome-typescript-loader'), require.resolve('react-docgen-typescript-loader')]
+      use: [
+        {
+          loader: 'babel-loader',
+          options: {
+            presets: [
+              [
+                '@babel/preset-env',
+                {
+                  useBuiltIns: 'entry',
+                  corejs: '3',
+                  targets: {
+                    esmodules: true,
+                    chrome: '58',
+                    ie: '11',
+                  },
+                },
+              ],
+            ],
+          },
+        },
+        { loader: 'ts-loader', options: { happyPackMode: true, transpileOnly: true } },
+        require.resolve('react-docgen-typescript-loader'),
+      ],
     },
     {
       test: /\.stories\.tsx?$/,

diff --git a/packages/elements/src/components/HelpGuide/vertical-timeline.tsx b/packages/elements/src/components/HelpGuide/vertical-timeline.tsx
@@ -41,6 +41,9 @@ export const calculateElement = ({
   if (circleRef.current && activeRef.current && lineRef.current) {
     const circlePosY = caculateCircleRef({ activeRef, circleRef })
     circleRef.current.style.transform = `translateY(${circlePosY}px)`
+    if (window.matchMedia('(-ms-high-contrast:none)').matches) {
+      circleRef.current.style.transform = `translate(-20px, ${circlePosY}px)`
+    }
 
     const lineHeight = caculateLineRef({ activeRef })
     lineRef.current.style.height = `${lineHeight}px`

diff --git a/packages/elements/src/styles/components/help-guide.scss b/packages/elements/src/styles/components/help-guide.scss
@@ -102,6 +102,9 @@
     top: 50%;
     transform: translateX(-50%);
     z-index: -3;
+    @media all and (-ms-high-contrast:none) {
+      left: 50%;
+    }
   }
 
   li:last-child:after {
@@ -119,6 +122,9 @@
     background: white;
     transition: all 0.3s;
     text-align: center;
+    @media all and (-ms-high-contrast:none) {
+      transform: translate(-20px, 25px);
+    }
   }
 
   & .line-active {
@@ -129,6 +135,9 @@
     background-color: $reapit-mid-blue;
     transition: all 0.3s;
     z-index: -2;
+    @media all and (-ms-high-contrast:none) {
+      transform: translateX(-2px);
+    }
   }
 }
 

diff --git a/packages/elements/src/styles/components/menu.scss b/packages/elements/src/styles/components/menu.scss
@@ -28,6 +28,7 @@ $nav-dimensions: 66px;
     overflow-x: scroll;
     overflow-y: hidden;
     height: $nav-dimensions;
+    -ms-overflow-style: -ms-autohiding-scrollbar;
 
     @media screen and (min-width: 768px) {
       height: 100%;
@@ -69,7 +70,7 @@ $nav-dimensions: 66px;
 
   .nav-item-link {
     cursor: pointer;
-
+    
     &.is-secondary {
       margin-left: auto;
 
@@ -83,10 +84,16 @@ $nav-dimensions: 66px;
   .nav-item-icon {
     width: 50%;
     height: 100%;
+    @media all and (-ms-high-contrast:none) {
+      height: 23px;
+    }
   }
 
   .is-logo .nav-item-icon {
     width: 75%;
+    @media all and (-ms-high-contrast:none) {
+      height: 42px;
+    }
   }
 
   &.is-desktop {

diff --git a/packages/elements/src/styles/vendor/bulma-overrides.scss b/packages/elements/src/styles/vendor/bulma-overrides.scss
@@ -254,13 +254,40 @@
   }
 }
 
+.form-section {
+  .level-right {
+    .column {
+      @media all and (-ms-high-contrast:none) {
+        flex-basis: auto;
+      }
+    }
+  }
+}
+
+
+.level-right {
+  @media all and (-ms-high-contrast:none) {
+    justify-content: flex-start;
+  }
+}
+
+.container-footer {
+  .level-right  {
+    @media all and (-ms-high-contrast:none) {
+      justify-content: flex-start;
+    }
+  }
+}
+
 @media (max-width: 767px) {
   .reverse-columns {
     flex-direction: column-reverse;
     display: flex;
   }
 }
 
+
+
 .content {
   & ul {
     margin: 0;

diff --git a/...e/src/components/pages/__tests__/__snapshots__/developer-submit-app-successfully.tsx.snap b/...e/src/components/pages/__tests__/__snapshots__/developer-submit-app-successfully.tsx.snap
@@ -12,6 +12,7 @@ exports[`DeveloperSubmitAppSuccessfully renders correctly 1`] = `
     hasPadding={true}
   >
     <CallToAction
+      className="container-footer"
       dataTest="submit-success-section"
       footerItems={
         <React.Fragment>

diff --git a/packages/marketplace/src/components/pages/__tests__/__snapshots__/elements.tsx.snap b/packages/marketplace/src/components/pages/__tests__/__snapshots__/elements.tsx.snap
@@ -16,7 +16,7 @@ exports[`Elements should match a snapshot 1`] = `
         style={
           Object {
             "border": "none",
-            "height": "auto",
+            "height": "100%",
           }
         }
         width="100%"

diff --git a/packages/marketplace/src/components/pages/developer-submit-app-successfully.tsx b/packages/marketplace/src/components/pages/developer-submit-app-successfully.tsx
@@ -16,6 +16,7 @@ export const DeveloperSubmitAppSuccessfully: React.FC<DeveloperSubmitAppSuccessf
   <FlexContainerResponsive hasPadding flexColumn centerContent className={styles.wrapDeveloperSuccess}>
     <FlexContainerResponsive flexColumn hasBackground hasPadding>
       <CallToAction
+        className="container-footer"
         isCard
         title="Success"
         dataTest="submit-success-section"

diff --git a/packages/marketplace/src/components/pages/elements.tsx b/packages/marketplace/src/components/pages/elements.tsx
@@ -8,7 +8,7 @@ const ElementsPage: React.SFC = () => (
     <FlexContainerBasic flexColumn hasPadding>
       <FlexContainerBasic className="container">
         <iframe
-          style={{ border: 'none', height: 'auto' }}
+          style={{ border: 'none', height: '100%' }}
           scrolling="no"
           src={IFRAME_URLS.elements}
           width="100%"

diff --git a/packages/marketplace/src/scripts/chat-bot.js b/packages/marketplace/src/scripts/chat-bot.js
@@ -1,4 +1,4 @@
-module.exports = loginIdentity => {
+module.exports = function(loginIdentity) {
   window._chatlio = window._chatlio || []
 
   !(function() {
@@ -26,17 +26,13 @@ module.exports = loginIdentity => {
     c.parentNode.insertBefore(n, c)
 
     if (loginIdentity) {
-      document.addEventListener(
-        'chatlio.ready',
-        function(e) {
-          _chatlio.identify(loginIdentity.developerId || '', {
-            name: loginIdentity.name || '',
-            email: loginIdentity.email || ''
-          })
-          _chatlio.show({ expanded: true })
-        },
-        false
-      )
+      document.addEventListener('chatlio.ready', function() {
+        _chatlio.identify(loginIdentity.developerId || '', {
+          name: loginIdentity.name || '',
+          email: loginIdentity.email || '',
+        })
+        _chatlio.show({ expanded: true })
+      })
     }
   })()
 }
diff --git a/packages/marketplace/src/styles/pages/developer-submit-app-successfully.scss b/packages/marketplace/src/styles/pages/developer-submit-app-successfully.scss
@@ -1,4 +1,5 @@
 .wrapDeveloperSuccess {
   max-width: 768px;
+  width: 768px;
   flex-grow: 0;
 }
diff --git a/packages/marketplace/src/styles/pages/help.scss b/packages/marketplace/src/styles/pages/help.scss
@@ -6,6 +6,9 @@
 }
 .wrapListItems {
   padding: 1rem;
+  @media all and (-ms-high-contrast:none) {
+    background-color: $white;
+  }
 }
 .item {
   padding: 1.5rem;
@@ -17,6 +20,9 @@
 .wrapImage {
   width: 100%;
   margin-bottom: 2rem;
+  @media all and (-ms-high-contrast:none) {
+    min-height: 218px;
+  }
 }
 .image {
   width: 100%;
@@ -25,6 +31,9 @@
 .text {
   flex-grow: 1;
   margin-bottom: 1.5rem;
+  @media all and (-ms-high-contrast:none) {
+    width: 100%;
+  }
 }
 .wrapButton {
   width: 100%;

diff --git a/scripts/webpack/webpack.base.dev.js b/scripts/webpack/webpack.base.dev.js
@@ -85,9 +85,25 @@ module.exports = {
             },
           },
           {
-            loader: 'ts-loader',
-            options: { transpileOnly: true },
+            loader: 'babel-loader',
+            options: {
+              presets: [
+                [
+                  '@babel/preset-env',
+                  {
+                    useBuiltIns: 'entry',
+                    corejs: '3',
+                    targets: {
+                      esmodules: true,
+                      chrome: '58',
+                      ie: '11',
+                    },
+                  },
+                ],
+              ],
+            },
           },
+          { loader: 'ts-loader', options: { happyPackMode: true, transpileOnly: true } },
         ],
       },
       {

diff --git a/scripts/webpack/webpack.sass.dev.js b/scripts/webpack/webpack.sass.dev.js
@@ -15,7 +15,7 @@ const { PATHS } = require('./constants')
 module.exports = {
   ...{
     ...webpackBase,
-    entry: [webpackBase.entry, PATHS.elementsIndexSass],
+    entry: ['@babel/polyfill', 'core-js', 'isomorphic-fetch', webpackBase.entry, PATHS.elementsIndexSass],
   },
   module: {
     rules: [