Adapt pagination for smaller screens (#19097).

git-svn-id: http://svn.redmine.org/redmine/trunk@14947 e93f8b46-1217-0410-a6f0-8f06a7374b81

lib/redmine/pagination.rb

@@ -220,11 +220,12 @@ module Redmine
         end
         html << '</ul>'
 
-        html << content_tag('span', "(#{paginator.first_item}-#{paginator.last_item}/#{paginator.item_count})", :class => 'items') + ' '
-
+        info = ''.html_safe
+        info << content_tag('span', "(#{paginator.first_item}-#{paginator.last_item}/#{paginator.item_count})", :class => 'items') + ' '
         if per_page_links != false && links = per_page_links(paginator, &block)
-          html << content_tag('span', links.to_s, :class => 'per-page')
+          info << content_tag('span', links.to_s, :class => 'per-page')
         end
+        html << content_tag('span', info)
 
         html.html_safe
       end

public/stylesheets/application.css

@@ -506,6 +506,9 @@ span.pagination {margin-left:3px; color:#888;}
   border: 1px solid #ccc;
   margin-left: -1px;
   line-height: 2em;
+  margin-bottom: 1em;
+  white-space: nowrap;
+  text-align: center;
 }
 .pagination ul.pages li a,
 .pagination ul.pages li span {
@@ -532,6 +535,7 @@ span.pagination {margin-left:3px; color:#888;}
   color: inherit;
   text-decoration: inherit;
 }
+span.pagination>span {white-space:nowrap;}
 
 #search-form fieldset p {margin:0.2em 0;}
 

public/stylesheets/responsive.css

@@ -825,3 +825,11 @@
         width: 100%;
     }
 }
+
+@media all and (max-width: 599px) {
+  .pagination ul.pages li {display:none;}
+  .pagination ul.pages li.current,
+  .pagination ul.pages li.previous,
+  .pagination ul.pages li.next {display:inline-block; width:32%; overflow:hidden;}
+}
+