From e39879ec9ab9613e1555eb7fc164d14b9cf6f8fe Mon Sep 17 00:00:00 2001 From: Drew DeVault Date: Wed, 13 May 2020 12:29:39 -0400 Subject: 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. --- themes/alps/assets/style.css | 129 +++++++++++++++--- themes/alps/compose.html | 5 +- themes/alps/mailbox.html | 70 +++++----- themes/alps/message.html | 273 +++++++++++++++++++-------------------- themes/alps/messages-header.html | 82 ++++++------ 5 files changed, 320 insertions(+), 239 deletions(-) (limited to 'themes/alps') 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 @@
- Cancel -    - + + Cancel
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 @@
-
- - - {{ template "messages-header.html" . }} - - +
+
+ {{ template "messages-header.html" . }} +
+
+
{{range .Messages}} -
- - - - - +
+ +
+
+ {{ range .Envelope.From }} + {{ if .PersonalName }} + {{.PersonalName}} + {{ else }} + {{.MailboxName}}@{{.HostName}} + {{ end }} {{ end }} -
- - {{ template "messages-header.html" .}} - -
- - - {{ range .Envelope.From }} - {{ if .PersonalName }} - {{.PersonalName}} - {{ else }} - {{.MailboxName}}@{{.HostName}} - {{ end }} - {{ end }} - - - {{if .Envelope.Subject}} - {{.Envelope.Subject}} - {{else}} - (No subject) - {{end}} - - {{ .Envelope.Date | formatdate }}
+
+
+ + {{if .Envelope.Subject}} + {{.Envelope.Subject}} + {{else}} + (No subject) + {{end}} + +
+
+ {{ .Envelope.Date | formatdate }} +
+ {{ end }} + + +
+ {{ template "messages-header.html" . }} +
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 @@
- - - - - - - - - - - - - - - - - - - - - - {{if .Message.Envelope.Cc}} - - - - {{end}} - {{if .Message.Envelope.Bcc}} - - - - - {{ end }} -
-
-
- {{$back := printf "%v?page=%v" .Mailbox.URL .MailboxPage}} - « Back -    - - {{ if and (ne .Mailbox.Name "Archive") (ne .Mailbox.Name "Drafts") (ne .Mailbox.Name "Sent") }} -
- - - - -
- {{ end }} - - {{ if and (ne .Mailbox.Name "INBOX") (ne .Mailbox.Name "Sent") (ne .Mailbox.Name "Drafts") }} -
- - - -
- {{ end }} - - {{ if or (eq .Mailbox.Name "INBOX") (eq .Mailbox.Name "Trash") }} -
- - -    - - -
- {{ end }} - - {{ if or (eq .Mailbox.Name "Trash") (eq .Mailbox.Name "Junk") }} -
- - - -
- {{ else }} -
- - -    - - -
- {{ end }} - -
- - - - - -
- -
- - - -
-    - - {{if .Message.HasFlag "\\Draft"}} - Edit draft - {{else}} - Reply -    - Forward +
+
+
+ {{$back := printf "%v?page=%v" .Mailbox.URL .MailboxPage}} + « Back + + {{ if and (ne .Mailbox.Name "Archive") (ne .Mailbox.Name "Drafts") (ne .Mailbox.Name "Sent") }} +
+ + + + +
+ {{ end }} + + {{ if and (ne .Mailbox.Name "INBOX") (ne .Mailbox.Name "Sent") (ne .Mailbox.Name "Drafts") }} +
+ + + +
+ {{ end }} + + {{ if or (eq .Mailbox.Name "INBOX") (eq .Mailbox.Name "Trash") }} +
+ + + + +
+ {{ end }} + + {{ if or (eq .Mailbox.Name "Trash") (eq .Mailbox.Name "Junk") }} +
+ + + +
+ {{ else }} +
+ + + + +
+ {{ end }} + +
+ + + + + +
+ +
+ + + +
+ + + {{if .Message.HasFlag "\\Draft"}} + Edit draft + {{else}} + Reply + Forward + {{end}} + +
+
+
+ + + + + + + + + + + + + + + + + {{if .Message.Envelope.Cc}} + + + {{end}} - - - - + {{if .Message.Envelope.Bcc}} + + + + + {{ end }} +
+

+ {{if .Message.Envelope.Subject}} + {{.Message.Envelope.Subject}} + {{else}} + (No subject) + {{end}} +

+
From:{{template "addr-list" .Message.Envelope.From}}
Date:{{.Message.Envelope.Date | formatdate}}
To:{{template "addr-list" .Message.Envelope.To}}
Cc:{{template "addr-list" .Message.Envelope.Cc}}
Bcc:{{template "addr-list" .Message.Envelope.Bcc}}
-
-

- {{if .Message.Envelope.Subject}} - {{.Message.Envelope.Subject}} - {{else}} - (No subject) + {{define "addr-list"}} + {{range $i, $addr := .}} + {{if $i}},{{end}} + {{.PersonalName}} + <{{.Address}}> {{end}} -

-
From:{{template "addr-list" .Message.Envelope.From}}
Date:{{.Message.Envelope.Date | formatdate}}
To:{{template "addr-list" .Message.Envelope.To}}
Cc:{{template "addr-list" .Message.Envelope.Cc}}
Bcc:{{template "addr-list" .Message.Envelope.Bcc}}
- -{{define "addr-list"}} - {{range $i, $addr := .}} - {{if $i}},{{end}} - {{.PersonalName}} - <{{.Address}}> - {{end}} -{{end}} - -{{if .View}} - {{.View}} -{{else}} -

Can't preview this message part.

- Download -{{end}} + {{end}} + + {{if .View}} + {{.View}} + {{else}} +

Can't preview this message part.

+ Download + {{end}} +
+
+ {{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 @@ - - - - - -
-
- {{ if and (eq .Mailbox.Name "INBOX") (not (eq .Mailbox.Name "Archive")) }} - -    - {{ end }} +
+ +
+
+
+
+ {{ if and (eq .Mailbox.Name "INBOX") (not (eq .Mailbox.Name "Archive")) }} + + {{ end }} +
- {{ if or (eq .Mailbox.Name "INBOX") (eq .Mailbox.Name "Trash") }} - - {{ end }} +
+ {{ if or (eq .Mailbox.Name "INBOX") (eq .Mailbox.Name "Trash") }} + + {{ end }} +
- {{ if ne .Mailbox.Name "Trash"}} - - {{ else }} - - {{ end }} +
+ {{ if ne .Mailbox.Name "Trash"}} + + {{ else }} + + {{ end }} +
-    - Refresh -
+
+ Refresh +
+
-
- - -
+
+ + +
- {{if or (ge .PrevPage 0) (ge .NextPage 0) }} -
- {{if ge .PrevPage 0}} - {{if ge .PrevPage 1}}«{{ end }} - ‹ - {{end}} - {{if ge .NextPage 0}} - › - {{end}} -
- {{ end }} -
- - + {{if or (ge .PrevPage 0) (ge .NextPage 0) }} +
+ {{if ge .PrevPage 0}} + {{if ge .PrevPage 1}}«{{ end }} + ‹ + {{end}} + {{if ge .NextPage 0}} + › + {{end}} +
+ {{ end }} +
-- cgit v1.2.3