convert to bulma css framework

1 files changed, 28 insertions, 25 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>