Heb wat kleine verandering gedaan

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.

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 :
+            //- sup Door :
-            //- a(href="http://96aa48.github.io")
+            a(href="http://96aa48.github.io")
-            //-   img(src="/images/face.png")
+              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
 

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;