Update the transactions strand with new standardized style.

views/dashboardPage/bundle.js

@@ -1729,14 +1729,25 @@ controller = {
     closeSidebar: function(){
         let sidebar = document.getElementById("sidebarDiv");
         for(let i = 0; i < sidebar.children.length; i++){
-            if(sidebar.children[i].id === "ingredientDetails" && sidebar.children[i].style.display !== "none"){
-                let ingredients = document.querySelectorAll(".ingredient");
-                for(let i = 0; i < ingredients.length; i++){
-                    ingredients[i].classList.remove("active");
+            if(sidebar.children[i].style.display !== "none"){
+                sidebar.children[i].style.display = "none";
+                let choosables = [];
+
+                switch(sidebar.children[i].id){
+                    case "ingredientDetails": 
+                        choosables = document.querySelectorAll(".ingredient");
+                        break;
+                    case "transactionDetails":
+                        choosables = document.getElementById("transactionsList").children;
+                        break;
+                }
+
+                for(let i = 0; i < choosables.length; i++){
+                    choosables[i].classList.remove("active");
                 }
             }
 
-            sidebar.children[i].style.display = "none";
+            
         }
         sidebar.classList = "sidebarHide";
 
@@ -3720,7 +3731,10 @@ let transactions = {
                 let transactionDiv = template.cloneNode(true);
                 let transaction = transactions[i];
 
-                transactionDiv.onclick = ()=>{controller.openSidebar("transactionDetails", transaction)};
+                transactionDiv.onclick = ()=>{
+                    controller.openSidebar("transactionDetails", transaction);
+                    transactionDiv.classList.add("active");
+                }
                 transactionsList.appendChild(transactionDiv);
 
                 let totalRecipes = 0;

views/dashboardPage/dashboard.css

@@ -193,7 +193,7 @@ Multi-strand use classes
     padding: 5px;
     text-align: center;
     cursor: pointer;
-    width: 100%;
+    width: 99%;
     box-sizing: border-box;
 }
 

views/dashboardPage/dashboard.ejs

@@ -440,7 +440,7 @@
                 <div id="transactionsList" class="transactionsList"></div>
 
                 <template id="transaction">
-                    <div class="itemDisplay">
+                    <div class="choosable tall">
                         <p></p>
                         <p></p>
                         <p></p>

views/dashboardPage/js/dashboard.js

@@ -149,14 +149,25 @@ controller = {
     closeSidebar: function(){
         let sidebar = document.getElementById("sidebarDiv");
         for(let i = 0; i < sidebar.children.length; i++){
-            if(sidebar.children[i].id === "ingredientDetails" && sidebar.children[i].style.display !== "none"){
-                let ingredients = document.querySelectorAll(".ingredient");
-                for(let i = 0; i < ingredients.length; i++){
-                    ingredients[i].classList.remove("active");
+            if(sidebar.children[i].style.display !== "none"){
+                sidebar.children[i].style.display = "none";
+                let choosables = [];
+
+                switch(sidebar.children[i].id){
+                    case "ingredientDetails": 
+                        choosables = document.querySelectorAll(".ingredient");
+                        break;
+                    case "transactionDetails":
+                        choosables = document.getElementById("transactionsList").children;
+                        break;
+                }
+
+                for(let i = 0; i < choosables.length; i++){
+                    choosables[i].classList.remove("active");
                 }
             }
 
-            sidebar.children[i].style.display = "none";
+            
         }
         sidebar.classList = "sidebarHide";
 

views/dashboardPage/js/transactions.js

@@ -48,7 +48,10 @@ let transactions = {
                 let transactionDiv = template.cloneNode(true);
                 let transaction = transactions[i];
 
-                transactionDiv.onclick = ()=>{controller.openSidebar("transactionDetails", transaction)};
+                transactionDiv.onclick = ()=>{
+                    controller.openSidebar("transactionDetails", transaction);
+                    transactionDiv.classList.add("active");
+                }
                 transactionsList.appendChild(transactionDiv);
 
                 let totalRecipes = 0;