Merge branch 'master' into sidebar-ie

styles/atat.scss

@@ -51,3 +51,10 @@
 @import 'sections/reports';
 @import 'sections/task_order';
 
+//
+// IE likes to display an outline when focusing on an element. This
+// fix removes that unwanted outline on focus.
+//
+*:focus {
+  outline: 0;
+}

styles/components/_portfolio_layout.scss

@@ -65,6 +65,10 @@
 
   margin: 2 * $gap;
 
+  .col--grow {
+    overflow: inherit;
+  }
+
   .portfolio-header__name {
     @include h1;
   }

styles/elements/_tooltip.scss

@@ -8,8 +8,6 @@
     background-color: $color-aqua-lightest;
     padding: $gap * 3;
     border-left: ($gap / 2) solid $color-blue;
-    position: relative;
-    z-index: 2;
   }
 
   .tooltip-arrow {

templates/portfolios/header.html

@@ -1,4 +1,5 @@
 {% from "components/icon.html" import Icon %}
+{% from "components/tooltip.html" import Tooltip %}
 
 {% macro Link(icon, text, url, active=False) %}
   <a class='icon-link {{ "active icon-link--disabled" if active }}' href='{{ url }}'>
@@ -17,9 +18,12 @@
     <div class='portfolio-header__budget row'>
       <div class='column-left'>
         <span>Available budget</span>
-        <button type="button" tabindex="0" class="icon-tooltip" v-tooltip.right="{content: 'The available budget shown includes the available budget of all active task orders', container: false}">
-          {{ Icon('info') }}
-        </button>
+        {{
+          Tooltip(
+            ('portfolios.task_orders.available_budget_help_description' | translate),
+            title=''
+          )
+        }}
       </div>
       <div class='portfolio-header__budget--amount'>
         <span class='portfolio-header__budget--dollars'>

templates/portfolios/reports/index.html

@@ -33,7 +33,7 @@
         <hr></hr>
 
         <div>
-          <meter value='{{ spent }}' min='0' max='{{ budget }}' title='{{ spent | dollars }} Total spend to date'>
+          <meter value='{{ spent }}' min='0' {% if budget %}max='{{ budget }}' {% endif %}title='{{ spent | dollars }} Total spend to date'>
             <div class='meter__fallback' style='width:{{ (spent / budget) * 100 if budget else 0 }}%;'></div>
           </meter>
 

translations.yaml

@@ -510,6 +510,8 @@ task_orders:
     review_title: Task Order Builder
     task_order_information: Task Order Information
 portfolios:
+  task_orders:
+    available_budget_help_description: The available budget shown includes the available budget of all active task orders
   index:
     empty:
       title: You have no apps yet