better mobile support for displayheaders

4 files changed, 50 insertions, 35 deletions

diff --git a/templates/headers/_display_bot_nav.html.ep b/templates/headers/_display_bot_nav.html.ep
index 7be2832..9dc808a 100644
--- a/templates/headers/_display_bot_nav.html.ep
+++ b/templates/headers/_display_bot_nav.html.ep
@@ -1,15 +1,15 @@
 <div class="pure-g jwm-nav">
 
-  <div class="pure-u-1-2 pure-u-md-1-4">
+  <div class="pure-u-3-4 pure-u-md-1-4">
     %= include 'headers/_pagination1'
   </div>
 
-  <div class="pure-u-1-2 pure-u-md-1-4">
+  <div class="pure-u-1-4 pure-u-md-1-4">
     <label for=allbox><%= l 'check all' %></label>
     <input name=allbox type=checkbox onclick="check_all(this)">
   </div>
 
-  <div class="pure-u-1-1 pure-u-md-1-2">
+  <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>
diff --git a/templates/headers/_display_headers.html.ep b/templates/headers/_display_headers.html.ep
index 870589c..6c00d0b 100644
--- a/templates/headers/_display_headers.html.ep
+++ b/templates/headers/_display_headers.html.ep
@@ -22,12 +22,12 @@
 
         %# $sort_param->('status');
 
-        <div class="pure-u-8-24 pure-u-md-4-24">
+        <div class="pure-u-1 pure-u-md-4-24">
           %= $sort_param->('date');
         </div>
 
 % if ($folder ne "SENT") {
-        <div class="pure-u-16-24 pure-u-md-6-24">
+        <div class="pure-u-1 pure-u-md-8-24">
           %= $sort_param->('sender');
         </div>
 % }
@@ -45,17 +45,17 @@
       </th>
 % }
 
-        <div class="pure-u-20-24 pure-u-md-12-24">
+        <div class="pure-u-1 pure-u-md-12-24">
           %= $sort_param->('subject');
         </div>
 
-        <div class="pure-u-4-24 pure-u-md-2-24">
-          %= $sort_param->('size');
-        </div>
-
       </div>
       </th>
 
+      <th class="hide-small">
+        %= $sort_param->('size');
+      </th>
+
       <th>
         <input type=checkbox checked=1 disabled=1>
       </th>
@@ -76,31 +76,31 @@
 
         <!--
         <div class="pure-u-1-4">
-          %# ucfirst($msg->{head}{mime}{content_maintype} eq 'multipart' ? l('yes') : l('no'));
+          %= ucfirst($msg->{head}{mime}{content_maintype} eq 'multipart' ? l('yes') : l('no'));
         </div>
         -->
 
-        <div class="pure-u-8-24 pure-u-md-4-24">
+        <div class="pure-u-1 pure-u-md-4-24">
           % my $date = parse_iso_date $msg->{head}{date};
           %= join('/', $date->{mday}, $date->{month}, $date->{year}) . " $date->{hour}:$date->{min}";
         </div>
 
-        <div class="pure-u-16-24 pure-u-md-6-24">
+        <div class="pure-u-1 pure-u-md-8-24">
           <%= $msg->{head}{sender}[0]{display_name} || $msg->{head}{sender}[0]{address} ||
               $msg->{head}{from}[0]{display_name} || $msg->{head}{from}[0]{address}; %>
         </div>
 
-        <div class="pure-u-20-24 pure-u-md-12-24">
+        <div class="pure-u-1 pure-u-md-12-24">
           %= link_to $msg->{head}{subject} || '_' => read => {id => $msg->{message_handle}}
         </div>
 
-        <div class="pure-u-4-24 pure-u-md-2-24">
-          %= print_sizes10 $msg->{byte_size};
-        </div>
-
       </div>
       </td>
 
+      <td class="hide-small" style="text-align: right; white-space: nowrap">
+        %= print_sizes10 $msg->{byte_size};
+      </td>
+
       <td>
         %= check_box mail => $msg->{message_handle} => (form => 'move-mail')
       </td>
diff --git a/templates/headers/_display_top_nav.html.ep b/templates/headers/_display_top_nav.html.ep
index 6279f5f..ca5001b 100644
--- a/templates/headers/_display_top_nav.html.ep
+++ b/templates/headers/_display_top_nav.html.ep
@@ -1,6 +1,6 @@
 <div class="pure-g">
 
-  <div class="pure-u-1-2 pure-u-md-1-4">
+  <div class="pure-u-1 pure-u-md-1-4">
     <div class="pure-menu pure-menu-horizontal">
       <ul class="pure-menu-list">
         %# <a href="<%= url_with($prefsurl) %>"><%= TXT 'userconfig' %></a>
@@ -15,7 +15,7 @@
     </div>
   </div>
 
-  <div class="pure-u-1-2 pure-u-md-1-4">
+  <div class="pure-u-1 pure-u-md-1-4">
     %= form_for '' => (class => 'pure-form') => begin
       %= label_for search => ucfirst(l 'search')
       %= search_field search => (size => 8)
diff --git a/templates/headers/_pagination2.html.ep b/templates/headers/_pagination2.html.ep
index eef2abe..8bff0bf 100644
--- a/templates/headers/_pagination2.html.ep
+++ b/templates/headers/_pagination2.html.ep
@@ -1,22 +1,37 @@
-<div>
-  %= form_for '' => (class => 'pure-form') => begin
-    <a href="<%= url_with->query({start => $pgn->{first_page}[0]}) %>"><img src="/first.gif" alt="<%= l('first') . ' ' . l 'page' %>"></a>
-    <a href="<%= url_with->query({start => $pgn->{prev_page}[0]}) %>"><img src="/left.gif" alt="<%= l('previous') . ' ' . l 'page' %>"></a>
-    [
-      %= label_for custompage => ucfirst l 'page'
-      %= number_field start => (id => 'custompage') => (size => 3) => (placeholder => $pgn->{current_page}+1)
-      %= l 'of'
-      %= $pgn->{total_pages}
-    ]
+%= form_for '' => (class => 'pure-form') => begin
+  <a href="<%= url_with->query({start => $pgn->{first_page}[0]}) %>">
+    <img src="/first.gif" alt="<%= l('first') . ' ' . l 'page' %>">
+  </a>
+  <a href="<%= url_with->query({start => $pgn->{prev_page}[0]}) %>">
+    <img src="/left.gif" alt="<%= l('previous') . ' ' . l 'page' %>">
+  </a>
+
+  <div style="white-space: nowrap">
+  [
+%=  label_for custompage => ucfirst l('page') => (style => 'display: inline') 
+    <%= number_field start
+        => (id => 'custompage')
+        => (size => 3)
+        => (placeholder => $pgn->{current_page}+1)
+        => (min => 1)
+        => (max => $pgn->{total_pages}
+        => (style => 'display: inline')) %>
+%=  l 'of'
+%=  $pgn->{total_pages}
+  ]
+  </div>
 
 % my $h = $c->req->query_params->to_hash;
 % while (my ($k, $v) = each %$h) {
 %   if ($k ne 'start') {
-    %= hidden_field $k => $v
+%=    hidden_field $k => $v
 %   }
 % }
 
-    <a href="<%= url_with->query({start => $pgn->{next_page}[0]}) %>"><img src="/right.gif" alt="<%= l('next') . ' ' . l 'page' %>"></a>
-    <a href="<%= url_with->query({start => $pgn->{last_page}[0]}) %>"><img src="/last.gif" alt="<%= l('last') . ' ' . l('page') %>"></a>
-  % end
-</div>
+  <a href="<%= url_with->query({start => $pgn->{next_page}[0]}) %>">
+    <img src="/right.gif" alt="<%= l('next') . ' ' . l 'page' %>">
+  </a>
+  <a href="<%= url_with->query({start => $pgn->{last_page}[0]}) %>">
+    <img src="/last.gif" alt="<%= l('last') . ' ' . l('page') %>">
+  </a>
+% end