Change .next-prev-links spanをボタン化

Author: ishikawa999

app/views/issues/show.html.erb

@@ -9,23 +9,27 @@
 <div class="<%= @issue.css_classes %> details">
   <% if @prev_issue_id || @next_issue_id %>
     <div class="next-prev-links contextual">
-      <%= link_to_if @prev_issue_id,
+      <span class="previous">
+        <%= link_to_if @prev_issue_id,
                      "\xc2\xab #{l(:label_previous)}",
                      (@prev_issue_id ? issue_path(@prev_issue_id) : nil),
                      :title => "##{@prev_issue_id}",
-                     :accesskey => accesskey(:previous) %> |
+                     :accesskey => accesskey(:previous) %>
+      </span>
       <% if @issue_position && @issue_count %>
         <span class="position">
           <%= link_to_if @query_path,
                          l(:label_item_position, :position => @issue_position, :count => @issue_count),
                          @query_path %>
-        </span> |
+        </span>
       <% end %>
-      <%= link_to_if @next_issue_id,
+      <span class="next">
+        <%= link_to_if @next_issue_id,
                      "#{l(:label_next)} \xc2\xbb",
                      (@next_issue_id ? issue_path(@next_issue_id) : nil),
                      :title => "##{@next_issue_id}",
                      :accesskey => accesskey(:next) %>
+      </span>
     </div>
   <% end %>
 

public/stylesheets/application.css

@@ -777,12 +777,15 @@ textarea#custom_field_default_value {width: 95%; resize:vertical}
 input#content_comments {width: 99%}
 
 span.pagination {margin-left:3px; color:#888; display:block;}
-.pagination ul.pages {
+.pagination ul.pages, .next-prev-links {
   margin: 0 5px 0 0;
   padding: 0;
   display: inline;
 }
-.pagination ul.pages li {
+div.next-prev-links.contextual span {
+  margin-left: -5px;
+}
+.pagination ul.pages li, .next-prev-links span {
   display: inline-block;
   padding: 0;
   border: 1px solid #ddd;
@@ -793,14 +796,14 @@ span.pagination {margin-left:3px; color:#888; display:block;}
   text-align: center;
 }
 .pagination ul.pages li a,
-.pagination ul.pages li span {
+.pagination ul.pages li span, .next-prev-links span a {
   padding: 3px 8px;
 }
-.pagination ul.pages li:first-child {
+.pagination ul.pages li:first-child, .next-prev-links span:first-child {
   border-top-left-radius: 4px;
   border-bottom-left-radius: 4px;
 }
-.pagination ul.pages li:last-child {
+.pagination ul.pages li:last-child, .next-prev-links span:last-child {
   border-top-right-radius: 4px;
   border-bottom-right-radius: 4px;
 }
@@ -809,11 +812,13 @@ span.pagination {margin-left:3px; color:#888; display:block;}
   background-color: #628DB6;
   border-color: #628DB6;
 }
-.pagination ul.pages li.page:hover {
+.pagination ul.pages li.page:hover, .next-prev-links span:hover {
   background-color: #ddd;
 }
 .pagination ul.pages li.page a:hover,
-.pagination ul.pages li.page a:active {
+.pagination ul.pages li.page a:active,
+.next-prev-links span a:hover,
+.next-prev-links span a:active{
   color: #169;
   text-decoration: inherit;
 }