From f35a4d21fe84d3bb6c79acc5b8fd066d5befcce8 Mon Sep 17 00:00:00 2001 From: Bram van der Veen <96aa48@gmail.com> Date: Sat, 13 Jun 2015 23:35:44 +0200 Subject: [PATCH] Added new resources for frontend. Also made the frontend work. --- lookup.js | 1 - package.json | 1 + resources/images/favicon.png | Bin 0 -> 1156 bytes resources/jade/homepage.jade | 18 + resources/js/script.js | 8 + resources/less/skeleton.less | 626 +++++++++++++++++++++++++++++++++++ resources/less/style.less | 46 +++ web.js | 23 +- 8 files changed, 719 insertions(+), 4 deletions(-) create mode 100644 resources/images/favicon.png create mode 100644 resources/jade/homepage.jade create mode 100644 resources/js/script.js create mode 100644 resources/less/skeleton.less create mode 100644 resources/less/style.less diff --git a/lookup.js b/lookup.js index 3463ece..a3a03ab 100644 --- a/lookup.js +++ b/lookup.js @@ -12,7 +12,6 @@ function lookup(req, res, next, search) { if (database_entry.length == 1) { database_entry[0].url = make_url(database_entry[0]); req.match = database_entry[0]; - next(); } else if (database_entry.length == 0) { diff --git a/package.json b/package.json index a2f7594..a5b65dd 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ "dependencies": { "cheerio": "^0.19.0", "express": "^4.12.4", + "express-less": "0.0.7", "jade": "^1.11.0", "mongodb": "^1.4.38", "mongoskin": "^1.4.13" diff --git a/resources/images/favicon.png b/resources/images/favicon.png new file mode 100644 index 0000000000000000000000000000000000000000..7a3c81c1e32b4e4224452cf8261a585480caa0ea GIT binary patch literal 1156 zcmV-~1bh35P)Px(K1oDDR9FeUS6ygSR}lVo-6obMX;utd(pYw*xM;*axQ4d&FA%IGA~hPSg!&Re z%!{H3LD7)Nf>mf~DXa7+587b*Vq0rT+y^!IQ_&TXVq{}Xg2tsmWK$E{Rg$dV+}vF6 z#`_m=J8(F2&&-)`&YW}R%yq#z<@o*n3YW{ZhEo=^6_YQP>FIPj!A@E?`I7?!182!U zWwRxhod!YQaJ$|6s8`2UV5hIjAF*$nn3!mxGk;snv2q|c5D4ty$oVx(v2fUKIJzp%YyG-;+|bmTJITBB&Z-~d;>l)!%wq-3T*Hu{5vvj{FwB`QX)d;Q(oi9$K)StVkW z6c!eyhlhvdszTWU_0aWF=-{;b&=3w|^@mIFWhm}D9??d2iK8!I63Xsg){iGSF*2TdhFu$i_?LHwo`odIDct3 zl;>}naw>Tj*DjvJug8wyM9k^>l~=UK#Tzg}dsgRKg9|nMfVQ0#T)#Obt{lbsjm=KC zVN{<9&8@1ESY$JTRl9KNN*u|Qv3ha&CbWO;=u(M+wDT=6zzcm;gX)@ER92Rw`1u6^ zQrGcW*?Pnb=IDo*jCv#jQpq@?hQmh@t_x|pv91$n-nJ1Rl)Z;jcTGZ~X&W*LaiH5! zG<`7Cge@yqU_;B#h((X1slEn5pQ_|r0k7m_jb4F+oG#kkE+&IdSaNl0b4{3V^d>gw z648{}SSkh2Y<>K>1Mzm0RqdHlG41&@uX6K2kXK1+I7_;Js~2Mi8q>jn2l#QHJvdE0 z5^Q;n$C-@YV!zzLzBY8VvmM`_z722DTolcD9r>@y6QZXvB;s8-v}p~#%cyzuIvIRx zGMPN7yoNJ-j#VQ*A42oyVT4&EKYs-GVsWQ;U&{E*=U7ZKBepOj?#=KqOCNM#KPzP^ z^(PAw6-UbOb9CaRRKjMy6Z|s4Kc-wM)AgC~359DZkm@yCG^k=|{|I^qASDtNs)?Qr zC&XrzVCYw;976qo@am!bUw%xqs#xy?E7noApQL)_c!=j>`km9OoAQjN6bD~$&+BRL zA0tIW2UNvzDV^y=D; .label-body { + display: inline-block; + margin-left: .5rem; + font-weight: normal; +} + +/* Lists +–––––––––––––––––––––––––––––––––––––––––––––––––– */ + +ul { + list-style: circle inside; +} + +ol { + list-style: decimal inside; + padding-left: 0; + margin-top: 0; +} + +ul { + padding-left: 0; + margin-top: 0; + ul, ol { + margin: 1.5rem 0 1.5rem 3rem; + font-size: 90%; + } +} + +ol { + ol, ul { + margin: 1.5rem 0 1.5rem 3rem; + font-size: 90%; + } +} + +li { + margin-bottom: 1rem; +} + +/* Code +–––––––––––––––––––––––––––––––––––––––––––––––––– */ + +code { + padding: .2rem .5rem; + margin: 0 .2rem; + font-size: 90%; + white-space: nowrap; + background: lighten(@light-grey, 6.4%); + border: 1px solid @light-grey; + border-radius: @global-radius; +} + +pre > code { + display: block; + padding: 1rem 1.5rem; + white-space: pre; +} + +/* Tables +–––––––––––––––––––––––––––––––––––––––––––––––––– */ + +th, +td { + padding: 12px 15px; + text-align: left; + border-bottom: 1px solid @light-grey; +} + +th:first-child, +td:first-child { + padding-left: 0; +} + +th:last-child, +td:last-child { + padding-right: 0; +} + +/* Spacing +–––––––––––––––––––––––––––––––––––––––––––––––––– */ + +button, +.button { + margin-bottom: 1rem; +} + +input, +textarea, +select, +fieldset { + margin-bottom: 1.5rem; +} + +pre, +blockquote, +dl, +figure, +table, +p, +ul, +ol, +form { + margin-bottom: 2.5rem; +} + +/* Utilities +–––––––––––––––––––––––––––––––––––––––––––––––––– */ + +.u-full-width { + width: 100%; + box-sizing: border-box; +} + +.u-max-full-width { + max-width: 100%; + box-sizing: border-box; +} + +.u-pull-right { + float: right; +} + +.u-pull-left { + float: left; +} + +/* Misc +–––––––––––––––––––––––––––––––––––––––––––––––––– */ + +hr { + margin-top: 3rem; + margin-bottom: 3.5rem; + border-width: 0; + border-top: 1px solid @light-grey; +} + +/* Clearing +–––––––––––––––––––––––––––––––––––––––––––––––––– */ + +/* Self Clearing Goodness */ + +.container:after, +.row:after, +.u-cf { + content: ""; + display: table; + clear: both; +} + +/* Media Queries +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +/* +Note: The best way to structure the use of media queries is to create the queries +near the relevant code. For example, if you wanted to change the styles for buttons +on small devices, paste the mobile query code up in the buttons section and style it +there. +*/ + + +/* Larger than mobile */ +@media (min-width: @bp-larger-than-mobile) {} + +/* Larger than phablet (also point when grid becomes active) */ +@media (min-width: @bp-larger-than-phablet) {} + +/* Larger than tablet */ +@media (min-width: @bp-larger-than-tablet) {} + +/* Larger than desktop */ +@media (min-width: @bp-larger-than-desktop) {} + +/* Larger than Desktop HD */ +@media (min-width: @bp-larger-than-desktophd) {} diff --git a/resources/less/style.less b/resources/less/style.less new file mode 100644 index 0000000..8619279 --- /dev/null +++ b/resources/less/style.less @@ -0,0 +1,46 @@ +//style.less +@import url('http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,700,400'); + +.homepage { + text-align: center; + + h1 { + font-size: 8rem; + font-family: Open Sans; + letter-spacing: 0px; + } + + span { + font-size: 2rem; + letter-spacing: -2px; + position: relative; + left: -35px; + + > span { + color: #96AA48; + position: relative; + left: -2px; + top: 1px; + display: inline-block; + -webkit-transform: rotate(15deg); + } + } + + input { + width: 50%; + } + + button { + display: block; + margin: 0 auto; + width: 50%; + } + +} + +.bar { + height: 10px; + width: 100%; + background-color: #96aa48; + margin-bottom: 50px; +} diff --git a/web.js b/web.js index 97d4f2f..5cab63e 100644 --- a/web.js +++ b/web.js @@ -1,23 +1,40 @@ //web.js var express = require('express'); +var less = require('express-less'); var app = express(); var lookup = require('./lookup.js'); var schedule = require('./schedule.js'); +var render = require('./render.js'); + +app.set('view engine', 'jade'); +app.set('views', __dirname + '/resources/jade'); +app.use('/css', less(__dirname + '/resources/less')); +app.use('/js', express.static(__dirname + '/resources/js')); app.get('/', function (req, res) { - res.send('Hello world!'); + res.render('homepage'); }); -app.param('search', lookup); -app.param('search', schedule); +app.post('/', function (req, res) { + console.log(req); + // res.redirect('/rooster/' + req.body); +}); app.get('/rooster/:search', function (req, res) { next(); }); + app.get('/over', function (req, res) { res.send('Hier kun je lezen over werkmanrooster.'); }); +app.param('search', lookup); +app.param('search', schedule); + +app.param('search', function (req, res) { + res.render('schedule', req.match); +}); + app.listen(1024);