convert to bulma css framework

6 files changed, 142 insertions, 168 deletions

diff --git a/templates/displayheaders/_bot_nav.html.ep b/templates/displayheaders/_bot_nav.html.ep
index 454941b..a6d089c 100644
--- a/templates/displayheaders/_bot_nav.html.ep
+++ b/templates/displayheaders/_bot_nav.html.ep
@@ -1,36 +1,39 @@
-<div class="pure-g jwm-nav">
+<div class="columns">
 
-  <div class="pure-u-3-4">
-    <div class="pure-u-1 pure-u-md-1-2">
+    <div class="column">
       %= include 'displayheaders/_pagination1'
-    </div><div class="pure-u-1 pure-u-md-1-2">
+    </div>
+    
+    <div class="column">
       % 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>
+        %= form_for move => (id => 'move-mail') => begin
+
+          <div class="field is-horizontal">
+            <div class=field-label>
+              %= label_for 'select-folder' => l('move to') => (class => 'label')
+            </div>
+            <div class=field-body>
+              <div class="field is-grouped">
+                <div class=control>
+                  <div class='select'>
+                    %= select_field folder => [map { $_ ? $_ : l 'Home' } grep {$_ ne $folder} @$mail_folders]
+                  </div>
+                </div>
+                %= csrf_field
+                <div class=control>
+                  %= submit_button l('move') => (class => 'button')
+                </div>
+              </div>
+            </div>
+          </div>
+
         % end
       % }
     </div>
-  </div>
 
-  <div class="pure-u-1-4">
+  <div class="column has-text-right">
     <label for=allbox><%= l 'check all' %></label>
-    <input name=allbox type=checkbox onclick="check_all(this)">
+    <input name=allbox type=checkbox id=check-all>
   </div>
 
 </div>
-
-<script type="text/javascript">
-function check_all(box) {
-  const setTo = box.checked;
-  const mails = document.getElementById('mail-headers').tBodies[0].rows;
-
-  for (const m of mails) {
-    m.lastElementChild.children[0].checked = setTo;
-  }
-}
-</script>
diff --git a/templates/displayheaders/_folders.html.ep b/templates/displayheaders/_folders.html.ep
index b341768..457a838 100644
--- a/templates/displayheaders/_folders.html.ep
+++ b/templates/displayheaders/_folders.html.ep
@@ -1,29 +1,44 @@
-<div id=display-folders class="pure-g jwm-nav">
+<div class="columns">
 
-  <div class="pure-u-1-1 pure-u-md-1-2">
-    <nav class="pure-menu pure-menu-horizontal">
+  <div class="column">
+    <nav class="navbar">
 
-      <strong class="pure-menu-heading">
-        %= l($folder || '_mailbox_root')
-      </strong>
+      <div class="navbar-brand">
+        <span class=navbar-item>
+          <%= l($folder || '_mailbox_root') %>
+        </span>
+        <a role="button" class="navbar-burger" data-target="navMenu" id=navbar-toggle>
+          <span aria-hidden="true"></span>
+          <span aria-hidden="true"></span>
+          <span aria-hidden="true"></span>
+        </a>
+      </div>
 
-      <ul class="pure-menu-list">
+      <div class="navbar-menu" id="navMenu">
+        <div class=navbar-start>
 % for (grep {$_ ne $folder} @$mail_folders) {
-      <li class="pure-menu-item">
-        %= link_to '' => {folder => $_} => (class => 'bright') => begin
+        %= link_to '' => {folder => $_} => (class => 'navbar-item') => begin
           %= l($_ || '_mailbox_root')
         % end
-      </li>
 % }
-      </ul>
-
+        </div>
+      </div>
     </nav>
   </div>
 
-  <p class="pure-u-1-1 pure-u-md-1-2">
-    <%= l('[_1] of [_2] messages', $pgn->{this_page}[1] - $pgn->{this_page}[0], $pgn->{total_items}) %>\
-    <%= l(', [_1] new', $total_new_mails) if $total_new_mails > 0 =%>
-    <%= l(' - mailbox size: [_1]', $v->print_sizes10($total_size)) if $total_size %>
-  </p>
+  <div class="column">
+    <div class="columns is-multiline is-mobile">
+      <span class="column is-half-mobile has-text-centered"><%= l('[_1] of [_2] messages', $pgn->{this_page}[1] - $pgn->{this_page}[0], $pgn->{total_items}) %>
+      </span>
+      <span class="column is-half-mobile has-text-centered"><%= l('[_1] new', $total_new_mails) if $total_new_mails > 0 =%>
+      </span>
+      <span class="column has-text-centered">
+        % if ($total_size) {
+        %=   l('mailbox size: ')
+        %=   $v->print_sizes10($total_size)
+        % }
+      </span>
+    </div>
+  </div>
 
 </div>
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>
diff --git a/templates/displayheaders/_pagination1.html.ep b/templates/displayheaders/_pagination1.html.ep
index a32afe1..6a22ba5 100644
--- a/templates/displayheaders/_pagination1.html.ep
+++ b/templates/displayheaders/_pagination1.html.ep
@@ -1,14 +1,14 @@
 <nav>
-  <ul class="pagination-box">
+  <ul class="pagination-list">
     <li>
-      %= $c->_paginate->make_link('←', 'prev_page')
+      %= $c->_paginate->make_link('←', 'prev_page', class => 'pagination-link', class_disabled => 'is-disabled')
     <li>
-      %= $c->_paginate->make_link('↞', 'first_page') 
+      %= $c->_paginate->make_link('↞', 'first_page', class => 'pagination-link', class_disabled => 'is-disabled') 
     <li>
-      <span><%= l('page [_1] of [_2]', $pgn->{current_page}+1, $pgn->{total_pages}) %></span>
+      <span class="pagination-link is-current"><%= l('page [_1] of [_2]', $pgn->{current_page}+1, $pgn->{total_pages}) %></span>
     <li>
-      %= $c->_paginate->make_link('↠', 'last_page')
+      %= $c->_paginate->make_link('↠', 'last_page', class => 'pagination-link', class_disabled => 'is-disabled')
     <li>
-      %= $c->_paginate->make_link('→', 'next_page')
+      %= $c->_paginate->make_link('→', 'next_page', class => 'pagination-link', class_disabled => 'is-disabled')
   </ul>
 </nav>
diff --git a/templates/displayheaders/_pagination3.html.ep b/templates/displayheaders/_pagination3.html.ep
index fe573ce..846a285 100644
--- a/templates/displayheaders/_pagination3.html.ep
+++ b/templates/displayheaders/_pagination3.html.ep
@@ -1,6 +1,6 @@
 % my $make_link_num = begin
 %   my ($txt, $to) = @_;
-%=  link_to $txt => url_with->query({start => $to}) => (class => (param('start')//0) == $to ? 'current' : '')
+%=  link_to $txt => url_with->query({start => $to}) => (class => (param('start')//0) == $to ? 'pagination-link is-current' : 'pagination-link')
 % end
 
 % my $nbh = begin
@@ -15,13 +15,13 @@
 %   }
 % end
 
-<nav>
-  <ul class="pagination-box">
+<nav class="pagination is-centered">
+  <ul class="pagination-list">
     <li>
-      %= $c->_paginate->make_link('Prev' => 'prev_page')
+      %= $c->_paginate->make_link('Prev' => 'prev_page', class => 'pagination-link', class_disabled => 'is-disabled')
     </li>
     %= $nbh->()
     <li>
-      %= $c->_paginate->make_link('Next' => 'next_page')
+      %= $c->_paginate->make_link('Next' => 'next_page', class => 'pagination-link', class_disabled => 'is-disabled')
   </ul>
 </nav>
diff --git a/templates/displayheaders/_top_nav.html.ep b/templates/displayheaders/_top_nav.html.ep
index f4c66d2..e5eaab8 100644
--- a/templates/displayheaders/_top_nav.html.ep
+++ b/templates/displayheaders/_top_nav.html.ep
@@ -1,35 +1,52 @@
-<div class="pure-g">
+<div class="columns">
 
-  <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>
-        %# <a href="<%=$prefsurl%>?action=editaddresses&folder=<%=$folder%>&sessionid=<%=$thissession%>&sort=<%=$sort%>&firstmessage=<%=$firstmessage+1%>&lang=<%=$lang%>" ><%= TXT 'addressbook' %></a>
-        <li class="pure-menu-item">
-          %= link_to ucfirst(l 'logout') => 'logout'
-        </li>
-        <li class="pure-menu-item">
-          %= link_to ucfirst(l 'compose') => 'write'
-        </li>
-      </ul>
+  <nav class="column">
+    %# <a href="<%= url_with($prefsurl) %>"><%= TXT 'userconfig' %></a>
+    %# <a href="<%=$prefsurl%>?action=editaddresses&folder=<%=$folder%>&sessionid=<%=$thissession%>&sort=<%=$sort%>&firstmessage=<%=$firstmessage+1%>&lang=<%=$lang%>" ><%= TXT 'addressbook' %></a>
+    %= link_to ucfirst(l 'logout') => 'logout' => (class => 'button')
+    %= link_to ucfirst(l 'compose') => 'write' => (class => 'button')
+  </nav>
+
+  %# <td> <form action="<%= url_for('delete_msg') %>" name=Formdel onsubmit="return confirm('<%= TXT q(js_confirm_delete) %>')" > </form> </td>
+
+  %= form_for '' => (class => 'column') => begin
+    <div class="field is-horizontal">
+      <div class=field-label>
+        %= label_for search => ucfirst(l 'search') => (class => 'label')
+      </div>
+      <div class=field-body>
+        <div class=field>
+          <div class="control">
+            %= search_field search => (size => 8) => (class => 'input')
+          </div>
+        </div>
+      </div>
     </div>
-  </div>
+  % end
 
-  <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)
-    % end
-  </div>
+  %= form_for '' => (class => 'column') => begin
+    <div class="field is-horizontal">
+      <div class=field-label>
+        %= label_for sort => ucfirst(l 'sort') => (class => 'label')
+      </div>
+      <div class=field-body>
+        <div class=field>
+          <div class="select" id=sort-select>
+            <select name=sort id=sort>
+              <option value="!date">Date - Descending</option>
+              <option value="date" >Date - Ascending</option>
+              <option value="!size">Size - Descending</option>
+              <option value="!sender">Sender - Descending</option>
+              <option value="sender" >Sender - Ascending</option>
+            </select>
+          </div>
+        </div>
+      </div>
+    </div>
+  % end
 
-  <div class="pure-u-1-1 pure-u-md-1-2">
+  <div class="column">
     %= include 'displayheaders/_pagination3';
   </div>
 
-  <!-- delete button
-  <td>
-    %# <form action="<%= url_for('delete_msg') %>" name=Formdel onsubmit="return confirm('<%= TXT q(js_confirm_delete) %>')" > </form>
-  </td>
-  -->
-
 </div>