added keyboard shortcuts page

app/assets/javascripts/notes.js

@@ -392,7 +392,7 @@ Danbooru.Note = {
     start: function() {
       $("#original-file-link").click();
       $("#image").one("click", Danbooru.Note.TranslationMode.create_note);
-      Danbooru.notice("Click on the image to create a note (shortcut is n)");
+      Danbooru.notice('Click on the image to create a note (shortcut is <span class="key">n</span>)');
     },
     
     stop: function() {
@@ -474,7 +474,7 @@ Danbooru.Note = {
 $(function() {
   if ($("#c-posts #a-show").size() > 0) {
     $("#translate").one("click", Danbooru.Note.TranslationMode.start);
-    $(document).bind("keydown", "n", Danbooru.Note.TranslationMode.start);
+    key("n", Danbooru.Note.TranslationMode.start);
     Danbooru.Note.load_all();
     $("#image").click(Danbooru.Note.Box.toggle_all);
   }

app/assets/stylesheets/common/inline.css.scss

@@ -21,4 +21,17 @@ span.count {
 }
 
 span.edit-options {
-}
+}
+
+span.key {
+  background: #333;
+  border: 1px solid #333;
+  padding: 1px 3px;
+  color: white;
+  display: inline-block;
+  width: 1em;
+  text-align: center;
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  border-radius: 3px;
+}

app/assets/stylesheets/common/notices.css.scss

@@ -1,17 +1,6 @@
-span.ui-icon {
-  float: left;
-  margin-top: 0.2em;
-  margin-right: 0.25em;
-}
-
 div.error-messages {
   margin: 1em 0;
   padding: 1em;
-
-  span.ui-icon {
-    float: left;
-    margin-right: 0.5em;
-  }
   
   h1 {
     font-size: 1em;
@@ -22,9 +11,4 @@ div.error-messages {
 div#notice {
   margin: 1em 0;
   padding: 1em;
-  
-  span.ui-icon {
-    float: left;
-    margin-right: 0.5em;
-  }
 }

app/assets/stylesheets/news_updates.css

@@ -1,4 +0,0 @@
-/*
-  Place all the styles related to the matching controller here.
-  They will automatically be included in application.css.
-*/

app/assets/stylesheets/specific/keyboard_shortcuts.css.scss

@@ -0,0 +1,20 @@
+@import "../common/000_vars.css.scss";
+
+div#c-static {
+  div#a-keyboard-shortcuts {
+    overflow: visible;
+    
+    section {
+      width: 33%;
+      float: left;
+      
+      h1 {
+        font-size: $h3_size;
+      }
+      
+      li {
+        margin-bottom: 0.5em;
+      }
+    }
+  }
+}

app/views/static/keyboard_shortcuts.html.erb

@@ -0,0 +1,22 @@
+<div id="c-static">
+  <div id="a-keyboard-shortcuts">
+    <h1>Keyboard Shortcuts</h1>
+    
+    <section>
+      <h1>Post Listing</h1>
+      <ul>
+        <li><span class="key">&larr;</span> Previous page</li>
+        <li><span class="key">&rarr;</span> Next page</li>
+        <li><span class="key">/</span> Search</li>
+      </ul>
+    </section>
+    
+    <section>
+      <h1>Post</h1>
+      <ul>
+        <li><span class="key">n</span> New note</li>
+        <li><span class="key">/</span> Search</li>
+      </ul>
+    </section>
+  </div>
+</div>

config/routes.rb

@@ -168,6 +168,7 @@ Danbooru::Application.routes.draw do
   resources :ftopics, :controller => "forum_topics"
   resources :fposts, :controller => "forum_posts"
 
+  match "/static/keyboard_shortcuts" => "static#keyboard_shortcuts", :as => "keyboard_shortcuts"
   match "/static/bookmarklet" => "static#bookmarklet", :as => "bookmarklet"
   match "/static/site_map" => "static#site_map", :as => "site_map"
   match "/static/terms_of_service" => "static#terms_of_service", :as => "terms_of_service"