4 files changed, 58 insertions, 24 deletions
diff --git a/templates/displayheaders/_bot_nav.html.ep b/templates/displayheaders/_bot_nav.html.ep
index 3eb57d3..454941b 100644
--- a/templates/displayheaders/_bot_nav.html.ep
+++ b/templates/displayheaders/_bot_nav.html.ep
@@ -1,27 +1,27 @@
 <div class="pure-g jwm-nav">
 
-  <div class="pure-u-3-4 pure-u-md-1-4">
-    %= include 'displayheaders/_pagination1'
+  <div class="pure-u-3-4">
+    <div class="pure-u-1 pure-u-md-1-2">
+      %= include 'displayheaders/_pagination1'
+    </div><div class="pure-u-1 pure-u-md-1-2">
+      % if (grep {$_ ne $folder} @$mail_folders) {
+        %= form_for move => (id => 'move-mail') => (class => 'pure-form') => begin
+          <fieldset>
+          %= label_for 'select-folder' => l('move to')
+          %= select_field folder => [map { $_ ? $_ : l 'Home' } grep {$_ ne $folder} @$mail_folders] => (id => 'select-folder')
+          %= csrf_field
+          %= submit_button l('move') => (class => 'pure-button')
+          </fieldset>
+        % end
+      % }
+    </div>
   </div>
 
-  <div class="pure-u-1-4 pure-u-md-1-4">
+  <div class="pure-u-1-4">
     <label for=allbox><%= l 'check all' %></label>
     <input name=allbox type=checkbox onclick="check_all(this)">
   </div>
 
-  <div class="pure-u-1 pure-u-md-1-2">
-    % if (grep {$_ ne $folder} @$mail_folders) {
-      %= form_for move => (id => 'move-mail') => (class => 'pure-form') => begin
-        <fieldset>
-        %= label_for 'select-folder' => l('move to')
-        %= select_field folder => [map { $_ ? $_ : l 'Home' } grep {$_ ne $folder} @$mail_folders] => (id => 'select-folder')
-        %= csrf_field
-        %= submit_button l('move') => (class => 'pure-button')
-        </fieldset>
-      % end
-    % }
-  </div>
-
 </div>
 
 <script type="text/javascript">
diff --git a/templates/displayheaders/_pagination1.html.ep b/templates/displayheaders/_pagination1.html.ep
index 798f79f..a32afe1 100644
--- a/templates/displayheaders/_pagination1.html.ep
+++ b/templates/displayheaders/_pagination1.html.ep
@@ -1,7 +1,14 @@
-<div>
-  <a href="<%= url_with->query({start => $pgn->{prev_page}[0]}) %>"> ← </a>
-  <a href="<%= url_with->query({start => $pgn->{first_page}[0]}) %>"> ↞ </a>
-  [<%= l('page [_1] of [_2]', $pgn->{current_page}+1, $pgn->{total_pages}) %>]
-  <a href="<%= url_with->query({start => $pgn->{last_page}[0]}) %>"> ↠ </a>
-  <a href="<%= url_with->query({start => $pgn->{next_page}[0]}) %>"> → </a>
-</div>
+<nav>
+  <ul class="pagination-box">
+    <li>
+      %= $c->_paginate->make_link('←', 'prev_page')
+    <li>
+      %= $c->_paginate->make_link('↞', 'first_page') 
+    <li>
+      <span><%= l('page [_1] of [_2]', $pgn->{current_page}+1, $pgn->{total_pages}) %></span>
+    <li>
+      %= $c->_paginate->make_link('↠', 'last_page')
+    <li>
+      %= $c->_paginate->make_link('→', 'next_page')
+  </ul>
+</nav>
diff --git a/templates/displayheaders/_pagination3.html.ep b/templates/displayheaders/_pagination3.html.ep
new file mode 100644
index 0000000..fe573ce
--- /dev/null
+++ b/templates/displayheaders/_pagination3.html.ep
@@ -0,0 +1,27 @@
+% my $make_link_num = begin
+%   my ($txt, $to) = @_;
+%=  link_to $txt => url_with->query({start => $to}) => (class => (param('start')//0) == $to ? 'current' : '')
+% end
+
+% my $nbh = begin
+%   my $num = $pgn->{total_pages} > 5 ? 5 : $pgn->{total_pages};
+%   my $start = $pgn->{current_page}-2 < 0 ? 0 : $pgn->{current_page}-2;
+%   if ($start+$num > $pgn->{total_pages}) { $start = $pgn->{total_pages}-$num }
+
+%   for ($start..$start+$num-1) {
+      <li>
+%=    $make_link_num->($_+1 => $_*$pgn->{page_size})
+      </li>
+%   }
+% end
+
+<nav>
+  <ul class="pagination-box">
+    <li>
+      %= $c->_paginate->make_link('Prev' => 'prev_page')
+    </li>
+    %= $nbh->()
+    <li>
+      %= $c->_paginate->make_link('Next' => 'next_page')
+  </ul>
+</nav>
diff --git a/templates/displayheaders/_top_nav.html.ep b/templates/displayheaders/_top_nav.html.ep
index fd6bae6..f4c66d2 100644
--- a/templates/displayheaders/_top_nav.html.ep
+++ b/templates/displayheaders/_top_nav.html.ep
@@ -23,7 +23,7 @@
   </div>
 
   <div class="pure-u-1-1 pure-u-md-1-2">
-    %= include 'displayheaders/_pagination2';
+    %= include 'displayheaders/_pagination3';
   </div>
 
   <!-- delete button