admin: move the edit link onto the back-link line
Under the name it cluttered the record's read; at the line's right
edge it is the same quiet gesture as the dashboard's section-head
action.
Assisted-by: GLM-5.3 via pi
diff --git a/lib/pro_tacts/admin/contacts_show.rb b/lib/pro_tacts/admin/contacts_show.rb
index ae31606..992f0be 100644
--- a/lib/pro_tacts/admin/contacts_show.rb
+++ b/lib/pro_tacts/admin/contacts_show.rb
@@ -32,7 +32,13 @@ module ProTacts
def view_template
render Layout.new(title: @contact.name || @contact.id) do
- a(href: "/", class: "type-label") { "‹ contacts" }
+ # The record's one action rides the back-link's line, at its
+ # right edge — the dashboard's section-head gesture — so the
+ # card below stays a clean read of the record.
+ div(class: "record-nav") do
+ a(href: "/", class: "type-label") { "‹ contacts" }
+ a(href: "/contacts/#{@contact.id}/edit", class: "btn", data_size: "sm") { "edit" }
+ end
div(class: "card") do
div(class: "card-body") do
div(class: "detail-header") do
@@ -45,13 +51,6 @@ module ProTacts
if @contact.nickname
div(class: "type-h3 gl-muted", style: "margin-top: var(--gl-space-2xs);") { @contact.nickname }
end
- # The record's one action, quiet and under the name
- # — the edit screen is this page's other mode (see
- # Admin::ContactsEdit). A link in Gloss's `.btn`
- # contract: navigation wearing a button's clothes.
- div(style: "margin-top: var(--gl-space-2xs);") do
- a(href: "/contacts/#{@contact.id}/edit", class: "btn", data_size: "sm") { "edit" }
- end
end
# Only a picture earns this slot: an initials circle
# beside the name in type-h2 would repeat what the name
diff --git a/public/admin.css b/public/admin.css
index 7248b89..02c531f 100644
--- a/public/admin.css
+++ b/public/admin.css
@@ -4,6 +4,18 @@
rem width in the spirit of card.css's own max-width: 18rem; nothing
here is a hex, a px, or a duration. */
+/* The record page's one action, on the back-link's line: edit at the
+ right edge, the same quiet gesture as the dashboard's section-head,
+ in flow here because no sibling column shares the line — the
+ baseline problem that makes section-head pin its button absolutely
+ does not arise. The main column's gap spaces the line from the
+ card, so no margin of its own. */
+.record-nav {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+}
+
/* The editor's submit row: the buttons sit beside each other under
the stacked fields, rather than in the stack's own gap. */
.form-actions {
diff --git a/test/pro_tacts/admin/test_contacts_pages.rb b/test/pro_tacts/admin/test_contacts_pages.rb
index 0966835..de534b4 100644
--- a/test/pro_tacts/admin/test_contacts_pages.rb
+++ b/test/pro_tacts/admin/test_contacts_pages.rb
@@ -604,13 +604,16 @@ class AdminContactsPagesTest < Minitest::Test
assert_equal 404, last_response.status
end
- # The details page names its other mode: the edit link sits under
- # the name, the record's one action.
+ # The details page names its other mode: the edit link rides the
+ # back-link's line at the right edge, so the card below stays a
+ # clean read of the record.
def test_the_details_page_links_to_the_edit_screen
with_contacts({"ada" => ADA}) do
get "/contacts/ada"
- assert_includes last_response.body, 'href="/contacts/ada/edit"'
+ assert_includes last_response.body,
+ '<div class="record-nav"><a href="/" class="type-label">‹ contacts</a>' \
+ '<a href="/contacts/ada/edit" class="btn" data-size="sm">edit</a></div>'
end
end