add nav help for posts

app/assets/javascripts/posts.js

@@ -8,6 +8,7 @@
 
     if ($("#c-posts").length) {
       this.initialize_shortcuts();
+      this.initialize_nav_help_link();
     }
 
     if ($("#c-posts").length && $("#a-index").length) {
@@ -21,7 +22,6 @@
       this.initialize_post_image_resize_to_window_link();
       this.initialize_similar();
       this.place_jlist_ads();
-      this.center_pool_nav();
 
       if (Danbooru.meta("always-resize-images") === "true") {
         $("#image-resize-to-window-link").click();
@@ -50,18 +50,26 @@
   }
   
   Danbooru.Post.nav_pool_prev = function() {
-    if ($("#tag-seq-nav").length) {
+    if ($("#search-seq-nav").length) {
-      location.href = $("#tag-seq-nav a[rel=prev]").attr("href");
+      var href = $("#search-seq-nav a[rel=prev]").attr("href");
+      if (href) {
+        location.href = href;
+      }
     } else {
-      location.href = $("#pool-nav a.active[rel=prev]").attr("href");
+      var href = $("#pool-nav a.active[rel=prev]").attr("href");
+      if (href) {
+        location.href = href;
+      }
     }
   }
   
   Danbooru.Post.nav_pool_next = function() {
-    if ($("#tag-seq-nav").length) {
+    if ($("#search-seq-nav").length) {
-      location.href = $("#tag-seq-nav a[rel=next]").attr("href");
+      var href = $("#search-seq-nav a[rel=next]").attr("href");
+      location.href = href;
     } else {
-      location.href = $("#pool-nav a.active[rel=next]").attr("href");
+      var href = $("#pool-nav a.active[rel=next]").attr("href")
+      location.href = href;
     }
   }
   
@@ -115,6 +123,18 @@
       e.preventDefault();
     });
   }
+  
+  Danbooru.Post.initialize_nav_help_link = function() {
+    $("#close-nav-help-link").click(function(e) {
+      Danbooru.Cookie.put("close-nav-help", "1");
+      $("#nav-help").hide();
+      e.preventDefault();
+    });
+    
+    if (Danbooru.Cookie.get("close-nav-help") === "1") {
+      $("#nav-help").hide();
+    }
+  }
 
   Danbooru.Post.initialize_titles = function() {
     $(".post-preview").each(function(i, v) {
@@ -156,7 +176,6 @@
       Danbooru.Note.Box.scale_all();
       $("#image-resize-notice").hide();
       Danbooru.Post.place_jlist_ads();
-      Danbooru.Post.center_pool_nav();
       e.preventDefault();
     });
   }
@@ -185,7 +204,6 @@
 
       Danbooru.Note.Box.scale_all();
       Danbooru.Post.place_jlist_ads()
-      Danbooru.Post.center_pool_nav();
       e.preventDefault();
     });
   }
@@ -323,17 +341,6 @@
       }
     }
   }
-  
-  Danbooru.Post.center_pool_nav = function() {
-    var width = $("#image").width();
-    if (width > 1000) {
-      width = 1000;
-    }
-    if (width > 700) {
-      width = 700
-    }
-    $("#pool-nav,#tag-seq-nav").width(width);
-  }
 })();
 
 $(document).ready(function() {

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

@@ -26,9 +26,9 @@ span.edit-options {
 span.key {
   background: #333;
   border: 1px solid #333;
-  padding: 1px 3px;
+  padding: 1px 6px;
   color: white;
-  width: 1em;
+/*  width: 1em;*/
   text-align: center;
   @include inline-block;
   @include border-radius(3px);

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

@@ -120,6 +120,11 @@ div#c-posts {
     ul {
       margin-left: 1em;
     }
+
+    p {
+      margin: 0;
+      text-align: center;
+    }
   }
   
   div.nav-notice {
@@ -127,6 +132,11 @@ div#c-posts {
     margin-bottom: 1em;
     background: #EEE;
     border: 1px solid #AAA;
+    
+    p {
+      margin: 0;
+      text-align: center;
+    }
   }
   
   aside#sidebar #tag-list h2 {
@@ -212,11 +222,11 @@ div#c-posts {
       float: right;
     }
     
-    .pool-name, .tag-name {
+    .pool-name, .search-name {
       margin: 0 1em;
     }
     
-    #pool-nav, #tag-seq-nav {
+    #pool-nav, #search-seq-nav, #nav-help {
       margin: 1em 0;
       
       li {

app/presenters/post_presenter.rb

@@ -104,8 +104,14 @@ class PostPresenter < Presenter
         html = pool_link_html(html, template, other_pool)
       end
     else
+      first = true
       @post.pools.active.each do |pool|
-        html = pool_link_html(html, template, pool)
+        if first
+          html = pool_link_html(html, template, pool, :include_rel => true)
+          first = false
+        else
+          html = pool_link_html(html, template, pool)
+        end
       end
     end
     

app/views/posts/index.html.erb

@@ -28,6 +28,8 @@
       <%= render "posts/partials/index/edit" %>
       <%= render "wiki_pages/excerpt", :post_set => @post_set %>
       <%= render "posts/partials/index/posts", :post_set => @post_set %>
+      
+      <%= render "posts/partials/index/nav_help" %>
 
       <%= render_rss_advertisement("short", @post_set.has_explicit?) %>   
     </section>

app/views/posts/partials/index/_nav_help.html.erb

@@ -0,0 +1,5 @@
+<div class="clearfix"></div>
+
+<div id="nav-help" class="ui-corner-all nav-notice">
+  <p class="hint">Press <span class="key">&larr;</span> or <span class="key">&rarr;</span> to navigate pages [<%= link_to "close", "#", :id => "close-nav-help-link" %>]</p>
+</div>

app/views/posts/partials/show/_nav_help.html.erb

@@ -0,0 +1,3 @@
+<div id="nav-help" class="ui-corner-all nav-notice">
+  <p class="hint">Press <span class="key">&larr;</span> or <span class="key">&rarr;</span> to navigate posts and <span class="key">space</span> to scroll [<%= link_to "close", "#", :id => "close-nav-help-link" %>]</p>
+</div>

app/views/posts/partials/show/_search_seq.html.erb

@@ -1,8 +1,8 @@
-<div id="tag-seq-nav" class="ui-corner-all nav-notice">
+<div id="search-seq-nav" class="ui-corner-all nav-notice">
   <ul>
-    <li>
+    <li class="active">
       <%= link_to "&laquo;prev".html_safe, show_seq_post_path(post, :tags => params[:tags], :seq => "prev"), :rel => "prev" %>
-      <span class="tag-name">Search: <%= params[:tags] %></span>
+      <span class="search-name">Search: <%= params[:tags] %></span>
       <%= link_to "next&raquo;".html_safe, show_seq_post_path(post, :tags => params[:tags], :seq => "next"), :rel => "next" %>
     </li>
   </ul>

app/views/posts/show.html.erb

@@ -39,8 +39,12 @@
         <%= @post.presenter.image_html(self) %>
       </section>
 
+      <% if params[:tags] || @post.pools.active.any? %>
+        <%= render "posts/partials/show/nav_help" %>
+      <% end %>
+
       <% if params[:tags] %>
-        <%= render "posts/partials/show/tag_seq", :post => @post %>
+        <%= render "posts/partials/show/search_seq", :post => @post %>
       <% end %>
 
       <% if @post.pools.active.any? %>