admin: bigger avatars, detail photo top-right
Assisted-by: GLM-5.3 via pi
diff --git a/lib/pro_tacts/admin/contacts_index.rb b/lib/pro_tacts/admin/contacts_index.rb
index 7fce196..50b43c3 100644
--- a/lib/pro_tacts/admin/contacts_index.rb
+++ b/lib/pro_tacts/admin/contacts_index.rb
@@ -60,7 +60,7 @@ module ProTacts
def render_row(row)
li do
a(href: "/contacts/#{row.contact.id}") do
- render Avatar.new(contact: row.contact)
+ render Avatar.new(contact: row.contact, size: "lg")
div(style: "flex: 1; min-width: 0;") do
div(style: "font-weight: 550;") { row.contact.name || row.contact.id }
end
diff --git a/lib/pro_tacts/admin/contacts_show.rb b/lib/pro_tacts/admin/contacts_show.rb
index 6a3c1ac..a3eff22 100644
--- a/lib/pro_tacts/admin/contacts_show.rb
+++ b/lib/pro_tacts/admin/contacts_show.rb
@@ -29,8 +29,8 @@ module ProTacts
div(class: "card") do
div(class: "card-body") do
div(class: "detail-header") do
- render Avatar.new(contact: @contact, size: "lg")
h1(class: "type-h2", style: "margin: 0;") { @contact.name || @contact.id }
+ render Avatar.new(contact: @contact, size: "xl")
end
# Only rendered when there's something to show: an empty
# <dl> would still take up the gap card-body puts between
diff --git a/lib/pro_tacts/admin/upcoming_birthdays.rb b/lib/pro_tacts/admin/upcoming_birthdays.rb
index b43269a..d44bf6f 100644
--- a/lib/pro_tacts/admin/upcoming_birthdays.rb
+++ b/lib/pro_tacts/admin/upcoming_birthdays.rb
@@ -37,7 +37,7 @@ module ProTacts
contact = upcoming.contact
li do
a(href: "/contacts/#{contact.id}") do
- render Avatar.new(contact: contact)
+ render Avatar.new(contact: contact, size: "lg")
div(style: "flex: 1; min-width: 0;") do
div(style: "font-weight: 550;") { contact.name || contact.id }
div(class: "type-body-sm") { date_line(upcoming) }
diff --git a/public/admin.css b/public/admin.css
index 62718da..da0b773 100644
--- a/public/admin.css
+++ b/public/admin.css
@@ -85,7 +85,7 @@ section > h2 {
/* Both dashboard lists lead their rows with an avatar, and both are
growing rows taller than one line (the birthdays rows already are,
- the contacts rows will be). A 1.875rem avatar centered against
+ the contacts rows will be). A 2.25rem avatar centered against
multi-line text floats mid-row, so it leads from the top, level
with the name — no change today for single-line rows, where the
avatar is the tallest thing in the row either way. Scoped to
@@ -104,10 +104,28 @@ img.avatar {
object-fit: cover;
}
+/* The detail header's avatar, one step past Gloss's scale — its lg is
+ the dashboard rows' size, and the header's picture should anchor the
+ card the way a contacts app's does: bigger than the name beside it,
+ not level with it. With the top-right corner to itself, 5.5rem reads
+ as photo-dominant without crowding the type-h2; the initials ride
+ at step-3 to keep the same share of the circle the default sizes
+ give them, rather than floating small in the bigger box. */
+.avatar[data-size="xl"] {
+ --_size: 5.5rem;
+ font-size: var(--gl-step-3);
+}
+
+/* The detail card's masthead: the name in its own column at the left,
+ the avatar anchored top-right (grid rather than float because
+ .card-body is a flex column — floats on its children are ignored),
+ the property grid below spanning the full width with no corner
+ reserved. */
.detail-header {
- display: flex;
- align-items: center;
+ display: grid;
+ grid-template-columns: 1fr auto;
gap: var(--gl-space-s);
+ align-items: start;
}
/* Breathing room before the property grid — but only when there's a
grid to make room for. A contact with no properties renders no
diff --git a/test/pro_tacts/admin/test_contacts_pages.rb b/test/pro_tacts/admin/test_contacts_pages.rb
index 34ca6b6..23b2dce 100644
--- a/test/pro_tacts/admin/test_contacts_pages.rb
+++ b/test/pro_tacts/admin/test_contacts_pages.rb
@@ -275,7 +275,7 @@ class AdminContactsPagesTest < Minitest::Test
assert_equal 200, last_response.status
assert_includes last_response.body, '<img class="avatar" src="/contacts/pic/photo" alt=""'
- assert_includes last_response.body, 'data-size="lg"'
+ assert_includes last_response.body, 'data-size="xl"'
refute_includes last_response.body, '<span class="avatar"'
end
end