Update cssmerger version.

Dismantle most of the shared css.
Dismantle part of the sidebars css.

app.js

@@ -50,11 +50,17 @@ app.use(express.json());
 app.use(session(sessionOptions));
 require("./routes")(app);
 
+console.time("time");
 cssmerger([
     "./views/shared/shared.css",
     "./views/dashboardPage/dashboard.css",
-    "./views/dashboardPage/sidebars.css"
+    "./views/dashboardPage/sidebars.css",
+
+    "./views/shared/css/header.css",
+    "./views/shared/css/loader.css",
+    "./views/dashboardPage/css"
 ], "./views/dashboardPage/bundle.css");
+console.timeEnd("time");
 
 if(process.env.NODE_ENV === "production"){
     httpsServer.listen(process.env.HTTPS_PORT, ()=>{});

controllers/otherData.js

@@ -67,7 +67,6 @@ module.exports = {
                 }
             })
             .catch((err)=>{
-                console.log(err);
                 req.session.error = "ERROR: UNABLE TO RETRIEVE DATA";
 
                 return res.redirect("/");

package-lock.json

@@ -13,7 +13,7 @@
         "bcryptjs": "^2.4.3",
         "compression": "^1.7.4",
         "cookie-session": "^1.4.0",
-        "cssmerger": "^1.0.1",
+        "cssmerger": "^1.0.2",
         "ejs": "^2.7.4",
         "express": "^4.17.1",
         "mailgun-js": "^0.6.7",
@@ -1349,9 +1349,9 @@
       }
     },
     "node_modules/cssmerger": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/cssmerger/-/cssmerger-1.0.1.tgz",
-      "integrity": "sha512-1NqROC7cK0zPe2C+eNfL9CGOpx5ldoGBas3klwX91rzTFAYfxz2HXMHYKdEaXDviJr18Cuj1lvL4WV6ohtSeRw=="
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/cssmerger/-/cssmerger-1.0.2.tgz",
+      "integrity": "sha512-zTlZIw+PdzrEiF46ydZvzUsBpEtTRmc3nT+bLnPZBnrAJORhmFKY9SulxTq/XKJ3eHYrBX/v8uArrhQGTb1HnA=="
     },
     "node_modules/d": {
       "version": "1.0.1",
@@ -6569,9 +6569,9 @@
       }
     },
     "cssmerger": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/cssmerger/-/cssmerger-1.0.1.tgz",
-      "integrity": "sha512-1NqROC7cK0zPe2C+eNfL9CGOpx5ldoGBas3klwX91rzTFAYfxz2HXMHYKdEaXDviJr18Cuj1lvL4WV6ohtSeRw=="
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/cssmerger/-/cssmerger-1.0.2.tgz",
+      "integrity": "sha512-zTlZIw+PdzrEiF46ydZvzUsBpEtTRmc3nT+bLnPZBnrAJORhmFKY9SulxTq/XKJ3eHYrBX/v8uArrhQGTb1HnA=="
     },
     "d": {
       "version": "1.0.1",

package.json

@@ -25,7 +25,7 @@
     "bcryptjs": "^2.4.3",
     "compression": "^1.7.4",
     "cookie-session": "^1.4.0",
-    "cssmerger": "^1.0.1",
+    "cssmerger": "^1.0.2",
     "ejs": "^2.7.4",
     "express": "^4.17.1",
     "mailgun-js": "^0.6.7",

views/dashboardPage/css/menu.css

@@ -0,0 +1,144 @@
+.menu{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    background: rgb(0, 27, 45);
+    width: 18vw;
+    height: 100vh;
+    transition: width 0.3s;
+    flex-grow: 0;
+    flex-shrink: 0;
+    padding-bottom: 25px;
+    box-sizing: border-box;
+}
+
+    .menuHead{
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+        padding: 0 20px;
+        margin-top: 10px;
+        font-size: 22px;
+        font-weight: bold;
+        text-decoration: none;
+    }
+
+    .menuLogo{
+        width: 25%;
+        height: 25%;
+    }
+
+    .menuHead a{
+        display: flex;
+        align-items: center;
+        color: rgb(255, 99, 107);
+        text-decoration: none;
+        width: 80%;
+    }
+
+    .menuHead p{
+        margin-left: 25px;
+    }
+
+    .menuHead button{
+        background: none;
+        border-style: none;
+        color: rgb(255, 99, 107);
+        font-size: 35px;
+        cursor: pointer;
+        outline: none;
+    }
+
+    .menuHead button:hover{
+        color: rgb(201, 201, 201);
+    }
+
+    .menuHead > button::-moz-focus-inner{
+        border: 0;
+    }
+
+    #menuLocationName{
+        color: white;
+        font-size: 22px;
+        font-weight: bold;
+    }
+
+    .menuButton{
+        display: flex;
+        align-items: center;
+        background: none;
+        border-style: none;
+        color: rgb(255, 99, 107);
+        font-size: 18px;
+        margin: 15px 0;
+        padding-left: 15px;
+        width: 100%;
+        height: 75px;
+        cursor: pointer;
+        text-align: left;
+        border: 0;
+        outline: 0;
+        box-sizing: border-box;
+        text-decoration: none;
+    }
+
+        .menuButton svg{
+            margin-right: 25px;
+        }
+
+        .menuButton::-moz-focus-inner{
+            border: 0;
+        }  
+
+        .menuButton:hover{
+            background: rgb(179, 191, 209);
+        }
+
+    .menu > .active{
+        background: rgb(240, 252, 255);
+        cursor: default;
+    }
+
+    .menu > .active:hover{
+        background: rgb(240, 252, 255);
+    }
+
+    .menuLinks{
+        display: flex;
+        justify-content: space-between;
+        width: 75%;
+    }
+    
+        .menuLinks > *{
+            background: none;
+            border: none;
+            color: white;
+            text-decoration: underline;
+            font-size: 16px;
+            cursor: pointer;
+        }
+
+/* Minimized menu */
+.menuMinimized{
+    width: 5vw;
+}
+
+.menuLogoMin{
+    width: 4vw;
+}
+
+.menuHeadMin{
+    display: none;
+    flex-direction: column;
+}
+
+.menuMinimized .menuButton{
+    justify-content: center;
+    padding: 0;
+}
+
+.menuMinimized .menuButton svg{
+    margin: 0;
+}

views/dashboardPage/css/sidebars/ingredientDetails.css

@@ -0,0 +1,28 @@
+#ingredientDetails{
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+}
+
+    #ingredientDetails label{
+        font-size: 20px;
+        text-align: center;
+        margin: 0;
+    }
+
+    #ingredientDetails label p{
+        font-size: 30px;
+        font-weight: bold;
+        padding: 10px;
+    }
+
+    #subIngredientList{
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        text-align: center;
+        list-style: none;
+        overflow: auto;
+        max-height: 150px;
+        width: 75%;
+    }

views/dashboardPage/sidebars.css

@@ -1,134 +1,3 @@
-/* Menu */
-.menu{
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: space-between;
-    background: rgb(0, 27, 45);
-    width: 18vw;
-    height: 100vh;
-    transition: width 0.3s;
-    flex-grow: 0;
-    flex-shrink: 0;
-    padding-bottom: 25px;
-    box-sizing: border-box;
-}
-
-    .menuHead{
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        width: 100%;
-        padding: 0 20px;
-        margin-top: 10px;
-        font-size: 22px;
-        font-weight: bold;
-        text-decoration: none;
-    }
-
-    .menuLogo{
-        width: 25%;
-        height: 25%;
-    }
-
-    .menuHead a{
-        display: flex;
-        align-items: center;
-        color: rgb(255, 99, 107);
-        text-decoration: none;
-        width: 80%;
-    }
-
-    .menuHead p{
-        margin-left: 25px;
-    }
-
-    .menuHead button{
-        background: none;
-        border-style: none;
-        color: rgb(255, 99, 107);
-        font-size: 35px;
-        cursor: pointer;
-        outline: none;
-    }
-
-    .menuHead button:hover{
-        color: rgb(201, 201, 201);
-    }
-
-    .menuHead > button::-moz-focus-inner{
-        border: 0;
-    }
-
-    #menuLocationName{
-        color: white;
-        font-size: 22px;
-        font-weight: bold;
-    }
-
-    .menuButton{
-        display: flex;
-        align-items: center;
-        background: none;
-        border-style: none;
-        color: rgb(255, 99, 107);
-        font-size: 18px;
-        margin: 15px 0;
-        padding-left: 15px;
-        width: 100%;
-        height: 75px;
-        cursor: pointer;
-        text-align: left;
-        border: 0;
-        outline: 0;
-        box-sizing: border-box;
-        text-decoration: none;
-    }
-
-        .menuButton svg{
-            margin-right: 25px;
-        }
-
-        .menuButton::-moz-focus-inner{
-            border: 0;
-        }  
-
-        .menuButton:hover{
-            background: rgb(179, 191, 209);
-        }
-
-    .menu > .active{
-        background: rgb(240, 252, 255);
-        cursor: default;
-    }
-
-    .menu > .active:hover{
-        background: rgb(240, 252, 255);
-    }
-
-/* Minimized menu */
-.menuMinimized{
-    width: 5vw;
-}
-
-.menuLogoMin{
-    width: 4vw;
-}
-
-.menuHeadMin{
-    display: none;
-    flex-direction: column;
-}
-
-.menuMinimized .menuButton{
-    justify-content: center;
-    padding: 0;
-}
-
-.menuMinimized .menuButton svg{
-    margin: 0;
-}
-
 .sidebarButton{
     display: initial;
     background: rgb(179, 191, 209);
@@ -211,58 +80,6 @@
     margin: 25px;
 }
 
-.menuLinks{
-    display: flex;
-    justify-content: space-between;
-    width: 75%;
-}
-
-    .menuLinks > *{
-        background: none;
-        border: none;
-        color: white;
-        text-decoration: underline;
-        font-size: 16px;
-        cursor: pointer;
-    }
-
-.verticalBorder{
-    border-left: 2px solid black;
-    height: 100%;
-}
-
-/* 
-Ingredient Details 
-*/
-#ingredientDetails{
-    flex-direction: column;
-    align-items: center;
-    width: 100%;
-}
-
-    #ingredientDetails label{
-        font-size: 20px;
-        text-align: center;
-        margin: 0;
-    }
-
-    #ingredientDetails label p{
-        font-size: 30px;
-        font-weight: bold;
-        padding: 10px;
-    }
-
-    #subIngredientList{
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        text-align: center;
-        list-style: none;
-        overflow: auto;
-        max-height: 150px;
-        width: 75%;
-    }
-
 /*
 EDIT INGREDIENT
 */

views/shared/css/banner.css

@@ -0,0 +1,49 @@
+#bannerContainer{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+    position: absolute;
+    margin-top: 15px;
+    pointer-events: none;
+    z-index: 100;
+}
+
+    .banner{
+        display: flex;
+        width: 75%;
+        height: 65px;
+        margin: 10px auto;
+        box-shadow: 0 0 10px black;
+        border: 2px solid black;
+        background: white;
+    }
+
+        .banner > div{
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 25%;
+            color: white;
+        }
+
+        .banner > p{
+            display: flex;
+            align-items: center;
+            font-size: 20px;
+            font-weight: bold;
+            width: 75%;
+            padding-left: 10px;
+        }
+
+        .banner > button{
+            background: none;
+            border: none;
+            height: 20px;
+            position: relative;
+            top: -10px;
+            right: -10px;
+            cursor: pointer;
+            color: white;
+            pointer-events: all;
+        }

views/shared/css/header.css

@@ -0,0 +1,45 @@
+.header{
+    display: flex;
+    justify-content: space-between;
+    background: #001b2d;
+    width: 100%;
+    height: 75px;
+}
+
+    .headerStart{
+        display: flex;
+        align-items:center;
+        text-decoration: none;
+        margin-left: 25px;
+        width: 275px;
+    }
+
+        .headerStart img{
+            max-height: 75%;
+        }
+
+        .headerLogo{
+            color: white;
+            font-size: 25px;
+            margin-left: 10px;
+        }
+
+        .mobileHomeButton{
+            display: none;
+        }
+
+    .headerEnd{
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        margin-right: 25px;
+        
+    }
+
+        .headerEnd > *{
+            margin-left: 20px;
+        }
+
+        .headerEnd a{
+            color: rgb(255, 99, 107);
+        }

views/shared/css/loader.css

@@ -0,0 +1,83 @@
+#loaderContainer{
+    justify-content: center;
+    align-items: center;
+    width: 100vw;
+    height: 100vh;
+    background: rgba(0, 27, 45, 0.5);
+    z-index: 2;
+    position: fixed;
+}
+
+.loader{
+    margin-bottom: 200px;
+    margin-right: 100px;
+}
+
+.loader .outer{
+    border: 10px solid rgba(255, 255, 255, 0);
+    border-top: 10px solid rgba(255, 99, 107, 0.8);
+    border-bottom: 10px solid rgba(255, 99, 107, 0.8);
+    border-radius: 50%;
+    height: 80px;
+    width: 80px;
+    animation: spin1 2s infinite;
+    position: absolute;
+}
+
+.loader .mid{
+    border: 10px solid rgba(255, 255, 255, 0);
+    border-right: 10px solid rgba(0, 27, 45, 0.8);
+    border-left: 10px solid rgba(0, 27, 45, 0.8);
+    border-radius: 50%;
+    height: 60px;
+    width: 60px;
+    margin: 10px 0 0 10px;
+    animation: spin2 2s infinite;
+    position: absolute;
+}
+
+.loader .inner{
+    border: 10px solid rgba(255, 255, 255, 0);
+    border-top: 10px solid rgba(179, 191, 209, 0.8);
+    border-bottom: 10px solid rgba(179, 191, 209, 0.8);
+    border-radius: 50%;
+    height: 40px;
+    width: 40px;
+    margin: 20px 0 0 20px;
+    animation: spin3 2s infinite;
+    position: absolute;
+}
+
+.loader img{
+    margin: 10px 0 0 10px;
+    height: 70px;
+    width: 80px;
+    position: absolute;
+    z-index: -1;
+    animation: imgSpin 3s linear infinite;
+}
+
+@keyframes spin1{
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+@keyframes spin2{
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(720deg); }
+}
+
+@keyframes spin3{
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(1080deg); }
+}
+
+@keyframes imgSpin{
+    0% { 
+        transform: rotateY(0deg);
+    }
+
+    100% { 
+        transform: rotateY(360deg);
+    }
+}

views/shared/shared.css

@@ -1,148 +1,13 @@
 /* Initialization for all pages */
 *{margin:0;padding:0;font-family:'Saira',sans-serif;}
 
-body{
+/* body{
     display: flex;
     flex-direction: column;
     color: rgb(0, 27, 45);
     min-height: 100vh;
-}
-
-/*
-Header
-*/
-.header{
-    display: flex;
-    justify-content: space-between;
-    background: #001b2d;
-    width: 100%;
-    height: 75px;
-}
-
-    .headerStart{
-        display: flex;
-        align-items:center;
-        text-decoration: none;
-        margin-left: 25px;
-        width: 275px;
-    }
-
-        .headerStart img{
-            max-height: 75%;
-        }
-
-        .headerLogo{
-            color: white;
-            font-size: 25px;
-            margin-left: 10px;
-        }
-
-        .mobileHomeButton{
-            display: none;
-        }
-
-    .headerEnd{
-        display: flex;
-        align-items: center;
-        justify-content: flex-end;
-        margin-right: 25px;
-        
-    }
-
-        .headerEnd > *{
-            margin-left: 20px;
-        }
-
-        .headerEnd a{
-            color: rgb(255, 99, 107);
-        }
-
-/* Loader */
-#loaderContainer{
-    justify-content: center;
-    align-items: center;
-    width: 100vw;
-    height: 100vh;
-    background: rgba(0, 27, 45, 0.5);
-    z-index: 2;
-    position: fixed;
-}
-
-.loader{
-    margin-bottom: 200px;
-    margin-right: 100px;
-}
-
-.loader .outer{
-    border: 10px solid rgba(255, 255, 255, 0);
-    border-top: 10px solid rgba(255, 99, 107, 0.8);
-    border-bottom: 10px solid rgba(255, 99, 107, 0.8);
-    border-radius: 50%;
-    height: 80px;
-    width: 80px;
-    animation: spin1 2s infinite;
-    position: absolute;
-}
-
-.loader .mid{
-    border: 10px solid rgba(255, 255, 255, 0);
-    border-right: 10px solid rgba(0, 27, 45, 0.8);
-    border-left: 10px solid rgba(0, 27, 45, 0.8);
-    border-radius: 50%;
-    height: 60px;
-    width: 60px;
-    margin: 10px 0 0 10px;
-    animation: spin2 2s infinite;
-    position: absolute;
-}
-
-.loader .inner{
-    border: 10px solid rgba(255, 255, 255, 0);
-    border-top: 10px solid rgba(179, 191, 209, 0.8);
-    border-bottom: 10px solid rgba(179, 191, 209, 0.8);
-    border-radius: 50%;
-    height: 40px;
-    width: 40px;
-    margin: 20px 0 0 20px;
-    animation: spin3 2s infinite;
-    position: absolute;
-}
-
-.loader img{
-    margin: 10px 0 0 10px;
-    height: 70px;
-    width: 80px;
-    position: absolute;
-    z-index: -1;
-    animation: imgSpin 3s linear infinite;
-}
-
-@keyframes spin1{
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
-}
-
-@keyframes spin2{
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(720deg); }
-}
-
-@keyframes spin3{
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(1080deg); }
-}
-
-@keyframes imgSpin{
-    0% { 
-        transform: rotateY(0deg);
-    }
-
-    100% { 
-        transform: rotateY(360deg);
-    }
-}
+} */
 
-/* General style that should apply to all pages */
 h1 {
     text-align: center;
     padding-bottom: 13px;
@@ -262,59 +127,6 @@ button::-moz-focus-inner{
     transition: width 1s linear;
 }
 
-/*
-Banner
-*/
-#bannerContainer{
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    width: 100%;
-    position: absolute;
-    margin-top: 15px;
-    pointer-events: none;
-    z-index: 100;
-}
-
-    .banner{
-        display: flex;
-        width: 75%;
-        height: 65px;
-        margin: 10px auto;
-        box-shadow: 0 0 10px black;
-        border: 2px solid black;
-        background: white;
-    }
-
-        .banner > div{
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            width: 25%;
-            color: white;
-        }
-
-        .banner > p{
-            display: flex;
-            align-items: center;
-            font-size: 20px;
-            font-weight: bold;
-            width: 75%;
-            padding-left: 10px;
-        }
-
-        .banner > button{
-            background: none;
-            border: none;
-            height: 20px;
-            position: relative;
-            top: -10px;
-            right: -10px;
-            cursor: pointer;
-            color: white;
-            pointer-events: all;
-        }
-
 @media screen and (max-width: 1400px){
     .button{
         font-size: 15px;