Added a layout and some styles

package-lock.json

@@ -258,11 +258,6 @@
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
       "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
     },
-    "mustache": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/mustache/-/mustache-3.2.1.tgz",
-      "integrity": "sha512-RERvMFdLpaFfSRIEe632yDm5nsd0SDKn8hGmcUwswnyiE5mtdZLDybtHAz6hjJhawokF0hXvGLtx9mrQfm6FkA=="
-    },
     "mustache-express": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/mustache-express/-/mustache-express-1.3.0.tgz",
@@ -271,6 +266,13 @@
         "async": "~3.1.0",
         "lru-cache": "~5.1.1",
         "mustache": "^3.1.0"
+      },
+      "dependencies": {
+        "mustache": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/mustache/-/mustache-3.2.1.tgz",
+          "integrity": "sha512-RERvMFdLpaFfSRIEe632yDm5nsd0SDKn8hGmcUwswnyiE5mtdZLDybtHAz6hjJhawokF0hXvGLtx9mrQfm6FkA=="
+        }
       }
     },
     "mysql": {

scss/index.css

@@ -1,10 +1,45 @@
+body {
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
 body nav {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
-  height: 64px;
+  height: 3.5em;
   color: white;
   background-color: black;
 }
+
+body nav a {
+  position: absolute;
+  color: white;
+}
+
+body nav a:nth-child(1) {
+  padding: 1em;
+}
+
+body nav a:nth-child(2) {
+  right: 0;
+  padding: 1em;
+}
+
+body main {
+  margin-top: 3.5em;
+  margin-bottom: 1em;
+}
+
+body footer {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: black;
+  color: white;
+  text-align: center;
+  font-size: 12px;
+  padding: 2px;
+}
 /*# sourceMappingURL=index.css.map */

scss/index.css.map

@@ -1,6 +1,6 @@
 {
     "version": 3,
-    "mappings": "AAAA,AACI,IADA,CACA,GAAG,CAAC;EACA,QAAQ,EAAE,QAAQ;EAClB,GAAG,EAAE,CAAC;EACN,IAAI,EAAE,CAAC;EACP,KAAK,EAAE,CAAC;EACR,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,KAAK;EACZ,gBAAgB,EAAE,KAAK;CAC1B",
+    "mappings": "AAAA,AAAA,IAAI,CAAC;EACD,WAAW,EAAE,+CAA+C;CAoC/D;;AArCD,AAEI,IAFA,CAEA,GAAG,CAAC;EACA,QAAQ,EAAE,QAAQ;EAClB,GAAG,EAAE,CAAC;EACN,IAAI,EAAE,CAAC;EACP,KAAK,EAAE,CAAC;EACR,MAAM,EAAE,KAAK;EACb,KAAK,EAAE,KAAK;EACZ,gBAAgB,EAAE,KAAK;CAY1B;;AArBL,AAUQ,IAVJ,CAEA,GAAG,CAQC,CAAC,CAAC;EACE,QAAQ,EAAE,QAAQ;EAClB,KAAK,EAAE,KAAK;CACf;;AAbT,AAcQ,IAdJ,CAEA,GAAG,CAYC,CAAC,AAAA,UAAW,CAAA,CAAC,EAAE;EACX,OAAO,EAAE,GAAG;CACf;;AAhBT,AAiBQ,IAjBJ,CAEA,GAAG,CAeC,CAAC,AAAA,UAAW,CAAA,CAAC,EAAE;EACX,KAAK,EAAE,CAAC;EACR,OAAO,EAAE,GAAG;CACf;;AApBT,AAsBI,IAtBA,CAsBA,IAAI,CAAC;EACD,UAAU,EAAE,KAAK;EACjB,aAAa,EAAE,GAAG;CACrB;;AAzBL,AA0BI,IA1BA,CA0BA,MAAM,CAAC;EACH,QAAQ,EAAE,QAAQ;EAClB,MAAM,EAAE,CAAC;EACT,IAAI,EAAE,CAAC;EACP,KAAK,EAAE,CAAC;EACR,gBAAgB,EAAC,KAAK;EACtB,KAAK,EAAC,KAAK;EACX,UAAU,EAAE,MAAM;EAClB,SAAS,EAAE,IAAI;EACf,OAAO,EAAE,GAAG;CACf",
     "sources": [
         "index.scss"
     ],

scss/index.scss

@@ -1,11 +1,38 @@
 body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     nav {
         position: absolute;
         top: 0;
         left: 0;
         right: 0;
-        height: 64px;
+        height: 3.5em;
         color: white;
         background-color: black;
+        a {
+            position: absolute;
+            color: white;
+        }
+        a:nth-child(1) {
+            padding: 1em;
+        }
+        a:nth-child(2) {
+            right: 0;
+            padding: 1em;
+        }
+    }
+    main {
+        margin-top: 3.5em;
+        margin-bottom: 1em;
+    }
+    footer {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        background-color:black;
+        color:white;
+        text-align: center;
+        font-size: 12px;
+        padding: 2px;
     }
 }

src/index.js

@@ -13,14 +13,25 @@ app.engine('mustache', mustacheExpress());
 app.set('view engine', 'mustache');
 app.set('views', path.resolve('views/'));
 
-var username = 'ARN';
+app.engine('mustache', mustacheExpress(path.resolve('views/partials/'), '.mustache'));
+
+var vars = {
+    username: 'ARN'
+}
 
 app.get('/', (req, res) => {
-  	// Render index.mustache and pass username through.
+    vars.title = 'Home';
-    res.render('index', {username: username});
+  	// Render index.mustache and pass variables through.
+    res.render('index', vars);
+});
+
+app.get('/login/', (req, res) => {
+    vars.title = 'Login';
+  	// Render index.mustache and pass variables through.
+    res.render('login', vars);
 });
 
 app.get('/scss/:file', (req, res) =>
-    res.sendFile(path.resolve('scss/' + req.params.file));
+    res.sendFile(path.resolve('scss/' + req.params.file))
 );
 

views/index.mustache

@@ -1,16 +1,11 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
+    {{> head}}
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>Gymrooster</title>
-    <link rel="stylesheet" href="scss/index.css">
-</head>
 <body>
-    <nav>
+    {{> nav}}
-        <span>Gymrooster</span>
+    <main>
-        <a href="/login">{{username}}</a>
+        <h1>Index</h1>
-    </nav>
+    </main>
+    {{> footer}}
 </body>
 </html>

views/login.mustache

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+    {{> head}}
+<body>
+    {{> nav}}
+    <main>
+        <h1>Login</h1>
+    </main>
+    {{> footer}}
+</body>
+</html>

views/partials/footer.mustache

@@ -0,0 +1,3 @@
+    <footer>
+        By JoVo and McArn
+    </footer>

views/partials/head.mustache

@@ -0,0 +1,7 @@
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>{{title}} - Gymrooster</title>
+    <link rel="stylesheet" href="scss/index.css">
+</head>

views/partials/nav.mustache

@@ -0,0 +1,4 @@
+<nav>    
+    <a href="/">Gymrooster</a>
+    <a href="/login">{{username}}</a>
+</nav>