From be44d5f8db17f06de47c7e47c5ab879059c45acb Mon Sep 17 00:00:00 2001
From: Montana <montana-ctr@friends.dds.mil>
Date: Tue, 12 Feb 2019 09:37:10 -0500
Subject: [PATCH] Styling

---
 styles/components/_portfolio_layout.scss | 10 ++++
 templates/portfolios/header.html         | 59 +++++++++++++-----------
 2 files changed, 43 insertions(+), 26 deletions(-)

diff --git a/styles/components/_portfolio_layout.scss b/styles/components/_portfolio_layout.scss
index 3def404f..434ce066 100644
--- a/styles/components/_portfolio_layout.scss
+++ b/styles/components/_portfolio_layout.scss
@@ -90,9 +90,19 @@
     }
   }
 
+  .column-left {
+    width: 12.5rem;
+    float: left;
+  }
+
+  .column-right {
+    margin-left: -.4rem;
+  }
+
   .cents {
     font-size: 2rem;
     margin-top: .75rem;
+    margin-left: -.7rem;
     font-weight: bold;
   }
 
diff --git a/templates/portfolios/header.html b/templates/portfolios/header.html
index fe8ced23..8b22c289 100644
--- a/templates/portfolios/header.html
+++ b/templates/portfolios/header.html
@@ -15,33 +15,40 @@
       {{ secondary_breadcrumb or portfolio.name }}
     </div>
     <div class='portfolio-header__budget row'>
-      <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>
-      <span class='portfolio-header__budget--dollars'>
-        {{ portfolio.task_orders | selectattr('is_active') | sum(attribute='budget') | justDollars }}
-      </span>
-      <span class='cents'>
-        {{ portfolio.task_orders | selectattr('is_active') | sum(attribute='budget') | justCents }}
-      </span>
+      <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>
+      </div>
+      <div>
+        <span class='portfolio-header__budget--dollars'>
+          {{ portfolio.task_orders | selectattr('is_active') | sum(attribute='budget') | justDollars }}
+        </span>
+        <span class='cents'>
+          {{ portfolio.task_orders | selectattr('is_active') | sum(attribute='budget') | justCents }}
+        </span>
+      </div>
     </div>
-    <div class='portfolio-funding__header--funded-through {{ "funded" if funding_end_date is not none and funded else "unfunded"}}'>
-        {% if funding_end_date and funded %}
-          {{ Icon('ok') }}
-          Funded through
-          <local-datetime
-            timestamp='{{ funding_end_date }}'
-            format="M/D/YYYY">
-          </local-datetime>
-        {% elif funding_end_date and not funded %}
-          {{ Icon('alert') }}
-          Funded period ends
-          <local-datetime
-            timestamp='{{ funding_end_date }}'
-            format="M/D/YYYY">
-          </local-datetime>
-        {% endif %}
+    <div class='row'>
+      <div class='column-left'></div>
+      <div class='column-right portfolio-funding__header--funded-through {{ "funded" if funding_end_date is not none and funded else "unfunded"}}'>
+          {% if funding_end_date and funded %}
+            {{ Icon('ok') }}
+            Funded through
+            <local-datetime
+              timestamp='{{ funding_end_date }}'
+              format="M/D/YYYY">
+            </local-datetime>
+          {% elif funding_end_date and not funded %}
+            {{ Icon('alert') }}
+            Funded period ends
+            <local-datetime
+              timestamp='{{ funding_end_date }}'
+              format="M/D/YYYY">
+            </local-datetime>
+          {% endif %}
+        </div>
       </div>
   </div>
   <div class='row links'>