convert to bulma css framework

1 files changed, 27 insertions, 88 deletions

diff --git a/templates/displayheaders/_main_table.html.ep b/templates/displayheaders/_main_table.html.ep
index 06bbbfc..e06e925 100644
--- a/templates/displayheaders/_main_table.html.ep
+++ b/templates/displayheaders/_main_table.html.ep
@@ -9,104 +9,43 @@
 
 % end
 
-<table id=mail-headers class="pure-table pure-table-horizontal">
+<section class="box">
 
-  <thead>
-    <tr id=sort>
-      <th class="hide-small">
-        #
-      </th>
-
-      <th>
-      <div class="pure-g">
-
-        %# $sort_param->('status');
-
-        <div class="pure-u-1 pure-u-md-4-24">
-          %= $sort_param->('date');
-        </div>
-
-% if ($folder ne "SENT") {
-        <div class="pure-u-1 pure-u-md-8-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'
-          % if (param('sort') eq "sender") {
-            %= image '/down.gif' => (width => 12) => (height => 12) => (border => 0) => (alt => 'v')
-          % }
-          % elsif (param('sort') eq "recipient_rev") {
-            %= image '/up.gif' => (width => 12) => (height => 12) => (border => 0) => (alt => '^')
-          % }
-        % end
-      </th>
-% }
-
-        <div class="pure-u-1 pure-u-md-12-24">
-          %= $sort_param->('subject');
-        </div>
-
-      </div>
-      </th>
-
-      <th class="hide-small">
-        %= $sort_param->('size');
-      </th>
-
-      <th>
-        <input type=checkbox checked=1 disabled=1>
-      </th>
-    </tr>
-  </thead>
-
-  <tbody>
   % foreach my $msgnum ($pgn->{first_item} .. $pgn->{last_item}) {
   %   my $msg = $msgs->[$msgnum - $pgn->{first_item}];
 
-    %= tag tr => (class => $msg->{unread} ? 'new-mail' : '') => (id => $msg->{message_handle}) => begin
-      <td class="hide-small" style="text-align: right">
+    %= tag div => (class => $msg->{unread} ? 'media jwm-new-mail' : 'media') => (id => $msg->{message_handle}) => begin
+      <div class="media-left is-hidden-mobile">
         %= $msgnum + 1
-      </td>
-
-      <td>
-      <div class="pure-g">
-
-        <!--
-        <div class="pure-u-1-4">
-          %# ucfirst($msg->{head}{mime}{content_maintype} eq 'multipart' ? l('yes') : l('no'));
-        </div>
-        -->
-
-        <div class="pure-u-1 pure-u-md-4-24">
-          % my $date = $v->parse_iso_date($msg->{head}{date});
-          %= join('/', $date->{mday}, $date->{month}, $date->{year}) . " $date->{hour}:$date->{min}";
-        </div>
-
-        <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>
 
-        <div class="pure-u-1 pure-u-md-12-24">
-          %= link_to $msg->{head}{subject} || '_' => read => {id => $msg->{message_handle}}
+      <div class="media-content">
+        <div class=" columns is-gapless is-multiline">
+          <div class="column is-10">
+            <%= $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="column is-2">
+            % my $date = $v->parse_iso_date($msg->{head}{date});
+            %= join('/', $date->{mday}, $date->{month}, $date->{year}) . " $date->{hour}:$date->{min}";
+          </div>
+
+          <div class="column is-10">
+            %= link_to $msg->{head}{subject} || '_' => read => {id => $msg->{message_handle}}
+          </div>
+
+          <div class="column is-2">
+            %= $v->print_sizes10($msg->{byte_size});
+          </div>
         </div>
-
       </div>
-      </td>
-
-      <td class="hide-small" style="text-align: right; white-space: nowrap">
-        %= $v->print_sizes10($msg->{byte_size});
-      </td>
 
-      <td>
-        %= check_box mail => $msg->{message_handle} => (form => 'move-mail')
-      </td>
+      <div class=media-right>
+        %= check_box mail => $msg->{message_handle} => (form => 'move-mail') => (class => 'jwm-mail-checkbox')
+      </div>
     % end
 
   % }
-  </tbody>
 
-</table>
+</section>