OperatorsMenu should stretch its height

TODO

@@ -22,8 +22,8 @@
 + DONE Side menu with list of operators
 + DONE RxMarbles title and proposition value
 + DONE Examples for Observable Instance Methods
-- TODO OperatorsMenu should stretch its height
-- TODO Version number at the bottom of the page
++ DONE OperatorsMenu should stretch its height
+- TODO Version number and author at the bottom of the page
   - from package.json
 >>> v0.2.0
 

dist/css/main.css

@@ -257,8 +257,8 @@ ul.operators-menu {
   margin: 0;
   padding: 0;
   list-style-type: none;
-  border-top: 1px solid #d4d4d4;
   overflow-y: scroll;
+  height: 2px;
 }
 ul.operators-menu li > a {
   color: #7c7c7c;

src/views/operators-menu.coffee

@@ -7,6 +7,17 @@ Examples = require 'rxmarbles/models/examples'
 
 selected$ = new Rx.Subject()
 
+getDocumentHeight = ->
+  body = document.body
+  html = document.documentElement
+  return Math.max(
+    body.scrollHeight,
+    body.offsetHeight,
+    html.clientHeight,
+    html.scrollHeight,
+    html.offsetHeight
+  )
+
 renderMenuItem = (example) ->
   link = h("a", {href: "##{example.key}"}, example.key)
   Rx.Observable.fromEvent(link, "click").subscribe(->
@@ -15,6 +26,13 @@ renderMenuItem = (example) ->
   )
   return h("li", [link])
 
+fixListHeight = (listElement) ->
+  Rx.Observable.timer(1).subscribe(->
+    height = getDocumentHeight() - listElement.getBoundingClientRect().top
+    listElement.style.height = "#{height}px"
+    return true
+  )
+
 module.exports = {
   getSelected$: ->
     return selected$
@@ -24,7 +42,9 @@ module.exports = {
     for own key,value of Examples
       value.key = key
       menuItems.push(value)
-    return h("ul.operators-menu",
+    listElement = h("ul.operators-menu",
       (renderMenuItem(example) for example in menuItems)
     )
+    fixListHeight(listElement)
+    return listElement
 }

styles/main.less

@@ -64,8 +64,8 @@ ul.operators-menu {
   margin: 0;
   padding: 0;
   list-style-type: none;
-  border-top: 1px solid @color-grey-light;
   overflow-y: scroll;
+  height: 2px;
   li > a {
     color: @color-grey-dark;
     font-size: 1rem;