arne/gymrooster
Archived
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Added a layout and some styles

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
package-lock.json generated
View File

@ -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": {

37
scss/index.css
View File

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

2
scss/index.css.map
View File

@ -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"
],

29
scss/index.scss
View File

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

19
src/index.js
View File

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

17
views/index.mustache
View File

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

3
views/partials/footer.mustache Normal file
View File

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

7
views/partials/head.mustache Normal file
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>

4
views/partials/nav.mustache Normal file
View File

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