diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css index 324c02997..2ef0d65d2 100644 --- a/app/assets/stylesheets/card-columns.css +++ b/app/assets/stylesheets/card-columns.css @@ -72,6 +72,11 @@ scroll-snap-align: start; transition: var(--column-transition); + /* Disable transitions during restoration */ + &.no-transitions { + transition: none; + } + /* Make sure filter dialogs don't end up behind sticky headers */ &:has([open]) { z-index: 3; diff --git a/app/javascript/controllers/collapsible_columns_controller.js b/app/javascript/controllers/collapsible_columns_controller.js index 5002c46e2..735b090ba 100644 --- a/app/javascript/controllers/collapsible_columns_controller.js +++ b/app/javascript/controllers/collapsible_columns_controller.js @@ -1,11 +1,13 @@ import { Controller } from "@hotwired/stimulus" export default class extends Controller { - static classes = [ "collapsed" ] + static classes = [ "collapsed", "noTransitions" ] static targets = [ "column", "button" ] connect() { + this.#disableTransitions() this.#restoreColumns() + requestAnimationFrame(() => this.#enableTransitions()) } toggle({ target }) { @@ -19,6 +21,22 @@ export default class extends Controller { } } + #disableTransitions() { + this.columnTargets.forEach(column => { + if (this.noTransitionsClass) { + column.classList.add(this.noTransitionsClass) + } + }) + } + + #enableTransitions() { + this.columnTargets.forEach(column => { + if (this.noTransitionsClass) { + column.classList.remove(this.noTransitionsClass) + } + }) + } + #toggleColumn(column) { this.#collapseAllExcept(column) diff --git a/app/views/collections/show/_columns.html.erb b/app/views/collections/show/_columns.html.erb index 06862a158..084f49fbe 100644 --- a/app/views/collections/show/_columns.html.erb +++ b/app/views/collections/show/_columns.html.erb @@ -8,7 +8,7 @@ dragenter->drag-and-strum#dragEnter drop->drag-and-drop#drop dragend->drag-and-drop#dragEnd" } do %> -
+
<%= render "collections/show/not_now", collection: collection %>