category list paging

src/scripts/categoryfilter.tag

@@ -3,12 +3,30 @@
     <h4>
       { opts.name }
     </h4>
+
+    <div
+      class="fewer-categories"
+    >
+      <button
+        style={moreStyle}
+        class="btn btn-primary branded"
+        if={start > 0}
+        onclick={up}
+      >
+        <i
+          class="fa fa-angle-double-up"
+          aria-hidden="true"
+        >
+        </i>
+      </button>
+    </div>
+
     <ul>
       <!-- menu header text -->
       <li class="divider">
       </li>
       <!-- menu item -->
-      <div each={item in opts.items} class="menu-item menu-element">
+      <div each={item in items.slice(start, start+pagesize)} class="menu-item menu-element">
         <button
           class="btn btn-primary category-button"
           style={highlight(item)}
@@ -19,13 +37,56 @@
         <yield/>
       </div>
     </ul>
+
+    <div
+      class="more-categories"
+    >
+      <button
+        if={items.length > pagesize}
+        style={moreStyle}
+        class="btn btn-primary branded"
+        onclick={down}
+      >
+        <i
+          class="fa fa-angle-double-down"
+          aria-hidden="true"
+        >
+        </i>
+      </button>
+    </div>
+
   </div>
 <script>
 
+var self = this;
+
+self.start = 0;
+self.pagesize = 5;
+self.items = self.opts.items;
+
 preventDefault(ev) {
   ev.preventDefault;
 }
 
+self.moreStyle = {
+  "margin" : "auto"
+};
+
+up() {
+  if (self.start >= self.pagesize) {
+    self.update({"start" : self.start - self.pagesize});
+  }
+}
+
+down() {
+  console.log(self.pagesize);
+  console.log(self.start);
+  console.log(self.items.length);
+  if (self.start+self.pagesize < (self.items.length)) {
+    self.update({"start" : self.start + self.pagesize});
+  }
+}
+
 highlight(item) {
 
   var styles = {

src/styles/riotblog.scss

@@ -102,6 +102,16 @@ $navbarHeight: 100px;
   float: right;
 }
 
+.fewer-categories {
+  margin-bottom: 8px;
+  min-height: 8px;
+}
+
+.more-categories {
+  margin-top: 8px;
+  min-height: 8px;
+}
+
 .menu-button {
 	display: block !important;
 	margin-top: 0;