reworked templates based on purecss

1 files changed, 61 insertions, 46 deletions

diff --git a/templates/headers/_display_headers.html.ep b/templates/headers/_display_headers.html.ep
index c278a37..f391259 100644
--- a/templates/headers/_display_headers.html.ep
+++ b/templates/headers/_display_headers.html.ep
@@ -1,42 +1,37 @@
 % my $sort_param = begin
   % my $param = shift;
 
-  <th class=sort-param>
-    %= link_to url_with->query(sort => $param eq (param('sort') || '') ? '!' . $param : $param) => begin
-      % no warnings qw(experimental::smartmatch);
-      %= do { given (param('sort')) { '↑' when ($param); '↓' when ('!' . $param) } }
-      %= ucfirst l $param;
-    % end
-  </th>
+  %= link_to url_with->query(sort => $param eq (param('sort') || '') ? '!' . $param : $param) => begin
+    % no warnings qw(experimental::smartmatch);
+    %= do { given (param('sort')) { '↑' when ($param); '↓' when ('!' . $param) } }
+    %= ucfirst l $param;
+  % end
 
 % end
 
-<table id=mail-headers>
-
-  <colgroup>
-    <col width=5% />
-    <col width=10% />
-    <col width=15% />
-    <col width=25% />
-    <col width=25% />
-    <col width=10% />
-    <col width=10% />
-  </colgroup>
+<table id=mail-headers class="pure-table pure-table-horizontal">
 
   <thead>
     <tr id=sort>
-      <th>
-        %= ucfirst l 'nr'
+      <th class="hide-small">
+        No.
       </th>
 
-      %= $sort_param->('status');
+      <th>
+      <div class="pure-g">
 
-      %= $sort_param->('date');
+        %# $sort_param->('status');
 
-    % if ($folder ne "SENT") {
-      %= $sort_param->('sender');
-    % }
-    % else {
+        <div class="pure-u-8-24 pure-u-md-4-24">
+          %= $sort_param->('date');
+        </div>
+
+% if ($folder ne "SENT") {
+        <div class="pure-u-16-24 pure-u-md-6-24">
+          %= $sort_param->('sender');
+        </div>
+% }
+% else {
       <th class=sort-param>
         %= link_to url_with->query(sort => param('sort') ne '!sender' ? 'sender' : '!sender' ) => begin
           %= ucfirst l 'recipient'
@@ -48,44 +43,63 @@
           % }
         % end
       </th>
-    % }
+% }
+
+        <div class="pure-u-20-24 pure-u-md-12-24">
+          %= $sort_param->('subject');
+        </div>
 
-      %= $sort_param->('subject');
+        <div class="pure-u-4-24 pure-u-md-2-24">
+          %= $sort_param->('size');
+        </div>
 
-      %= $sort_param->('size');
+      </div>
+      </th>
 
       <th>
-        <!-- <img src="/chkb.gif"> -->
         <input type=checkbox checked=1 disabled=1>
       </th>
     </tr>
   </thead>
 
-
   <tbody>
   % foreach my $msgnum ($first_item .. $last_item) {
   %   my $msg = $msgs->[$msgnum - $first_item];
 
     %= tag tr => (class => $msg->{new} ? 'new-mail' : '') => (id => $msg->{mid}) => begin
-      <td>
+      <td class="hide-small">
         %= $msgnum
       </td>
+
       <td>
-        %= ucfirst($msg->{is_multipart} ? l('yes') : l('no'));
-      </td>
-      <td>
-        % my $date = parse_iso_date $msg->{head}{date};
-        %= join('/', $date->{mday}, $date->{month}, $date->{year}) . " $date->{hour}:$date->{min}";
-      </td>
-      <td>
-        %= $msg->{head}{from}[0]{name} || $msg->{head}{from}[0]{email};
-      </td>
-      <td>
-        %= link_to $msg->{head}{subject} || '_' => read => {id => $msg->{mid}}
-      </td>
-      <td>
-        %= print_sizes10 $msg->{size};
+      <div class="pure-g">
+
+        <!--
+        <div class="pure-u-1-4">
+          %= ucfirst($msg->{is_multipart} ? l('yes') : l('no'));
+        </div>
+        -->
+
+        <div class="pure-u-8-24 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">
+          %= $msg->{head}{from}[0]{name} || $msg->{head}{from}[0]{email};
+        </div>
+
+        <div class="pure-u-20-24 pure-u-md-12-24">
+          %= link_to $msg->{head}{subject} || '_' => read => {id => $msg->{mid}}
+        </div>
+
+        <div class="pure-u-4-24 pure-u-md-2-24">
+          %= print_sizes10 $msg->{size};
+        </div>
+
+      </div>
       </td>
+
       <td>
         %= check_box mail => $msg->{mid} => (form => 'move-mail')
       </td>
@@ -93,4 +107,5 @@
 
   % }
   </tbody>
+
 </table>