diff options
| -rw-r--r-- | plugins/carddav/routes.go | 2 | ||||
| -rw-r--r-- | themes/alps/assets/style.css | 43 | ||||
| -rw-r--r-- | themes/alps/update-address-object.html | 42 |
3 files changed, 77 insertions, 10 deletions
diff --git a/plugins/carddav/routes.go b/plugins/carddav/routes.go index ea6030d..368f129 100644 --- a/plugins/carddav/routes.go +++ b/plugins/carddav/routes.go @@ -29,6 +29,7 @@ type AddressObjectRenderData struct { type UpdateAddressObjectRenderData struct { alps.BaseRenderData + AddressBook *carddav.AddressBook AddressObject *carddav.AddressObject // nil if creating a new contact Card vcard.Card } @@ -203,6 +204,7 @@ func registerRoutes(p *plugin) { return ctx.Render(http.StatusOK, "update-address-object.html", &UpdateAddressObjectRenderData{ BaseRenderData: *alps.NewBaseRenderData(ctx), + AddressBook: addressBook, AddressObject: ao, Card: card, }) 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"}} |