Update style in the ingredient details sidebar

views/dashboardPage/bundle.js

@@ -2408,19 +2408,23 @@ let ingredientDetails = {
         }
 
         //Show recipes that this ingredient is a part of
-        let ul = document.getElementById("ingredientRecipeList");
+        let recipeList = document.getElementById("ingredientRecipeList");
+        let template = document.getElementById("ingredientRecipe").content.children[0];
         let recipes = merchant.getRecipesForIngredient(ingredient.ingredient);
-        while(ul.children.length > 0){
-            ul.removeChild(ul.firstChild);
+
+        while(recipeList.children.length > 0){
+            recipeList.removeChild(recipeList.firstChild);
         }
+
         for(let i = 0; i < recipes.length; i++){
-            let li = document.createElement("li");
-            li.innerText = recipes[i].name;
-            li.onclick = ()=>{
+            let recipeDiv = template.cloneNode(true);
+            recipeDiv.children[0].innerText = recipes[i].name;
+            recipeDiv.onclick = ()=>{
                 controller.openStrand("recipeBook");
                 controller.openSidebar("recipeDetails", recipes[i]);
             }
-            ul.appendChild(li);
+            recipeDiv.classList.add("choosable");
+            recipeList.appendChild(recipeDiv);
         }
     },
 
@@ -2511,8 +2515,8 @@ let ingredients = {
 
                 ingredientDiv.children[0].innerText = ingredient.ingredient.name;
                 ingredientDiv.onclick = ()=>{
-                    ingredientDiv.classList.add("active");
                     controller.openSidebar("ingredientDetails", ingredient);
+                    ingredientDiv.classList.add("active");
                 };
                 ingredientDiv._name = ingredient.ingredient.name.toLowerCase();
                 ingredientDiv._unit = ingredient.ingredient.unit.toLowerCase();

views/dashboardPage/js/ingredientDetails.js

@@ -33,19 +33,23 @@ let ingredientDetails = {
         }
 
         //Show recipes that this ingredient is a part of
-        let ul = document.getElementById("ingredientRecipeList");
+        let recipeList = document.getElementById("ingredientRecipeList");
+        let template = document.getElementById("ingredientRecipe").content.children[0];
         let recipes = merchant.getRecipesForIngredient(ingredient.ingredient);
-        while(ul.children.length > 0){
-            ul.removeChild(ul.firstChild);
+
+        while(recipeList.children.length > 0){
+            recipeList.removeChild(recipeList.firstChild);
         }
+
         for(let i = 0; i < recipes.length; i++){
-            let li = document.createElement("li");
-            li.innerText = recipes[i].name;
-            li.onclick = ()=>{
+            let recipeDiv = template.cloneNode(true);
+            recipeDiv.children[0].innerText = recipes[i].name;
+            recipeDiv.onclick = ()=>{
                 controller.openStrand("recipeBook");
                 controller.openSidebar("recipeDetails", recipes[i]);
             }
-            ul.appendChild(li);
+            recipeDiv.classList.add("choosable");
+            recipeList.appendChild(recipeDiv);
         }
     },
 

views/dashboardPage/js/ingredients.js

@@ -49,8 +49,8 @@ let ingredients = {
 
                 ingredientDiv.children[0].innerText = ingredient.ingredient.name;
                 ingredientDiv.onclick = ()=>{
-                    ingredientDiv.classList.add("active");
                     controller.openSidebar("ingredientDetails", ingredient);
+                    ingredientDiv.classList.add("active");
                 };
                 ingredientDiv._name = ingredient.ingredient.name.toLowerCase();
                 ingredientDiv._unit = ingredient.ingredient.unit.toLowerCase();

views/dashboardPage/sidebars/ingredientDetails.ejs

@@ -42,5 +42,11 @@
 
     <label>RECIPES:</label>
 
-    <ul id="ingredientRecipeList"></ul>
+    <div id="ingredientRecipeList"></div>
+
+    <template id="ingredientRecipe">
+        <div>
+            <p></p>
+        </div>
+    </template>
 </div>

views/dashboardPage/sidebars/sidebars.css

@@ -270,6 +270,9 @@ Ingredient Details
         }
 
     #ingredientRecipeList{
+        display: flex;
+        flex-direction: column;
+        align-items: center;
         text-align: center;
         list-style: none;
         overflow: auto;
@@ -278,21 +281,8 @@ Ingredient Details
         margin-left: auto;
     }
 
-    #ingredientRecipeList > li{
-        font-size: 15px;
-        padding: 10px;
-        border-radius: 5px;
-        font-weight: bold;
-        width: 75%;
-        background: rgb(240, 252, 255);
-        border: 1px solid black;
-        cursor: pointer;
-        margin: 1px auto;
-    }
-
-        #ingredientRecipeList > li:hover{
-            background: rgb(0, 27, 45);
-            color: white;
+        #ingredientRecipeList > *{
+            width: 75%;
         }
 
 /*