summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--CHANGES.md8
-rw-r--r--lang/en.lang3
-rw-r--r--public/style.css18
-rw-r--r--public/style2.css95
-rw-r--r--templates/_pagination1.html.ep5
-rw-r--r--templates/_pagination2.html.ep22
-rw-r--r--templates/error.html.ep3
-rw-r--r--templates/headers/_display_bot_nav.html.ep53
-rw-r--r--templates/headers/_display_folders.html.ep29
-rw-r--r--templates/headers/_display_headers.html.ep107
-rw-r--r--templates/headers/_display_top_nav.html.ep49
-rw-r--r--templates/headers/_displayfolders.html.ep32
-rw-r--r--templates/headers/_pagination1.html.ep7
-rw-r--r--templates/headers/_pagination2.html.ep22
-rw-r--r--templates/layouts/mainlayout.html.ep49
-rw-r--r--templates/webmail/about.html.ep106
-rw-r--r--templates/webmail/displayheaders.html.ep44
-rw-r--r--templates/webmail/login.html.ep69
-rw-r--r--templates/webmail/readmail.html.ep70
-rw-r--r--templates/webmail/writemail.html.ep61
20 files changed, 463 insertions, 389 deletions
diff --git a/CHANGES.md b/CHANGES.md
index 42eef5a..23383f7 100644
--- a/CHANGES.md
+++ b/CHANGES.md
@@ -128,9 +128,16 @@ Current v1.1.0
- [x] merge read and raw (with content type)
- how does one extract the body functionality? (One does not.)
- [x] refactor templates to make use of link_to
+- [x] improve html styling (especially for mobile)
+ - [x] about
+ - [x] displayheaders
+ - [x] nocation
+ - [x] readmail
+ - [x] writemail
- [ ] improve i18n
- [ ] add localization of dates and time
- [x] refactor I18N plugin to allow independent translate provider
+ - [ ] extend matcher dynamic with a role
- [ ] fix tests
- [ ] moving mails to other folders
- [ ] creating new folders
@@ -138,6 +145,7 @@ Current v1.1.0
- [ ] specify protocol for backend interaction
- [ ] choose tool for validation
- [ ] cleanup README
+- [ ] improve about page
- [ ] improve performance of backend, consider alternatives to Mail::Box::Manager
- [ ] based on Maildir::Light
- [x] reimplementation in Rust
diff --git a/lang/en.lang b/lang/en.lang
index 6e3d447..6d0d360 100644
--- a/lang/en.lang
+++ b/lang/en.lang
@@ -36,6 +36,7 @@ sender = sender
subject = subject
size = size
home = home
+back = back
no_session = You have no active session!
no_folder = "no such folder"
@@ -48,4 +49,4 @@ INBOX = inbox
SENT = sent
TRASH = trash
SAVED = saved
-Home = home \ No newline at end of file
+Home = home
diff --git a/public/style.css b/public/style.css
index 23a7cbf..8e771b0 100644
--- a/public/style.css
+++ b/public/style.css
@@ -1,14 +1,10 @@
:root {
- --color-font: #000000;
- --color-background: #DDDDDD;
+ --color-background: #ddd;
+ --color-table-row: #eee;
+ --color-head: #026;
--color-table-em: lightblue;
- --color-table-em2: #D3DCE3;
- --color-table-row: #EEEEEE;
- --color-link: blue;
- --color-link-visited: purple;
- --color-link-hover: red;
+ --color-table-em2: #d3dce3;
--color-warning: orange;
- --color-head: #002266;
}
/* GENERAL */
@@ -19,15 +15,15 @@ body {
a:link {
text-decoration: none;
- color: var(--color-link);
+ color: blue;
}
a:visited {
text-decoration: none;
- color: var(--color-link-visited);
+ color: purple;
}
a:hover {
text-decoration: underline;
- color: var(--color-link-hover);
+ color: red;
}
footer {
diff --git a/public/style2.css b/public/style2.css
new file mode 100644
index 0000000..664771a
--- /dev/null
+++ b/public/style2.css
@@ -0,0 +1,95 @@
+:root {
+ --jwm-color-back: #eee;
+ --jwm-color-front: #ddd;
+}
+
+body {
+ padding: 1rem;
+}
+
+a {
+ text-decoration-line: none;
+}
+
+a:hover {
+ text-decoration-line: underline;
+}
+
+footer {
+ text-align: center;
+ margin-top: 2rem;
+}
+
+.jwm-base {
+ background-color: var(--jwm-color-back);
+ border-radius: 5px;
+ max-width: 960px;
+ margin: 0 auto;
+ padding: 1rem;
+}
+
+ .jwm-base > nav {
+ margin-top: 1rem;
+ }
+
+.jwm-warning {
+ background-color: orange;
+ padding: 1rem;
+}
+
+.jwm-post {
+ background-color: var(--jwm-color-front);
+ border-radius: 5px;
+ padding: 0.5rem 1rem;
+}
+
+.jwm-nav {
+ background-color: var(--jwm-color-back);
+ border-radius: 5px;
+ padding: 0 1rem;
+}
+
+.jwm-mail-body {
+ width: 80%;
+ margin: 0rem auto;
+}
+
+ .jwm-mail-body > iframe.html-mail {
+ width: 100%;
+ height: 400px;
+ }
+
+/* make sure this lines up with pure-md class */
+@media screen and (max-width: 48em) {
+ .hide-small {
+ display: none;
+ }
+}
+
+#displayheaders {
+ max-width: 1280px;
+ margin: 0 auto;
+ padding: 1rem;
+}
+
+ #mail-headers {
+ width: 100%;
+ }
+
+ #empty-folder {
+ text-align: center;
+ }
+
+#login {
+ max-width: 640px;
+}
+
+ #login > h1 {
+ text-align: center;
+ }
+
+ #login > form {
+ background-color: var(--jwm-color-front);
+ padding-top: 1rem;
+ padding-left: 6px;
+ }
diff --git a/templates/_pagination1.html.ep b/templates/_pagination1.html.ep
deleted file mode 100644
index 14354c0..0000000
--- a/templates/_pagination1.html.ep
+++ /dev/null
@@ -1,5 +0,0 @@
-<a href="<%= url_with->query({start => $prev_page->[0]-1}) %>"><img src="/left.gif" alt="←"></a>
-<a href="<%= url_with->query({start => $first_page->[0]-1}) %>"><img src="/first.gif" alt="↞"></a>
-[<%= join(' ', ucfirst l('page'), $current_page, l('of'), $total_pages) %>]
-<a href="<%= url_with->query({start => $last_page->[0]-1}) %>"><img src="/last.gif" alt="↠"></a>
-<a href="<%= url_with->query({start => $next_page->[0]-1}) %>"><img src="/right.gif" alt="→"></a>
diff --git a/templates/_pagination2.html.ep b/templates/_pagination2.html.ep
deleted file mode 100644
index e03dbb0..0000000
--- a/templates/_pagination2.html.ep
+++ /dev/null
@@ -1,22 +0,0 @@
-<a href="<%= url_with->query({start => $first_page->[0]-1}) %>"> <img src="/first.gif" alt="<%= l('first') . ' ' . l 'page' %>"></a>\
-<a href="<%= url_with->query({start => $prev_page->[0]-1}) %>"> <img src="/left.gif" alt="<%= l('previous') . ' ' . l 'page' %>"> </a>
-
-%= form_for '' => begin
- [
- %= label_for custompage => ucfirst l 'page'
- %= number_field start => (id => 'custompage') => (size => 3) => (placeholder => $current_page)
- %= l 'of'
- %= $total_pages
- ]
-
-% my $h = $c->req->query_params->to_hash;
-% while (my ($k, $v) = each %$h) {
-% if ($k ne 'start') {
- %= hidden_field $k => $v
-% }
-% }
-
-% end
-
-<a href="<%= url_with->query({start => $next_page->[0]-1}) %>"> <img src="/right.gif" alt="<%= l('next') . ' ' . l 'page' %>"> </a>\
-<a href="<%= url_with->query({start => $last_page->[0]-1}) %>"> <img src="/last.gif" alt="<%= l('last') . ' ' . l('page') %>"> </a>
diff --git a/templates/error.html.ep b/templates/error.html.ep
index d120e69..3a1d5e3 100644
--- a/templates/error.html.ep
+++ b/templates/error.html.ep
@@ -1,4 +1,5 @@
-<!DOCTYPE html>
+<!doctype html>
+
<html>
<head>
diff --git a/templates/headers/_display_bot_nav.html.ep b/templates/headers/_display_bot_nav.html.ep
index ea1ce3c..9064d6e 100644
--- a/templates/headers/_display_bot_nav.html.ep
+++ b/templates/headers/_display_bot_nav.html.ep
@@ -1,33 +1,26 @@
-<table id=bot-nav width=100%>
-
- <colgroup>
- <col width=70% />
- <col width=10% />
- <col width=20% />
- </colgroup>
-
- <tr>
- <td>
- %= include '_pagination1';
- </td>
-
- <td>
- <label for=allbox><%= l 'check_all' %></label>:
- <input name=allbox type=checkbox onclick="check_all(this)">
- </td>
-
- <td>
- %= form_for move => (id => 'move-mail') => begin
- %= label_for 'select-folder' => l('move') . ' ' . l('to')
- %= select_field folder => [grep {$_ ne $folder} @$mail_folders] => (id => 'select-folder')
- %= csrf_field
- %= submit_button l 'move'
- % end
-
- </td>
- </tr>
-</table>
-
+<div class="pure-g jwm-nav">
+
+ <div class="pure-u-1-2 pure-u-md-1-4">
+ %= include 'headers/_pagination1'
+ </div>
+
+ <div class="pure-u-1-2 pure-u-md-1-4">
+ <label for=allbox><%= l 'check_all' %></label>
+ <input name=allbox type=checkbox onclick="check_all(this)">
+ </div>
+
+ <div class="pure-u-1-1 pure-u-md-1-2">
+ %= form_for move => (id => 'move-mail') => (class => 'pure-form') => begin
+ <fieldset>
+ %= label_for 'select-folder' => l('move') . ' ' . l('to')
+ %= select_field folder => [grep {$_ ne $folder} @$mail_folders] => (id => 'select-folder')
+ %= csrf_field
+ %= submit_button l('move') => (class => 'pure-button')
+ </fieldset>
+ % end
+ </div>
+
+</div>
<script type="text/javascript">
function check_all(box) {
diff --git a/templates/headers/_display_folders.html.ep b/templates/headers/_display_folders.html.ep
new file mode 100644
index 0000000..bf8a346
--- /dev/null
+++ b/templates/headers/_display_folders.html.ep
@@ -0,0 +1,29 @@
+<div id=display-folders class="pure-g jwm-nav">
+
+ <div class="pure-u-1-1 pure-u-md-1-2">
+ <nav class="pure-menu pure-menu-horizontal">
+
+ <strong class="pure-menu-heading">
+ %= l($folder) || $folder || 'Root'
+ </strong>
+
+ <ul class="pure-menu-list">
+% for my $v (grep {$_ ne $folder} @$mail_folders) {
+ <li class="pure-menu-item">
+ %= link_to '' => {folder => $v} => (class => 'bright') => begin
+ %= $v ? (l($v) || $v) : l 'Home'
+ % end
+ </li>
+% }
+ </ul>
+
+ </nav>
+ </div>
+
+ <p class="pure-u-1-1 pure-u-md-1-2">
+ <%= "$first_item - $last_item " . l('of') . " $total_items " . l('messages') %>\
+ <%= ", $total_new_mails " . l('new') if $total_new_mails > 0 =%>
+ <%= ' - ' . ucfirst(l 'mbox_size') . ": " . print_sizes10 $total_size if $total_size %>
+ </p>
+
+</div>
diff --git a/templates/headers/_display_headers.html.ep b/templates/headers/_display_headers.html.ep
index c278a37..f391259 100644
--- a/templates/headers/_display_headers.html.ep
+++ b/templates/headers/_display_headers.html.ep
@@ -1,42 +1,37 @@
% my $sort_param = begin
% my $param = shift;
- <th class=sort-param>
- %= link_to url_with->query(sort => $param eq (param('sort') || '') ? '!' . $param : $param) => begin
- % no warnings qw(experimental::smartmatch);
- %= do { given (param('sort')) { '↑' when ($param); '↓' when ('!' . $param) } }
- %= ucfirst l $param;
- % end
- </th>
+ %= link_to url_with->query(sort => $param eq (param('sort') || '') ? '!' . $param : $param) => begin
+ % no warnings qw(experimental::smartmatch);
+ %= do { given (param('sort')) { '↑' when ($param); '↓' when ('!' . $param) } }
+ %= ucfirst l $param;
+ % end
% end
-<table id=mail-headers>
-
- <colgroup>
- <col width=5% />
- <col width=10% />
- <col width=15% />
- <col width=25% />
- <col width=25% />
- <col width=10% />
- <col width=10% />
- </colgroup>
+<table id=mail-headers class="pure-table pure-table-horizontal">
<thead>
<tr id=sort>
- <th>
- %= ucfirst l 'nr'
+ <th class="hide-small">
+ No.
</th>
- %= $sort_param->('status');
+ <th>
+ <div class="pure-g">
- %= $sort_param->('date');
+ %# $sort_param->('status');
- % if ($folder ne "SENT") {
- %= $sort_param->('sender');
- % }
- % else {
+ <div class="pure-u-8-24 pure-u-md-4-24">
+ %= $sort_param->('date');
+ </div>
+
+% if ($folder ne "SENT") {
+ <div class="pure-u-16-24 pure-u-md-6-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'
@@ -48,44 +43,63 @@
% }
% end
</th>
- % }
+% }
+
+ <div class="pure-u-20-24 pure-u-md-12-24">
+ %= $sort_param->('subject');
+ </div>
- %= $sort_param->('subject');
+ <div class="pure-u-4-24 pure-u-md-2-24">
+ %= $sort_param->('size');
+ </div>
- %= $sort_param->('size');
+ </div>
+ </th>
<th>
- <!-- <img src="/chkb.gif"> -->
<input type=checkbox checked=1 disabled=1>
</th>
</tr>
</thead>
-
<tbody>
% foreach my $msgnum ($first_item .. $last_item) {
% my $msg = $msgs->[$msgnum - $first_item];
%= tag tr => (class => $msg->{new} ? 'new-mail' : '') => (id => $msg->{mid}) => begin
- <td>
+ <td class="hide-small">
%= $msgnum
</td>
+
<td>
- %= ucfirst($msg->{is_multipart} ? l('yes') : l('no'));
- </td>
- <td>
- % my $date = parse_iso_date $msg->{head}{date};
- %= join('/', $date->{mday}, $date->{month}, $date->{year}) . " $date->{hour}:$date->{min}";
- </td>
- <td>
- %= $msg->{head}{from}[0]{name} || $msg->{head}{from}[0]{email};
- </td>
- <td>
- %= link_to $msg->{head}{subject} || '_' => read => {id => $msg->{mid}}
- </td>
- <td>
- %= print_sizes10 $msg->{size};
+ <div class="pure-g">
+
+ <!--
+ <div class="pure-u-1-4">
+ %= ucfirst($msg->{is_multipart} ? l('yes') : l('no'));
+ </div>
+ -->
+
+ <div class="pure-u-8-24 pure-u-md-4-24">
+ % my $date = parse_iso_date $msg->{head}{date};
+ %= join('/', $date->{mday}, $date->{month}, $date->{year}) . " $date->{hour}:$date->{min}";
+ </div>
+
+ <div class="pure-u-16-24 pure-u-md-6-24">
+ %= $msg->{head}{from}[0]{name} || $msg->{head}{from}[0]{email};
+ </div>
+
+ <div class="pure-u-20-24 pure-u-md-12-24">
+ %= link_to $msg->{head}{subject} || '_' => read => {id => $msg->{mid}}
+ </div>
+
+ <div class="pure-u-4-24 pure-u-md-2-24">
+ %= print_sizes10 $msg->{size};
+ </div>
+
+ </div>
</td>
+
<td>
%= check_box mail => $msg->{mid} => (form => 'move-mail')
</td>
@@ -93,4 +107,5 @@
% }
</tbody>
+
</table>
diff --git a/templates/headers/_display_top_nav.html.ep b/templates/headers/_display_top_nav.html.ep
index 2b882af..6279f5f 100644
--- a/templates/headers/_display_top_nav.html.ep
+++ b/templates/headers/_display_top_nav.html.ep
@@ -1,34 +1,35 @@
-<table width=100%>
- <tr>
+<div class="pure-g">
- <td>
- <ul class=line>
- %# <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>
+ <div class="pure-u-1-2 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>
+ <li class="pure-menu-item">
%= link_to ucfirst(l 'compose') => 'write'
</li>
</ul>
- </td>
+ </div>
+ </div>
- <td>
- %= form_for '' => begin
- %= label_for search => ucfirst(l 'search') . ': '
- %= search_field search => (size => 8)
- % end
- </td>
+ <div class="pure-u-1-2 pure-u-md-1-4">
+ %= form_for '' => (class => 'pure-form') => begin
+ %= label_for search => ucfirst(l 'search')
+ %= search_field search => (size => 8)
+ % end
+ </div>
- <td id=pag2>
- %= include '_pagination2';
- </td>
+ <div class="pure-u-1-1 pure-u-md-1-2">
+ %= include 'headers/_pagination2';
+ </div>
- <td>
- <!-- delete button -->
- %# <form action="<%= url_for('delete_msg') %>" name=Formdel onsubmit="return confirm('<%= TXT q(js_confirm_delete) %>')" > </form>
- </td>
+ <!-- delete button
+ <td>
+ %# <form action="<%= url_for('delete_msg') %>" name=Formdel onsubmit="return confirm('<%= TXT q(js_confirm_delete) %>')" > </form>
+ </td>
+ -->
- </tr>
-</table>
+</div>
diff --git a/templates/headers/_displayfolders.html.ep b/templates/headers/_displayfolders.html.ep
deleted file mode 100644
index 7bc5b12..0000000
--- a/templates/headers/_displayfolders.html.ep
+++ /dev/null
@@ -1,32 +0,0 @@
-<table id=display-folders width=100%>
- <tr>
-
- <td id=folder-list class=alter-font>
- <strong class=up>
- %= l($folder) || $folder
- </strong>
-
- <ul class=line>
-% for my $v (grep {$_ ne $folder} @$mail_folders) {
- <li>
- %= link_to '' => {folder => $v} => (class => 'bright') => begin
- %= $v ? (l($v) || $v) : l 'Home'
- % end
- </li>
-% }
- </ul>
- </td>
-
- <td>
- <em class=msg-count>
- <%= "$first_item - $last_item " . l('of') . " $total_items " . l('messages') %>\
- <%= ", $total_new_mails " . l('new') if $total_new_mails > 0 =%>
-
-% if ($total_size) {
- - <%= ucfirst(l 'mbox_size') . ": " . print_sizes10 $total_size %>
-% }
- </em>
- </td>
-
- </tr>
-</table>
diff --git a/templates/headers/_pagination1.html.ep b/templates/headers/_pagination1.html.ep
new file mode 100644
index 0000000..010bdbd
--- /dev/null
+++ b/templates/headers/_pagination1.html.ep
@@ -0,0 +1,7 @@
+<div>
+ <a href="<%= url_with->query({start => $prev_page->[0]-1}) %>"><img src="/left.gif" alt="←"></a>
+ <a href="<%= url_with->query({start => $first_page->[0]-1}) %>"><img src="/first.gif" alt="↞"></a>
+ [<%= join(' ', ucfirst l('page'), $current_page, l('of'), $total_pages) %>]
+ <a href="<%= url_with->query({start => $last_page->[0]-1}) %>"><img src="/last.gif" alt="↠"></a>
+ <a href="<%= url_with->query({start => $next_page->[0]-1}) %>"><img src="/right.gif" alt="→"></a>
+</div>
diff --git a/templates/headers/_pagination2.html.ep b/templates/headers/_pagination2.html.ep
new file mode 100644
index 0000000..236e9bb
--- /dev/null
+++ b/templates/headers/_pagination2.html.ep
@@ -0,0 +1,22 @@
+<div>
+ %= form_for '' => (class => 'pure-form') => begin
+ <a href="<%= url_with->query({start => $first_page->[0]-1}) %>"><img src="/first.gif" alt="<%= l('first') . ' ' . l 'page' %>"></a>
+ <a href="<%= url_with->query({start => $prev_page->[0]-1}) %>"><img src="/left.gif" alt="<%= l('previous') . ' ' . l 'page' %>"></a>
+ [
+ %= label_for custompage => ucfirst l 'page'
+ %= number_field start => (id => 'custompage') => (size => 3) => (placeholder => $current_page)
+ %= l 'of'
+ %= $total_pages
+ ]
+
+% my $h = $c->req->query_params->to_hash;
+% while (my ($k, $v) = each %$h) {
+% if ($k ne 'start') {
+ %= hidden_field $k => $v
+% }
+% }
+
+ <a href="<%= url_with->query({start => $next_page->[0]-1}) %>"><img src="/right.gif" alt="<%= l('next') . ' ' . l 'page' %>"></a>
+ <a href="<%= url_with->query({start => $last_page->[0]-1}) %>"><img src="/last.gif" alt="<%= l('last') . ' ' . l('page') %>"></a>
+ % end
+</div>
diff --git a/templates/layouts/mainlayout.html.ep b/templates/layouts/mainlayout.html.ep
index 9f36006..166f9ee 100644
--- a/templates/layouts/mainlayout.html.ep
+++ b/templates/layouts/mainlayout.html.ep
@@ -1,24 +1,33 @@
-<!DOCTYPE html>
+<!doctype html>
+
<html lang="<%= $lang %>">
- <head>
- <meta charset=UTF-8>
- <title>
- %= stash('title') || 'JWebmail'
- </title>
- %= stylesheet '/style.css'
- </head>
- <body>
- %= content
+<head>
+ <meta charset=utf-8>
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+
+ <link rel="stylesheet" href="https://unpkg.com/purecss@2.1.0/build/pure-min.css"
+ integrity="sha384-yHIFVG6ClnONEA5yB5DJXfW2/KC173DIQrYoZMEtBvGzmf0PKiGyNEqe9N6BNDBH" crossorigin="anonymous">
+ <link rel="stylesheet" href="https://unpkg.com/purecss@2.1.0/build/grids-responsive-min.css" />
+ %= stylesheet '/style2.css'
+
+ <title>
+ %= title || 'JWebmail'
+ </title>
+</head>
+
+<body>
+ %= content
+
+ <footer>
+ %= link_to about => begin
+ %= ucfirst l 'about'
+ JWebmail
+ % end
+ <br>
+ %= ucfirst l 'version'
+ %= $version
+ </footer>
+</body>
- <footer>
- %= link_to about => begin
- %= ucfirst l 'about'
- JWebmail
- % end
- <br />
- %= ucfirst l 'version'
- %= $version
- </footer>
- </body>
</html>
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>
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-23 17:16:37 +0000