diff --git a/package-lock.json b/package-lock.json index ee20819..eb70b81 100644 --- a/package-lock.json +++ b/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": { diff --git a/scss/index.css b/scss/index.css index 2e4ded0..a325cad 100644 --- a/scss/index.css +++ b/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 */ \ No newline at end of file diff --git a/scss/index.css.map b/scss/index.css.map index 77ac695..49f97b1 100644 --- a/scss/index.css.map +++ b/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" ], diff --git a/scss/index.scss b/scss/index.scss index e3ebced..e02d3cd 100644 --- a/scss/index.scss +++ b/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; } } \ No newline at end of file diff --git a/src/index.js b/src/index.js index c0f5746..c2f1e1f 100644 --- a/src/index.js +++ b/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. - res.render('index', {username: username}); + vars.title = 'Home'; + // 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)) ); diff --git a/views/index.mustache b/views/index.mustache index a832de4..ed9ca33 100644 --- a/views/index.mustache +++ b/views/index.mustache @@ -1,16 +1,11 @@ - - - - - Gymrooster - - + {{> head}} - + {{> nav}} +
+

Index

+
+ {{> footer}} \ No newline at end of file diff --git a/views/login.mustache b/views/login.mustache new file mode 100644 index 0000000..2d78091 --- /dev/null +++ b/views/login.mustache @@ -0,0 +1,11 @@ + + + {{> head}} + + {{> nav}} +
+

Login

+
+ {{> footer}} + + \ No newline at end of file diff --git a/views/partials/footer.mustache b/views/partials/footer.mustache new file mode 100644 index 0000000..f5dfffc --- /dev/null +++ b/views/partials/footer.mustache @@ -0,0 +1,3 @@ + \ No newline at end of file diff --git a/views/partials/head.mustache b/views/partials/head.mustache new file mode 100644 index 0000000..41e4e3e --- /dev/null +++ b/views/partials/head.mustache @@ -0,0 +1,7 @@ + + + + + {{title}} - Gymrooster + + \ No newline at end of file diff --git a/views/partials/nav.mustache b/views/partials/nav.mustache new file mode 100644 index 0000000..58c0bcd --- /dev/null +++ b/views/partials/nav.mustache @@ -0,0 +1,4 @@ + \ No newline at end of file