Mobilize recipe book page

views/dashboardPage/controller.js

@@ -38,7 +38,6 @@ let closeSidebar = ()=>{
     if(window.screen.availWidth <= 1000){
         document.querySelector(".contentBlock").style.display = "flex";
         document.getElementById("mobileMenuSelector").style.display = "block";
-        console.log("doing shit and stuff");
         document.getElementById("sidebarCloser").style.display = "none";
     }
     

views/dashboardPage/dashboard.css

@@ -482,6 +482,18 @@ Transactions Strand
             display: none;
         }
 
+        .itemDisplay{
+            color: black;
+            padding: 5px;
+            margin-top: 2px;
+            margin-bottom: 2px;
+        }
+
+            .itemDisplay:hover{
+                background: rgb(240, 252, 255);
+                color: black;
+            }
+
     /*
     Home
     */
@@ -538,4 +550,24 @@ Transactions Strand
         .ingredient > *{
             width: 50%;
         }
+
+    /*
+    Recipe Book
+    */
+    .searchBar{
+        padding: 0;
+    }
+
+    .searchAndIcon{
+        width: 100%;
+    }
+
+    #recipeSearch{
+        border-radius: 5px;
+        width: 100%;
+    }
+
+    #recipeList{
+        width: 95%;
+    }
 }

views/dashboardPage/dashboard.ejs

@@ -211,13 +211,13 @@
                     <h1 class="strandTitle">RECIPE BOOK</h1>
 
                     <% if(merchant.pos === "none"){ %>
-                        <button class="button" onclick="newRecipeComp.display()">NEW</button>
+                        <button class="button mobileHide" onclick="newRecipeComp.display()">NEW</button>
                     <% } %>
                 </div>
 
                 <div class="searchBar">
                     <div class="searchAndIcon">
-                        <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <svg class="mobileHide" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                             <circle cx="11" cy="11" r="8"></circle>
                             <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
                         </svg>

views/dashboardPage/sidebars/sidebars.js

@@ -953,7 +953,6 @@ let newTransactionComp = {
     submit: function(){
         let recipeDivs = document.getElementById("newTransactionRecipes");
         let date = document.getElementById("newTransactionDate").valueAsDate;
-        console.log(recipeDivs);
         
         if(date > new Date()){
             banner.createError("CANNOT HAVE A DATE IN THE FUTURE");
@@ -1005,7 +1004,6 @@ let newTransactionComp = {
                     }
                 })
                 .catch((err)=>{
-                    console.log(err);
                     banner.createError("SOMETHING WENT WRONG. PLEASE REFRESH THE PAGE");
                 })
                 .finally(()=>{