Update Budget-Pacing CSS to work with new YNAB cell styles. (#2922)

* Update Budget-Pacing CSS to work with new YNAB cell styles. * Remove unused import isCurrentRouteBudgetPage
toolkit-for-ynab · Aug 31, 2022 · 2a819d6 · 2a819d6
1 parent b2ffa43
commit 2a819d6
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 9 deletions.
diff --git a/src/extension/features/budget/pacing/index.css b/src/extension/features/budget/pacing/index.css
@@ -1,8 +1,11 @@
 .tk-budget-table-cell-pacing {
+  display: flex;
   width: 13%;
   justify-content: flex-end !important;
-  padding: 0 0 0 1rem !important;
+  padding: 5px;
   text-align: right !important;
+  border-top: 1px solid var(--divider_standard);
+  height: 1.9375rem;
 }
 
 .tk-budget-table-cell-pacing .deemphasized,
@@ -24,3 +27,18 @@
 .tk-budget-table-cell-pacing .indicator.deemphasized {
   background-color: #cfd5d7 !important;
 }
+
+.budget-table-header .tk-budget-table-cell-pacing {
+  height: 2.5rem;
+  border-top: 0;
+  border-bottom: 1px solid var(--divider_standard);
+  font-size: .6875rem;
+  color: var(--label_secondary);
+  flex-direction: column;
+  justify-content: center !important;
+  font-weight: 700;
+}
+
+.is-master-category .tk-budget-table-cell-pacing {
+  height: 2.5rem;
+}
diff --git a/src/extension/features/budget/pacing/index.js b/src/extension/features/budget/pacing/index.js
@@ -1,5 +1,5 @@
 import { Feature } from 'toolkit/extension/features/feature';
-import { isCurrentRouteBudgetPage, isCurrentMonthSelected } from 'toolkit/extension/utils/ynab';
+import { isCurrentMonthSelected } from 'toolkit/extension/utils/ynab';
 import { getEmberView } from 'toolkit/extension/utils/ember';
 import {
   getDeemphasizedCategories,
@@ -15,7 +15,7 @@ export class Pacing extends Feature {
   }
 
   shouldInvoke() {
-    return isCurrentRouteBudgetPage();
+    return true;
   }
 
   destroy() {
@@ -29,7 +29,7 @@ export class Pacing extends Feature {
   ensureHeader() {
     if (!$('.budget-table-header .tk-budget-table-cell-pacing').length) {
       $('.budget-table-header .budget-table-cell-available').after(
-        `<li class="tk-budget-table-cell-pacing">${l10n('toolkit.pacing', 'PACING')}</li>`
+        `<div class="tk-budget-table-cell-pacing">${l10n('toolkit.pacing', 'PACING')}</div>`
       );
     }
   }
@@ -45,7 +45,7 @@ export class Pacing extends Feature {
     if (element.classList.contains('is-master-category')) {
       if (!element.querySelector('.tk-budget-table-cell-pacing')) {
         $('.budget-table-cell-available', element).after(
-          `<li class="tk-budget-table-cell-pacing"></li>`
+          `<div class="tk-budget-table-cell-pacing"></div>`
         );
       }
 
@@ -55,7 +55,7 @@ export class Pacing extends Feature {
     if (element.classList.contains('is-debt-payment-category')) {
       if (!element.querySelector('.tk-budget-table-cell-pacing')) {
         $('.budget-table-cell-available', element).after(
-          `<li class="tk-budget-table-cell-pacing"></li>`
+          `<div class="tk-budget-table-cell-pacing"></div>`
         );
       }
 
@@ -111,13 +111,13 @@ export class Pacing extends Feature {
     const tooltip = this.generateTooltip(pacingCalculation);
 
     const $display = $(`
-      <li class="tk-budget-table-cell-pacing">
-        <div
+      <div class="tk-budget-table-cell-pacing">
+        <button
           title="${tooltip}"
           data-tk-sub-category-id="${subCategoryId}"
           class="ynab-new-budget-available-number tk-pacing-number currency ${temperatureClass} ${deemphasizedClass} ${indicatorClass}"
         />
-      </li>
+      </div>
     `);
 
     const daysFormat = Math.abs(daysOffTarget) === 1 ? 'day' : 'days';