diff --git a/articles/inhetkort/normaal - hoe werktmanrooster.md b/articles/inhetkort/normaal - hoe werktmanrooster.md index 6faa767..1a17655 100644 --- a/articles/inhetkort/normaal - hoe werktmanrooster.md +++ b/articles/inhetkort/normaal - hoe werktmanrooster.md @@ -7,6 +7,9 @@ Je hebt vast wel een keer gehoord van een "server", maar wat dat ding eigenlijk * rooster.io (zonder hoofdletter) Het naam van Werkmanrooster als project in code, Werkmanrooster en rooster.io kunnen constant uitgewisseld worden voor benaming in zinnen. +* Templates +Sjablomen + ##### Je gaat naar [Werkmanrooster.nl](http://werkmanrooster.nl) Dit is misschien wel het snelste proces wat er gebeurd binnen het systeem. Er is namelijk geen informatie nodig van de gebruiker en de website kan gelijk reageren zonder roosters op te halen. Het enige wat rooster.io hoeft te doen is een pagina te laten zien aan de gebruiker. @@ -41,3 +44,5 @@ Los van wat je met al die informatie kan doen, gaat rooster.io in dit geval bezi Rooster.io stopt dan alle uren in de bijhorende dag en stopt dan alle informatie bij elkaar. Het resultaat is een [dataobject](http://werkmanrooster.nl/api/schedule?name=Bram%20van%20der%20veen) wat door rooster.io gebruikt kan worden voor het laten zien van een rooster. ##### Het renderen van het rooster. +Maar hoe zorgen we ervoor dat [dit](http://werkmanrooster.nl/api/schedule?name=Bram%20van%20der%20veen) er uit gaat zien als [dat](http://werkmanrooster.nl/rooster/Bram van der Veen)? +Simpel is het niet, maar het systeem gebruikt aan aantal "[templates](http://git.werkmanrooster.nl/werkmanrooster/rooster-io/tree/master/resources/jade)" of sjablomen. Deze templates zijn gemaakt voor het laten zien van verschillende paginas. Rooster.io heeft er een voor de hoofdpagina, roosters, login en lijsten van mensen. Voor een rooster word het template "schedule" gebruikt. Deze template sorteerd de informatie van het dataobject in een tabel van een webpagina. Het is alsof het dataobject gesmolten ijzer is en het gegoten word in een vorm zodat het bruikbaar word. Er wordt bij het renderen van het rooster ook nog wat extra dingen bij gedaan voor beter gebruiksgemak. diff --git a/resources/jade/article.jade b/resources/jade/article.jade index 317f0aa..eafc6a9 100644 --- a/resources/jade/article.jade +++ b/resources/jade/article.jade @@ -4,6 +4,7 @@ html link(rel="stylesheet", href="/css/style.css", type="text/css") link(rel="stylesheet", href="/css/skeleton.css", type="text/css") link(rel="stylesheet", href="/other/prism.css", type="text/css") + //- meta(http-equiv="refresh", content="2") body .container @@ -12,14 +13,14 @@ html div h5 Profielwerkstuk p Hoe werkt Werkmanrooster? - sup Door : - //- a(href="http://96aa48.github.io") - //- img(src="/images/face.png") + //- sup Door : + a(href="http://96aa48.github.io") + img(src="/images/face.png") sup Bram van der Veen ul for article in articles li - a(href="/" + article.match(':') ? article.split(':')[0] : article)=article.match(':') ? article.split(':')[1] : article + a(href="/" + (article.match(':') ? article.split(':')[0] : article))=article.match(':') ? article.split(':')[1] : article .content.seven div!=markdown diff --git a/resources/less/style.less b/resources/less/style.less index ea5700b..7057105 100644 --- a/resources/less/style.less +++ b/resources/less/style.less @@ -1,9 +1,11 @@ .sidebar { - height: 100%; border-right: solid 1px #DDD; float: left; margin-right: 20px; - padding-right: 20px; + position: fixed; + left: 0px; + bottom: 0px; + top: 0px; h5, p, sup { text-align: center !important; @@ -43,11 +45,12 @@ display: block; color: initial; text-decoration: none; - border-left: solid 5px #FF1412; + border-right: solid 5px #FF1412; border-bottom: solid 1px #CCC; height: 30px; line-height: 30px; padding-left: 7px; + padding-right: 7px; &:visited { border-color: #96AA48;