Remove mobile components from dashboard.css.

Remove dashboard.css.

app.js

@@ -53,7 +53,7 @@ require("./routes")(app);
 console.time("time");
 cssmerger([
     // "./views/shared/shared.css",
-    "./views/dashboardPage/dashboard.css",
+    // "./views/dashboardPage/dashboard.css",
     "./views/dashboardPage/sidebars.css",
 
     "./views/shared/css/general.css",

views/dashboardPage/css/mobile/landscapePhone.css

@@ -0,0 +1,68 @@
+@media screen and (orientation: landscape){
+    @media screen and (min-width: 1000px){
+        .mobileMenuSelector{
+            top: 20px;
+            left: 40px;
+        }
+
+        .strandTitle{
+            margin: 15px;
+        }
+
+        /* HOME */
+        #homeStrand{
+            flex-direction: column;
+            justify-content: flex-end;
+        }
+
+            #graphCard{
+                display: flex;
+            }
+
+            .flexRow{
+                max-height: 40vh;
+            }
+
+            .flexRow:nth-child(2){
+                flex-grow: 2;
+            }
+
+            .flexRow:nth-child(3){
+                flex-grow: 1;
+            }
+
+        /* INGREDIENTS */
+        #categoryList{
+            height: 80%;
+        }
+
+        /* RECIPE BOOK */
+        #recipeList{
+            height: 80%;
+        }
+
+        /* ANALYTICS */
+        #analyticsStrand .strandTitle{
+            margin-top: 8px;
+            margin-left: 30px;
+        }
+
+        .analDateRange{
+            display: block;
+        }
+
+        #analRecipeContent, .analContent{
+            height: 80%;
+        }
+
+        /* ORDERS */
+        #orderList{
+            height: 80%;
+        }
+
+        /* TRANSACTIONS */
+        #transactionsList{
+            height: 80%;
+        }
+    }
+}

views/dashboardPage/css/mobile/landscapeTablet.css

@@ -0,0 +1,199 @@
+@media screen and (orientation: landscape){
+    @media screen and (max-width: 1200px){
+        body{
+            background: rgb(0, 27, 45);
+        }
+
+        .contentBlock{
+            padding: 0;
+        }
+
+        .button{
+            padding: 3px 0;
+        }
+
+        .mobileMenuSelector{
+            display: flex;
+            color: rgb(240, 252, 255);
+            z-index: 10;
+        }
+
+        .strandHead{
+            color: white;
+            position: fixed;
+            top: 5px;
+            left: 25px;
+            right: 0;
+            margin: 0;
+            text-align: center;
+            font-size: 20px;
+        }
+
+            .strandTitle{
+                margin: 0;
+            }
+
+        .choosable{
+            background: rgb(201, 201, 201);
+            color: black;
+        }
+
+        /* HOME */
+        #homeStrand{
+            flex-direction: row;
+            padding: 0;
+            align-items: flex-end;
+        }
+
+            #graphCard{
+                display: none;
+            }
+
+            #inventoryCheckCard{
+                display: none;
+            }
+
+            .flexRow{
+                height: 80%;
+            }
+
+                .flexRow:nth-child(3){
+                    flex-grow: 2;
+                }
+
+                .card{
+                    background: white;
+                }
+
+                #popularIngredientsCard{
+                    max-height: 100%;
+                    padding-bottom: 5px;
+                }
+
+        /* INGREDIENTS */
+        #ingredientsStrand{
+            padding-bottom: 10px;
+            justify-content: flex-end;
+        }
+
+        #categoryList{
+            height: 70%;
+        }
+
+            .categoryDiv{
+                margin: 3px;
+            }
+
+                .categoryDiv > div:first-of-type p{
+                    padding: 5px 10px;
+                }
+
+                .categoryDiv > div:first-of-type button{
+                    padding: 0;
+                    height: initial;
+                    width: initial;
+                    display: flex;
+                    align-items: center;
+                }
+            
+            .ingredientsDiv{
+                width: 90%;
+            }
+
+        /* RECIPE BOOK */
+        #recipeBookStrand{
+            padding-bottom: 10px;
+            justify-content: flex-end;
+        }
+
+            #recipeList{
+                height: 70%;
+            }
+
+        /* ANALYTICS */
+        #analyticsStrand{
+            padding-bottom: 10px;
+            justify-content: space-between;
+        }
+
+            #analyticsStrand .strandHead{
+                position: static;
+                height: unset;
+                flex-wrap: wrap;
+            }
+
+                #analyticsStrand .strandTitle{
+                    width: 100%;
+                    margin-top: -13px;
+                    margin-left: 10px;
+                }
+
+                .switch{
+                    margin-top: -15px;
+                    font-size: 15px;
+                }
+
+                #analyticsStrand .dateRange{
+                    margin-top: -55px;
+                }
+
+                .analDateRange{
+                    display: none;
+                }
+
+            .analContent{
+                padding: 0;
+                height: 70%;
+            }
+
+                .itemsList{
+                    width: 23%;
+                }
+
+                .analData{
+                    width: 73%
+                }
+
+                .dataRow{
+                    display: none;
+                }
+
+                .modebar-container{
+                    display: none;
+                }
+
+            #analRecipeContent{
+                height: 70%;
+            }
+
+            #newOrderBtn{
+                display: none;
+            }
+
+        /* ORDERS */
+        #ordersStrand{
+            justify-content: flex-end;
+        }
+
+            #ordersStrand .buttonBox{
+                margin: 0;
+            }
+
+            #orderList{
+                height: 70%;
+            }
+
+        /* TRANSACTIONS */
+        #transactionsStrand{
+            justify-content: flex-end;
+        }
+
+            #transactionsStrand .buttonBox{
+                margin: 0;
+            }
+
+            #transactionsList{
+                height: 70%;
+            }
+    }
+}

views/dashboardPage/css/mobile/portraitPhone.css

@@ -0,0 +1,32 @@
+@media screen and (orientation: portrait){
+    @media screen and (min-width: 601px){
+        .strandTitle{
+            font-size: 40px;
+        }
+
+        .mobileMenuSelector{
+            left: 40px;
+            top: 20px;
+        }
+
+        /* HOME */
+        #graphCard{
+            display: flex;
+        }
+
+        /* RECIPE BOOK */
+        #recipeList{
+            width: 75%;
+        }
+
+        /* ORDERS */
+        #ordersStrand .strandHead{
+            margin-top: 25px;
+        }
+
+        /* TRANSACTIONS */
+        #transactionsStrand .strandHead{
+            margin-top: 25px;
+        }
+    }
+}

views/dashboardPage/css/mobile/portraitTablet.css

@@ -0,0 +1,152 @@
+@media screen and (orientation: portrait){
+    @media screen and (max-width: 1400px){
+        body{
+            background:rgb(0, 27, 45);
+        }
+
+        .button{
+            padding: 3px 0;
+        }
+
+        .mobileMenuSelector{
+            color:rgb(240, 252, 255);
+            z-index: 10;
+        }
+
+        .strandTitle{
+            color: white;
+            position: fixed;
+            top: 15px;
+            left: 0;
+            right: 0;
+            margin: 0;
+            text-align: center;
+            font-size: 20px;
+        }
+
+        .choosable{
+            background:rgb(201, 201, 201);
+            color: black;
+        }
+
+        /* HOME */
+        #inventoryCheckCard{
+            display: none;
+        }
+
+        #graphCard{
+            display: none;
+        }
+
+        .card{
+            background: white;
+        }
+
+        /* INGREDIENT INVENTORY */
+        #categoryList{
+            width: 95%;
+        }
+
+            .categoryDiv{
+                margin: 5px;
+            }
+
+                .categoryDiv > div:first-of-type p{
+                    padding: 10px;
+                    margin-right: 15px;
+                }
+
+                .categoryDiv > div:first-of-type button{
+                    padding: 10px;
+                    height: initial;
+                    width: initial;
+                    display: flex;
+                }
+
+                .ingredientsDiv{
+                    width: 90%;
+                }
+
+        /* RECIPE BOOK */
+        #recipeList{
+            width: 90%;
+        }
+
+        /* ANALYTICS */
+        #analyticsStrand .strandHead{
+            height: 23vh;
+            flex-direction: column;
+        }
+
+            #analyticsStrand .strandTitle{
+                position: static;
+            }
+
+            .switch{
+                margin-top: 0;
+            }
+
+            .analDateRange{
+                display: none;
+            }
+
+        .analContent{
+            flex-direction: column;
+            justify-content: space-between;
+            padding: 0;
+            height: 70vh;
+        }
+
+            .itemsList{
+                width: 90%;
+                height: 47%;
+                margin-bottom: 10px;
+            }
+
+            .analData{
+                height: 47%;
+            }
+
+                .dataRow{
+                    flex-direction: column;
+                }
+
+            #itemUseGraph{
+                display: none;
+            }
+
+            #analDailyAverages{
+                display: none;
+            }
+
+            #recipeSalesGraph{
+                display: none;
+            }
+
+        /* ORDERS */
+        #ordersStrand .strandHead{
+            justify-content: center;
+        }
+
+        #newOrderBtn{
+            display: none;
+        }
+
+        #orderList{
+            width: 90%;
+        }
+
+        #orderList > div p:nth-child(2){
+            display: none;
+        }
+
+        /* TRANSACTIONS */
+        #transactionsStrand .strandHead{
+            justify-content: center;
+        }
+
+        .transactionsList{
+            width: 90%;
+        }
+    }
+}

views/dashboardPage/dashboard.css

@@ -1,450 +0,0 @@
-@media screen and (orientation: portrait){
-    @media screen and (max-width: 1400px){
-        body{
-            background:rgb(0, 27, 45);
-        }
-
-        .button{
-            padding: 3px 0;
-        }
-
-        .mobileMenuSelector{
-            color:rgb(240, 252, 255);
-            z-index: 10;
-        }
-
-        .strandTitle{
-            color: white;
-            position: fixed;
-            top: 15px;
-            left: 0;
-            right: 0;
-            margin: 0;
-            text-align: center;
-            font-size: 20px;
-        }
-
-        .choosable{
-            background:rgb(201, 201, 201);
-            color: black;
-        }
-
-        /* HOME */
-        #inventoryCheckCard{
-            display: none;
-        }
-
-        #graphCard{
-            display: none;
-        }
-
-        .card{
-            background: white;
-        }
-
-        /* INGREDIENT INVENTORY */
-        #categoryList{
-            width: 95%;
-        }
-
-            .categoryDiv{
-                margin: 5px;
-            }
-
-                .categoryDiv > div:first-of-type p{
-                    padding: 10px;
-                    margin-right: 15px;
-                }
-
-                .categoryDiv > div:first-of-type button{
-                    padding: 10px;
-                    height: initial;
-                    width: initial;
-                    display: flex;
-                }
-
-                .ingredientsDiv{
-                    width: 90%;
-                }
-
-        /* RECIPE BOOK */
-        #recipeList{
-            width: 90%;
-        }
-
-        /* ANALYTICS */
-        #analyticsStrand .strandHead{
-            height: 23vh;
-            flex-direction: column;
-        }
-
-            #analyticsStrand .strandTitle{
-                position: static;
-            }
-
-            .switch{
-                margin-top: 0;
-            }
-
-            .analDateRange{
-                display: none;
-            }
-
-        .analContent{
-            flex-direction: column;
-            justify-content: space-between;
-            padding: 0;
-            height: 70vh;
-        }
-
-            .itemsList{
-                width: 90%;
-                height: 47%;
-                margin-bottom: 10px;
-            }
-
-            .analData{
-                height: 47%;
-            }
-
-                .dataRow{
-                    flex-direction: column;
-                }
-
-            #itemUseGraph{
-                display: none;
-            }
-
-            #analDailyAverages{
-                display: none;
-            }
-
-            #recipeSalesGraph{
-                display: none;
-            }
-
-        /* ORDERS */
-        #ordersStrand .strandHead{
-            justify-content: center;
-        }
-
-        #newOrderBtn{
-            display: none;
-        }
-
-        #orderList{
-            width: 90%;
-        }
-
-        #orderList > div p:nth-child(2){
-            display: none;
-        }
-
-        /* TRANSACTIONS */
-        #transactionsStrand .strandHead{
-            justify-content: center;
-        }
-
-        .transactionsList{
-            width: 90%;
-        }
-
-        @media screen and (min-width: 601px){
-            .strandTitle{
-                font-size: 40px;
-            }
-
-            .mobileMenuSelector{
-                left: 40px;
-                top: 20px;
-            }
-
-            /* HOME */
-            #graphCard{
-                display: flex;
-            }
-
-            /* RECIPE BOOK */
-            #recipeList{
-                width: 75%;
-            }
-
-            /* ORDERS */
-            #ordersStrand .strandHead{
-                margin-top: 25px;
-            }
-
-            /* TRANSACTIONS */
-            #transactionsStrand .strandHead{
-                margin-top: 25px;
-            }
-        }
-    }
-}
-
-@media screen and (orientation: landscape){
-    @media screen and (max-width: 1200px){
-        body{
-            background: rgb(0, 27, 45);
-        }
-
-        .contentBlock{
-            padding: 0;
-        }
-
-        .button{
-            padding: 3px 0;
-        }
-
-        .mobileMenuSelector{
-            display: flex;
-            color: rgb(240, 252, 255);
-            z-index: 10;
-        }
-
-        .strandHead{
-            color: white;
-            position: fixed;
-            top: 5px;
-            left: 25px;
-            right: 0;
-            margin: 0;
-            text-align: center;
-            font-size: 20px;
-        }
-
-            .strandTitle{
-                margin: 0;
-            }
-
-        .choosable{
-            background: rgb(201, 201, 201);
-            color: black;
-        }
-
-        /* HOME */
-        #homeStrand{
-            flex-direction: row;
-            padding: 0;
-            align-items: flex-end;
-        }
-
-            #graphCard{
-                display: none;
-            }
-
-            #inventoryCheckCard{
-                display: none;
-            }
-
-            .flexRow{
-                height: 80%;
-            }
-
-                .flexRow:nth-child(3){
-                    flex-grow: 2;
-                }
-
-                .card{
-                    background: white;
-                }
-
-                #popularIngredientsCard{
-                    max-height: 100%;
-                    padding-bottom: 5px;
-                }
-
-        /* INGREDIENTS */
-        #ingredientsStrand{
-            padding-bottom: 10px;
-            justify-content: flex-end;
-        }
-
-        #categoryList{
-            height: 70%;
-        }
-
-            .categoryDiv{
-                margin: 3px;
-            }
-
-                .categoryDiv > div:first-of-type p{
-                    padding: 5px 10px;
-                }
-
-                .categoryDiv > div:first-of-type button{
-                    padding: 0;
-                    height: initial;
-                    width: initial;
-                    display: flex;
-                    align-items: center;
-                }
-            
-            .ingredientsDiv{
-                width: 90%;
-            }
-
-        /* RECIPE BOOK */
-        #recipeBookStrand{
-            padding-bottom: 10px;
-            justify-content: flex-end;
-        }
-
-            #recipeList{
-                height: 70%;
-            }
-
-        /* ANALYTICS */
-        #analyticsStrand{
-            padding-bottom: 10px;
-            justify-content: space-between;
-        }
-
-            #analyticsStrand .strandHead{
-                position: static;
-                height: unset;
-                flex-wrap: wrap;
-            }
-
-                #analyticsStrand .strandTitle{
-                    width: 100%;
-                    margin-top: -13px;
-                    margin-left: 10px;
-                }
-
-                .switch{
-                    margin-top: -15px;
-                    font-size: 15px;
-                }
-
-                #analyticsStrand .dateRange{
-                    margin-top: -55px;
-                }
-
-                .analDateRange{
-                    display: none;
-                }
-
-            .analContent{
-                padding: 0;
-                height: 70%;
-            }
-
-                .itemsList{
-                    width: 23%;
-                }
-
-                .analData{
-                    width: 73%
-                }
-
-                .dataRow{
-                    display: none;
-                }
-
-                .modebar-container{
-                    display: none;
-                }
-
-            #analRecipeContent{
-                height: 70%;
-            }
-
-            #newOrderBtn{
-                display: none;
-            }
-
-        /* ORDERS */
-        #ordersStrand{
-            justify-content: flex-end;
-        }
-
-            #ordersStrand .buttonBox{
-                margin: 0;
-            }
-
-            #orderList{
-                height: 70%;
-            }
-
-        /* TRANSACTIONS */
-        #transactionsStrand{
-            justify-content: flex-end;
-        }
-
-            #transactionsStrand .buttonBox{
-                margin: 0;
-            }
-
-            #transactionsList{
-                height: 70%;
-            }
-
-        @media screen and (min-width: 1000px){
-            .mobileMenuSelector{
-                top: 20px;
-                left: 40px;
-            }
-
-            .strandTitle{
-                margin: 15px;
-            }
-
-            /* HOME */
-            #homeStrand{
-                flex-direction: column;
-                justify-content: flex-end;
-            }
-
-                #graphCard{
-                    display: flex;
-                }
-
-                .flexRow{
-                    max-height: 40vh;
-                }
-
-                .flexRow:nth-child(2){
-                    flex-grow: 2;
-                }
-
-                .flexRow:nth-child(3){
-                    flex-grow: 1;
-                }
-
-            /* INGREDIENTS */
-            #categoryList{
-                height: 80%;
-            }
-
-            /* RECIPE BOOK */
-            #recipeList{
-                height: 80%;
-            }
-
-            /* ANALYTICS */
-            #analyticsStrand .strandTitle{
-                margin-top: 8px;
-                margin-left: 30px;
-            }
-
-            .analDateRange{
-                display: block;
-            }
-
-            #analRecipeContent, .analContent{
-                height: 80%;
-            }
-
-            /* ORDERS */
-            #orderList{
-                height: 80%;
-            }
-
-            /* TRANSACTIONS */
-            #transactionsList{
-                height: 80%;
-            }
-        }
-    }
-}