convert to bulma css framework

5 files changed, 129 insertions, 61 deletions

diff --git a/templates/webmail/about.html.ep b/templates/webmail/about.html.ep
index 6221bcc..a5cd4a7 100644
--- a/templates/webmail/about.html.ep
+++ b/templates/webmail/about.html.ep
@@ -2,9 +2,9 @@
 
 % layout 'mainlayout';
 
-<div class="jwm-base">
+<div class="section container">
 
-  <div class="jwm-post">
+  <article class=content>
 
     <h1>About JWebmail <%= $version %></h1>
 
@@ -38,7 +38,7 @@
       and currently maintained by
       <a href="mailto:jannis@fehcom.de">Jannis M. Hoffmann</a>
     </p>
-           
+          
 
     <p>
     <h3>Supported languages</h3>
@@ -56,10 +56,12 @@
       a complete rewrite of oMail-webmail.
     </p>
 
-  </div>
+  </article>
 
-  <nav>
-    %= link_to login => 'login' => (class => 'pure-button')
+  <nav class=navbar>
+    <div class=navbar-item>
+      %= link_to login => 'login' => (class => 'button')
+    </div>
   </nav>
 
 </div>
diff --git a/templates/webmail/displayheaders.html.ep b/templates/webmail/displayheaders.html.ep
index 3f650c0..8446e00 100644
--- a/templates/webmail/displayheaders.html.ep
+++ b/templates/webmail/displayheaders.html.ep
@@ -1,6 +1,8 @@
 % layout 'mainlayout';
 
-<div id=displayheaders>
+<section class="section container">
+
+  %= javascript '/src/displayheaders.js' => (defer => undef)
 
   %= include 'displayheaders/_folders';
 
@@ -16,11 +18,11 @@
   %= include 'displayheaders/_main_table';
 % }
 % else {
-  <p id=empty-folder>
+  <p class="section">
     %= l 'This folder is empty!'
   </p>
 % }
 
   %= include 'displayheaders/_bot_nav';
 
-</div>
+</section>
diff --git a/templates/webmail/login.html.ep b/templates/webmail/login.html.ep
index 706dc1c..54ab40a 100644
--- a/templates/webmail/login.html.ep
+++ b/templates/webmail/login.html.ep
@@ -2,38 +2,69 @@
 
 % my $uses_cram = config->{session}{secure} eq 'cram';
 
-<div id=login class="jwm-base">
+<section class=section>
+  <div class="container is-max-desktop box">
 
-  <h1>
-    JWebmail – <%= ucfirst l 'login' %>
-  </h1>
+    <h1 class=title>
+      <%= ucfirst l 'login' %>
+    </h1>
+    <h2 class=subtitle>
+      JWebmail 
+    </h2>
 
 % if (my $msg = flash('message') || stash('warning')) {
-  <p class="jwm-warning">
-    %= $msg
-  </p>
+  <div class="message is-warning">
+    <div class=message-header>
+      %= $msg
+    </div>
+  </div>
 % }
 
   %= form_for login => (name => 'login1') => (method => 'post') => (class => 'pure-form pure-form-aligned jwm-round') => begin
-    <fieldset>
-      <div class="pure-control-group">
-        %= label_for userid => ucfirst l 'userid'
-        %= text_field 'userid' => '' => (required => '')
+
+    <div class="field is-horizontal">
+      <div class=field-label>
+        %= label_for userid => ucfirst l 'userid' => (class => 'label')
+      </div>
+      <div class=field-body>
+        <div class=field>
+          <div class=control>
+            %= text_field 'userid' => '' => (required => undef) => (class => 'input')
+          </div>
+        </div>
       </div>
-      <div class="pure-control-group">
-        %= label_for password => ucfirst l 'password'
-        %= password_field 'password' => (required => '')
+    </div>
+
+    <div class="field is-horizontal">
+      <div class=field-label>
+        %= label_for password => ucfirst l 'password' => (class => 'label')
       </div>
+      <div class=field-body>
+        <div class=field>
+          <div class=control>
+            %= password_field 'password' => (required => undef) => (class => 'input')
+          </div>
+        </div>
+      </div>
+    </div>
 % if ($uses_cram) {
       %= hidden_field challenge => rand
 % }
-      <div class="pure-controls">
-        %= submit_button ucfirst l('login') => (class => 'pure-button pure-button-primary') => (name => 'submit_button') => $uses_cram ? (disabled => undef) : ()
+    <div class="field is-horizontal">
+      <div class=field-label>
+      </div>
+      <div class=field-body>
+        <div class=field>
+          <div class=control>
+            %= submit_button ucfirst l('login') => (class => 'button is-primary') => (name => 'submit_button') => $uses_cram ? (disabled => undef) : ()
+          </div>
+        </div>
       </div>
-    </fieldset>
+    </div>
   % end
 
-</div>
+  </div>
+</section>
 
 % if ($uses_cram) {
 %= javascript '/src/login_cram.js'
diff --git a/templates/webmail/readmail.html.ep b/templates/webmail/readmail.html.ep
index 529bbe6..c9586ac 100644
--- a/templates/webmail/readmail.html.ep
+++ b/templates/webmail/readmail.html.ep
@@ -1,14 +1,14 @@
 % layout 'mainlayout';
 
 
-<div class="jwm-base">
+<div class="section container">
 
-  <h1>Read Mail</h1>
+  <h1 class=title>Read Mail</h1>
 
 %= $v->format_mail($msg)
 
   <nav>
-    <a href="javascript:history.back()" class="pure-button">
+    <a href="javascript:history.back()" class="button">
 %=    l 'back'
     </a>
   </nav>
diff --git a/templates/webmail/writemail.html.ep b/templates/webmail/writemail.html.ep
index 9d148c1..95b9cf8 100644
--- a/templates/webmail/writemail.html.ep
+++ b/templates/webmail/writemail.html.ep
@@ -1,47 +1,80 @@
 % layout 'mainlayout';
 
-<div class="jwm-base">
+<div class="section container">
 
-  <h1>Write Message</h1>
+  <h1 class=title>Write Message</h1>
 
   % if (my $msg = stash('warning')) {
-    <p class=warn> <%= $msg %> </p>
+    <p class=message> <%= $msg %> </p>
   % }
 
-  %= form_for '' => (method => 'post') => (enctype => 'multipart/form-data') => (class => 'pure-form pure-form-stacked') => begin
-  <fieldset>
-
-    %= label_for mail => ucfirst l 'send_to'
-    %= email_field 'to' => (id => 'mail') => (multiple => '') => (required => '')
-
-    %= label_for subject => ucfirst l 'subject'
-    %= text_field 'subject' => (required => '')
-
-    %= label_for cc => 'CC'
-    %= email_field 'cc' => (multiple => '')
-
-    %= label_for bcc => 'BCC'
-    %= email_field 'bcc' => (multiple => '')
-
-    %= label_for back_to => ucfirst l 'answer_to'
-    %= email_field 'back_to'
-
-    %= label_for txt => ucfirst l 'content'
-    %# text_area body => (cols => 80) => (rows => 24) => (name => 'txt')
-    %= text_area body => (style => 'width: 100%') => (rows => 24) => (name => 'txt')
-
-    %= label_for attach => ucfirst l 'attach file'
-    %= file_field 'attach'
-
-    %= submit_button l('send') => (class => 'pure-button pure-button-primary')
+  %= form_for '' => (method => 'post') => (enctype => 'multipart/form-data') => (class => '') => begin
+
+    <div class=field>
+    %= label_for mail => ucfirst l('send_to') => (class => 'label')
+      <div class=control>
+      %= email_field 'to' => (id => 'mail') => (multiple => '') => (required => '') => (class => 'input')
+      </div>
+    </div>
+
+    <div class=field>
+    %= label_for subject => ucfirst l('subject') => (class => 'label')
+      <div class=control>
+      %= text_field 'subject' => (required => '') => (class => 'input')
+      </div>
+    </div>
+
+    <div class=field>
+    %= label_for cc => 'CC' => (class => 'label')
+      <div class=control>
+      %= email_field 'cc' => (multiple => '') => (class => 'input')
+      </div>
+    </div>
+
+    <div class=field>
+    %= label_for bcc => 'BCC' => (class => 'label')
+      <div class=control>
+      %= email_field 'bcc' => (multiple => '') => (class => 'input')
+      </div>
+    </div>
+
+    <div class=field>
+    %= label_for back_to => ucfirst l('answer_to') => (class => 'label')
+      <div class=control>
+      %= email_field 'back_to' => (class => 'input')
+      </div>
+    </div>
+
+    <div class=field>
+    %= label_for txt => ucfirst l('content') => (class => 'label')
+    %= text_area body => (rows => 24) => (name => 'txt') => (class => 'textarea')
+    </div>
+
+    <div class=field>
+      <div class=file>
+        <label class=file-label>
+          %= file_field 'attach' => (class => 'file-input')
+          <div class="file-cta">
+            %= tag span => (class => 'file-label') => begin
+            %= ucfirst l('attach file')
+            % end
+          </div>
+        </label>
+      </div>
+    </div>
+
+    <div class=field>
+      <div class=control>
+      %= submit_button l('send') => (class => 'button')
+      </div>
+    </div>
 
     %= csrf_field
 
-  </fieldset>
   % end
 
   <nav>
-    <a href="javascript:history.back()" class="pure-button"> <%= ucfirst l 'back' %> </a>
+    <a href="javascript:history.back()" class="button"> <%= ucfirst l 'back' %> </a>
   </nav>
 
 </div>