Update order filter sidebar responsiveness for landscape mode.

views/dashboardPage/bundle.js

@@ -1397,7 +1397,7 @@ controller = {
                 break;
         }
 
-        if(window.screen.availWidth <= 1000){
+        if(screen.height > screen.width || screen.width < 1200){
             document.querySelector(".contentBlock").style.display = "none";
             document.getElementById("mobileMenuSelector").style.display = "none";
             document.getElementById("sidebarCloser").style.display = "block";
@@ -1433,7 +1433,7 @@ controller = {
         }
         sidebar.classList = "sidebarHide";
 
-        if(window.screen.availWidth <= 1000){
+        if(screen.height > screen.width || screen.width < 1200){
             document.querySelector(".contentBlock").style.display = "flex";
             document.getElementById("mobileMenuSelector").style.display = "block";
             document.getElementById("sidebarCloser").style.display = "none";
@@ -1519,8 +1519,6 @@ controller = {
             container.removeChild(banner);
             clearTimeout(timer);
         });
-
-        
     },
 
     changeMenu: function(){

views/dashboardPage/js/dashboard.js

@@ -150,7 +150,7 @@ controller = {
                 break;
         }
 
-        if(window.screen.availWidth <= 1000){
+        if(screen.height > screen.width || screen.width < 1200){
             document.querySelector(".contentBlock").style.display = "none";
             document.getElementById("mobileMenuSelector").style.display = "none";
             document.getElementById("sidebarCloser").style.display = "block";
@@ -186,7 +186,7 @@ controller = {
         }
         sidebar.classList = "sidebarHide";
 
-        if(window.screen.availWidth <= 1000){
+        if(screen.height > screen.width || screen.width < 1200){
             document.querySelector(".contentBlock").style.display = "flex";
             document.getElementById("mobileMenuSelector").style.display = "block";
             document.getElementById("sidebarCloser").style.display = "none";
@@ -272,8 +272,6 @@ controller = {
             container.removeChild(banner);
             clearTimeout(timer);
         });
-
-        
     },
 
     changeMenu: function(){

views/dashboardPage/sidebars.css

@@ -203,9 +203,6 @@ Ingredient Details
 }
 
     #ingredientDetails label{
-        display: flex;
-        flex-direction: column;
-        align-items: center;
         font-size: 20px;
         text-align: center;
         margin: 0;
@@ -738,6 +735,16 @@ NEW TRANSACTION
 
 @media screen and (orientation: landscape){
     @media screen and (max-width: 1200px){
+        .sidebar{
+            width: 100vw;
+            color: white;
+            padding: 3px 15px;
+        }
+
+        .sidebarIconButtons{
+            display: none;
+        }
+
         /* MENU */
         #menu{
             display: none;
@@ -781,6 +788,41 @@ NEW TRANSACTION
                     box-shadow: 0 0 5px white;
                     height: 10vh;
                 }
+            
+            /* ORDER CALCULATOR */
+            .calculatorItem:nth-child(2n+1){
+                color: black;
+            }
+
+            /* INGREDIENT DETAILS */
+            #ingredientDetails > *{
+                margin: 0;
+            }
+
+            #recipeListLabel, #ingredientRecipeList{
+                display: none;
+            }
+
+            /* FILTER ORDERS */
+            #orderFilter > *{
+                margin: 0;
+            }
+
+            #orderFilter h1{
+                padding: 0;
+            }
+
+            #filterOrderDateRange, #orderFilter .lineBorder{
+                display: none;
+            }
+
+            .dateRange{
+                padding-bottom: 3px;
+            }
+
+            #orderFilterSubmit{
+                margin-top: 3px;
+            }
 
         @media screen and (min-width: 1000px){
             .menuLogo{
@@ -791,6 +833,19 @@ NEW TRANSACTION
             .menuHead a p{
                 font-size: 35px;
             }
+
+            #recipeListLabel, #ingredientRecipeList{
+                display: flex;
+            }
+
+            /* ORDER FILTER */
+            #orderFilterIngredients{
+                max-height: 70%;
+            }
+
+            #orderFilterSubmit{
+                margin-top: 15px;
+            }
         }
     }
 }

views/dashboardPage/sidebars/ingredientDetails.ejs

@@ -40,7 +40,7 @@
 
     <div class="lineBorder"></div>
 
-    <label>RECIPES:</label>
+    <label id="recipeListLabel">RECIPES:</label>
 
     <div id="ingredientRecipeList"></div>
 

views/dashboardPage/sidebars/orderFilter.ejs

@@ -11,7 +11,7 @@
     <h1>FILTER ORDERS</h1>
 
     <div class="dateRange">
-        <h3>Date Range:</h3>
+        <h3 id="filterOrderDateRange">Date Range:</h3>
         <div class="dateRangeInput">
             <input id="orderFilterDateFrom" type="date">
             <p> - </p>