diff options
| author | Drew DeVault <sir@cmpwn.com> | 2020-05-13 12:29:39 -0400 |
|---|---|---|
| committer | Simon Ser <contact@emersion.fr> | 2020-05-13 19:55:41 +0200 |
| commit | e39879ec9ab9613e1555eb7fc164d14b9cf6f8fe (patch) | |
| tree | 9d8da449adb47607a1b5cab14e4ef26cfdcf9c53 /themes/alps/mailbox.html | |
| parent | aab1f866f6185329fca31a8bbe0dc74aa5416302 (diff) | |
| download | alps-e39879ec9ab9613e1555eb7fc164d14b9cf6f8fe.tar.gz alps-e39879ec9ab9613e1555eb7fc164d14b9cf6f8fe.zip | |
alps theme: overhaul tables and action lists
This patch contains a whole lot of layout improvements for the alps
theme, mainly replacing the table soup with flexbox and CSS grids, and
fixing up a number of loose ends. This gives us a lot more flexibility
over how the page is laid out. I also cleaned up a lot of other
low-hanging fruit in the layout & styles.
Diffstat (limited to 'themes/alps/mailbox.html')
| -rw-r--r-- | themes/alps/mailbox.html | 70 |
1 files changed, 35 insertions, 35 deletions
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> |