From 5f6f272b433ffb1ec0bda2a5e6d64709c4ac6f33 Mon Sep 17 00:00:00 2001 From: erdgeist Date: Wed, 12 Aug 2026 01:24:28 +0200 Subject: Give the admin lists a shared table and row vocabulary row_primary and row_secondary replace four names for a row's title and five for its supporting line, across the tables and the sitemap. Actions cells no longer sit flush against the row edge Header rows move into thead, which retires the .header class from the CSS, the tr.header:hover suppression, and .no_hover Replace variety of nodes_table, assets_table, events_table, revisions_table, user_table and sitemap with a shared class admin_table --- app/views/assets/index.html.erb | 114 ++++++++++---------- app/views/events/index.html.erb | 132 ++++++++++++----------- app/views/nodes/_node_list.html.erb | 76 ++++++------- app/views/nodes/sitemap.html.erb | 4 +- app/views/revisions/index.html.erb | 8 +- app/views/users/index.html.erb | 20 ++-- public/stylesheets/admin.css | 205 ++++++++++-------------------------- 7 files changed, 238 insertions(+), 321 deletions(-) diff --git a/app/views/assets/index.html.erb b/app/views/assets/index.html.erb index 84f096c2..c71607cf 100644 --- a/app/views/assets/index.html.erb +++ b/app/views/assets/index.html.erb @@ -8,59 +8,63 @@ <%= will_paginate @assets %> - - - - - - -<% @assets.each do |asset| %> - - - - - -<% end %> +
<%= t("admin.columns.preview") %><%= t("admin.columns.name") %>
- <% if asset.has_variant?(:thumb) %> - <%= link_to image_tag(asset.upload.url(:thumb), :alt => ""), asset, - :class => "asset_thumb_link" %> - <% end %> - -
- <%= link_to asset.name.presence || asset.upload_file_name, asset %> -
-
- <%= icon("external-link", library: "tabler", "aria-hidden": true) %> - <%= link_to asset.upload_file_name, asset.upload.url, - :target => "_blank", :rel => "noopener" %> -
-
- <%= asset.upload.content_type %> · - <%= number_to_human_size(asset.upload.size) %> -
-
-
- - <%= link_to asset, "aria-label" => t("admin.common.show"), - title: t("admin.common.show") do %> - <%= icon("eye", library: "tabler", "aria-hidden": true) %> - <% end %> - - - <%= link_to edit_asset_path(asset), "aria-label" => t("admin.common.edit"), - title: t("admin.common.edit") do %> - <%= icon("edit", library: "tabler", "aria-hidden": true) %> - <% end %> - - - <%= button_to asset, method: :delete, - form: { data: { confirm: t("admin.common.confirm_sure") }, - class: 'button_to destructive' }, - "aria-label" => t("admin.common.destroy"), - title: t("admin.common.destroy") do %> - <%= icon("trash", library: "tabler", "aria-hidden": true) %> - <% end %> - -
-
+ + + + + + + + + <% @assets.each do |asset| %> + + + + + + <% end %> +
<%= t("admin.columns.preview") %><%= t("admin.columns.name") %>
+ <% if asset.has_variant?(:thumb) %> + <%= link_to image_tag(asset.upload.url(:thumb), :alt => ""), asset, + :class => "asset_thumb_link" %> + <% end %> + +
+ <%= link_to asset.name.presence || asset.upload_file_name, asset %> +
+
+ <%= icon("external-link", library: "tabler", "aria-hidden": true) %> + <%= link_to asset.upload_file_name, asset.upload.url, + :target => "_blank", :rel => "noopener" %> +
+
+ <%= asset.upload.content_type %> · + <%= number_to_human_size(asset.upload.size) %> +
+
+
+ + <%= link_to asset, "aria-label" => t("admin.common.show"), + title: t("admin.common.show") do %> + <%= icon("eye", library: "tabler", "aria-hidden": true) %> + <% end %> + + + <%= link_to edit_asset_path(asset), "aria-label" => t("admin.common.edit"), + title: t("admin.common.edit") do %> + <%= icon("edit", library: "tabler", "aria-hidden": true) %> + <% end %> + + + <%= button_to asset, method: :delete, + form: { data: { confirm: t("admin.common.confirm_sure") }, + class: 'button_to destructive' }, + "aria-label" => t("admin.common.destroy"), + title: t("admin.common.destroy") do %> + <%= icon("trash", library: "tabler", "aria-hidden": true) %> + <% end %> + +
+
diff --git a/app/views/events/index.html.erb b/app/views/events/index.html.erb index 2497a577..3116dfc1 100644 --- a/app/views/events/index.html.erb +++ b/app/views/events/index.html.erb @@ -8,72 +8,76 @@ <%= will_paginate @events %> - - - - - - +
<%= t("admin.columns.title") %><%= t(".when") %>
+ + + + + + + -<% @events.each do |event| %> - - + <% @events.each do |event| %> + + - + - - -<% end %> + + + + + <% end %> +
<%= t("admin.columns.title") %><%= t(".when") %>
-
- - <%= flag("hours-24", Event.human_attribute_name(:allday)) if event.allday %> - <%= flag("sticker", t(".flag_own_title")) if event.title.present? %> - -
-
<%= link_to event.display_title, event %>
- <% if event.node %> -
- <%= icon("file", library: "tabler", "aria-hidden": true) %> - <%= link_to event.node.unique_name, node_path(event.node) %> -
- <% end %> - <% if event.url.present? %> -
- <%= icon("external-link", library: "tabler", "aria-hidden": true) %> - <%= external_url_link(event.url) %> -
- <% end %> +
+
+ + <%= flag("hours-24", Event.human_attribute_name(:allday)) if event.allday %> + <%= flag("sticker", t(".flag_own_title")) if event.title.present? %> + +
+
<%= link_to event.display_title, event %>
+ <% if event.node %> +
+ <%= icon("file", library: "tabler", "aria-hidden": true) %> + <%= link_to event.node.unique_name, node_path(event.node) %> +
+ <% end %> + <% if event.url.present? %> +
+ <%= icon("external-link", library: "tabler", "aria-hidden": true) %> + <%= external_url_link(event.url) %> +
+ <% end %> +
- -
-
- <% if event.rrule.present? %> - <% if event.humanize_rrule %> - <%= event_schedule_text(event) %> - <% else %> - - <%= t("events.schedule.unreadable") %> - - <% if event.start_time %> -
<%= admin_date(event.start_time) %>
+
+
+ <% if event.rrule.present? %> + <% if event.humanize_rrule %> + <%= event_schedule_text(event) %> + <% else %> + + <%= t("events.schedule.unreadable") %> + + <% if event.start_time %> +
<%= admin_date(event.start_time) %>
+ <% end %> <% end %> + <% else %> + <%= event_date_range(event) %> <% end %> - <% else %> - <%= event_date_range(event) %> - <% end %> -
-
-
- - <%= link_to event_path(event), "aria-label" => t("admin.common.show"), - title: t("admin.common.show") do %> - <%= icon("eye", library: "tabler", "aria-hidden": true) %> - <% end %> - - - <%= link_to edit_event_path(event), "aria-label" => t("admin.common.edit"), - title: t("admin.common.edit") do %> - <%= icon("edit", library: "tabler", "aria-hidden": true) %> - <% end %> - -
-
+
+ + <%= link_to event_path(event), "aria-label" => t("admin.common.show"), + title: t("admin.common.show") do %> + <%= icon("eye", library: "tabler", "aria-hidden": true) %> + <% end %> + + + <%= link_to edit_event_path(event), "aria-label" => t("admin.common.edit"), + title: t("admin.common.edit") do %> + <%= icon("edit", library: "tabler", "aria-hidden": true) %> + <% end %> + +
+
diff --git a/app/views/nodes/_node_list.html.erb b/app/views/nodes/_node_list.html.erb index 55f396b7..1a0c4797 100644 --- a/app/views/nodes/_node_list.html.erb +++ b/app/views/nodes/_node_list.html.erb @@ -4,43 +4,45 @@ (params[:tags].present? ? [["tags", params[:tags]]] : []) %> <%= will_paginate @nodes %> - - <% @nodes.each do |node| %> - "> -
-
- - <%= flag("lock", t(".flag_locked", :login => node.lock_owner.login), - :tier => :attention) if node.lock_owner %> - <%= flag("calendar-clock", - t(".flag_embargo", :date => admin_datetime(node.head.published_at)), - :tier => :attention) if node.embargoed? %> - <%= flag("file-pencil", t(".flag_draft")) if node.draft %> - <%= flag("world-off", t(".flag_no_head")) unless node.head %> - -
-
<%= link_to title_for_node(node), node_path(node) %>
-
<%= link_to_path(node.unique_name, node.unique_name) %>
+ + + <% @nodes.each do |node| %> + "> + - - - <% end %> + + + + <% end %> +
+
+ + <%= flag("lock", t(".flag_locked", :login => node.lock_owner.login), + :tier => :attention) if node.lock_owner %> + <%= flag("calendar-clock", + t(".flag_embargo", :date => admin_datetime(node.head.published_at)), + :tier => :attention) if node.embargoed? %> + <%= flag("file-pencil", t(".flag_draft")) if node.draft %> + <%= flag("world-off", t(".flag_no_head")) unless node.head %> + +
+
<%= link_to title_for_node(node), node_path(node) %>
+
<%= link_to_path(node.unique_name, node.unique_name) %>
+
- -
-
- - <%= link_to node_path(node), "aria-label" => t("admin.common.show"), - title: t("admin.common.show") do %> - <%= icon("eye", library: "tabler", "aria-hidden": true) %> - <% end %> - - - <%= link_to node_revisions_path(node), "aria-label" => t("admin.common.revisions"), - title: t("admin.common.revisions") do %> - <%= icon("history", library: "tabler", "aria-hidden": true) %> - <% end %> - -
-
+
+ + <%= link_to node_path(node), "aria-label" => t("admin.common.show"), + title: t("admin.common.show") do %> + <%= icon("eye", library: "tabler", "aria-hidden": true) %> + <% end %> + + + <%= link_to node_revisions_path(node), "aria-label" => t("admin.common.revisions"), + title: t("admin.common.revisions") do %> + <%= icon("history", library: "tabler", "aria-hidden": true) %> + <% end %> + +
+
<%= will_paginate @nodes %> diff --git a/app/views/nodes/sitemap.html.erb b/app/views/nodes/sitemap.html.erb index 3b9328da..95ed544f 100644 --- a/app/views/nodes/sitemap.html.erb +++ b/app/views/nodes/sitemap.html.erb @@ -26,8 +26,8 @@ <%= flag("file-text-shield", t(".flag_restricted"), :tier => :attention) if node.restricted? %>
-
<%= link_to title_for_node(node), node_path(node) %>
-
+
<%= link_to title_for_node(node), node_path(node) %>
+
<%= world_icon %> <%= link_to_path(node.unique_name, node.unique_name) %>
diff --git a/app/views/revisions/index.html.erb b/app/views/revisions/index.html.erb index 3fb33b90..09eac565 100644 --- a/app/views/revisions/index.html.erb +++ b/app/views/revisions/index.html.erb @@ -18,7 +18,7 @@

<% end %> - +
@@ -30,7 +30,7 @@ - +
<%= t(".first") %>
<%= button_to t(".diff_revisions"), diff_node_revisions_path(@node), method: :post, @@ -64,7 +64,7 @@
- +<% end %> diff --git a/app/views/users/index.html.erb b/app/views/users/index.html.erb index 71102c2c..e6c1fbda 100644 --- a/app/views/users/index.html.erb +++ b/app/views/users/index.html.erb @@ -13,15 +13,17 @@ <%= members.size %> <% if members.any? %> - "> - - - - - - - - <%= render :partial => "user", :locals => { :users => members } %> +
<%= t("users.labels.login") %><%= t("users.labels.roles") %>
"> + + + + + + + + + <%= render :partial => "user", :locals => { :users => members } %> +
<%= t("users.labels.login") %><%= t("users.labels.roles") %>
<% else %>

<%= t(".group_empty") %>

diff --git a/public/stylesheets/admin.css b/public/stylesheets/admin.css index 99067f5d..85e89e13 100644 --- a/public/stylesheets/admin.css +++ b/public/stylesheets/admin.css @@ -626,120 +626,99 @@ form.button_to svg { Tables ============================================================ */ -table tr.header { - height: 20px; - text-align: left; -} - -table.node_table, -table.assets_table, -table.user_table, -table.events_table { +.admin_table { border-collapse: collapse; } -table.node_table tr, -table.assets_table tr, -table.user_table tr, -table.events_table tr { - border-bottom: 1px solid var(--hairline); +.admin_table thead { + text-align: left; } -table.node_table th.revision { - min-width: 4rem; +.admin_table thead tr { + height: 2rem; } -table.node_table th.editor, -table.node_table th.title { - min-width: 12rem; +.admin_table th, +.admin_table td { + padding: 0.75rem; + min-width: 2rem; } -table.node_table tr.header, -table.assets_table tr.header, -table.user_table tr.header, -table.events_table tr.header { - height: 2rem; - text-align: left; +.admin_table th:first-child, +.admin_table td:first-child { + padding-left: 0; } -table.node_table td, -table.assets_table td, -table.user_table td, -table.events_table td { - padding-top: 12px; - padding-bottom: 12px; - padding-right: 25px; - padding-left: 0px; - min-width: 2rem; +.admin_table tbody tr { + border-bottom: 1px solid var(--hairline); } -table.node_table tr.header:hover, -table.assets_table tr.header:hover, -table.user_table tr.header:hover, -table.events_table tr.header:hover { - background-color: var(--surface); +.admin_table tbody tr:hover { + background-color: var(--surface-tint); } -table.node_table tr:hover, -table.assets_table tr:hover, -table.user_table tr:hover, -table.events_table tr:hover { - background-color: var(--surface-tint); +.node_table th.revision { + min-width: 4rem; } -table.revisions_table { - border-collapse: collapse; +.node_table th.editor, +.node_table th.title { + min-width: 12rem; } -table.revisions_table thead { +.revisions_table thead { position: sticky; top: 0; z-index: 1; + background-color: var(--surface); } -table.revisions_table th, -table.revisions_table td { +.revisions_table th, +.revisions_table td { padding: 0.4rem 0.75rem; - text-align: left; } -table.revisions_table thead tr.header, -table.revisions_table thead tr.diff_sticky_bar { - background-color: var(--surface); +.revisions_table .diff_sticky_bar td { + border-bottom: 1px solid var(--hairline); } -table.revisions_table .diff_sticky_bar td { - padding-top: 0.5rem; - padding-bottom: 0.5rem; - border-bottom: 1px solid var(--hairline); +.row_primary { + font-weight: bold; } -#diff_selection_label { - margin-left: 0.75rem; +.row_secondary { + display: flex; + align-items: center; + gap: 0.3rem; + margin-top: 0.25rem; + font-size: 0.875rem; color: var(--text-muted); } -table.revisions_table td.title { - width: 450px; -} -table.revisions_table td.date { - width: 175px; +.row_secondary a { + color: inherit; + overflow-wrap: anywhere; } -table.revisions_table tr:not(.header):not(.no_hover) { - border-bottom: 1px solid var(--hairline); +.row_secondary svg { + width: 0.875rem; + height: 0.875rem; + flex-shrink: 0; } -table.revisions_table tr.header:hover { - background-color: var(--surface); +#diff_selection_label { + margin-left: 0.75rem; + color: var(--text-muted); } -table.revisions_table tr.no_hover:hover { - background-color: var(--surface); -} +@media (min-width: 1016px) { + .revisions_table td.title { + min-width: 28rem; + } -table.revisions_table tr:hover { - background-color: var(--surface-tint); + .revisions_table td.date { + min-width: 11rem; + } } #diffview del { @@ -795,12 +774,9 @@ table.revisions_table tr:hover { margin-bottom: 1.5rem; } -.user_table td.actions, -.node_table td.actions, -.assets_table td.actions { +.admin-table td.actions { width: 1px; white-space: nowrap; - padding-right: 0; } .events_table td.title, @@ -808,33 +784,6 @@ table.revisions_table tr:hover { padding-right: 0.75rem; } -.assets_table .asset_name, -.events_table .event_title { - font-weight: bold; -} - -.assets_table .asset_meta, -.events_table .event_meta { - display: flex; - align-items: center; - gap: 0.3rem; - margin-top: 0.35rem; - font-size: 0.875rem; -} - -.assets_table .asset_meta svg, -.events_table .event_meta svg { - width: 0.875rem; - height: 0.875rem; - flex-shrink: 0; -} - -.assets_table .asset_meta a, -.events_table .event_meta a { - overflow-wrap: anywhere; - color: var(--text-muted); -} - .events_table .event_when { overflow-wrap: normal; min-width: 7rem; @@ -845,12 +794,6 @@ table.revisions_table tr:hover { overflow-wrap: anywhere; } -.events_table td.actions { - width: 1px; - white-space: nowrap; - padding-right: 0; -} - .assets_table .asset_thumb img { display: block; max-width: 120px; @@ -869,8 +812,8 @@ table.revisions_table tr:hover { display: block; } - .events_table tr.header, - .assets_table tr.header { + .events_table thead, + .assets_table thead { display: none; } @@ -1011,20 +954,6 @@ table.revisions_table tr:hover { min-width: 0; } -.node_table .node_title { - font-weight: bold; -} - -.node_table .node_path { - margin-top: 0.25rem; - font-size: 0.875rem; -} - -.node_table .node_path a { - color: var(--text-muted); -} - - .user_group_heading { margin-top: 1.5rem; } @@ -1430,10 +1359,6 @@ div.layout_row_content { max-width: 60rem; } -#sitemap .node_title a { - font-weight: bold; -} - #sitemap .title_with_flags { align-items: start; } @@ -1442,26 +1367,6 @@ div.layout_row_content { flex: 1; } -#sitemap .node_path { - display: flex; - align-items: center; - gap: 0.3rem; - margin-top: 0.25rem; - font-size: 0.875rem; - color: var(--text-muted); -} - -#sitemap .node_path svg { - width: 0.875rem; - height: 0.875rem; - flex-shrink: 0; -} - -#sitemap .node_path a { - color: var(--text-muted); - overflow-wrap: anywhere; -} - #sitemap .action_grid { grid-template-columns: repeat(2, auto); } -- cgit v1.3