Scroll with shift + up/down

Fixes #222.

assets/javascripts/app/shortcuts.coffee

@@ -99,9 +99,18 @@ class app.Shortcuts
       @trigger 'typing'
       return
 
-    if event.which is 32
+    switch event.which
+      when 32
         @trigger 'pageUp'
         false
+      when 38
+        unless getSelection()?.toString()
+          @trigger 'altUp'
+          false
+      when 40
+        unless getSelection()?.toString()
+          @trigger 'altDown'
+          false
 
   handleKeydownAltEvent: (event) ->
     switch event.which

assets/javascripts/templates/pages/help_tmpl.coffee

@@ -66,7 +66,10 @@ app.templates.helpPage = """
     <dt class="_shortcuts-dt">
       <code class="_shortcut-code">alt + &darr;</code>
       <code class="_shortcut-code">alt + &uarr;</code>
-    <dd class="_shortcuts-dd">Scroll step by step
+      <br>
+      <code class="_shortcut-code">shift + &darr;</code>
+      <code class="_shortcut-code">shift + &uarr;</code>
+    <dd class="_shortcuts-dd">Scroll step by step<br><br>
     <dt class="_shortcuts-dt">
       <code class="_shortcut-code">space</code>
       <code class="_shortcut-code">shift + space</code>

assets/javascripts/templates/tip_tmpl.coffee

@@ -4,7 +4,7 @@ app.templates.tipKeyNav = """
     <span class="_notif-info">(click to dismiss)</span>
   <p class="_notif-text">
     Hit <code class="_label">&darr;</code> <code class="_label">&uarr;</code> <code class="_label">&larr;</code> <code class="_label">&rarr;</code> to navigate the sidebar.<br>
-    Hit <code class="_label">alt &darr;</code> <code class="_label">alt &uarr;</code> or <code class="_label">space</code> <code class="_label">shift space</code> to scroll the page.
+    Hit <code class="_label">space / shift space</code>, <code class="_label">alt &darr;/&uarr;</code> or <code class="_label">shift &darr;/&uarr;</code> to scroll the page.
   <p class="_notif-text">
     <a href="/help#shortcuts" class="_notif-link">See all keyboard shortcuts</a>
 """

assets/stylesheets/components/_content.scss

@@ -360,7 +360,7 @@
 ._shortcuts-dt {
   float: left;
   clear: left;
-  margin: 0;
+  margin: 0 0 .75rem;
   width: 16rem;
   max-width: 40%;
   font-weight: normal;