Add page up and down arrows to the zephyr list.

(imported from commit e66dfc4eef150e5b84d98ab7346d4d66852699b3)

templates/zephyr/home.html

@@ -1,3 +1,6 @@
+<div class="container-fluid">
+  <div class="row-fluid">
+    <div class="span8">
             <div id="wrapper">
                 <div class="zephyr_list scrolling-tab" id="main_div">
                     <br/><br/>
@@ -94,3 +97,18 @@
                         </div>
                     </div>
                 </div>
+    </div>
+
+    <div class="span1" id="nav-indicators">
+      <div id="top-nav">
+        <i class="icon-arrow-up" onclick="simulate_keypress(33);"></i>
+      </div>
+      <div id="bottom-nav">
+          <i class="icon-fast-forward"></i>
+          <br />
+          <i class="icon-arrow-down" onclick="simulate_keypress(34);"></i>
+      </div>
+    </div>
+
+  </div>
+</div>

zephyr/static/js/hotkey.js

@@ -5,6 +5,10 @@ var directional_hotkeys = {
     35: get_last_visible   // End
 };
 
+function simulate_keypress(keycode) {
+    $(document).trigger($.Event('keydown', {keyCode: keycode}));
+}
+
 function above_view(zephyr) {
     return zephyr.offset().top < $("#main_div").offset().top;
 }

zephyr/static/styles/zephyr.css

@@ -307,3 +307,8 @@ input.send_zephyr {
     float: right;
     margin: 0;
 }
+
+#bottom-nav {
+    position: absolute;
+    bottom: 0;
+}