aboutsummaryrefslogtreecommitdiff
path: root/themes/alps
diff options
context:
space:
mode:
authorDrew DeVault <sir@cmpwn.com>2020-05-20 10:04:54 -0400
committerSimon Ser <contact@emersion.fr>2020-05-20 17:47:52 +0200
commit50cb8bef77cf2a6c2feed3a25af4871b2e6792ff (patch)
treea6ef6b2ac02471c8525015e2e320d95c7968893e /themes/alps
parente4e410de1e3129fe7832e2bbe6326719c3e4d813 (diff)
downloadalps-50cb8bef77cf2a6c2feed3a25af4871b2e6792ff.tar.gz
alps-50cb8bef77cf2a6c2feed3a25af4871b2e6792ff.zip
alps theme: add contact edit/create
Diffstat (limited to 'themes/alps')
-rw-r--r--themes/alps/assets/style.css43
-rw-r--r--themes/alps/update-address-object.html42
2 files changed, 75 insertions, 10 deletions
diff --git a/themes/alps/assets/style.css b/themes/alps/assets/style.css
index eab050b..c62fbbc 100644
--- a/themes/alps/assets/style.css
+++ b/themes/alps/assets/style.css
@@ -157,16 +157,32 @@ aside a.new.active {
}
aside a.new.active,
-main.compose {
+main.compose,
+main.new-contact {
background-color: #f6fff6;
}
-main.compose { flex: 1 auto; padding: 1rem; }
-main.compose form { flex: 1 auto; display: flex; flex-direction: column; }
-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,
+main.new-contact { flex: 1 auto; padding: 1rem; }
+
+main.compose form,
+main.new-contact form { flex: 1 auto; display: flex; flex-direction: column; }
+
+main.compose form label,
+main.new-contact form label { margin-top: 5px; }
+
+main.compose form label span,
+/* TODO: CSS grid this */
+main.new-contact form label span { display: inline-block; font-weight: bold; min-width: 150px; }
+
+main.compose form input,
+main.new-contact form input { width: 80%; }
+
+main.compose form textarea,
+main.new-contact form textarea { flex: 1 auto; resize: none; margin-top: 1rem; }
+
+main.compose h1 { margin: 0; }
+
main table { border-collapse: collapse; width: 100%; border: 1px solid #eee; }
main table td { white-space: nowrap; padding: 0.3rem; color: #757373;
overflow: hidden;
@@ -222,19 +238,26 @@ main.contact dl {
grid-gap: 1rem;
}
-main.compose .actions {
+main.compose .actions,
+main.new-contact .actions {
display: flex;
flex-direction: row;
align-items: center;
+ background: transparent;
+ padding-left: 0;
+ margin-top: 0.3rem;
}
main.compose .actions button,
-main.compose .actions .button-link {
+main.compose .actions .button-link,
+main.new-contact .actions button,
+main.new-contact .actions .button-link {
padding: 0.4rem 1rem 0.35rem;
font-weight: bold;
}
-main.compose .actions > *:not(:last-child) {
+main.compose .actions > *:not(:last-child),
+main.new-contact .actions > *:not(:last-child) {
margin-right: 1rem;
}
diff --git a/themes/alps/update-address-object.html b/themes/alps/update-address-object.html
new file mode 100644
index 0000000..52644d0
--- /dev/null
+++ b/themes/alps/update-address-object.html
@@ -0,0 +1,42 @@
+{{template "head.html" .}}
+{{template "nav.html" .}}
+
+<div class="page-wrap">
+ <aside>
+ <a href="/contacts/create" class="new active">New contact</a>
+ <!-- TODO: fetch list of address books -->
+ <a href="#">{{.AddressBook.Name}}</a>
+ <a href="#">Personal</a>
+ </aside>
+
+ <div class="container">
+ <main class="new-contact">
+ <form method="post">
+ <h2>
+ {{if .Card}}Edit{{else}}Create{{end}} contact
+ </h2>
+
+ <label>
+ <span>Name</span>
+ <input type="text" name="fn" id="fn" value="{{.Card.PreferredValue "FN"}}" />
+ </label>
+ <label>
+ <span>Email addresses</span>
+ <input
+ type="email"
+ name="emails"
+ id="emails"
+ value="{{join (.Card.Values "EMAIL") ", "}}"
+ multiple />
+ </label>
+
+ <div class="actions">
+ <button type="submit">Save</button>
+ <a class="button-link" href="/contacts">Cancel</a>
+ </div>
+ </form>
+ </main>
+ </div>
+</div>
+
+{{template "foot.html"}}