Add "progress bar" to budgets.

Also move some other styles from CSS to SCSS
BrunoBernardino · Mar 15, 2023 · 185c160 · 185c160
1 parent 4e5a8f6
commit 185c160
Show file tree

Hide file tree

Showing 4 changed files with 108 additions and 78 deletions.
diff --git a/pages/index.ts b/pages/index.ts
@@ -164,6 +164,7 @@ export function pageContent() {
       <section class="budget-item" data-name="{budget.name}">
         <article>
           <span class="cost">{budget.expensesCost} of {budget.value}</span>
+          <span class="missing-bar"><span></span></span>
           <span class="name">{budget.name}</span>
         </article>
         <span class="missing">{budget.missing}</span>

diff --git a/public/css/style.css b/public/css/style.css
@@ -508,84 +508,6 @@ a.button.secondary:focus {
   margin: 0 1.5rem;
 }
 
-.expense-item,
-.budget-item {
-  display: flex;
-  flex: 1;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: flex-start;
-  padding: 1rem 1.5rem;
-  border-radius: 3px;
-  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
-  background-color: #f0f0f0;
-  margin: 0.5rem;
-  cursor: pointer;
-  min-width: 200px;
-}
-
-.expense-item:hover,
-.budget-item:hover {
-  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.3);
-}
-
-.expense-item article,
-.budget-item article {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  text-align: left;
-}
-
-.budget-item article {
-  flex-grow: 2;
-}
-
-.expense-item article span,
-.budget-item article span {
-  color: #333;
-  font-size: 0.9rem;
-  font-weight: normal;
-  text-align: left;
-  margin-top: 5px;
-}
-
-.expense-item span.description {
-  color: #333;
-  font-size: 1rem;
-  font-weight: normal;
-  text-align: left;
-  flex: 1;
-  flex-grow: 2;
-}
-
-.expense-item article span.cost,
-.budget-item article span.cost {
-  font-size: 1rem;
-  font-weight: bold;
-  margin-top: 0;
-}
-
-.budget-item.total {
-  background-color: #fff;
-  cursor: inherit;
-}
-
-.budget-item span.missing {
-  color: #666;
-  text-align: right;
-  flex: 1;
-  font-size: 1rem;
-}
-
-.expense-item time {
-  color: #666;
-  font-size: 0.9rem;
-  font-weight: normal;
-  text-align: right;
-  text-transform: uppercase;
-}
-
 .panels {
   display: flex;
   flex: 1;

diff --git a/public/scss/style.scss b/public/scss/style.scss
@@ -42,3 +42,101 @@
     }
   }
 }
+
+// Index
+
+.expense-item,
+.budget-item {
+  display: flex;
+  flex: 1;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding: 1rem 1.5rem;
+  border-radius: 3px;
+  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
+  background-color: #f0f0f0;
+  margin: 0.5rem;
+  cursor: pointer;
+  min-width: 200px;
+
+  &:hover {
+    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.3);
+  }
+
+  article {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    text-align: left;
+
+    span {
+      color: #333;
+      font-size: 0.9rem;
+      font-weight: normal;
+      text-align: left;
+      margin-top: 5px;
+
+      &.cost {
+        font-size: 1rem;
+        font-weight: bold;
+        margin-top: 0;
+      }
+    }
+  }
+}
+
+.budget-item article {
+  flex-grow: 2;
+}
+
+.expense-item span.description {
+  color: #333;
+  font-size: 1rem;
+  font-weight: normal;
+  text-align: left;
+  flex: 1;
+  flex-grow: 2;
+}
+
+.budget-item.total {
+  background-color: #fff;
+  cursor: inherit;
+}
+
+.budget-item span.missing {
+  color: #666;
+  text-align: right;
+  flex: 1;
+  font-size: 1rem;
+}
+
+.budget-item span.missing-bar {
+  background-color: #ccc;
+  width: 100%;
+  content: '';
+  display: block;
+  height: 0.5rem;
+  border-radius: 0.5rem;
+  padding: 0;
+  margin: 0.5rem 0;
+
+  span {
+    width: 0%;
+    content: '';
+    display: block;
+    background-color: #80A881;
+    height: 0.5rem;
+    border-radius: 0.5rem;
+    padding: 0;
+    margin: 0;
+  }
+}
+
+.expense-item time {
+  color: #666;
+  font-size: 0.9rem;
+  font-weight: normal;
+  text-align: right;
+  text-transform: uppercase;
+}
diff --git a/public/ts/index.ts b/public/ts/index.ts
@@ -130,6 +130,15 @@ document.addEventListener('app-loaded', async () => {
       formatNumber(currency, Number(budget.value))
     }`;
 
+    const missingBarWrapperElement = clonedElement.querySelector('span.missing-bar') as HTMLSpanElement;
+    const missingBarElement = missingBarWrapperElement.querySelector('span') as HTMLSpanElement;
+    let missingBarPercent = Math.floor(100 * budget.expensesCost / Number(budget.value));
+    if (missingBarPercent >= 100) {
+      missingBarPercent = 100;
+      missingBarElement.style.backgroundColor = '#611928';
+    }
+    missingBarElement.style.width = `${missingBarPercent}%`;
+
     const nameElement = clonedElement.querySelector('article span.name') as HTMLSpanElement;
     nameElement.textContent = budget.name;