aboutsummaryrefslogtreecommitdiff
path: root/themes
diff options
context:
space:
mode:
Diffstat (limited to 'themes')
-rw-r--r--themes/alps/assets/style.css129
-rw-r--r--themes/alps/compose.html5
-rw-r--r--themes/alps/mailbox.html70
-rw-r--r--themes/alps/message.html273
-rw-r--r--themes/alps/messages-header.html82
5 files changed, 320 insertions, 239 deletions
diff --git a/themes/alps/assets/style.css b/themes/alps/assets/style.css
index 16db44c..4ef8661 100644
--- a/themes/alps/assets/style.css
+++ b/themes/alps/assets/style.css
@@ -140,8 +140,6 @@ main.compose form label { margin-top: 5px; }
main.compose form label span { display: inline-block; font-weight: bold; min-width: 100px; }
main.compose form input { width: 80%; }
main.compose form textarea { flex: 1 auto; resize: none; margin-top: 1rem; }
-main.compose button[type="submit"] { padding: 0.4rem 1rem 0.35rem; font-weight: bold; }
-main.compose .actions { text-align: right; }
main table { border-collapse: collapse; width: 100%; border: 1px solid #eee; }
main table td { white-space: nowrap; padding: 0.3rem; color: #757373;
overflow: hidden;
@@ -159,29 +157,49 @@ main.message table { background-color: white; }
main.message th { width: 5%;}
main.message h1 { font-size: 1.2rem; padding: 0.5rem;}
-.message-list-subject a { color: #77c; }
+main.compose .actions {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+}
+main.compose .actions button,
+main.compose .actions .button-link {
+ padding: 0.4rem 1rem 0.35rem;
+ font-weight: bold;
+}
-.message-list-unread .message-list-sender,
-.message-list-unread .message-list-subject,
-.message-list-unread .message-list-date { font-weight: bold; }
+main.compose .actions > *:not(:last-child) {
+ margin-right: 1rem;
+}
-.message-list-unread .message-list-sender,
-.message-list-unread .message-list-date { color: black;}
+.message-list-subject a { color: #77c; }
+
+.message-list-unread.message-list-sender,
+.message-list-unread.message-list-subject,
+.message-list-unread.message-list-date { font-weight: bold; }
+
+.message-list-unread.message-list-sender,
+.message-list-unread.message-list-date { color: black;}
.message-list-date {
text-align: right;
- padding-right: 0.5rem;
}
-.message-list-unread .message-list-subject a { color: #00c; }
+.message-list-unread.message-list-subject a { color: #00c; }
.message-list-unread {
background-color: white;
+ opacity: 1;
+}
+
+.message-list-unread:nth-child(4n+1) {
border-left: 1px solid #f2f2f2;
+}
+
+.message-list-unread:nth-child(4n+4) {
border-right: 1px solid #f2f2f2;
}
-.message-list-unread td { opacity: 1; }
aside .compose-mail {
color: #008d47;
@@ -204,23 +222,89 @@ main table tfoot {
background-color: white;
}
-th form { display: inline; }
-th input[type="text"] {
+.message-list {
+ display: flex;
+}
+
+.message-list section {
+ width: 100%;
+}
+
+.actions {
+ display: flex;
+ flex-direction: row;
+ background-color: white;
+ padding: 0.3rem;
+}
+
+.message-list .actions:first-child {
+ border-bottom: 1px solid #e0e0e0;
+}
+
+.message-list .actions:last-child {
+ border-top: 1px solid #e0e0e0;
+}
+
+.actions input[type="text"] {
flex: 1;
margin: 0;
}
-th input[type="text"] + button {
+
+.actions input[type="text"] + button {
margin-left: -4rem;
width: 4rem;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
+.message-list .actions-wrap {
+ flex-grow: 1;
+}
+
.actions-wrap { display: flex; flex-direction: row; }
-.actions-message { margin-right: 1rem; }
.actions-pagination { margin-left: 1rem; display: flex; flex-direction: row; }
-.actions-search { flex: 1 auto; display: flex; flex-direction: row; }
+.actions-search { display: flex; flex-direction: row; flex-grow: 1; }
+
+.actions-wrap .action-group {
+ margin-left: 0.3rem;
+}
+
+.action-group.grow {
+ flex-grow: 1;
+}
+
+.actions-message {
+ display: flex;
+ flex-direction: row;
+ flex-grow: 1;
+ align-items: center;
+}
+
+.message-list-checkbox {
+ display: none;
+ align-self: center;
+}
+.message-list .messages {
+ flex-grow: 1;
+}
+
+.message-grid {
+ display: grid;
+ grid-template-columns: auto 1fr 10fr auto;
+ grid-template-rows: auto;
+}
+
+.message-list .messages .message-grid > * {
+ white-space: nowrap;
+ padding: 0.3rem;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.followups a:not(:first-child) {
+ margin-left: 0.3rem;
+}
input[type="submit"],
.button,
@@ -238,6 +322,7 @@ button,
border: 1px solid #ddd;
border-radius: 3px;
vertical-align: middle;
+ color: #000;
}
.button-link {
border: 1px solid transparent;
@@ -249,21 +334,23 @@ button,
input[type="submit"],
.button,
-button {
+button,
+.button-link {
background-color: #f5f5f5;
border: 1px solid #ddd;
color: black;
}
.button:hover,
-button:hover {
+button:hover,
+.button-link:hover {
background-color: white;
+ text-decoration: none;
}
.button:active,
-button:active {
+button:active,
+.button-link:active {
color: #ccc;
background-color: #f8f8f8;
}
-
-.message-list-checkbox { display: none; }
diff --git a/themes/alps/compose.html b/themes/alps/compose.html
index 6bd516e..fe951e2 100644
--- a/themes/alps/compose.html
+++ b/themes/alps/compose.html
@@ -29,10 +29,9 @@
<textarea name="text" class="body">{{.Message.Text}}</textarea>
<div class="actions">
- <a href="/mailbox/INBOX">Cancel</a>
- &nbsp;&nbsp;
- <button type="submit" name="save_as_draft">Save as draft</button>
<button type="submit">Send Message</button>
+ <button type="submit" name="save_as_draft">Save as draft</button>
+ <a class="button-link" href="/mailbox/INBOX">Cancel</a>
</div>
</form>
diff --git a/themes/alps/mailbox.html b/themes/alps/mailbox.html
index 8e3331f..ab09318 100644
--- a/themes/alps/mailbox.html
+++ b/themes/alps/mailbox.html
@@ -23,43 +23,43 @@
<div class="container">
<form id="messages-form" method="post"></form>
- <main>
- <table>
- <thead>
- {{ template "messages-header.html" . }}
- </thead>
- <tbody>
+ <main class="message-list">
+ <section class="actions">
+ {{ template "messages-header.html" . }}
+ </section>
+ <section class="messages">
+ <div class="message-grid">
{{range .Messages}}
- <tr data="{{.Flags}}" class="message-list-item {{ if not (.HasFlag "\\Seen") }}message-list-unread{{ end }}">
- <td width="1%" class="message-list-checkbox">
- <input type="checkbox" name="uids" value="{{.Uid}}" form="messages-form">
- </td>
- <td width="10%" class="message-list-sender">
- {{ range .Envelope.From }}
- {{ if .PersonalName }}
- {{.PersonalName}}
- {{ else }}
- {{.MailboxName}}@{{.HostName}}
- {{ end }}
- {{ end }}
- </td>
- <td width="80%" class="message-list-subject">
- <a href="{{.URL}}?part={{.TextPartName}}">
- {{if .Envelope.Subject}}
- {{.Envelope.Subject}}
- {{else}}
- (No subject)
- {{end}}
- </a>
- </td>
- <td width="9%" nowrap="" class="message-list-date">{{ .Envelope.Date | formatdate }}</td>
- </tr>
+ <div class="message-list-checkbox message-list-item {{ if not (.HasFlag "\\Seen") }}message-list-unread{{ end }}">
+ <input type="checkbox" name="uids" value="{{.Uid}}" form="messages-form">
+ </div>
+ <div class="message-list-sender message-list-item {{ if not (.HasFlag "\\Seen") }}message-list-unread{{ end }}">
+ {{ range .Envelope.From }}
+ {{ if .PersonalName }}
+ {{.PersonalName}}
+ {{ else }}
+ {{.MailboxName}}@{{.HostName}}
+ {{ end }}
{{ end }}
- </tbody>
- <tfoot>
- {{ template "messages-header.html" .}}
- </tfoot>
- </table>
+ </div>
+ <div class="message-list-subject message-list-item {{ if not (.HasFlag "\\Seen") }}message-list-unread{{ end }}">
+ <a href="{{.URL}}?part={{.TextPartName}}">
+ {{if .Envelope.Subject}}
+ {{.Envelope.Subject}}
+ {{else}}
+ (No subject)
+ {{end}}
+ </a>
+ </div>
+ <div class="message-list-date message-list-item {{ if not (.HasFlag "\\Seen") }}message-list-unread{{ end }}">
+ {{ .Envelope.Date | formatdate }}
+ </div>
+ {{ end }}
+ </div>
+ </section>
+ <section class="actions">
+ {{ template "messages-header.html" . }}
+ </section>
</main>
</div>
</div>
diff --git a/themes/alps/message.html b/themes/alps/message.html
index 9257967..da4cb9e 100644
--- a/themes/alps/message.html
+++ b/themes/alps/message.html
@@ -24,148 +24,141 @@
<div class="container">
<main class="message">
-
-
-<table>
- <tr>
- <tr>
- <th colspan="2">
- <div class="actions-wrap">
- <div class="actions-message">
- {{$back := printf "%v?page=%v" .Mailbox.URL .MailboxPage}}
- <a href="{{$back}}" class="button-link">« Back</a>
- &nbsp;&nbsp;
-
- {{ if and (ne .Mailbox.Name "Archive") (ne .Mailbox.Name "Drafts") (ne .Mailbox.Name "Sent") }}
- <form method="post" action="/message/{{.Mailbox.Name | pathescape}}/move">
- <input type="hidden" name="uids" value="{{.Message.Uid}}">
- <input type="hidden" name="to" value="Archive">
- <input type="hidden" name="next" value="{{$back}}">
- <button>Archive</button>
- </form>
- {{ end }}
-
- {{ if and (ne .Mailbox.Name "INBOX") (ne .Mailbox.Name "Sent") (ne .Mailbox.Name "Drafts") }}
- <form method="post" action="/message/{{.Mailbox.Name | pathescape}}/move">
- <input type="hidden" name="uids" value="{{.Message.Uid}}">
- <input type="hidden" name="to" value="INBOX">
- <button>
- {{ if (eq .Mailbox.Name "Junk") }}
- Not Spam
- {{ else }}
- Move to Inbox
- {{ end }}
- </button>
- </form>
- {{ end }}
-
- {{ if or (eq .Mailbox.Name "INBOX") (eq .Mailbox.Name "Trash") }}
- <form method="post" action="/message/{{.Mailbox.Name | pathescape}}/move">
- <input type="hidden" name="uids" value="{{.Message.Uid}}">
- <input type="hidden" name="next" value="{{$back}}">
- &nbsp;&nbsp;
- <input type="hidden" name="to" value="Junk">
- <button>Report Spam</button>
- </form>
- {{ end }}
-
- {{ if or (eq .Mailbox.Name "Trash") (eq .Mailbox.Name "Junk") }}
- <form method="post" action="/message/{{.Mailbox.Name | pathescape}}/delete">
- <input type="hidden" name="uids" value="{{.Message.Uid}}">
- <input type="hidden" name="next" value="{{$back}}">
- <button>Delete Permanently</button>
- </form>
- {{ else }}
- <form method="post" action="/message/{{.Mailbox.Name | pathescape}}/move">
- <input type="hidden" name="uids" value="{{.Message.Uid}}">
- <input type="hidden" name="next" value="{{$back}}">
- &nbsp;&nbsp;
- <input type="hidden" name="to" value="Trash">
- <button>Delete</button>
- </form>
- {{ end }}
-
- <form method="post" action="/message/{{.Mailbox.Name | pathescape}}/flag">
- <input type="hidden" name="uids" value="{{.Message.Uid}}">
- <input type="hidden" name="action" value="remove">
- <input type="hidden" name="flags" value="\Seen">
- <input type="hidden" name="next" value="{{$back}}">
- <button>Mark&nbsp;Unread</button>
- </form>
-
- <form method="post" action="/message/{{.Mailbox.Name | pathescape}}/move">
- <input type="hidden" name="uids" value="{{.Message.Uid}}">
- <select name="to">
- {{range .Mailboxes}}
- <option value="{{.Name}}" {{if eq .Name $.Mailbox.Name}}selected>Move to...{{else}}>{{.Name}}{{ end }}</option>
- {{end}}
- </select>
- <input type="submit" value="Move">
- </form>
- &nbsp;&nbsp;
-
- {{if .Message.HasFlag "\\Draft"}}
- <a href="{{.Message.URL}}/edit?part={{.Part.PathString}}">Edit draft</a>
- {{else}}
- <a href="{{.Message.URL}}/reply?part={{.Part.PathString}}">Reply</a>
- &nbsp;&nbsp;
- <a href="{{.Message.URL}}/forward?part={{.Part.PathString}}">Forward</a>
+ <section class="actions">
+ <div class="actions-wrap">
+ <div class="actions-message">
+ {{$back := printf "%v?page=%v" .Mailbox.URL .MailboxPage}}
+ <a href="{{$back}}" class="button-link">« Back</a>
+
+ {{ if and (ne .Mailbox.Name "Archive") (ne .Mailbox.Name "Drafts") (ne .Mailbox.Name "Sent") }}
+ <form class="action-group" method="post" action="/message/{{.Mailbox.Name | pathescape}}/move">
+ <input type="hidden" name="uids" value="{{.Message.Uid}}">
+ <input type="hidden" name="to" value="Archive">
+ <input type="hidden" name="next" value="{{$back}}">
+ <button>Archive</button>
+ </form>
+ {{ end }}
+
+ {{ if and (ne .Mailbox.Name "INBOX") (ne .Mailbox.Name "Sent") (ne .Mailbox.Name "Drafts") }}
+ <form class="action-group" method="post" action="/message/{{.Mailbox.Name | pathescape}}/move">
+ <input type="hidden" name="uids" value="{{.Message.Uid}}">
+ <input type="hidden" name="to" value="INBOX">
+ <button>
+ {{ if (eq .Mailbox.Name "Junk") }}
+ Not Spam
+ {{ else }}
+ Move to Inbox
+ {{ end }}
+ </button>
+ </form>
+ {{ end }}
+
+ {{ if or (eq .Mailbox.Name "INBOX") (eq .Mailbox.Name "Trash") }}
+ <form class="action-group" method="post" action="/message/{{.Mailbox.Name | pathescape}}/move">
+ <input type="hidden" name="uids" value="{{.Message.Uid}}">
+ <input type="hidden" name="next" value="{{$back}}">
+ <input type="hidden" name="to" value="Junk">
+ <button>Report Spam</button>
+ </form>
+ {{ end }}
+
+ {{ if or (eq .Mailbox.Name "Trash") (eq .Mailbox.Name "Junk") }}
+ <form class="action-group" method="post" action="/message/{{.Mailbox.Name | pathescape}}/delete">
+ <input type="hidden" name="uids" value="{{.Message.Uid}}">
+ <input type="hidden" name="next" value="{{$back}}">
+ <button>Delete Permanently</button>
+ </form>
+ {{ else }}
+ <form class="action-group" method="post" action="/message/{{.Mailbox.Name | pathescape}}/move">
+ <input type="hidden" name="uids" value="{{.Message.Uid}}">
+ <input type="hidden" name="next" value="{{$back}}">
+ <input type="hidden" name="to" value="Trash">
+ <button>Delete</button>
+ </form>
+ {{ end }}
+
+ <form class="action-group" method="post" action="/message/{{.Mailbox.Name | pathescape}}/flag">
+ <input type="hidden" name="uids" value="{{.Message.Uid}}">
+ <input type="hidden" name="action" value="remove">
+ <input type="hidden" name="flags" value="\Seen">
+ <input type="hidden" name="next" value="{{$back}}">
+ <button>Mark&nbsp;Unread</button>
+ </form>
+
+ <form class="action-group" method="post" action="/message/{{.Mailbox.Name | pathescape}}/move">
+ <input type="hidden" name="uids" value="{{.Message.Uid}}">
+ <select class="action-group" name="to">
+ {{range .Mailboxes}}
+ <option value="{{.Name}}" {{if eq .Name $.Mailbox.Name}}selected>Move to...{{else}}>{{.Name}}{{ end }}</option>
+ {{end}}
+ </select>
+ <button class="action-group" type="submit">Move</button>
+ </form>
+
+ <span class="followups">
+ {{if .Message.HasFlag "\\Draft"}}
+ <a class="action-group button-link" href="{{.Message.URL}}/edit?part={{.Part.PathString}}">Edit draft</a>
+ {{else}}
+ <a class="action-group button-link" href="{{.Message.URL}}/reply?part={{.Part.PathString}}">Reply</a>
+ <a class="action-group button-link" href="{{.Message.URL}}/forward?part={{.Part.PathString}}">Forward</a>
+ {{end}}
+ </span>
+ </div>
+ </div>
+ </section>
+
+ <table>
+ <tr>
+ <th colspan="2">
+ <h1>
+ {{if .Message.Envelope.Subject}}
+ {{.Message.Envelope.Subject}}
+ {{else}}
+ (No subject)
+ {{end}}
+ </h1>
+ </th>
+ </tr>
+ <tr>
+ <th>From:</th>
+ <td>{{template "addr-list" .Message.Envelope.From}}</td>
+ </tr>
+ <tr>
+ <th>Date:</th>
+ <td>{{.Message.Envelope.Date | formatdate}}</td>
+ </tr>
+ <tr>
+ <th>To:</th><td>{{template "addr-list" .Message.Envelope.To}}</td>
+ </tr>
+ {{if .Message.Envelope.Cc}}
+ <tr>
+ <th>Cc:</th><td>{{template "addr-list" .Message.Envelope.Cc}}</td>
+ </tr>
{{end}}
- </div>
- </div>
- </th>
-</tr>
+ {{if .Message.Envelope.Bcc}}
+ <tr>
+ <th>Bcc:</th>
+ <td>{{template "addr-list" .Message.Envelope.Bcc}}</td>
+ </tr>
+ {{ end }}
+ </table>
- </tr>
- <tr>
- <th colspan="2">
- <h1>
- {{if .Message.Envelope.Subject}}
- {{.Message.Envelope.Subject}}
- {{else}}
- (No subject)
+ {{define "addr-list"}}
+ {{range $i, $addr := .}}
+ {{if $i}},{{end}}
+ <strong>{{.PersonalName}}</strong>
+ &lt;<a href="/compose?to={{.Address}}">{{.Address}}</a>&gt;
{{end}}
- </h1>
- </th>
- </tr>
-
- <tr>
- <th>From:</th>
- <td>{{template "addr-list" .Message.Envelope.From}}</td>
- </tr>
- <tr>
- <th>Date:</th>
- <td>{{.Message.Envelope.Date | formatdate}}</td>
- </tr>
- <tr>
- <th>To:</th><td>{{template "addr-list" .Message.Envelope.To}}</td>
- </tr>
- {{if .Message.Envelope.Cc}}
- <tr>
- <th>Cc:</th><td>{{template "addr-list" .Message.Envelope.Cc}}</td>
- </tr>
- {{end}}
- {{if .Message.Envelope.Bcc}}
- <tr>
- <th>Bcc:</th>
- <td>{{template "addr-list" .Message.Envelope.Bcc}}</td>
- </tr>
- {{ end }}
-</table>
-
-{{define "addr-list"}}
- {{range $i, $addr := .}}
- {{if $i}},{{end}}
- <strong>{{.PersonalName}}</strong>
- &lt;<a href="/compose?to={{.Address}}">{{.Address}}</a>&gt;
- {{end}}
-{{end}}
-
-{{if .View}}
- {{.View}}
-{{else}}
- <p>Can't preview this message part.</p>
- <a href="{{.Message.Uid}}/raw?part={{.Part.PathString}}">Download</a>
-{{end}}
+ {{end}}
+
+ {{if .View}}
+ {{.View}}
+ {{else}}
+ <p>Can't preview this message part.</p>
+ <a href="{{.Message.Uid}}/raw?part={{.Part.PathString}}">Download</a>
+ {{end}}
+ </main>
+ </div>
+</div>
{{template "foot.html"}}
diff --git a/themes/alps/messages-header.html b/themes/alps/messages-header.html
index c183b6c..44cb78b 100644
--- a/themes/alps/messages-header.html
+++ b/themes/alps/messages-header.html
@@ -1,45 +1,47 @@
-<tr>
- <th width="1%" class="message-list-checkbox">
- <input type="checkbox" id="action-checkbox-all"/>
- </th>
- <th colspan="3">
- <div class="actions-wrap">
- <div class="actions-message">
- {{ if and (eq .Mailbox.Name "INBOX") (not (eq .Mailbox.Name "Archive")) }}
- <button form="messages-form" formaction="/message/{{.Mailbox.Name | pathescape}}/move?to=Archive">Archive</button>
- &nbsp;&nbsp;
- {{ end }}
+<div class="message-list-checkbox">
+ <input type="checkbox" id="action-checkbox-all"/>
+</div>
+<div class="actions-wrap">
+ <div class="actions-message">
+ <div class="action-group">
+ {{ if and (eq .Mailbox.Name "INBOX") (not (eq .Mailbox.Name "Archive")) }}
+ <button form="messages-form" formaction="/message/{{.Mailbox.Name | pathescape}}/move?to=Archive">Archive</button>
+ {{ end }}
+ </div>
- {{ if or (eq .Mailbox.Name "INBOX") (eq .Mailbox.Name "Trash") }}
- <button form="messages-form" formaction="/message/{{.Mailbox.Name | pathescape}}/move?to=Junk">Report Spam</button>
- {{ end }}
+ <div class="action-group">
+ {{ if or (eq .Mailbox.Name "INBOX") (eq .Mailbox.Name "Trash") }}
+ <button form="messages-form" formaction="/message/{{.Mailbox.Name | pathescape}}/move?to=Junk">Report Spam</button>
+ {{ end }}
+ </div>
- {{ if ne .Mailbox.Name "Trash"}}
- <button form="messages-form" formaction="/message/{{.Mailbox.Name | pathescape}}/move?to=Trash">Delete</button>
- {{ else }}
- <button form="messages-form" formaction="/message/{{.Mailbox.Name | pathescape}}/delete">Delete Permanently</button>
- {{ end }}
+ <div class="action-group">
+ {{ if ne .Mailbox.Name "Trash"}}
+ <button form="messages-form" formaction="/message/{{.Mailbox.Name | pathescape}}/move?to=Trash">Delete</button>
+ {{ else }}
+ <button form="messages-form" formaction="/message/{{.Mailbox.Name | pathescape}}/delete">Delete Permanently</button>
+ {{ end }}
+ </div>
- &nbsp;&nbsp;
- <a href="{{ .GlobalData.URL.String }}" class="button-link">Refresh</a>
- </div>
+ <div class="action-group">
+ <a href="{{ .GlobalData.URL.String }}" class="button-link">Refresh</a>
+ </div>
+ </div>
- <form action="" method="get" class="actions-search">
- <input type="text" name="query" value="{{.Query}}" placeholder="Search messages...">
- <button>Search</button>
- </form>
+ <form method="get" class="actions-search">
+ <input type="text" name="query" value="{{.Query}}" placeholder="Search messages...">
+ <button>Search</button>
+ </form>
- {{if or (ge .PrevPage 0) (ge .NextPage 0) }}
- <div class="actions-pagination">
- {{if ge .PrevPage 0}}
- {{if ge .PrevPage 1}}<a href="?page=0" class="button-link">«</a>{{ end }}
- <a href="?page={{.PrevPage}}" class="button-link">‹</a>
- {{end}}
- {{if ge .NextPage 0}}
- <a href="?page={{.NextPage}}" class="button-link">›</a>
- {{end}}
- </div>
- {{ end }}
- </div>
- </th>
-</tr>
+ {{if or (ge .PrevPage 0) (ge .NextPage 0) }}
+ <div class="actions-pagination">
+ {{if ge .PrevPage 0}}
+ {{if ge .PrevPage 1}}<a href="?page=0" class="button-link">«</a>{{ end }}
+ <a href="?page={{.PrevPage}}" class="button-link">‹</a>
+ {{end}}
+ {{if ge .NextPage 0}}
+ <a href="?page={{.NextPage}}" class="button-link">›</a>
+ {{end}}
+ </div>
+ {{ end }}
+</div>