From 7456c9574cfe5cffb26aa2c8abe72682308d5fd5 Mon Sep 17 00:00:00 2001 From: Drew DeVault Date: Wed, 13 May 2020 14:47:56 -0400 Subject: alps: theme contact list page --- themes/alps/address-book.html | 47 ++++++++++++++++++++++++++++++++++++++++ themes/alps/assets/style.css | 45 ++++++++++++++++++++++++++------------ themes/alps/compose.html | 2 +- themes/alps/contacts-header.html | 33 ++++++++++++++++++++++++++++ themes/alps/mailbox.html | 2 +- themes/alps/message.html | 2 +- themes/alps/nav.html | 21 +++++++++++++++--- 7 files changed, 132 insertions(+), 20 deletions(-) create mode 100644 themes/alps/address-book.html create mode 100644 themes/alps/contacts-header.html (limited to 'themes') diff --git a/themes/alps/address-book.html b/themes/alps/address-book.html new file mode 100644 index 0000000..60292bf --- /dev/null +++ b/themes/alps/address-book.html @@ -0,0 +1,47 @@ +{{template "head.html" .}} +{{template "nav.html" .}} + +
+ + +
+
+
+
+ {{ template "contacts-header.html" . }} +
+ +
+
+ {{range .AddressObjects}} +
+ +
+
+ + {{.Card.Value "FN"}} + +
+
+ {{$email := .Card.PreferredValue "EMAIL"}} + {{if $email}} + {{$email}} + {{end}} +
+ {{end}} +
+
+ +
+ {{ template "contacts-header.html" . }} +
+
+
+
+ +{{template "foot.html"}} diff --git a/themes/alps/assets/style.css b/themes/alps/assets/style.css index 5f3a59b..c0867c1 100644 --- a/themes/alps/assets/style.css +++ b/themes/alps/assets/style.css @@ -131,8 +131,8 @@ main { flex: 1 100%; display: flex; flex-direction: column; padding: 0.5rem 1rem aside a.active, main { background-color: #f6f6f6; } -aside a.compose-mail.active { color: #008d47; } -aside a.compose-mail.active, +aside a.new.active { color: #008d47; } +aside a.new.active, main.compose { background-color: #f6fff6; } main.compose { flex: 1 auto; padding: 1rem; } main.compose form { flex: 1 auto; display: flex; flex-direction: column; } @@ -231,7 +231,7 @@ main.compose .actions > *:not(:last-child) { border-right: 1px solid #f2f2f2; } -aside .compose-mail { +aside .new { color: #008d47; font-weight: bold; /*background-color: #f5fcf2;*/ @@ -252,7 +252,8 @@ main table tfoot { background-color: white; } -.message-list { +.message-list, +.contact-list { display: flex; } @@ -267,11 +268,13 @@ main table tfoot { padding: 0.3rem; } -.message-list .actions:first-child { +.message-list .actions:first-child, +.contact-list .actions:first-child { border-bottom: 1px solid #e0e0e0; } -.message-list .actions:last-child { +.message-list .actions:last-child, +.contact-list .actions:last-child { border-top: 1px solid #e0e0e0; } @@ -287,12 +290,17 @@ main table tfoot { border-bottom-left-radius: 0; } -.message-list .actions-wrap { +.actions-wrap { + display: flex; flex-grow: 1; + flex-direction: row; } -.actions-wrap { display: flex; flex-direction: row; } -.actions-search { display: flex; flex-direction: row; flex-grow: 1; } +.actions-search { + display: flex; + flex-direction: row; + flex-grow: 1; +} .actions-pagination { margin-left: 1rem; @@ -316,19 +324,21 @@ main table tfoot { flex-grow: 1; } -.actions-message { +.actions-message, +.actions-contacts { display: flex; flex-direction: row; flex-grow: 1; align-items: center; } -.message-list-checkbox { - display: none; +.message-list-checkbox, +.contact-list-checkbox { align-self: center; } -.message-list .messages { +.message-list .messages, +.contact-list .contacts { flex-grow: 1; } @@ -338,7 +348,14 @@ main table tfoot { grid-template-rows: auto; } -.message-list .messages .message-grid > * { +.contact-grid { + display: grid; + grid-template-columns: auto 1fr 3fr; + grid-template-rows: auto; +} + +.message-list .messages .message-grid > *, +.contact-list .contacts .contact-grid > * { white-space: nowrap; padding: 0.3rem; overflow: hidden; diff --git a/themes/alps/compose.html b/themes/alps/compose.html index fe951e2..0975aad 100644 --- a/themes/alps/compose.html +++ b/themes/alps/compose.html @@ -4,7 +4,7 @@