From a6e6f8be88a93699765f25aee0e6109a3eb0b307 Mon Sep 17 00:00:00 2001 From: "Jannis M. Hoffmann" Date: Tue, 3 May 2022 18:22:43 +0200 Subject: reworked templates based on purecss --- CHANGES.md | 8 +++ lang/en.lang | 3 +- public/style.css | 18 ++--- public/style2.css | 95 +++++++++++++++++++++++++ templates/_pagination1.html.ep | 5 -- templates/_pagination2.html.ep | 22 ------ templates/error.html.ep | 3 +- templates/headers/_display_bot_nav.html.ep | 53 +++++++------- templates/headers/_display_folders.html.ep | 29 ++++++++ templates/headers/_display_headers.html.ep | 107 ++++++++++++++++------------- templates/headers/_display_top_nav.html.ep | 49 ++++++------- templates/headers/_displayfolders.html.ep | 32 --------- templates/headers/_pagination1.html.ep | 7 ++ templates/headers/_pagination2.html.ep | 22 ++++++ templates/layouts/mainlayout.html.ep | 49 +++++++------ templates/webmail/about.html.ep | 106 ++++++++++++++-------------- templates/webmail/displayheaders.html.ep | 44 ++++-------- templates/webmail/login.html.ep | 69 +++++++------------ templates/webmail/readmail.html.ep | 70 ++++++++++--------- templates/webmail/writemail.html.ep | 61 ++++++++-------- 20 files changed, 463 insertions(+), 389 deletions(-) create mode 100644 public/style2.css delete mode 100644 templates/_pagination1.html.ep delete mode 100644 templates/_pagination2.html.ep create mode 100644 templates/headers/_display_folders.html.ep delete mode 100644 templates/headers/_displayfolders.html.ep create mode 100644 templates/headers/_pagination1.html.ep create mode 100644 templates/headers/_pagination2.html.ep 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 @@ -← -↞ -[<%= join(' ', ucfirst l('page'), $current_page, l('of'), $total_pages) %>] -↠ -→ 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 @@ - <%= l('first') . ' ' . l 'page' %>\ - <%= l('previous') . ' ' . l 'page' %> - -%= 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 - - <%= l('next') . ' ' . l 'page' %> \ - <%= l('last') . ' ' . l('page') %> 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 @@ - + + 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 @@ - - - - - - - - - - - - - - - -
- %= include '_pagination1'; - - : - - - %= 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 - -
- +
+ +
+ %= include 'headers/_pagination1' +
+ +
+ + +
+ +
+ %= form_for move => (id => 'move-mail') => (class => 'pure-form') => 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') => (class => 'pure-button') +
+ % end +
+ +