Mobilized ingredients strand

views/dashboardPage/controller.js

@@ -34,6 +34,14 @@ let closeSidebar = ()=>{
         sidebar.children[i].style.display = "none";
     }
     sidebar.classList = "sidebarHide";
+
+    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";
+    }
+    
 }
 
 /*
@@ -50,6 +58,12 @@ let openSidebar = (sidebar)=>{
     }
 
     sidebar.style.display = "flex";
+
+    if(window.screen.availWidth <= 1000){
+        document.querySelector(".contentBlock").style.display = "none";
+        document.getElementById("mobileMenuSelector").style.display = "none";
+        document.getElementById("sidebarCloser").style.display = "block";
+    }
 }
 
 let changeMenu = ()=>{

views/dashboardPage/dashboard.css

@@ -94,6 +94,7 @@ Multi-strand use classes
 
     .searchAndIcon{
         display: flex;
+        width: 25%;
     }
 
         .searchAndIcon svg{
@@ -101,7 +102,9 @@ Multi-strand use classes
             border-bottom-left-radius: 5px;
             border-top-left-radius: 5px;
             color: gray;
-            padding: 5px;
+            padding: 5px 0 5px 5px;
+            width: 30px;
+            z-index: 10;
         }
 
         .searchAndIcon input{
@@ -112,6 +115,7 @@ Multi-strand use classes
             border-top-right-radius: 5px;
             font-size: 20px;
             padding: 5px 0 5px 10px;
+            max-width: 200px;
         }
 
     .clearButton{
@@ -152,6 +156,17 @@ Multi-strand use classes
         cursor: pointer;
     }
 
+#sidebarCloser{
+    width: 30px;
+    background: rgb(0, 27, 45);
+    color: white;
+    margin-right: auto;
+    border: none;
+    position: fixed;
+    top: 15px;
+    left: 15px;
+}
+
 /* 
 Home Strand 
 */
@@ -442,4 +457,85 @@ Transactions Strand
         width: 50%;
         overflow-y: auto;
         margin-top: 50px;
-    }
+    }
+
+@media screen and (max-width: 1000px){
+    body{
+        flex-direction: column;
+        background: rgb(0, 27, 45);
+        color: white;
+    }
+
+        .banner{
+            display: none;
+        }
+
+        .contentBlock{
+            padding: 0;
+        }
+
+            .strandTitle{
+                margin-top: 35px;
+            }
+
+        .mobileHide{
+            display: none;
+        }
+
+    /*
+    Home
+    */
+    .card{
+        margin: 5px 10px;
+        background: white;
+        color: black;
+    }
+
+    #inventoryCheckCard{
+        display: none;
+    }
+
+    #popularIngredientsCard{
+        padding-bottom: 10px;
+    }
+
+    .flexRow{
+        flex-direction: column;
+        margin: 0;
+    }
+
+    /*
+    Ingredients
+    */
+    #categoryList{
+        width: 95%;
+        color: black;
+    }
+
+        #ingredientSearch{
+            border-radius: 5px;
+        }
+
+        .categoryDiv > div:first-of-type p{
+            padding: 5px 0 5px 5px;
+        }
+
+        .categoryDiv div:first-of-type button{
+            height: 50px;
+            width: 50px;
+        }
+
+        .ingredient{
+            color: white;
+            width: 75%;
+            border: 2px solid rgb(201, 201, 201);
+            padding: 5px;
+            margin-top: 5px;
+            margin-bottom: 5px;
+            box-shadow: 1px 1px gray;
+        }
+
+        .ingredient > *{
+            width: 50%;
+        }
+}

views/dashboardPage/dashboard.ejs

@@ -83,6 +83,12 @@
         </div>
 
         <div id="mobileMenuSelector" class="mobileMenuSelector" onclick="openMenu()">&#8801;</div>
+        <button id="sidebarCloser" style="display: none;" onclick="closeSidebar()">
+            <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <line x1="18" y1="6" x2="6" y2="18"></line>
+                <line x1="6" y1="6" x2="18" y2="18"></line>
+            </svg>
+        </button>
 
         <div class="contentBlock">
             <% include ../shared/banner %>
@@ -143,12 +149,12 @@
                 <div class="strandHead">
                     <h1 class="strandTitle">INGREDIENT INVENTORY</h1>
 
-                    <button class="button" onclick="addIngredientsComp.display()">NEW</button>
+                    <button class="button mobileHide" onclick="addIngredientsComp.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>
@@ -163,7 +169,7 @@
                         </svg>
                     </button>
 
-                    <select id="ingredientSelect" onchange="ingredientsStrandObj.sort(this.value)">Sort Bys:
+                    <select id="ingredientSelect" class="mobileHide" onchange="ingredientsStrandObj.sort(this.value)">Sort Bys:
                         <option value="" selected disabled>Sort By:</option>
                         <option value="_name">Ingredient</option>
                         <option value="category">Category</option>
@@ -193,7 +199,7 @@
                     <div class="ingredient">
                         <p></p>
 
-                        <hr class="ingredientSpacer">
+                        <hr class="ingredientSpacer mobileHide">
 
                         <p></p>
                     </div>

views/dashboardPage/sidebars/ingredientDetails.ejs

@@ -1,5 +1,5 @@
 <div id="ingredientDetails">
-    <div class="sidebarIconButtons">
+    <div class="sidebarIconButtons mobileHide">
         <button class="iconButton" onclick="closeSidebar()">
             <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                 <line x1="5" y1="12" x2="19" y2="12"></line>

views/dashboardPage/sidebars/sidebars.css

@@ -627,69 +627,37 @@ New Transaction
         overflow-y: auto;
     }
 
-@media (max-width: 1000px){
-    body{
-        flex-direction: column;
-        background: rgb(0, 27, 45);
-        color: white;
+@media screen and (max-width: 1000px){
+    .sidebar{
+        width: 100vw;
     }
 
-        .contentBlock{
-            padding: 0;
-        }
-
-            .menu{
-                display: none;
-                width: 100vw;
-                height: 100vh;
-            }
-
-                .menuHead{
-                    padding: 0;
-                    margin-bottom: 15px;
-                }
-
-                    .menuHead a{
-                        display: flex;
-                        justify-content: right;
-                        width: 70%;
-                    }
-
-                .menuShifter{
-                    display: none;
-                }
-
-            .mobileMenuSelector{
-                display: block;
-            }
-
-            .strandTitle{
-                margin-top: 35px;
-            }
-
-            .sidebar{
-                width: 100vw;
-            }
-
-    /*
-    Home
-    */
-    .card{
-        margin: 5px 10px;
-        background: white;
-        color: black;
+    .sidebarIconButtons > .iconButton{
+        display: none;
     }
 
-    #inventoryCheckCard{
+    .menu{
         display: none;
+        width: 100vw;
+        height: 100vh;
     }
 
-    #popularIngredientsCard{
-        padding-bottom: 10px;
-    }
+        .menuHead{
+            padding: 0;
+            margin-bottom: 15px;
+        }
 
-    .flexRow{
-        flex-direction: column;
-        margin: 0;
-    }
+            .menuHead a{
+                display: flex;
+                justify-content: right;
+                width: 70%;
+            }
+
+        .menuShifter{
+            display: none;
+        }
+
+    .mobileMenuSelector{
+        display: block;
+    }        
 }