Merge pull request #3287 from hashicorp/b-ui-firefox-styles

Fix style discrepancies in Firefox

ui/app/components/distribution-bar.js

@@ -1,12 +1,13 @@
 import Ember from 'ember';
 import d3 from 'npm:d3-selection';
 import 'npm:d3-transition';
+import WindowResizable from '../mixins/window-resizable';
 import styleStringProperty from '../utils/properties/style-string';
 
 const { Component, computed, run, assign, guidFor } = Ember;
 const sumAggregate = (total, val) => total + val;
 
-export default Component.extend({
+export default Component.extend(WindowResizable, {
   classNames: ['chart', 'distribution-bar'],
   classNameBindings: ['isNarrow:is-narrow'],
 
@@ -124,6 +125,7 @@ export default Component.extend({
         .attr('y', () => isNarrow ? '50%' : 0)
         .attr('clip-path', `url(#${this.get('maskId')})`)
         .attr('height', () => isNarrow ? '6px' : '100%')
+        .attr('transform', () => isNarrow && 'translate(0, -3)')
       .merge(layers)
         .attr('class', (d, i) => `bar layer-${i}`)
       .transition()
@@ -138,4 +140,8 @@ export default Component.extend({
       }
   },
   /* eslint-enable */
+
+  windowResizeHandler() {
+    run.once(this, this.renderChart);
+  },
 });

ui/app/mixins/window-resizable.js

@@ -0,0 +1,16 @@
+import Ember from 'ember';
+
+const { run, $ } = Ember;
+
+export default Ember.Mixin.create({
+  setupWindowResize: function() {
+    run.scheduleOnce('afterRender', this, () => {
+      this.set('_windowResizeHandler', this.get('windowResizeHandler').bind(this));
+      $(window).on('resize', this.get('_windowResizeHandler'));
+    });
+  }.on('didInsertElement'),
+
+  removeWindowResize: function() {
+    $(window).off('resize', this.get('_windowResizeHandler'));
+  }.on('willDestroyElement'),
+});

ui/app/styles/charts/distribution-bar.scss

@@ -21,12 +21,7 @@
         opacity: 0;
       }
 
-      $color-sequence: $orange,
-        $yellow,
-        $green,
-        $turquoise,
-        $blue,
-        $purple,
+      $color-sequence: $orange, $yellow, $green, $turquoise, $blue, $purple,
         $red;
 
       @for $i from 1 through length($color-sequence) {
@@ -69,7 +64,8 @@
         // Ensure two columns, but don't use the full width
         width: 35%;
 
-        .label, .value {
+        .label,
+        .value {
           display: inline;
           font-weight: $weight-normal;
         }
@@ -89,8 +85,4 @@
       }
     }
   }
-
-  &.is-narrow .bar {
-    transform: translateY(-50%);
-  }
 }

ui/app/styles/core/nav.scss

@@ -35,6 +35,7 @@
           display: block;
           position: absolute;
           left: 0px;
+          top: 1.25em;
         }
       }