alps theme: add contact details page

2 files changed, 59 insertions, 1 deletions

diff --git a/themes/alps/address-object.html b/themes/alps/address-object.html
new file mode 100644
index 0000000..25fa0c4
--- /dev/null
+++ b/themes/alps/address-object.html
@@ -0,0 +1,50 @@
+{{template "head.html" .}}
+{{template "nav.html" .}}
+
+<div class="page-wrap">
+  <aside>
+    <a href="/contacts/create" class="new">New contact</a>
+    <!-- TODO: fetch list of address books -->
+    <a href="#" class="active">{{.AddressBook.Name}}</a>
+    <a href="#">Personal</a>
+  </aside>
+
+  <div class="container">
+    <main class="contact">
+      <section class="actions">
+        <div class="actions-wrap">
+          <div class="actions-message">
+            <div class="action-group">
+              <a href="/contacts" class="button-link">« Back</a>
+            </div>
+            <div class="action-group">
+              <a href="{{.AddressObject.URL}}/edit" class="button-link">
+                Edit
+              </a>
+            </div>
+            <form
+              class="action-group"
+              action="{{.AddressObject.URL}}/delete"
+              method="post"
+            >
+              <button type="submit">Delete</button>
+            </form>
+          </div>
+        </div>
+      </section>
+
+      <section class="details">
+        {{$fn := .AddressObject.Card.Value "FN"}}
+        <h1>{{$fn}}</h1>
+        <dl>
+          {{range .AddressObject.Card.Values "EMAIL"}}
+          <dt>Email address</dt>
+          <dd><a href="/compose?to={{.}}">{{.}}</a></dd>
+          {{end}}
+        </dl>
+      </section>
+    </main>
+  </div>
+</div>
+
+{{template "foot.html"}}
diff --git a/themes/alps/assets/style.css b/themes/alps/assets/style.css
index 810452d..eab050b 100644
--- a/themes/alps/assets/style.css
+++ b/themes/alps/assets/style.css
@@ -184,7 +184,8 @@ main.message th { width: 5%;}
 main.message h1 { font-size: 1.2rem; padding: 0.5rem;}
 
 main.message pre,
-main.message iframe {
+main.message iframe,
+main.contact .details {
   flex: 1 auto;
   padding: 1rem;
   margin: 0.3rem 0 0 0;
@@ -214,6 +215,13 @@ main.message .message-header .parts ul {
   margin-left: 1rem;
 }
 
+main.contact dl {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-template-rows: 1fr;
+  grid-gap: 1rem;
+}
+
 main.compose .actions {
   display: flex;
   flex-direction: row;