Merge pull request #668 from basecamp/collection-nav

Collection nav

app/assets/stylesheets/header.css

@@ -0,0 +1,44 @@
+@layer components {
+  /* Centered title with space for two buttons on either side */
+  .header {
+    --header-gap: 0.5ch;
+    --btn-icon-size: 1rem;
+    --header-btn-size: 2rem;
+    --header-button-count: 0;
+    --header-actions-width: calc((var(--header-btn-size) + var(--header-gap)) * var(--header-button-count));
+
+    align-items: center;
+    display: flex;
+    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;
+    font-size: var(--text-x-small);
+    gap: var(--header-gap);
+    inline-size: var(--header-actions-width);
+    min-inline-size: fit-content;
+  }
+
+  .header__actions--start {
+    margin-inline-end: auto;
+  }
+
+  .header__actions--end {
+    margin-inline-start: auto;
+    justify-content: flex-end;
+  }
+
+  .header__title {
+    color: inherit;
+    font-size: var(--text-large);
+    font-weight: 900;
+    margin: 0 auto;
+    text-align: center;
+  }
+}

app/assets/stylesheets/utilities.css

@@ -26,7 +26,7 @@
   .txt-capitalize { text-transform: capitalize; }
   .txt-link { color: var(--color-link); text-decoration: underline; }
 
-  .font-black { font-weight: 900; }
+  .font-weight-black { font-weight: 900; }
   .font-weight-normal { font-weight: normal; }
 
   /* Flexbox and Grid */

app/views/accounts/settings/show.html.erb

@@ -1,17 +1,19 @@
 <% @page_title = "Account Settings" %>
 
 <% content_for :header do %>
-  <nav>
-    <%= link_to_back fallback_path: root_path %>
+  <nav class="header">
+    <div class="header__actions header__actions--start">
+      <%= link_to_back fallback_path: root_path %>
+    </div>
 
-    <header class="center">
-      <h1 class="txt-large margin-none"><%= @page_title %></h1>
-    </header>
+    <h1 class="header__title"><%= @page_title %></h1>
 
-    <%= link_to workflows_path, class: "btn flex-item-justify-end" do %>
-      <%= icon_tag "bolt" %>
-      <span class="for-screen-reader">Workflows</span>
-    <% end %>
+    <div class="header__actions header__actions--end">
+      <%= link_to workflows_path, class: "btn flex-item-justify-end" do %>
+        <%= icon_tag "bolt" %>
+        <span class="for-screen-reader">Workflows</span>
+      <% end %>
+    </div>
   </nav>
 <% end %>
 

app/views/cards/index.html.erb

@@ -6,13 +6,32 @@
   <%= render "cards/index/header", filter: @filter %>
 <% end %>
 
-<header class="margin-block-end">
-  <h1 class="txt-large overflow-ellipsis margin-none font-black" style="view-transistion-name: card-collection-title">
-    <span><%= filter_title @filter %></span>
+<header class="header" style="--header-actions-width: 7rem;">
+  <div class="header__actions header__actions--start">
+    <% if collection = @filter.single_collection || Current.user.collections.first %>
+      <%= button_to collection_cards_path(collection), method: :post, class: "btn btn--link" do %>
+        <%= icon_tag "add" %>
+        Add a card
+      <% end %>
+    <% end %>
+  </div>
+  <h1 class="header__title" style="view-transistion-name: card-collection-title">
+    <span class="overflow-ellipsis"><%= filter_title @filter %></span>
   </h1>
-  <%= render "filters/settings", filter: @filter %>
+  <div class="header__actions header__actions--end">
+    <% if collection = @filter.single_collection %>
+      <%= access_involvement_advance_button collection, Current.user %>
+
+      <%= link_to edit_collection_path(collection), class: "btn" do %>
+        <%= icon_tag "settings" %>
+        <span class="for-screen-reader">Settings for <%= collection.name %></span>
+      <% end %>
+    <% end %>
+  </div>
 </header>
 
+<%= render "filters/settings", filter: @filter %>
+
 <%= tag.div data: {
       controller: "drag-and-drop",
       drag_and_drop_dragged_item_class: "drag-and-drop__dragged-item",

app/views/cards/index/_header.html.erb

@@ -1,8 +1,4 @@
-<nav class="align-start">
-  <%= link_to_home %>
-
-  <div class="btn btn--placeholder flex-item-justify-start"></div>
-
+<nav class="header">
   <header class="flex flex-inline flex-column center flex-shrink">
     <div class="card-filter--collection flex-inline flex-column align-center center position-relative" data-controller="dialog" data-action="click@document->dialog#closeOnClickOutside keydown.esc->dialog#close">
       <%= tag.button class: "fizzy-menu input input--select flex align-center txt-normal shadow",
@@ -60,18 +56,4 @@
       <% end %>
     </div>
   </header>
-
-  <% if collection = filter.single_collection %>
-    <div class="flex-item-justify-end">
-      <%= access_involvement_advance_button collection, Current.user %>
-    </div>
-
-    <%= link_to edit_collection_path(collection), class: "btn" do %>
-      <%= icon_tag "settings" %>
-      <span class="for-screen-reader">Settings for <%= collection.name %></span>
-    <% end %>
-  <% else %>
-    <div class="btn btn--placeholder flex-item-justify-end"></div>
-    <div class="btn btn--placeholder"></div>
-  <% end %>
 </nav>

app/views/cards/index/engagement/_considering.html.erb

@@ -3,15 +3,6 @@
     Considering
   </h2>
 
-  <% if collection = filter.single_collection || Current.user.collections.first %>
-    <%= button_to collection_cards_path(collection), method: :post, class: "card card--new-card-button btn", form_class: "full-width" do %>
-      <div class="gap-half justify-center txt-xx-large pad-block margin-block-half">
-        <%= icon_tag "add" %>
-        <span>Add a new card</span>
-      </div>
-    <% end %>
-  <% end %>
-
   <% if page.used? %>
     <%= render partial: "cards/display/preview", collection: page.records, as: :card, locals: { draggable: true }, cached: true %>
 

app/views/cards/show.html.erb

@@ -26,8 +26,8 @@
   <%= render "cards/show/header" %>
 <% end %>
 
-<header class="card-perma__collection-header">
-  <%= link_to cards_path(collection_ids: [ @card.collection ]), class: "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 %>
+<header class="header card-perma__collection-header">
+  <%= 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 %>
     <span>
       &larr;
       <strong class="font-black"><%= @card.collection.name %></strong>

app/views/collections/edit.html.erb

@@ -1,14 +1,14 @@
 <% @page_title = "Collection Settings" %>
 
 <% content_for :header do %>
-  <nav>
-    <%= link_to_back fallback_path: cards_path(collection_ids: [ @bbucket ]) %>
+  <nav class="header">
+    <div class="header__actions header__actions--start">
+      <%= link_to_back fallback_path: cards_path(collection_ids: [ @bbucket ]) %>
+    </div>
 
-    <header class="center">
-      <h1 class="txt-large margin-none"><%= @page_title %></h1>
-    </header>
+    <h1 class="header__title"><%= @page_title %></h1>
 
-    <div class="btn btn--placeholder flex-item-justify-end"></div>
+    <div class="header__actions header__actions--end"></div>
   </nav>
 <% end %>
 

app/views/collections/new.html.erb

@@ -1,8 +1,11 @@
 <% @page_title = "Create a new collection" %>
 
 <% content_for :header do %>
-  <nav>
-    <%= link_to_home icon: "arrow-left", label: "Go back", class: "flex-item-justify-start" %>
+  <nav class="header">
+    <div class="header__actions header__actions--start">
+      <%= link_to_home icon: "arrow-left", label: "Go back" %>
+    </div>
+    <div class="header__actions header__actions--end"></div>
   </nav>
 <% end %>
 

app/views/events/_filter.html.erb

@@ -1,6 +1,6 @@
 <div class="max-width"
 		data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
-	<%= tag.button class:"events__filter-btn fizzy-menu input input--select center flex-inline align-center txt-normal shadow",
+	<%= tag.button class:"fizzy-menu input input--select center flex-inline align-center txt-normal shadow",
 			data: {
 				action: "click->dialog#open:stop keydown.meta+j@document->hotkey#click keydown.ctrl+j@document->hotkey#click",
 				controller: "hotkey" } do %>

app/views/events/index.html.erb

@@ -1,15 +1,24 @@
 <% @page_title = "Home" %>
 
 <% content_for :header do %>
-  <nav class="align-start">
-    <header class="flex flex-inline flex-column center flex-shrink">
+  <nav class="header">
+    <header class="center">
       <%= render "events/filter", filter: @filter %>
     </header>
   </nav>
 <% end %>
 
-<header>
-  <h1 class="txt-large overflow-ellipsis margin-block-start-none margin-block-end-half font-black">
+<header class="header margin-block-end" style="--header-button-count: 3;">
+  <div class="header__actions header__actions--start">
+    <% if collection = @filter.single_collection || Current.user.collections.first %>
+      <%= button_to collection_cards_path(collection), method: :post, class: "btn btn--link" do %>
+        <%= icon_tag "add" %>
+        <span>Add a card</span>
+      <% end %>
+    <% end %>
+  </div>
+
+  <h1 class="header__title overflow-ellipsis">
     <div class="overflow-ellipsis">
       <% if @filter.collections.any? %>
         <%= filter_selected_collections_label(@filter) %>
@@ -27,12 +36,8 @@
       <% end %>
     <% end %>
   </h1>
-  <% if collection = @filter.single_collection || Current.user.collections.first %>
-    <%= button_to collection_cards_path(collection), method: :post, class: "btn btn--link txt-x-small margin-block-end-double", form_class: "center" do %>
-      <%= icon_tag "add" %>
-      <span>Add a card</span>
-    <% end %>
-  <% end %>
+
+  <div class="header__actions header__actions--end"></div>
 </header>
 <div class="events" id="activity">
   <%= render "events/day", day_timeline: @day_timeline %>

app/views/filters/_settings.html.erb

@@ -1,4 +1,4 @@
-<div class="filters flex align-center gap-half margin-none-block-end margin-block-start-half justify-center center">
+<aside class="filters flex align-center gap-half justify-center center margin-block-end">
   <div class="flex-inline center align-center gap-half">
     <% if any_filters?(filter) %>
       <% if @expand_all %>
@@ -50,4 +50,4 @@
       <% end %>
     <% end %>
   </div>
-</div>
+</aside>

app/views/layouts/public.html.erb

@@ -16,4 +16,4 @@
       <%= yield :footer %>
     </footer>
   </body>
-</html>
+</html>

app/views/notifications/index.html.erb

@@ -2,14 +2,18 @@
 <% @hide_footer_frames = true %>
 
 <% content_for :header do %>
-  <nav class="align-start">
-    <%= link_to_home class: "flex-item-justify-start" %>
+  <nav class="header">
+    <div class="header__actions header__actions--start">
+      <%= link_to_home class: "flex-item-justify-start" %>
+    </div>
 
-    <h1 class="txt-x-large"><%= @page_title %></h1>
+    <h1 class="header__title"><%= @page_title %></h1>
 
-    <%= link_to settings_notifications_path, class: "btn flex-item-justify-end" do %>
-      <%= icon_tag "settings" %> <span class="for-screen-reader">Notification settings</span>
-    <% end %>
+    <div class="header__actions header__actions--end">
+      <%= link_to settings_notifications_path, class: "btn" do %>
+        <%= icon_tag "settings" %> <span class="for-screen-reader">Notification settings</span>
+      <% end %>
+    </div>
   </nav>
 <% end %>
 

app/views/notifications/settings/show.html.erb

@@ -1,12 +1,14 @@
 <% @page_title = "Notifications settings" %>
 
 <% content_for :header do %>
-  <nav class="align-start">
-    <%= link_to_back fallback_path: notifications_path %>
+  <nav class="header">
+    <div class="header__actions header__actions--start">
+      <%= link_to_back fallback_path: notifications_path %>
+    </div>
 
-    <h1 class="txt-x-large"><%= @page_title %></h1>
+    <h1 class="header__title"><%= @page_title %></h1>
 
-    <div class="btn btn--placeholder flex-item-justify-end"></div>
+    <div class="header__actions header__actions--end"></div>
   </nav>
 <% end %>
 

app/views/searches/show.html.erb

@@ -1,14 +1,14 @@
 <% @page_title = "Search" %>
 
 <% content_for :header do %>
-  <nav>
-    <%= link_to_back fallback_path: root_path %>
+  <nav class="header">
+    <div class="header__actions header__actions--start">
+      <%= link_to_back fallback_path: root_path %>
+    </div>
 
-    <header class="center">
-      <h1 class="txt-large margin-none"><%= @page_title %></h1>
-    </header>
+    <h1 class="header__title"><%= @page_title %></h1>
 
-    <div class="btn btn--placeholder flex-item-justify-end"></div>
+    <div class="header__actions header__actions--end"></div>
   </nav>
 <% end %>
 

app/views/users/edit.html.erb

@@ -1,8 +1,11 @@
 <% @page_title = "Edit your profile" %>
 
 <% content_for :header do %>
-  <nav>
-    <%= link_to_back fallback_path: user_path(@user) %>
+  <nav class="header">
+    <div class="header__actions header__actions--start">
+      <%= link_to_back fallback_path: user_path(@user) %>
+    </div>
+    <div class="header__actions header__actions--end"></div>
   </nav>
 <% end %>
 

app/views/users/new.html.erb

@@ -1,10 +1,13 @@
 <% @page_title = "Create your account" %>
 
 <% content_for :header do %>
-  <nav>
-    <%= link_to Launchpad.login_url(account: Current.account), class: "btn flex-item-justify-end", data: { controller: "hotkey", action: "keydown.esc@document->hotkey#click" } do %>
-      <span class="for-screen-reader">Sign in instead</span>
-    <% end %>
+  <nav class="header">
+    <div class="header__actions header__actions--start"></div>
+    <div class="header__actions header__actions--end">
+      <%= link_to Launchpad.login_url(account: Current.account), class: "btn", data: { controller: "hotkey", action: "keydown.esc@document->hotkey#click" } do %>
+        <span class="for-screen-reader">Sign in instead</span>
+      <% end %>
+    </div>
   </nav>
 <% end %>
 

app/views/users/show.html.erb

@@ -1,15 +1,19 @@
 <% @page_title = @user.name %>
 
 <% content_for :header do %>
-  <nav>
-    <%= link_to_back %>
+  <nav class="header">
+    <div class="header__actions header__actions--start">
+      <%= link_to_back %>
+    </div>
 
-    <% if Current.user == @user %>
-      <%= link_to edit_user_path(@user), class: "btn flex-item-justify-end" do %>
-        <%= icon_tag "pencil" %>
-        <span class="for-screen-reader">Edit</span>
+    <div class="header__actions header__actions--end">
+      <% if Current.user == @user %>
+        <%= link_to edit_user_path(@user), class: "btn flex-item-justify-end" do %>
+          <%= icon_tag "pencil" %>
+          <span class="for-screen-reader">Edit</span>
+        <% end %>
       <% end %>
-    <% end %>
+    </div>
   </nav>
 <% end %>
 
@@ -50,7 +54,7 @@
   </div>
 <% end %>
 
-<h1 class="font-black txt-large margin-block-double"><%= "What #{ Current.user == @user ? "have you" : "has #{ @user.first_name }" } been up to?" %></h1>
+<h1 class="font-weight-black txt-large margin-block-double"><%= "What #{ Current.user == @user ? "have you" : "has #{ @user.first_name }" } been up to?" %></h1>
 
 <div class="events margin-block-double" id="activity">
   <%= render "events/day", day_timeline: @day_timeline %>

app/views/workflows/index.html.erb

@@ -1,17 +1,19 @@
 <% @page_title = "Workflows" %>
 
 <% content_for :header do %>
-  <nav>
-    <%= link_to_back fallback_path: users_path %>
+  <nav class="header">
+    <div class="header__actions header__actions--start">
+      <%= link_to_back fallback_path: users_path %>
+    </div>
 
-    <span class="btn btn--placeholder"></span>
+    <h1 class="header__title"><%= @page_title %></h1>
 
-    <h1 class="txt-large"><%= @page_title %></h1>
-
-    <%= link_to new_workflow_path, class: "btn flex-item-justify-end" do %>
-      <%= icon_tag "add" %>
-      <span class="for-screen-reader">Create a new workflow</span>
-    <% end %>
+    <div class="header__actions header__actions--end">
+      <%= link_to new_workflow_path, class: "btn flex-item-justify-end" do %>
+        <%= icon_tag "add" %>
+        <span class="for-screen-reader">Create a new workflow</span>
+      <% end %>
+    </div>
   </nav>
 <% end %>
 

app/views/workflows/new.html.erb

@@ -1,10 +1,14 @@
 <% @page_title = "Create a new Workflow" %>
 
 <% content_for :header do %>
-  <nav>
-    <%= link_to_back fallback_path: workflows_path %>
-    <h1 class="txt-large center"><%= @page_title %></h1>
-    <span class="btn btn--placeholder flex-item-justify-end"></span>
+  <nav class="header">
+    <div class="header__actions header__actions--start">
+      <%= link_to_back fallback_path: workflows_path %>
+    </div>
+
+    <h1 class="header__title"><%= @page_title %></h1>
+
+    <div class="header__actions header__actions--end"></div>
   </nav>
 <% end %>