Enhancement : Add hint to see Keyboard cheatsheet

src/css/cheatsheet.css

@@ -1,3 +1,28 @@
+.cheatsheet-link {
+  position: fixed;
+  bottom: 10px;
+  left: 10px;
+
+  padding: 1px 0 0 45px;
+  color : gold;
+  font-weight: bold;
+  font-size : 1.25em;
+  line-height: 20px;
+
+  cursor : pointer;
+
+  background-image:url('../img/keyboard.png');
+  background-size:35px 20px;
+  background-repeat:no-repeat;
+  opacity: 0.5;
+  z-index: 11000;
+  transition : opacity 0.3s;
+}
+
+.cheatsheet-link:hover {
+  opacity: 1;
+}
+
 #cheatsheet-wrapper {
   position: absolute;
   z-index: 10000;
@@ -8,7 +33,9 @@
   left: 0;
 
   padding: 50px;
+
   box-sizing: border-box;
+  -moz-box-sizing : border-box;
 
   color: white;
 }
@@ -16,7 +43,10 @@
 .cheatsheet-container {
   width: 100%;
   height:  100%;
+
   box-sizing: border-box;
+  -moz-box-sizing : border-box;
+
   padding: 20px 3%;
   border-radius: 3px;
   background: rgba(0,0,0,0.9);
@@ -68,6 +98,7 @@
   border-radius: 2px;
 
   box-sizing: border-box;
+  -moz-box-sizing : border-box;
 
   text-align: center;
   font-family:Courier;

src/js/service/keyboard/CheatsheetService.js

@@ -13,6 +13,10 @@
     this.initMarkup_();
     pskl.app.shortcutService.addShortcut('shift+?', this.toggleCheatsheet_.bind(this));
     pskl.app.shortcutService.addShortcut('?', this.toggleCheatsheet_.bind(this));
+
+    var link = $('.cheatsheet-link');
+    link.click(this.toggleCheatsheet_.bind(this));
+
     $.subscribe(Events.TOGGLE_HELP, this.toggleCheatsheet_.bind(this));
     $.subscribe(Events.ESCAPE, this.onEscape_.bind(this));
   };

src/templates/cheatsheet.html

@@ -14,6 +14,7 @@
     </div>
   </div>
 </div>
+<span class="cheatsheet-link">Keyboard shortcuts</a>
 <script type="text/template" id="cheatsheet-shortcut-template">
   <li class="cheatsheet-shortcut">
     <div class="cheatsheet-icon {{shortcutIcon}}"></div>