Update responsiveness on the analytics strand.

views/dashboardPage/dashboard.css

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

views/dashboardPage/dashboard.ejs

@@ -3,6 +3,7 @@
     <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">
@@ -263,7 +264,7 @@
                     </label>
 
                     <div class="dateRange">
-                        <h3>Date Range:</h3>
+                        <h3 class="mobileHide">Date Range:</h3>
                         <div class="dateRangeInput">
                             <input id="analStartDate" type="date">
                             <p> - </p>
@@ -278,7 +279,7 @@
                     <div id="analIngredientList" class="itemsList"></div>
 
                     <div class="analData">
-                        <div id="itemUseGraph" class="card analCard"></div>
+                        <div id="itemUseGraph" class="card analCard mobileHide"></div>
 
                         <div class="dataRow">
                             <div class="card analCard">
@@ -300,7 +301,7 @@
                             </div>
                         </div>
 
-                        <div class="dataRow">
+                        <div class="mobileHide dataRow">
                             <div class="card analCard">
                                 <p>Sunday Average</p>
 
@@ -346,11 +347,11 @@
                     </div>
                 </div>
 
-                <div id="analRecipeContent">
+                <div id="analRecipeContent" class="analContent">
                     <ul id="analRecipeList" class="itemsList"></ul>
 
                     <div class="analData">
-                        <div id="recipeSalesGraph" class="card analCard"></div>
+                        <div id="recipeSalesGraph" class="card analCard mobileHide"></div>
 
                         <div class="dataRow">
                             <div class="card analCard">

views/shared/shared.css

@@ -377,7 +377,7 @@ Banner
     }
 
     .mobileHide{
-        display: none;
+        display: none !important;
     }
 
     .headerStart{