Update home strand for portrait orientation.

views/dashboardPage/bundle.js

@@ -1338,10 +1338,6 @@ controller = {
 
         activeButton.classList = "menuButton active";
         activeButton.disabled = true;
-
-        if(window.screen.availWidth <= 1000){
-            this.closeMenu();
-        }
     },
 
     /*
@@ -1568,6 +1564,11 @@ controller = {
     }
 }
 
+if(window.screen.availWidth > 1000 && window.screen.availWidth <= 1400){
+    controller.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")};
@@ -3355,7 +3356,7 @@ let home = {
             }
         }
 
-        const layout = {
+        let layout = {
             title: "REVENUE",
             xaxis: {
                 title: "DATE"
@@ -3365,6 +3366,13 @@ let home = {
             }
         }
 
+        if(screen.width < 1400){
+            layout.margin = {
+                l: 35,
+                r: 0
+            }
+        }
+
         Plotly.newPlot("graphCard", [trace], layout);
     },
 
@@ -3467,7 +3475,9 @@ let home = {
             }
 
             let layout = {
-                title: "MOST POPULAR INGREDIENTS",
+                title: {
+                    text: "MOST POPULAR INGREDIENTS"
+                },
                 xaxis: {
                     zeroline: false,
                     title: "QUANTITY"
@@ -3477,14 +3487,15 @@ let home = {
                 }
             }
 
-            if(screen.width < 1000){
+            if(screen.width < 1400){
                 layout.margin = {
                     l: 10,
                     r: 10,
-                    t: 100,
-                    b: 100
+                    t: 80,
+                    b: 40
                 };
             }
+
             
             Plotly.newPlot("popularIngredientsCard", [trace], layout);
         }else{

views/dashboardPage/dashboard.css

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

views/dashboardPage/dashboard.ejs

@@ -150,7 +150,7 @@
                         </div>
                     </div>
 
-                    <div id="graphCard" class="card mobileHide"></div>
+                    <div id="graphCard" class="card"></div>
                 </div>
 
                 <div class="flexRow">

views/dashboardPage/js/dashboard.js

@@ -91,10 +91,6 @@ controller = {
 
         activeButton.classList = "menuButton active";
         activeButton.disabled = true;
-
-        if(window.screen.availWidth <= 1000){
-            this.closeMenu();
-        }
     },
 
     /*
@@ -321,6 +317,11 @@ controller = {
     }
 }
 
+if(window.screen.availWidth > 1000 && window.screen.availWidth <= 1400){
+    controller.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/js/strands/home.js

@@ -68,7 +68,7 @@ let home = {
             }
         }
 
-        const layout = {
+        let layout = {
             title: "REVENUE",
             xaxis: {
                 title: "DATE"
@@ -78,6 +78,13 @@ let home = {
             }
         }
 
+        if(screen.width < 1400){
+            layout.margin = {
+                l: 35,
+                r: 0
+            }
+        }
+
         Plotly.newPlot("graphCard", [trace], layout);
     },
 
@@ -180,7 +187,9 @@ let home = {
             }
 
             let layout = {
-                title: "MOST POPULAR INGREDIENTS",
+                title: {
+                    text: "MOST POPULAR INGREDIENTS"
+                },
                 xaxis: {
                     zeroline: false,
                     title: "QUANTITY"
@@ -190,14 +199,15 @@ let home = {
                 }
             }
 
-            if(screen.width < 1000){
+            if(screen.width < 1400){
                 layout.margin = {
                     l: 10,
                     r: 10,
-                    t: 100,
-                    b: 100
+                    t: 80,
+                    b: 40
                 };
             }
+
             
             Plotly.newPlot("popularIngredientsCard", [trace], layout);
         }else{

views/dashboardPage/sidebars.css

@@ -691,50 +691,68 @@ NEW TRANSACTION
         padding: 5px 0;
     }
 
-@media screen and (max-width: 600px) {
-    .sidebar{
-        width: 100vw;
-    }
-
-    .sidebarIconButtons > .iconButton{
-        display: none;
-    }
+@media screen and (orientation: portrait){
+    @media screen and (max-width: 1400px){
+        body{
+            background:rgb(0, 27, 45);
+        }
 
-    .menu{
-        display: none;
-        width: 100vw;
-        height: 100vh;
-    }
+        .mobileMenuSelector{
+            color:rgb(240, 252, 255);
+        }
 
-        .menuHead{
-            padding: 0;
-            margin-bottom: 15px;
+        .strandTitle{
+            color: white;
+            position: fixed;
+            top: 15px;
+            left: 0;
+            right: 0;
+            margin: 0;
+            text-align: center;
+            font-size: 20px;
         }
 
-            .menuHead a{
-                display: flex;
-                justify-content: right;
-                width: 70%;
+        /* MENU */
+        #menu{
+            display: none;
+            width: 100vw;
+        }
+    
+            .menuShifter{
+                display: none;
             }
+    
+        .mobileMenuSelector{
+            z-index: 10;
+        }
 
-        .menuShifter{
+        /* HOME */
+        #inventoryCheckCard{
             display: none;
         }
 
-    .mobileMenuSelector{
-        display: block;
-        z-index: 20;
-    }
+        #graphCard{
+            display: none;
+        }
 
-    #orderIngredients{
-        width: 100%;
-    }
-    
-        .orderIngredient{
-            color: black;
+        .card{
+            background: white;
         }
 
-    #ingredientRecipeList li{
-        color: black;
+        @media screen and (min-width: 601px){
+            .strandTitle{
+                font-size: 40px;
+            }
+
+            .mobileMenuSelector{
+                left: 40px;
+                top: 20px;
+            }
+
+            /* HOME */
+            #graphCard{
+                display: flex;
+            }
+        }
     }
 }