From bb04512b0c1d5b7583980214534f92b1b1a5c76b Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Wed, 27 Aug 2025 13:48:47 -0500 Subject: [PATCH] Consolidate header and nav layouts --- app/assets/stylesheets/card-perma.css | 13 +--- app/assets/stylesheets/events.css | 6 +- app/assets/stylesheets/header.css | 37 +++++++++- app/assets/stylesheets/layout.css | 71 ------------------- .../accounts/settings_controller.rb | 4 ++ app/views/accounts/settings/show.html.erb | 22 +++--- app/views/cards/index.html.erb | 5 +- app/views/cards/show.html.erb | 4 +- app/views/collections/edit.html.erb | 12 ++-- app/views/collections/new.html.erb | 10 ++- app/views/events/index.html.erb | 7 +- app/views/filters/_menu.html.erb | 2 +- app/views/layouts/application.html.erb | 4 +- app/views/layouts/public.html.erb | 4 +- app/views/notifications/index.html.erb | 20 +++--- .../notifications/settings/show.html.erb | 12 ++-- app/views/public/cards/show.html.erb | 2 - app/views/public/collections/show.html.erb | 16 ++--- app/views/users/edit.html.erb | 10 ++- app/views/users/new.html.erb | 14 ++-- app/views/users/show.html.erb | 22 +++--- app/views/workflows/index.html.erb | 22 +++--- app/views/workflows/new.html.erb | 12 ++-- 23 files changed, 128 insertions(+), 203 deletions(-) diff --git a/app/assets/stylesheets/card-perma.css b/app/assets/stylesheets/card-perma.css index 19727cef8..d3d7c1bb8 100644 --- a/app/assets/stylesheets/card-perma.css +++ b/app/assets/stylesheets/card-perma.css @@ -17,6 +17,7 @@ "notch-bottom notch-bottom notch-bottom"; grid-template-columns: 48px minmax(0, 1120px) 48px; inline-size: fit-content; + margin-block-start: 2rem; max-inline-size: 100%; margin-inline: auto; @@ -105,18 +106,6 @@ } } - .card-perma__collection-header { - margin-block-end: var(--block-space); - - #main:has(.card-perma__notch--top) & { - margin-block-end: 4ch; - - @media (max-width: 639px) { - margin-block-end: 2ch; - } - } - } - /* Child items /* ------------------------------------------------------------------------ */ diff --git a/app/assets/stylesheets/events.css b/app/assets/stylesheets/events.css index ea4fa119d..8342b10e8 100644 --- a/app/assets/stylesheets/events.css +++ b/app/assets/stylesheets/events.css @@ -2,9 +2,9 @@ /* Events header /* ------------------------------------------------------------------------ */ - .header.events-header { + .header--events { @media (min-width: 640px) { - --header-actions-width: 7rem; + --header-actions-width: 7rem !important; } } @@ -28,7 +28,7 @@ text-align: start; z-index: 2; - .events section:first-of-type & { + .events section:first-of-type & { border-radius: 0.5em 0.5em 0 0; } diff --git a/app/assets/stylesheets/header.css b/app/assets/stylesheets/header.css index 32db849a5..deb98906f 100644 --- a/app/assets/stylesheets/header.css +++ b/app/assets/stylesheets/header.css @@ -7,14 +7,28 @@ --header-button-count: 0; --header-actions-width: calc((var(--header-btn-size) + var(--header-gap)) * var(--header-button-count)); - align-items: center; - display: flex; + display: grid; + grid-template-columns: var(--header-actions-width) 1fr var(--header-actions-width); + grid-template-areas: + "menu menu menu" + "actions-start title actions-end"; + max-inline-size: 100dvw; padding: calc(var(--block-space-half) + env(safe-area-inset-top)) var(--inline-space); + view-transition-name: header; /* 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; } + + &:has(nav) { + row-gap: var(--block-space-half); + } + + nav { + grid-area: menu; + margin-inline: auto; + } } .header__actions { @@ -26,20 +40,37 @@ } .header__actions--start { + grid-area: actions-start; margin-inline-end: auto; } .header__actions--end { - margin-inline-start: auto; + grid-area: actions-end; justify-content: flex-end; + margin-inline-start: auto; } .header__title { color: inherit; font-size: var(--text-large); font-weight: 900; + grid-area: title; margin: 0 auto; min-inline-size: 0; text-align: center; } + + .header__skip-navigation { + --left-offset: -999em; + + inset-block-start: 4rem; + inset-inline-start: var(--left-offset); + position: absolute; + white-space: nowrap; + z-index: 11; + + &:focus { + --left-offset: var(--inline-space); + } + } } diff --git a/app/assets/stylesheets/layout.css b/app/assets/stylesheets/layout.css index ab65b2f10..1833c3950 100644 --- a/app/assets/stylesheets/layout.css +++ b/app/assets/stylesheets/layout.css @@ -32,61 +32,6 @@ :where(#footer) { max-inline-size: 100dvw; - - > nav { - padding-inline: var(--inline-space); - } - } - - :where(#header) { - max-inline-size: 100dvw; - view-transition-name: header; - - > nav { - view-transition-name: nav; - - header { - h1 { - font-weight: 800; - margin-block-start: 0.2em; - text-align: center; - - a:not([class]) { - background-color: transparent; - font-weight: inherit; - text-decoration: underline; - } - } - - a:not([class]) { - background-color: var(--color-ink-lightest); - border-radius: 2em; - color: var(--color-ink); - font-weight: 500; - padding: 0.2em 0.8em; - text-decoration: none; - - @media (hover: hover) { - &:hover { - background-color: var(--color-ink-lighter); - text-decoration: none; - } - } - } - } - } - - > * { - align-items: center; - display: flex; - gap: 1ch; - justify-content: center; - padding: var(--block-space-half) var(--inline-space); - } - - .btn { - flex-shrink: 0; - } } :is(#header, #footer) { @@ -95,19 +40,3 @@ } } } - -@layer components { - .skip-navigation { - --left-offset: -999em; - - inset-block-start: 4rem; - inset-inline-start: var(--left-offset); - position: absolute; - white-space: nowrap; - z-index: 11; - - &:focus { - --left-offset: var(--inline-space); - } - } -} diff --git a/app/controllers/accounts/settings_controller.rb b/app/controllers/accounts/settings_controller.rb index 60e60ceaf..af8b47105 100644 --- a/app/controllers/accounts/settings_controller.rb +++ b/app/controllers/accounts/settings_controller.rb @@ -1,4 +1,8 @@ class Accounts::SettingsController < ApplicationController + include FilterScoped + + enable_collection_filtering only: :show + def show @account = Account.sole @users = User.active diff --git a/app/views/accounts/settings/show.html.erb b/app/views/accounts/settings/show.html.erb index 3d1b34514..d8c03a265 100644 --- a/app/views/accounts/settings/show.html.erb +++ b/app/views/accounts/settings/show.html.erb @@ -1,20 +1,18 @@ <% @page_title = "Account Settings" %> <% content_for :header do %> - +
+ <%= link_to workflows_path, class: "btn flex-item-justify-end" do %> + <%= icon_tag "bolt" %> + Workflows + <% end %> +
<% end %>
diff --git a/app/views/cards/index.html.erb b/app/views/cards/index.html.erb index 7909a7bfa..d4122cab5 100644 --- a/app/views/cards/index.html.erb +++ b/app/views/cards/index.html.erb @@ -10,10 +10,9 @@ <% content_for :header do %> <%= render "filters/menu", user_filtering: @user_filtering %> -<% end %> -
+

<%= @user_filtering.selected_collections_label %>

@@ -23,7 +22,7 @@ <%= render "cards/collection_settings", collection: collection %> <% end %> -
+<% end %> <%= render "filters/settings", user_filtering: @user_filtering %> diff --git a/app/views/cards/show.html.erb b/app/views/cards/show.html.erb index fe8a4b49a..c6a62646a 100644 --- a/app/views/cards/show.html.erb +++ b/app/views/cards/show.html.erb @@ -31,16 +31,14 @@ <% end %> <%= render "filters/menu", user_filtering: @user_filtering %> -<% end %> -
<%= link_to cards_path(collection_ids: [ @card.collection ]), class: "header__title btn borderless txt-large", style: "--btn-padding: 0.25ch 1ch 0.25ch 0.75ch; view-transistion-name: card-collection-title;", data: { controller: "hotkey", action: "keydown.esc@document->hotkey#click" } do %> ← <%= @card.collection.name %> <% end %> -
+<% end %>
<%= render "cards/container", card: @card %> diff --git a/app/views/collections/edit.html.erb b/app/views/collections/edit.html.erb index 03d0b2ff6..ab90816a8 100644 --- a/app/views/collections/edit.html.erb +++ b/app/views/collections/edit.html.erb @@ -1,15 +1,13 @@ <% @page_title = "Collection Settings" %> <% content_for :header do %> - +
<% end %>
diff --git a/app/views/collections/new.html.erb b/app/views/collections/new.html.erb index 66e0af251..e700e81d4 100644 --- a/app/views/collections/new.html.erb +++ b/app/views/collections/new.html.erb @@ -1,12 +1,10 @@ <% @page_title = "Create a new collection" %> <% content_for :header do %> - +
+ <%= link_to_home icon: "arrow-left", label: "Go back" %> +
+
<% end %>
diff --git a/app/views/events/index.html.erb b/app/views/events/index.html.erb index 68e01041b..34d0b5deb 100644 --- a/app/views/events/index.html.erb +++ b/app/views/events/index.html.erb @@ -1,11 +1,11 @@ <% @page_title = "Home" %> +<% @header_class = "header--events" %> + <%= turbo_stream_from :activity_summaries %> <% content_for :header do %> <%= render "filters/menu", user_filtering: @user_filtering %> -<% end %> -
<%= render "filters/menu/add_card_button", user_filtering: @user_filtering %>

@@ -13,9 +13,8 @@ Activity in <%= @user_filtering.selected_collections_label %>

+<% end %> -
-
<%= render "events/day", day_timeline: @day_timeline %>
diff --git a/app/views/filters/_menu.html.erb b/app/views/filters/_menu.html.erb index df00b3494..5c1410a0c 100644 --- a/app/views/filters/_menu.html.erb +++ b/app/views/filters/_menu.html.erb @@ -1,4 +1,4 @@ -