Update home strand to be mobile friendly in any orientation.

views/dashboardPage/dashboard.css

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

views/shared/shared.css

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