Merge pull request #355 from dod-ccpo/ui/ie-fixes

IE fixes

js/components/charts/budget_chart.js

@@ -34,6 +34,7 @@ export default {
   mounted: function () {
     this._setDisplayedMonths()
     this._setMetrics()
+    addEventListener('load', this._setMetrics)
     addEventListener('resize', this._setMetrics)
   },
 

styles/components/_empty_state.scss

@@ -4,6 +4,7 @@
   display: flex;
   flex-direction: column;
   align-items: center;
+  max-width: 100%;
 
   @include media($medium-screen) {
     padding: 8rem ($gap * 4) 0;
@@ -28,6 +29,7 @@
   .empty-state__sub-message {
     @include h4;
     color: $color-gray;
+    max-width: 100%;
 
     @include media($large-screen) {
       @include h3;

styles/components/_global_layout.scss

@@ -24,25 +24,10 @@
     max-width: $site-max-width;
     overflow-x: hidden;
     flex-grow: 1;
-
+    -ms-flex-negative: 1;
-    @include ie-only {
-      max-width: 85%;
-    }
 
     @include media($medium-screen) {
       margin: $gap * 2;
     }
-
-    @include media($large-screen) {
-      @include ie-only {
-        max-width: 80%;
-      }
-    }
-
-    @include media($xlarge-screen) {
-      @include ie-only {
-        max-width: $site-max-width;
-      }
-    }
   }
 }

styles/components/_topbar.scss

@@ -58,7 +58,6 @@
       flex-direction: row;
       align-items: stretch;
       justify-content: flex-end;
-      -ms-flex-pack: start;
 
       .topbar__link--workspace {
         &:first-child {
@@ -68,6 +67,7 @@
 
       &.topbar__context--workspace {
         background-color: $color-primary;
+        -ms-flex-pack: start;
 
         .topbar__link {
           color: $color-white;

styles/sections/_reports.scss

@@ -14,6 +14,10 @@
       flex-direction: row;
       flex-basis: 50%;
 
+      @include ie-only {
+        max-width: 50%;
+      }
+
       &:first-child {
         padding-left: 0;
       }
@@ -26,7 +30,11 @@
 
     .panel {
       padding: $gap * 2;
-      flex-grow: 1;
+      width: 100%;
+
+      @include ie-only {
+        max-width: 100%;
+      }
 
 
       // Spending Summary
@@ -38,20 +46,34 @@
 
         .row {
           justify-content: space-between;
+
+          @include ie-only {
+            max-width: 100%;
+            flex-wrap: wrap;
+          }
         }
 
         .spend-summary__heading {
           @include h3;
           margin: 0 $gap 0 0;
+          -ms-flex-negative: 1;
         }
 
         .spend-summary__budget {
           margin: 0 0 0 $gap;
 
+          @include ie-only {
+            margin: $gap 0 0 0;
+          }
+
           > div {
             text-align: right;
             margin: 0 0 ($gap / 2) 0;
 
+            @include ie-only {
+              text-align: left;
+            }
+
             dd, dt {
               display: inline;
             }

templates/workspaces/reports/index.html

@@ -365,7 +365,9 @@
               <td class='table-cell--align-right previous-month'>{{ workspace_totals.get(prev_month_index, 0) | dollars }}</td>
               <td class='table-cell--align-right current-month'>{{ workspace_totals.get(current_month_index, 0) | dollars }}</td>
               <td class='table-cell--expand current-month meter-cell'>
-                <meter value='{{ workspace_totals.get(current_month_index, 0) }}' min='0' max='{{ workspace_totals.get(current_month_index, 0) }}'></meter>
+                <meter value='{{ workspace_totals.get(current_month_index, 0) }}' min='0' max='{{ workspace_totals.get(current_month_index, 0) }}'>
+                  <div class='meter__fallback' style='width: 100%'></div>
+                </meter>
               </td>
             </tr>
           </tbody>