From e39879ec9ab9613e1555eb7fc164d14b9cf6f8fe Mon Sep 17 00:00:00 2001
From: Drew DeVault <sir@cmpwn.com>
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/mailbox.html | 70 ++++++++++++++++++++++++------------------------
 1 file changed, 35 insertions(+), 35 deletions(-)

(limited to 'themes/alps/mailbox.html')

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>
-- 
cgit v1.2.3