Update structure of media queries in css.

Update home strand for portrait mode.

views/dashboardPage/bundle.js

@@ -1568,10 +1568,6 @@ controller = {
     }
 }
 
-if(window.screen.availWidth > 1000 && window.screen.availWidth <= 1400){
-    this.changeMenu();
-    document.getElementById("menuShifter2").style.display = "none";
-}
 //Add click listeners for menu buttons
 document.getElementById("homeBtn").onclick = ()=>{controller.openStrand("home")};
 document.getElementById("ingredientsBtn").onclick = ()=>{controller.openStrand("ingredients")};

views/dashboardPage/dashboard.css

@@ -591,202 +591,189 @@ Modal
                 margin-top: 15px;
             }
 
-@media screen and (max-width: 1200px){
-    body{
-        flex-direction: column;
-        background: rgb(0, 27, 45);
-        color: white;
+@media screen and (orientation: portrait){
+    .mobileMenuSelector{
+        z-index: 10;
     }
-
-        .contentBlock{
-            padding: 0;
+    
+    @media screen and (max-width: 1400px){
+        body{
+            flex-direction: column;
+            background: rgb(0, 27, 45);
+            color: white;
         }
 
-            .banner{
-                display: none;
-            }
-
-            .strandHead{
+            .contentBlock{
                 padding: 0;
             }
 
-                .strandTitle{
-                    margin-top: 35px;
+                .banner{
+                    display: none;
                 }
 
-    .strandHead{
-        /* flex-direction: column; */
-        justify-content: center;
-        align-items: center;
-    }
-
-        .strandTitle{
-            padding: 0;
-            margin: -11px 15px 0 0;
-            font-size: 20px;
-        }
+                .strandHead{
+                    padding: 0;
+                }
 
-    .choosable{
-        background: white;
-        color: rgb(0, 27, 45);
-    }
+                    .strandTitle{
+                        margin-top: 35px;
+                    }
 
-    .buttonBox{
-        margin-top: 0;
-    }
+        .strandHead{
+            justify-content: center;
+            align-items: center;
+        }
 
-    /*
-    Home
-    */
-    .card{
-        margin: 5px 10px;
-        background: white;
-        color: black;
-    }
+            .strandTitle{
+                padding: 0;
+                margin: -11px 15px 0 0;
+                font-size: 20px;
+                
+            }
 
-    #homeStrand .flexRow:nth-child(3){
-        flex-grow: 2;
-    }
+        .choosable{
+            background: white;
+            color: rgb(0, 27, 45);
+        }
 
-    #inventoryCheckCard{
-        display: none;
-    }
+        .buttonBox{
+            margin-top: 0;
+        }
 
-    #popularIngredientsCard{
-        padding-bottom: 10px;
-    }
+        /*
+        Home
+        */
+        .card{
+            margin: 5px 10px;
+            background: white;
+            color: black;
+        }
 
-    .flexRow{
-        flex-direction: column;
-        margin: 0;
-    }
+        #homeStrand .flexRow:nth-child(3){
+            flex-grow: 2;
+        }
 
-    /*
-    Ingredients
-    */
-    #categoryList{
-        width: 95%;
-        color: black;
-    }
+        #inventoryCheckCard{
+            display: none;
+        }
 
-        .categoryDiv > div:first-of-type p{
-            padding: 5px 0 5px 5px;
+        #popularIngredientsCard{
+            padding-bottom: 10px;
         }
 
-        .categoryDiv div:first-of-type button{
-            height: 50px;
-            width: 50px;
+        .flexRow{
+            flex-direction: column;
+            margin: 0;
         }
 
-        .ingredientsDiv{
-            width: 100%;
-            align-items: center;
+        /*
+        Ingredients
+        */
+        #categoryList{
+            width: 95%;
+            color: black;
         }
 
-            .ingredient{
-                width: 90%;
-                margin-top: 5px;
-                margin-bottom: 5px;
+            .categoryDiv > div:first-of-type p{
+                padding: 5px 0 5px 5px;
             }
 
-            .ingredient > *{
-                width: 50%;
+            .categoryDiv div:first-of-type button{
+                height: 50px;
+                width: 50px;
             }
 
-    /*
-    Recipe Book
-    */
-    .searchBar{
-        padding: 0;
-    }
-
-    #recipeSearch{
-        border-radius: 5px;
-        width: 100%;
-    }
+            .ingredientsDiv{
+                width: 100%;
+                align-items: center;
+            }
 
-    #recipeList{
-        width: 95%;
-    }
+                .ingredient{
+                    width: 90%;
+                    margin-top: 5px;
+                    margin-bottom: 5px;
+                }
 
-    /*
-    ANALYTICS
-    */
-    #analyticsStrand .strandHead{
-        flex-direction: column;
-        height: 20%;
-        margin-top: 25px;
-    }
+                .ingredient > *{
+                    width: 50%;
+                }
 
-    .analContent{
-        flex-direction: column;
-        height: 70%;
-    }
+        /*
+        Recipe Book
+        */
+        .searchBar{
+            padding: 0;
+        }
 
-        .itemsList{
+        #recipeSearch{
+            border-radius: 5px;
             width: 100%;
-            max-height: 40%;
-            margin-bottom: 5px;
         }
 
-        .dataRow{
+        #recipeList{
+            width: 95%;
+        }
+
+        /*
+        ANALYTICS
+        */
+        #analyticsStrand .strandHead{
             flex-direction: column;
+            height: 20%;
+            margin-top: 25px;
         }
 
-        .switch{
-            margin: 3px 0;
+        .analContent{
+            flex-direction: column;
+            height: 70%;
         }
 
-    /*
-    Orders
-    */
-    #orderList{
-        width: 95%;
-    }
+            .itemsList{
+                width: 100%;
+                max-height: 40%;
+                margin-bottom: 5px;
+            }
 
-    /*
-    Transactions
-    */
-    .transactionsList{
-        width: 100%;
-        margin-top: 25px;
-    }
+            .dataRow{
+                flex-direction: column;
+            }
 
-    #transactionsStrand .strandHead{
-        justify-content: right;
-        margin-top: 8px;
-    }
+            .switch{
+                margin: 3px 0;
+            }
 
-    #transactionsStrand .strandTitle{
-        margin: 0;
-    }
+        /*
+        Orders
+        */
+        #orderList{
+            width: 95%;
+        }
 
-    #filterTransactionsButton{
-        padding: 5px;
-        min-width: 0;
-        margin-left: 50px;
-    }
+        /*
+        Transactions
+        */
+        .transactionsList{
+            width: 100%;
+            margin-top: 25px;
+        }
 
-    @media all and (orientation: portrait){
+        #transactionsStrand .strandHead{
+            justify-content: right;
+            margin-top: 8px;
+        }
 
-    }
+        #transactionsStrand .strandTitle{
+            margin: 0;
+        }
 
-    @media all and (orientation: landscape){
-        #homeStrand{
-            align-items: flex-end;
-            flex-direction: row;
+        #filterTransactionsButton{
+            padding: 5px;
+            min-width: 0;
+            margin-left: 50px;
         }
 
-            .strandHead{
-                width: initial;
-                position: fixed;
-                top: 10px;
-                left: 0;
-                right: 0;
-            }
+        @media screen and (min-width: 601px){
 
-        .flexRow{
-            height: 80%
         }
     }
 }

views/dashboardPage/dashboard.ejs

@@ -3,7 +3,6 @@
     <head>
         <meta charset="UTF-8">
         <meta content="width=device-width, initial-scale=1" name="viewport"/>
-        <meta http-equiv="ScreenOrientation" content="autoRotate:disabled">
         <title>The Subline</title>
         <link rel="icon" type="img/png" href="/shared/images/logo.png">
         <link rel="stylesheet" href="/shared/shared.css">

views/dashboardPage/js/dashboard.js

@@ -321,10 +321,6 @@ controller = {
     }
 }
 
-if(window.screen.availWidth > 1000 && window.screen.availWidth <= 1400){
-    this.changeMenu();
-    document.getElementById("menuShifter2").style.display = "none";
-}
 //Add click listeners for menu buttons
 document.getElementById("homeBtn").onclick = ()=>{controller.openStrand("home")};
 document.getElementById("ingredientsBtn").onclick = ()=>{controller.openStrand("ingredients")};

views/dashboardPage/sidebars.css

@@ -691,13 +691,7 @@ NEW TRANSACTION
         padding: 5px 0;
     }
 
-@media screen and (max-width: 1400px){
-    .sidebar{
-        width: 30vw;
-    }
-}
-
-@media screen and (max-width: 1000px){
+@media screen and (max-width: 600px) {
     .sidebar{
         width: 100vw;
     }

views/informationPages/information.css

@@ -58,7 +58,7 @@ HELP PAGE
         font-size: 20px;
     }
 
-@media screen and (max-width: 1200px){
+@media screen and (max-width: 1400px){
     @media (orientation: portrait){
         .helpMenu{
             position: static;

views/shared/shared.css

@@ -364,7 +364,7 @@ Banner
         margin: 0 25px;
     }
 
-@media screen and (max-width: 1200px){
+@media screen and (max-width: 1400px){
     .button{
         font-size: 15px;
     }

views/verifyPage/verify.css

@@ -30,7 +30,7 @@ body{
         padding: 5px;
     }
 
-@media all and (max-width: 1200px){
+@media all and (max-width: 1400px){
     .title{
         font-size: 25px;
         padding: 5px;