From efdf82244c765192507e43f5ba4112a27f75fb20 Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Thu, 26 Jun 2025 14:35:59 -0500 Subject: [PATCH 01/45] Add header component --- app/assets/stylesheets/nav.css | 33 ++++++++++++++++++++++++++ app/views/cards/index.html.erb | 22 ++++++++++++++--- app/views/cards/index/_header.html.erb | 18 -------------- 3 files changed, 52 insertions(+), 21 deletions(-) create mode 100644 app/assets/stylesheets/nav.css diff --git a/app/assets/stylesheets/nav.css b/app/assets/stylesheets/nav.css new file mode 100644 index 000000000..f73f42fdb --- /dev/null +++ b/app/assets/stylesheets/nav.css @@ -0,0 +1,33 @@ +@layer components { + /* Centered title with space for two buttons on either side */ + .header { + --header-gap: 0.5rem; + --header-btn-size: 2.65em; + --header-button-count: 0; + --header-actions-width: calc((var(--header-btn-size) + var(--header-gap)) * var(--header-button-count)); + + display: grid; + grid-template-columns: var(--header-actions-width) 1fr var(--header-actions-width); + padding: var(--block-space-half) var(--inline-space); + + /* Change the grid size depending on how many buttons are present */ + &:has(.header__actions > *:nth-child(1)) { --header-button-count: 1; } + &:has(.header__actions > *:nth-child(2)) { --header-button-count: 2; } + &:has(.header__actions > *:nth-child(3)) { --header-button-count: 3; } + } + + .header__actions { + display: flex; + gap: var(--header-gap); + } + + .header__actions--end { + justify-content: flex-end; + } + + .header__title { + font-size: var(--text-large); + font-weight: 900; + margin: 0; + } +} diff --git a/app/views/cards/index.html.erb b/app/views/cards/index.html.erb index 33a2d752e..c8ea07668 100644 --- a/app/views/cards/index.html.erb +++ b/app/views/cards/index.html.erb @@ -6,10 +6,26 @@ <%= render "cards/index/header", filter: @filter %> <% end %> -
- +
+
+ <%= link_to_home %> +
+ +

<%= filter_title @filter %> - +

+ +
+ <% if collection = @filter.single_collection %> + <%= access_involvement_advance_button collection, Current.user %> + + <%= link_to edit_collection_path(collection), class: "btn" do %> + <%= icon_tag "settings" %> + Settings for <%= collection.name %> + <% end %> + <% end %> +
+ <%= render "filters/settings", filter: @filter %>
diff --git a/app/views/cards/index/_header.html.erb b/app/views/cards/index/_header.html.erb index 7f4d0f08c..1376e3667 100644 --- a/app/views/cards/index/_header.html.erb +++ b/app/views/cards/index/_header.html.erb @@ -1,8 +1,4 @@ From 8308151500cbbb6bbf2466107231cf2fb1d7d54f Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Thu, 26 Jun 2025 14:54:27 -0500 Subject: [PATCH 02/45] Use header component everywhere --- .../stylesheets/{nav.css => header.css} | 11 +++++++++- app/views/accounts/settings/show.html.erb | 20 ++++++++++--------- app/views/cards/index/_header.html.erb | 2 +- app/views/collections/edit.html.erb | 12 +++++------ app/views/collections/new.html.erb | 7 +++++-- app/views/events/index.html.erb | 4 ++-- app/views/notifications/index.html.erb | 16 +++++++++------ .../notifications/settings/show.html.erb | 10 ++++++---- app/views/searches/show.html.erb | 12 +++++------ app/views/users/edit.html.erb | 7 +++++-- app/views/users/new.html.erb | 11 ++++++---- app/views/users/show.html.erb | 18 ++++++++++------- app/views/workflows/index.html.erb | 20 ++++++++++--------- app/views/workflows/new.html.erb | 12 +++++++---- 14 files changed, 99 insertions(+), 63 deletions(-) rename app/assets/stylesheets/{nav.css => header.css} (82%) diff --git a/app/assets/stylesheets/nav.css b/app/assets/stylesheets/header.css similarity index 82% rename from app/assets/stylesheets/nav.css rename to app/assets/stylesheets/header.css index f73f42fdb..bcbb90662 100644 --- a/app/assets/stylesheets/nav.css +++ b/app/assets/stylesheets/header.css @@ -14,6 +14,14 @@ &:has(.header__actions > *:nth-child(1)) { --header-button-count: 1; } &:has(.header__actions > *:nth-child(2)) { --header-button-count: 2; } &:has(.header__actions > *:nth-child(3)) { --header-button-count: 3; } + + &:not(:has(.header__title)) { + grid-template-columns: repeat(2, 1fr); + } + + &:not(:has(.header__actions)) { + grid-template-columns: 1fr; + } } .header__actions { @@ -28,6 +36,7 @@ .header__title { font-size: var(--text-large); font-weight: 900; - margin: 0; + margin: 0 auto; + text-align: center; } } diff --git a/app/views/accounts/settings/show.html.erb b/app/views/accounts/settings/show.html.erb index 7df94999c..9614946e0 100644 --- a/app/views/accounts/settings/show.html.erb +++ b/app/views/accounts/settings/show.html.erb @@ -1,17 +1,19 @@ <% @page_title = "Account Settings" %> <% content_for :header do %> -