UI: Add link to keyboard shortcuts

CHANGELOG.md

@@ -9,6 +9,7 @@ This release adds the following new features:
 * Add shortcuts to move cards to the top or the bottom of a list;
 * A new log-in button on the public board view to sign in, even if the board
   is published;
+* New link to the keyboard shortcuts in the board sidebar;
 
 and fixes the following bugs:
 

client/components/sidebar/sidebar.jade

@@ -3,14 +3,19 @@ template(name="sidebar")
     a.sidebar-tongue.js-toggle-sidebar(
       class="{{#if isTongueHidden}}is-hidden{{/if}}")
       i.fa.fa-angle-left
-    .sidebar-content.js-board-sidebar-content.js-perfect-scrollbar
-      a.hide-btn.js-hide-sidebar
-        i.fa.fa-angle-right
-      unless isDefaultView
-        h2
-          a.fa.fa-chevron-left.js-back-home
-          = getViewTitle
-      +Template.dynamic(template=getViewTemplate)
+    .sidebar-shadow
+      .sidebar-content.sidebar-shortcuts
+        a.board-header-btn.js-shortcuts
+          i.fa.fa-keyboard-o
+          span {{_ 'keyboard-shortcuts' }}
+      .sidebar-content.js-board-sidebar-content.js-perfect-scrollbar
+        a.hide-btn.js-hide-sidebar
+          i.fa.fa-angle-right
+        unless isDefaultView
+          h2
+            a.fa.fa-chevron-left.js-back-home
+            = getViewTitle
+        +Template.dynamic(template=getViewTemplate)
 
 template(name='homeSidebar')
   +membersWidget

client/components/sidebar/sidebar.js

@@ -94,6 +94,9 @@ BlazeComponent.extendComponent({
       'click .js-hide-sidebar': this.hide,
       'click .js-toggle-sidebar': this.toggle,
       'click .js-back-home': this.setView,
+      'click .js-shortcuts'() {
+        FlowRouter.go('shortcuts');
+      },
     }];
   },
 }).register('sidebar');

client/components/sidebar/sidebar.styl

@@ -6,11 +6,19 @@
   bottom: 0
   right: 0
 
-  .sidebar-content
-    padding: 12px
+  .sidebar-shadow
+    position: absolute
+    top: 0
+    bottom: 0
+    right: 0
+    left: 0
     background: darken(white, 3%)
     box-shadow: -10px 0px 5px -10px darken(white, 30%)
     z-index: 10
+
+  .sidebar-content
+    padding: 12px
+    margin-bottom: 1.6em
     position: absolute
     top: 0
     bottom: 0
@@ -72,6 +80,16 @@
       i.fa
         margin-right: 10px
 
+  .sidebar-shortcuts
+    margin: 0
+    padding: 0
+    top: auto
+    text-align: center
+    font-size: 0.8em
+    line-height: 1.6em
+    vertical-align: middle
+    color: darken(white, 40%)
+
 .board-sidebar
   width: 248px
   right: -@width