reworked templates based on purecss

5 files changed, 153 insertions, 197 deletions

diff --git a/templates/webmail/about.html.ep b/templates/webmail/about.html.ep
index 5cee603..6221bcc 100644
--- a/templates/webmail/about.html.ep
+++ b/templates/webmail/about.html.ep
@@ -2,70 +2,64 @@
 
 % layout 'mainlayout';
 
-<table class=top>
+<div class="jwm-base">
 
-  <tr>
-    <th>
-      About JWebmail <%= $version %>
-    </th>
-  </tr>
+  <div class="jwm-post">
 
-  <tr>
-    <td class=large-section>
-      <ul>
-        <li>
-          JWebmail <%= $version %> is a Webmail solution meant to be used with
-          <a href="https://www.fehcom.de/sqmail/sqmail.html">s/qmail</a>
-        </li>
+    <h1>About JWebmail <%= $version %></h1>
 
-        <li>Features:
-          <ul>
-            <!--
-              <li>qmail, vmailmgr and vpopmail authentication support (<em>not</em> sendmail)</li>
-              <li>multiple signatures und headers support</li>
-              <li>basic folders support (4 defined folders)</li>
-              <li>featured addressbook</li>
-              <li>100% Maildir based</li>
-              <li>reads the mail directely from the server disk, without need for POP3 or IMAP</li>
-            -->
-            <li>multiple language support</li>
-            <li>session management </li>
-            <li>search for mails</li>
-            <li>CGI support but also psgi/plack and fcgi</li>
-          </ul>
-        </li>
+    <p>
+      JWebmail <%= $version %> is a Webmail solution meant to be used with
+      <a href="https://www.fehcom.de/sqmail/sqmail.html">s/qmail</a>
+    </p>
 
-        <li>
-          This is a
-          <a href="http://www.gnu.org/copyleft/gpl.html" target="_new">GPL</a>
-          licensed project, created by <a href="mailto:">Oliver 'omnis' Müller</a>
-          and currently maintained by
-          <a href="mailto:jannis@fehcom.de">Jannis M. Hoffmann</a>
-        </li>
+    <p>
+    <h3>Features</h3>
+    <ul>
+      <!--
+        <li>qmail, vmailmgr and vpopmail authentication support (<em>not</em> sendmail)</li>
+        <li>multiple signatures und headers support</li>
+        <li>basic folders support (4 defined folders)</li>
+        <li>featured addressbook</li>
+        <li>100% Maildir based</li>
+        <li>reads the mail directely from the server disk, without need for POP3 or IMAP</li>
+      -->
+      <li>multiple language support</li>
+      <li>session management </li>
+      <li>search for mails</li>
+      <li>CGI support but also psgi/plack and fcgi</li>
+    </ul>
+    </p>
+
+    <p>
+      This is a
+      <a href="http://www.gnu.org/copyleft/gpl.html" target="_new">GPL</a>
+      licensed project, created by <a href="mailto:">Oliver 'omnis' Müller</a>
+      and currently maintained by
+      <a href="mailto:jannis@fehcom.de">Jannis M. Hoffmann</a>
+    </p>
            
 
-        <li>Supported languages:
-          <p class=languages>
+    <p>
+    <h3>Supported languages</h3>
+    <ul>
 % foreach (@$languages) {
-            %= link_to $_ => {lang => $_}
+    <li>
+      %= link_to $_ => {lang => $_}
+    </li>
 % }
-          </p>
-        </li>
+    </ul>
+    </p>
+
+    <p>
+      JWebmail is programmed in <a href="http://www.perl.org">Perl</a>, and is
+      a complete rewrite of oMail-webmail.
+    </p>
 
-        <li>
-          JWebmail is programmed in <a href="http://www.perl.org">Perl</a>, and is
-          a complete rewrite of oMail-webmail.
-        </li>
+  </div>
 
-      </ul>
-    </td>
-  </tr>
+  <nav>
+    %= link_to login => 'login' => (class => 'pure-button')
+  </nav>
 
-  <tr>
-    <td>
-      <nav>
-        %= button_to login => 'login' => (class => 'link-btn')
-      </nav>
-    </td>
-  </tr>
-</table>
+</div>
diff --git a/templates/webmail/displayheaders.html.ep b/templates/webmail/displayheaders.html.ep
index d823d9e..42e52fd 100644
--- a/templates/webmail/displayheaders.html.ep
+++ b/templates/webmail/displayheaders.html.ep
@@ -1,46 +1,26 @@
 % layout 'mainlayout';
 
-<table id=displayheaders>
+<div id=displayheaders>
 
-  <thead>
-    <tr>
-      <td id=folders>
-        %= include 'headers/_displayfolders';
-      </td>
-    </tr>
+  %= include 'headers/_display_folders';
 
 % if (my $loginmessage = stash 'loginmessage') {
-    <tr>
-      <td id=loginmessage> <%= $loginmessage %> </td>
-    </tr>
+  <p id=loginmessage>
+    %= $loginmessage
+  </p>
 % }
 
-    <tr>
-      <td id=navigation>
-        %= include 'headers/_display_top_nav';
-      </td>
-    </tr>
-  </thead>
+  %= include 'headers/_display_top_nav';
 
-  <tbody>
-    <tr>
-      <td>
 % if (@$msgs) {
-        %= include 'headers/_display_headers';
+  %= include 'headers/_display_headers';
 % }
 % else {
-        <p id=empty> <%= l 'empty_folder' %> </p>
+  <p id=empty-folder>
+    %= l 'empty_folder'
+  </p>
 % }
-      </td>
-    </tr>
-  </tbody>
 
-  <tfoot>
-    <tr>
-      <td class=navigation>
-        %= include 'headers/_display_bot_nav';
-      </td>
-    </tr>
-  </tfoot>
+  %= include 'headers/_display_bot_nav';
 
-</table>
\ No newline at end of file
+</div>
diff --git a/templates/webmail/login.html.ep b/templates/webmail/login.html.ep
index 4b2da5d..3e224a8 100644
--- a/templates/webmail/login.html.ep
+++ b/templates/webmail/login.html.ep
@@ -1,55 +1,34 @@
 % layout 'mainlayout';
 
-<table id=noaction>
-  <thead>
-    <tr>
-      <th id=top-section> JWebmail – <%= ucfirst l 'login' %> </th>
-    </tr>
-  </thead>
+<div id=login class="jwm-base">
+
+  <h1>
+    JWebmail – <%= ucfirst l 'login' %>
+  </h1>
 
-  <tbody>
 % if (my $msg = flash('message') || stash('warning')) {
-    <tr>
-      <td class="warning flash-fade">
-        %= $msg
-      <td>
-    </tr>
+  <p class="jwm-warning">
+    %= $msg
+  </p>
 % }
 
-    <tr>
-      <td class=login-form>
-        %= form_for login => (name => 'login1') => (method => 'post') => begin
-
-          <table>
-            <tr>
-              <td class=label-cell>
-                %= label_for userid => ucfirst l 'userid'
-              </td> 
-              <td> 
-                %= text_field 'userid'
-              </td>
-            </tr>
-            <tr>
-              <td class=label-cell> 
-                %= label_for password => ucfirst l 'passwd'
-              </td> 
-              <td> 
-                %= password_field 'password'
-              </td> 
-            </tr>
-            <tr class=submit-row>
-              <td colspan=2> 
-                %= submit_button l 'login'
-              </td> 
-            </tr>
-          </table>
-
-        % end
-      </td>
-    </tr>
+  %= 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>
+      <div class="pure-control-group">
+        %= label_for password => ucfirst l 'passwd'
+        %= password_field 'password' => (required => '')
+      </div>
+      <div class="pure-controls">
+        %= submit_button l('login') => (class => 'pure-button pure-button-primary')
+      </div>
+    </fieldset>
+  % end
 
-  </tbody>
-</table>
+</div>
 
 %= javascript begin
   if (!document.login1.userid.value) {
diff --git a/templates/webmail/readmail.html.ep b/templates/webmail/readmail.html.ep
index 0a9fde0..f39dd0e 100644
--- a/templates/webmail/readmail.html.ep
+++ b/templates/webmail/readmail.html.ep
@@ -3,54 +3,62 @@
 % my $mail_fmt = begin
   % my ($category, $value) = @_;
   <dt> <%= ucfirst l $category %> </dt>
-  <dd> <%= ref $value ? join(' ' . l('and') . ' ', map {"$_->{name} <$_->{address}>"} @$value) : $value %> </dd>
+  <dd>
+    %= ref $value ? join(' ' . l('and') . ' ', map {"$_->{name} <$_->{address}>"} @$value) : $value
+  </dd>
 % end
 
-<div class=ow>
-
-<h1>Read Mail</h1>
-
-<dl id=show-head>
-  <dt> <%= uc l 'subject' %> </dt>
-  <dd> <%= $msg->{head}{subject} %> </dd>
-%= $mail_fmt->('from', $msg->{head}{from});
-%= $mail_fmt->('to', $msg->{head}{to});
-%= $mail_fmt->('cc', $msg->{head}{cc}) if !ref $msg->{head}{cc} || @{ $msg->{head}{cc} };
-%= $mail_fmt->('bcc', $msg->{head}{bcc}) if !ref $msg->{head}{bcc} || @{ $msg->{head}{bcc} };
-  <dt> <%= uc l 'date' %> </dt>
-  <dd> <%= $msg->{head}{date} %> </dd>
-  <dt> <%= uc l 'size' %> </dt>
-  <dd> <%= print_sizes10 $msg->{size} %> </dd>
-  <dt> <%= uc l 'content-type' %> </dt>
-  <dd> <%= $msg->{head}{content_type} %> </dd>
-</dl>
+<div class="jwm-base">
+
+  <h1>Read Mail</h1>
+
+  <dl>
+    <dt> <%= uc l 'subject' %> </dt>
+    <dd> <%= $msg->{head}{subject} %> </dd>
+
+    %= $mail_fmt->('from', $msg->{head}{from})
+    %= $mail_fmt->('to', $msg->{head}{to})
+    %= $mail_fmt->('cc', $msg->{head}{cc}) if !ref $msg->{head}{cc} || @{ $msg->{head}{cc} }
+    %= $mail_fmt->('bcc', $msg->{head}{bcc}) if !ref $msg->{head}{bcc} || @{ $msg->{head}{bcc} }
+
+    <dt> <%= uc l 'date' %> </dt>
+    <dd> <%= $msg->{head}{date} %> </dd>
+
+    <dt> <%= uc l 'size' %> </dt>
+    <dd> <%= print_sizes10 $msg->{size} %> </dd>
+
+    <dt> <%= uc l 'content-type' %> </dt>
+    <dd> <%= $msg->{head}{content_type} %> </dd>
+  </dl>
 
 % my $body = $msg->{body};
 
 % if ($msg->{head}{content_type} eq 'multipart/alternative') {
 %   for (reverse @$body) {
-      <div class=show-body>
+  <div class=jwm-mail-body>
 %       my $x = mime_render($_->{head}{content_type}, $_->{body});
-%==     $x;
-      </div>
+    %== $x;
+  </div>
 %       last if $x;
 %   }
 % }
 % elsif (ref $body eq 'HASH') {
 %   for (%$body) {
-      <div class=show-body>
-%==     mime_render($_->{head}{content_type}, $_->{body});
-      </div>
+  <div class=jwm-mail-body>
+    %== mime_render($_->{head}{content_type}, $_->{body});
+  </div>
 %   }
 % }
 % else {
-    <div class=show-body>
-%==   mime_render($msg->{head}{content_type}, $body);
-    </div>
+  <div class=jwm-mail-body>
+    %== mime_render($msg->{head}{content_type}, $body);
+  </div>
 % }
 
-<nav id=read-nav>
-  <a href="javascript:history.back()" class=btn> <%= l 'home' %> </a>
-</nav>
+  <nav>
+    <a href="javascript:history.back()" class="pure-button">
+      %= l 'back'
+    </a>
+  </nav>
 
 </div>
diff --git a/templates/webmail/writemail.html.ep b/templates/webmail/writemail.html.ep
index 8375bdf..6342927 100644
--- a/templates/webmail/writemail.html.ep
+++ b/templates/webmail/writemail.html.ep
@@ -1,51 +1,46 @@
 % layout 'mainlayout';
 
-<div class=ow>
+<div class="jwm-base">
 
-<h1>Write Message</h1>
+  <h1>Write Message</h1>
 
-% if (my $msg = stash('warning')) {
-  <p class=warn> <%= $msg %> </p>
-% }
+  % if (my $msg = stash('warning')) {
+    <p class=warn> <%= $msg %> </p>
+  % }
 
-%= form_for '' => (method => 'post') => (enctype => 'multipart/form-data') => (id => 'write-form') => begin
+  %= 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 => ''
-  <br>
+    %= label_for mail => ucfirst l 'send_to'
+    %= email_field 'to' => (id => 'mail') => (multiple => '') => (required => '')
 
-  %= label_for subject => ucfirst l 'subject'
-  %= text_field 'subject', 'required' => ''
-  <br>
+    %= label_for subject => ucfirst l 'subject'
+    %= text_field 'subject' => (required => '')
 
-  %= label_for cc => 'CC'
-  %= email_field 'cc', 'multiple' => ''
-  <br>
+    %= label_for cc => 'CC'
+    %= email_field 'cc' => (multiple => '')
 
-  %= label_for bcc => 'BCC'
-  %= email_field 'bcc', 'multiple' => ''
-  <br>
+    %= label_for bcc => 'BCC'
+    %= email_field 'bcc' => (multiple => '')
 
-  %= label_for back_to => ucfirst l 'answer_to'
-  %= email_field 'back_to'
-  <br>
+    %= 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) => (id => 'txt')
-  <br>
+    %= label_for txt => ucfirst l 'content'
+    %= text_area body => (cols => 80) => (rows => 24) => (name => 'txt')
 
-  %= file_field 'attach'
-  <br>
+    %= label_for attach => ucfirst l 'attach file'
+    %= file_field 'attach'
 
-  %= submit_button l 'send'
+    %= submit_button l('send') => (class => 'pure-button pure-button-primary')
 
-  %= csrf_field
+    %= csrf_field
 
-% end
+  </fieldset>
+  % end
 
-<nav>
-  %#<a href="<%= url_for('displayheaders') %>" class=btn> <%= l 'home' %> </a>
-  <a href="javascript:history.back()" class=btn> <%= l 'home' %> </a>
-</nav>
+  <nav>
+    <a href="javascript:history.back()" class="pure-button"> <%= ucfirst l 'back' %> </a>
+  </nav>
 
 </div>