Added a layout and some styles

This commit is contained in:
Arne van Iterson 2020-01-26 10:46:23 +01:00
parent e0b800086f
commit 63b58a8242
10 changed files with 118 additions and 23 deletions

12
package-lock.json generated
View File

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

View File

@ -1,10 +1,45 @@
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body nav { body nav {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
height: 64px; height: 3.5em;
color: white; color: white;
background-color: black; 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 */ /*# sourceMappingURL=index.css.map */

View File

@ -1,6 +1,6 @@
{ {
"version": 3, "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": [ "sources": [
"index.scss" "index.scss"
], ],

View File

@ -1,11 +1,38 @@
body { body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
nav { nav {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
height: 64px; height: 3.5em;
color: white; color: white;
background-color: black; 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;
} }
} }

View File

@ -13,14 +13,25 @@ app.engine('mustache', mustacheExpress());
app.set('view engine', 'mustache'); app.set('view engine', 'mustache');
app.set('views', path.resolve('views/')); 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) => { 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) => app.get('/scss/:file', (req, res) =>
res.sendFile(path.resolve('scss/' + req.params.file)); res.sendFile(path.resolve('scss/' + req.params.file))
); );

View File

@ -1,16 +1,11 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <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> <body>
<nav> {{> nav}}
<span>Gymrooster</span> <main>
<a href="/login">{{username}}</a> <h1>Index</h1>
</nav> </main>
{{> footer}}
</body> </body>
</html> </html>

11
views/login.mustache Normal file
View File

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

View File

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

View File

@ -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>

View File

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