Merge pull request #4379 from hashicorp/jo-ie11-fixes

UI: Add Autoprefixer + IE11 fixes
hashicorp · Apr 18, 2018 · 1d42d53 · 1d42d53
2 parents f23b14a + 981427c
commit 1d42d53
Show file tree

Hide file tree

Showing 8 changed files with 194 additions and 61 deletions.
diff --git a/ui/app/styles/components/status-menu.scss b/ui/app/styles/components/status-menu.scss
@@ -63,10 +63,10 @@
 }
 
 .status-menu-user-trigger {
-  height: 1.25em;
-  width: 1.25em;
+  height: 1.5em;
+  width: 1.5em;
   background: $white-bis;
-  box-shadow: 0 0 0 2px $dark-grey, 0 0 0 3px $grey-light;
+  box-shadow: 0 0 0 1px $white;
   margin-right: 0.25rem;
 
   .icon {

diff --git a/ui/app/styles/components/vault-loading.scss b/ui/app/styles/components/vault-loading.scss
@@ -0,0 +1,52 @@
+   @keyframes vault-loading-animation {
+    0%,
+    70%,
+    100% {
+      transform: scale3D(1, 1, 1);
+    }
+
+    35% {
+      transform: scale3D(0, 0, 1);
+    }
+  }
+
+  #vault-loading {
+    polygon {
+      animation: vault-loading-animation 1.3s infinite ease-in-out;
+      transform-origin: 50% 50%;
+      fill: #DCE2E9;
+    }
+
+    .vault-loading-order-1 {
+      animation-delay: .1s;
+    }
+
+    .vault-loading-order-2 {
+      animation-delay: .2s;
+    }
+
+    .vault-loading-order-3 {
+      animation-delay: .3s;
+    }
+
+    .vault-loading-order-4 {
+      animation-delay: .4s;
+    }
+  }
+
+  #vault-loading-animated {
+    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+        // For IE11
+        display: none;
+    }
+  }
+
+  #vault-loading-static {
+    display: none;
+    font-size: 9px;
+
+    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+        // For IE11
+        display: block;
+    }
+  }
diff --git a/ui/app/styles/core.scss b/ui/app/styles/core.scss
@@ -64,3 +64,4 @@
 @import "./components/sub-nav";
 @import "./components/tool-tip";
 @import "./components/upgrade-overlay";
+@import "./components/vault-loading";
diff --git a/ui/app/styles/core/navbar.scss b/ui/app/styles/core/navbar.scss
@@ -25,6 +25,12 @@ a.navbar-item {
 
 .navbar-brand {
   margin: 0 0 0 $size-10;
+
+  a {
+    @include from($tablet) {
+      height: 3.25rem;
+    }
+  }
 }
 
 .navbar-sections {

diff --git a/ui/app/templates/svg/vault-loading.hbs b/ui/app/templates/svg/vault-loading.hbs
@@ -1,61 +1,32 @@
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="40px" height="40px" viewBox="0 0 40 40" version="1.1" id="vault-loading" role="alert" aria-label="Loading">
-  <style>
-    #vault-loading polygon {
-      animation: vault-loading-animation 1.3s infinite ease-in-out;
-      transform-origin: 50% 50%;
-      fill: #DCE2E9;
-    }
-
-    #vault-loading .vault-loading-order-1 {
-      animation-delay: .1s;
-    }
-
-    #vault-loading .vault-loading-order-2 {
-      animation-delay: .2s;
-    }
-
-    #vault-loading .vault-loading-order-3 {
-      animation-delay: .3s;
-    }
-
-    #vault-loading .vault-loading-order-4 {
-      animation-delay: .4s;
-    }
-
-    @keyframes vault-loading-animation {
-      0%,
-      70%,
-      100% {
-        transform: scale3D(1, 1, 1);
-      }
-
-      35% {
-        transform: scale3D(0, 0, 1);
-      }
-    }
-  </style>
-  <g id="vault-loading-y1">
-    <polygon class="vault-loading-order-4" points="0,0 5,10 10,0" style="transform-origin: 5px 5px" />
-    <polygon class="vault-loading-order-2" points="5,10 10,0 15,10" style="transform-origin: 10px 5px" />
-    <polygon class="vault-loading-order-3" points="10,0 15,10 20,0" style="transform-origin: 15px 5px" />
-    <polygon class="vault-loading-order-1" points="15,10 20,0 25,10" style="transform-origin: 20px 5px" />
-    <polygon class="vault-loading-order-3" points="20,0 25,10 30,0" style="transform-origin: 25px 5px" />
-    <polygon class="vault-loading-order-2" points="25,10 30,0 35,10" style="transform-origin: 30px 5px" />
-    <polygon class="vault-loading-order-4" points="30,0 35,10 40,0" style="transform-origin: 35px 5px" />
-  </g>
-  <g id="vault-loading-y2">
-    <polygon class="vault-loading-order-3" points="5,10 10,20 15,10" style="transform-origin: 10px 15px" />
-    <polygon class="vault-loading-order-1" points="10,20 15,10 20,20" style="transform-origin: 15px 15px" />
-    <polygon class="vault-loading-order-2" points="15,10 20,20 25,10" style="transform-origin: 20px 15px" />
-    <polygon class="vault-loading-order-1" points="20,20 25,10 30,20" style="transform-origin: 25px 15px" />
-    <polygon class="vault-loading-order-3" points="25,10 30,20 35,10" style="transform-origin: 30px 15px" />
-  </g>
-  <g id="vault-loading-y3">
-    <polygon class="vault-loading-order-3" points="10,20 15,30 20,20" style="transform-origin: 15px 25px" />
-    <polygon class="vault-loading-order-2" points="15,30 20,20 25,30" style="transform-origin: 20px 25px" />
-    <polygon class="vault-loading-order-3" points="20,20 25,30 30,20" style="transform-origin: 25px 25px" />
-  </g>
-  <g id="vault-loading-y4">
-    <polygon class="vault-loading-order-4" points="15,30 20,40 25,30" style="transform-origin: 20px 35px" />
+  <g id="vault-loading-animated">
+    <g id="vault-loading-y1">
+      <polygon class="vault-loading-order-4" points="0,0 5,10 10,0" style="transform-origin: 5px 5px" />
+      <polygon class="vault-loading-order-2" points="5,10 10,0 15,10" style="transform-origin: 10px 5px" />
+      <polygon class="vault-loading-order-3" points="10,0 15,10 20,0" xstyle="transform-origin: 15px 5px" />
+      <polygon class="vault-loading-order-1" points="15,10 20,0 25,10" style="transform-origin: 20px 5px" />
+      <polygon class="vault-loading-order-3" points="20,0 25,10 30,0" style="transform-origin: 25px 5px" />
+      <polygon class="vault-loading-order-2" points="25,10 30,0 35,10" style="transform-origin: 30px 5px" />
+      <polygon class="vault-loading-order-4" points="30,0 35,10 40,0" style="transform-origin: 35px 5px" />
+    </g>
+    <g id="vault-loading-y2">
+      <polygon class="vault-loading-order-3" points="5,10 10,20 15,10" style="transform-origin: 10px 15px" />
+      <polygon class="vault-loading-order-1" points="10,20 15,10 20,20" style="transform-origin: 15px 15px" />
+      <polygon class="vault-loading-order-2" points="15,10 20,20 25,10" style="transform-origin: 20px 15px" />
+      <polygon class="vault-loading-order-1" points="20,20 25,10 30,20" style="transform-origin: 25px 15px" />
+      <polygon class="vault-loading-order-3" points="25,10 30,20 35,10" style="transform-origin: 30px 15px" />
+    </g>
+    <g id="vault-loading-y3">
+      <polygon class="vault-loading-order-3" points="10,20 15,30 20,20" style="transform-origin: 15px 25px" />
+      <polygon class="vault-loading-order-2" points="15,30 20,20 25,30" style="transform-origin: 20px 25px" />
+      <polygon class="vault-loading-order-3" points="20,20 25,30 30,20" style="transform-origin: 25px 25px" />
+    </g>
+    <g id="vault-loading-y4">
+      <polygon class="vault-loading-order-4" points="15,30 20,40 25,30" style="transform-origin: 20px 35px" />
+    </g>
   </g>
+
+  <text id="vault-loading-static" x="20" y="20" text-anchor="middle">
+    Loading...
+  </text>
 </svg>
diff --git a/ui/ember-cli-build.js b/ui/ember-cli-build.js
@@ -32,6 +32,13 @@ module.exports = function(defaults) {
       plugins: [
         'transform-object-rest-spread'
       ]
+    },
+    autoprefixer: {
+      grid: true,
+      browsers: [
+        "defaults",
+        "ie 11"
+      ]
     }
   });
 

diff --git a/ui/package.json b/ui/package.json
@@ -44,6 +44,7 @@
     "ember-basic-dropdown": "^0.33.5",
     "ember-basic-dropdown-hover": "^0.2.0",
     "ember-cli": "~2.14.0",
+    "ember-cli-autoprefixer": "^0.8.1",
     "ember-cli-babel": "^6.3.0",
     "ember-cli-clipboard": "^0.8.0",
     "ember-cli-content-security-policy": "^1.0.0",

diff --git a/ui/yarn.lock b/ui/yarn.lock
@@ -205,6 +205,12 @@ ansi-styles@^3.0.0, ansi-styles@^3.1.0:
   dependencies:
     color-convert "^1.0.0"
 
+ansi-styles@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d"
+  dependencies:
+    color-convert "^1.9.0"
+
 ansicolors@~0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/ansicolors/-/ansicolors-0.2.1.tgz#be089599097b74a5c9c4a84a0cdbcdb62bd87aef"
@@ -373,6 +379,17 @@ asynckit@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
 
+autoprefixer@^7.0.0:
+  version "7.2.6"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-7.2.6.tgz#256672f86f7c735da849c4f07d008abb056067dc"
+  dependencies:
+    browserslist "^2.11.3"
+    caniuse-lite "^1.0.30000805"
+    normalize-range "^0.1.2"
+    num2fraction "^1.2.2"
+    postcss "^6.0.17"
+    postcss-value-parser "^3.2.3"
+
 aws-sign2@~0.6.0:
   version "0.6.0"
   resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.6.0.tgz#14342dd38dbcc94d0e5b87d763cd63612c0e794f"
@@ -1192,6 +1209,14 @@ broccoli-asset-rewrite@^1.1.0:
   dependencies:
     broccoli-filter "^1.2.3"
 
+broccoli-autoprefixer@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/broccoli-autoprefixer/-/broccoli-autoprefixer-5.0.0.tgz#68c9f3bfdfff9df2d39e46545b9cf9d4443d6a16"
+  dependencies:
+    autoprefixer "^7.0.0"
+    broccoli-persistent-filter "^1.1.6"
+    postcss "^6.0.1"
+
 broccoli-babel-transpiler@^5.5.0, broccoli-babel-transpiler@^5.6.0, broccoli-babel-transpiler@^5.6.2:
   version "5.7.1"
   resolved "https://registry.yarnpkg.com/broccoli-babel-transpiler/-/broccoli-babel-transpiler-5.7.1.tgz#e10d831faed1c57e37272e4223748ba71a7926d1"
@@ -1632,6 +1657,13 @@ browserslist@^2.1.2:
     caniuse-lite "^1.0.30000701"
     electron-to-chromium "^1.3.15"
 
+browserslist@^2.11.3:
+  version "2.11.3"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-2.11.3.tgz#fe36167aed1bbcde4827ebfe71347a2cc70b99b2"
+  dependencies:
+    caniuse-lite "^1.0.30000792"
+    electron-to-chromium "^1.3.30"
+
 bser@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/bser/-/bser-2.0.0.tgz#9ac78d3ed5d915804fd87acb158bc797147a1719"
@@ -1761,6 +1793,10 @@ caniuse-lite@^1.0.30000701:
   version "1.0.30000701"
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000701.tgz#9d673cf6b74dcb3d5c21d213176b011ac6a45baa"
 
+caniuse-lite@^1.0.30000792, caniuse-lite@^1.0.30000805:
+  version "1.0.30000830"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000830.tgz#cb96b8a2dd3cbfe04acea2af3c4e894249095328"
+
 capture-exit@^1.1.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/capture-exit/-/capture-exit-1.2.0.tgz#1c5fcc489fd0ab00d4f1ac7ae1072e3173fbab6f"
@@ -1821,6 +1857,14 @@ chalk@^2.0.0:
     escape-string-regexp "^1.0.5"
     supports-color "^4.0.0"
 
+chalk@^2.3.2:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.3.2.tgz#250dc96b07491bfd601e648d66ddf5f60c7a5c65"
+  dependencies:
+    ansi-styles "^3.2.1"
+    escape-string-regexp "^1.0.5"
+    supports-color "^5.3.0"
+
 charm@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/charm/-/charm-1.0.2.tgz#8add367153a6d9a581331052c4090991da995e35"
@@ -1968,6 +2012,12 @@ color-convert@^1.0.0:
   dependencies:
     color-name "^1.1.1"
 
+color-convert@^1.9.0:
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.1.tgz#c1261107aeb2f294ebffec9ed9ecad529a6097ed"
+  dependencies:
+    color-name "^1.1.1"
+
 color-name@^1.1.1:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
@@ -2447,6 +2497,10 @@ electron-to-chromium@^1.3.15:
   version "1.3.15"
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.15.tgz#08397934891cbcfaebbd18b82a95b5a481138369"
 
+electron-to-chromium@^1.3.30:
+  version "1.3.42"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.42.tgz#95c33bf01d0cc405556aec899fe61fd4d76ea0f9"
+
 ember-ajax@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/ember-ajax/-/ember-ajax-3.0.0.tgz#8f21e9da0c1d433cf879aa855fce464d517e9ab5"
@@ -2483,6 +2537,13 @@ ember-basic-dropdown@^0.33.5:
     ember-native-dom-helpers "^0.5.3"
     ember-wormhole "^0.5.2"
 
+ember-cli-autoprefixer@^0.8.1:
+  version "0.8.1"
+  resolved "https://registry.yarnpkg.com/ember-cli-autoprefixer/-/ember-cli-autoprefixer-0.8.1.tgz#071dd9574451057b03dcc03b71f5bd9cb07ef332"
+  dependencies:
+    broccoli-autoprefixer "^5.0.0"
+    lodash "^4.0.0"
+
 ember-cli-babel@5.1.10:
   version "5.1.10"
   resolved "https://registry.yarnpkg.com/ember-cli-babel/-/ember-cli-babel-5.1.10.tgz#d403f178aab602e1337c403c5a58c0200a8969aa"
@@ -4280,6 +4341,10 @@ has-flag@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-2.0.0.tgz#e8207af1cc7b30d446cc70b734b5e8be18f88d51"
 
+has-flag@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
+
 has-unicode@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/has-unicode/-/has-unicode-2.0.1.tgz#e0e6fe6a28cf51138855e086d1691e771de2a8b9"
@@ -5695,6 +5760,10 @@ normalize-path@^2.0.1:
   dependencies:
     remove-trailing-separator "^1.0.1"
 
+normalize-range@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942"
+
 normalize.css@4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/normalize.css/-/normalize.css-4.1.1.tgz#4f0b1d5a235383252b04d8566b866cc5fcad9f0c"
@@ -5731,6 +5800,10 @@ nth-check@~1.0.0:
   dependencies:
     boolbase "~1.0.0"
 
+num2fraction@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/num2fraction/-/num2fraction-1.2.2.tgz#6f682b6a027a4e9ddfa4564cd2589d1d4e669ede"
+
 number-is-nan@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d"
@@ -6053,6 +6126,18 @@ portfinder@^1.0.7:
     debug "^2.2.0"
     mkdirp "0.5.x"
 
+postcss-value-parser@^3.2.3:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.0.tgz#87f38f9f18f774a4ab4c8a232f5c5ce8872a9d15"
+
+postcss@^6.0.1, postcss@^6.0.17:
+  version "6.0.21"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.21.tgz#8265662694eddf9e9a5960db6da33c39e4cd069d"
+  dependencies:
+    chalk "^2.3.2"
+    source-map "^0.6.1"
+    supports-color "^5.3.0"
+
 prelude-ls@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
@@ -6950,6 +7035,10 @@ source-map@^0.5.0, source-map@^0.5.6, source-map@~0.5.0, source-map@~0.5.1:
   version "0.5.6"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.6.tgz#75ce38f52bf0733c5a7f0c118d81334a2bb5f412"
 
+source-map@^0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
+
 spawn-args@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/spawn-args/-/spawn-args-0.2.0.tgz#fb7d0bd1d70fd4316bd9e3dec389e65f9d6361bb"
@@ -7136,6 +7225,12 @@ supports-color@^4.0.0:
   dependencies:
     has-flag "^2.0.0"
 
+supports-color@^5.3.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.3.0.tgz#5b24ac15db80fa927cf5227a4a33fd3c4c7676c0"
+  dependencies:
+    has-flag "^3.0.0"
+
 svg2png@~3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/svg2png/-/svg2png-3.0.1.tgz#a2644d68b0231ac00af431aa163714ff17106447"