Merge pull request #2275 from basecamp/polish-expander-transitions

Polish expander transitions

app/assets/stylesheets/card-columns.css

@@ -15,7 +15,7 @@
     --column-width-collapsed: 40px;
     --column-width-expanded: 450px;
     --progress-increment: var(--progress-max-height) / var(--progress-max-cards);
-    --progress-max-cards: 20;
+    --progress-max-cards: 15; /* should match first geared pagination page size */
     --progress-max-height: 50dvh;
 
     container-type: inline-size;
@@ -35,6 +35,7 @@
     }
 
     &:has(.cards) {
+      block-size: 100%;
       min-block-size: 20lh;
     }
 
@@ -344,6 +345,7 @@
 
       &:after {
         block-size: calc(var(--column-width-collapsed) + var(--card-count) * var(--progress-increment));
+        max-block-size: none;
         opacity: 1;
         inline-size: var(--column-width-collapsed);
       }
@@ -756,7 +758,7 @@
     --column-padding-expanded: calc(var(--column-gap) * 2);
     --column-width-collapsed: 40px;
     --progress-increment: var(--progress-max-width) / var(--progress-max-cards);
-    --progress-max-cards: 20;
+    --progress-max-cards: 15; /* should match first geared pagination page size */
     --progress-max-width: 100%;
 
     padding-inline: 3vw;

app/javascript/controllers/collapsible_columns_controller.js

@@ -25,7 +25,6 @@ export default class extends Controller {
   }
 
   toggle({ target }) {
-    this.#enableTransitions()
     const column = target.closest('[data-collapsible-columns-target="column"]')
     this.#toggleColumn(column);
   }
@@ -36,14 +35,13 @@ export default class extends Controller {
     }
   }
 
-  async restoreState() {
+  async restoreState(event) {
     await nextFrame()
     await this.#restoreColumnsDisablingTransitions()
   }
 
   focusOnColumn({ target }) {
     if (this.#isCollapsed(target)) {
-      this.#enableTransitions()
       this.#collapseAllExcept(target)
       this.#expand(target)
     }
@@ -54,6 +52,7 @@ export default class extends Controller {
     this.#restoreColumns()
 
     await nextFrame()
+    this.#enableTransitions()
   }
 
   #disableTransitions() {

app/javascript/controllers/css_variable_counter_controller.js

@@ -5,7 +5,7 @@ export default class extends Controller {
   static targets = [ "item", "counter" ]
   static values = {
     propertyName: String,
-    maxValue: { type: Number, default: 20 }
+    maxValue: { type: Number, default: 15 } // should match first geared pagination page size
   }
 
   initialize() {

app/views/boards/show/_columns.html.erb

@@ -1,4 +1,4 @@
-<%= tag.div class: "card-columns no-transitions hide-scrollbar", data: {
+<%= tag.div class: "card-columns hide-scrollbar", data: {
       controller: "collapsible-columns drag-and-drop drag-and-strum navigable-list card-hotkeys",
       drag_and_drop_dragged_item_class: "drag-and-drop__dragged-item",
       drag_and_drop_hover_container_class: "drag-and-drop__hover-container",

app/views/boards/show/_expander.html.erb

@@ -1,5 +1,5 @@
 <button class="cards__expander btn btn--plain" data-collapsible-columns-target="button" data-css-variable-counter-target="counter" data-action="click->collapsible-columns#toggle click->navigable-list#selectCurrentOrReset"
-  style="--card-count: <%= [ count, 20 ].min %>" aria-controls="<%= column_id %>" aria-expanded="false">
+  style="--card-count: <%= [ count, 15 ].min %>" aria-controls="<%= column_id %>" aria-expanded="false">
   <span class="cards__expander-count" data-drag-and-drop-counter="true"><%= count > 99 ? "99+" : count %></span>
   <h2 class="cards__expander-title" data-collapsible-columns-target="title">
     <%= title %>

app/views/public/boards/show/_columns.html.erb

@@ -1,5 +1,5 @@
 <%= turbo_frame_tag :cards_container do %>
-  <div class="card-columns no-transitions hide-scrollbar"
+  <div class="card-columns hide-scrollbar"
     data-controller="collapsible-columns"
     data-collapsible-columns-board-value="<%= board.id %>"
     data-collapsible-columns-collapsed-class="is-collapsed"