From 1560b718e36b2b34f011821ef0accf31253611c2 Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Wed, 5 Nov 2025 09:55:38 -0600 Subject: [PATCH 1/9] Add new containers --- app/views/collections/show/_closed.html.erb | 14 +++++++------ app/views/collections/show/_column.html.erb | 22 +++++++++++--------- app/views/collections/show/_not_now.html.erb | 14 +++++++------ app/views/collections/show/_stream.html.erb | 14 +++++++------ 4 files changed, 36 insertions(+), 28 deletions(-) diff --git a/app/views/collections/show/_closed.html.erb b/app/views/collections/show/_closed.html.erb index 383bba6db..98fa7e22b 100644 --- a/app/views/collections/show/_closed.html.erb +++ b/app/views/collections/show/_closed.html.erb @@ -5,10 +5,12 @@ data-action="turbo:before-morph-attribute->collapsible-columns#preventToggle" data-drag-and-drop-url="<%= columns_card_drops_closure_path("__id__") %>" > - - <%= render "collections/show/expander", title: "Done", count: collection.cards.closed.count, column_id: "closed-cards" do %> - <%= render "collections/show/menu/expand", column_path: collection_columns_closed_path(collection) %> - <% end %> - - <%= column_frame_tag :closed_column, src: collection_columns_closed_path(collection) %> +
+
+ <%= render "collections/show/expander", title: "Done", count: collection.cards.closed.count, column_id: "closed-cards" do %> + <%= render "collections/show/menu/expand", column_path: collection_columns_closed_path(collection) %> + <% end %> +
+ <%= column_frame_tag :closed_column, src: collection_columns_closed_path(collection) %> +
diff --git a/app/views/collections/show/_column.html.erb b/app/views/collections/show/_column.html.erb index 3a6084b0c..32d3d6a39 100644 --- a/app/views/collections/show/_column.html.erb +++ b/app/views/collections/show/_column.html.erb @@ -7,14 +7,16 @@ data-action="turbo:before-morph-attribute->collapsible-columns#preventToggle turbo:before-stream-render@document->collapsible-columns#restoreState" data-drag-and-drop-url="<%= columns_card_drops_column_path("__id__", column_id: column.id) %>" > - <%= render "collections/show/expander", title: column.name, count: column.cards.active.count, column_id: dom_id(column) do %> - <%= render "collections/show/menu/column", column: column %> - <% end %> - - <%= link_to collection_column_path(column.collection, column), class: "cards__expander-button btn btn--circle txt-x-small borderless", data: { turbo_frame: "_top" } do %> - <%= icon_tag "expand", class: "translucent" %> - Expand column - <% end %> - - <%= column_frame_tag dom_id(column, :cards), src: collection_column_path(column.collection, column) %> +
+
+ <%= render "collections/show/expander", title: column.name, count: column.cards.active.count, column_id: dom_id(column) do %> + <%= render "collections/show/menu/column", column: column %> + <% end %> + <%= link_to collection_column_path(column.collection, column), class: "cards__expander-button btn btn--circle txt-x-small borderless", data: { turbo_frame: "_top" } do %> + <%= icon_tag "expand", class: "translucent" %> + Expand column + <% end %> +
+ <%= column_frame_tag dom_id(column, :cards), src: collection_column_path(column.collection, column) %> +
diff --git a/app/views/collections/show/_not_now.html.erb b/app/views/collections/show/_not_now.html.erb index c99b9b3af..f98a6ba38 100644 --- a/app/views/collections/show/_not_now.html.erb +++ b/app/views/collections/show/_not_now.html.erb @@ -5,10 +5,12 @@ data-action="turbo:before-morph-attribute->collapsible-columns#preventToggle" data-drag-and-drop-url="<%= columns_card_drops_not_now_path("__id__") %>" > - - <%= render "collections/show/expander", title: "Not Now", count: collection.cards.postponed.count, column_id: "not-now" do %> - <%= render "collections/show/menu/expand", column_path: collection_columns_not_now_path(collection) %> - <% end %> - - <%= column_frame_tag :not_now_column, src: collection_columns_not_now_path(collection) %> +
+
+ <%= render "collections/show/expander", title: "Not Now", count: collection.cards.postponed.count, column_id: "not-now" do %> + <%= render "collections/show/menu/expand", column_path: collection_columns_not_now_path(collection) %> + <% end %> +
+ <%= column_frame_tag :not_now_column, src: collection_columns_not_now_path(collection) %> +
diff --git a/app/views/collections/show/_stream.html.erb b/app/views/collections/show/_stream.html.erb index a1985a3f2..eecbe4ee5 100644 --- a/app/views/collections/show/_stream.html.erb +++ b/app/views/collections/show/_stream.html.erb @@ -2,12 +2,14 @@ data-drag-and-drop-target="container" data-action="turbo:before-morph-attribute->collapsible-columns#preventToggle" data-drag-and-drop-url="<%= columns_card_drops_stream_path("__id__") %>"> -
-

Maybe?

- <%= link_to collection_columns_stream_path(collection), class: "cards__expander-button btn btn--circle txt-x-small borderless", data: { turbo_frame: "_top" } do %> - <%= icon_tag "expand", class: "translucent" %> - Expand column - <% end %> +
+
+

Maybe?

+ <%= link_to collection_columns_stream_path(collection), class: "cards__expander-button btn btn--circle txt-x-small borderless", data: { turbo_frame: "_top" } do %> + <%= icon_tag "expand", class: "translucent" %> + Expand column + <% end %> +
<%= render "columns/show/add_card_button", collection: collection %> From 26a20e610b0910a81f57e7e205c325ce34c269a7 Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Wed, 5 Nov 2025 10:04:35 -0600 Subject: [PATCH 2/9] Add drag and drop colors --- app/assets/stylesheets/card-columns.css | 15 ++++++++++ app/assets/stylesheets/drag_and_drop.css | 7 +++-- app/views/collections/show/_stream.html.erb | 32 +++++++++++---------- 3 files changed, 37 insertions(+), 17 deletions(-) diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css index eebbb74f9..753c90e63 100644 --- a/app/assets/stylesheets/card-columns.css +++ b/app/assets/stylesheets/card-columns.css @@ -91,6 +91,11 @@ } } + &.drag-and-drop__hover-container { + --dnd-bg-color: var(--column-color); + --dnd-border-color: var(--card-color); + } + @media (any-hover: hover) { .card:has(.card__background img:not([src=""])):hover .card__background img:not([src=""]) { filter: blur(3px) brightness(1.2); @@ -99,6 +104,16 @@ } } + .cards__transition-container { + block-size: 100%; + } + + .cards__header { + .cards.is-collapsed & { + block-size: 100%; + } + } + /* The wrapper around the cards used to clip overflow while transitioning. * Also, don't resize cards while transitioning to avoid reflow. */ .cards__list { diff --git a/app/assets/stylesheets/drag_and_drop.css b/app/assets/stylesheets/drag_and_drop.css index 99b3089eb..2ada036b4 100644 --- a/app/assets/stylesheets/drag_and_drop.css +++ b/app/assets/stylesheets/drag_and_drop.css @@ -7,8 +7,11 @@ } .drag-and-drop__hover-container { - background-color: var(--color-selected-light); - outline: 2px dashed var(--color-selected-dark); + --dnd-bg-color: var(--color-selected-light); + --dnd-border-color: var(--color-selected-dark); + + background-color: var(--dnd-bg-color); + outline: 2px dashed var(--dnd-border-color); outline-offset: -2px; transition: background-color 200ms; z-index: 1; diff --git a/app/views/collections/show/_stream.html.erb b/app/views/collections/show/_stream.html.erb index eecbe4ee5..253dcb82d 100644 --- a/app/views/collections/show/_stream.html.erb +++ b/app/views/collections/show/_stream.html.erb @@ -2,21 +2,23 @@ data-drag-and-drop-target="container" data-action="turbo:before-morph-attribute->collapsible-columns#preventToggle" data-drag-and-drop-url="<%= columns_card_drops_stream_path("__id__") %>"> -
-
-

Maybe?

- <%= link_to collection_columns_stream_path(collection), class: "cards__expander-button btn btn--circle txt-x-small borderless", data: { turbo_frame: "_top" } do %> - <%= icon_tag "expand", class: "translucent" %> - Expand column +
+
+
+

Maybe?

+ <%= link_to collection_columns_stream_path(collection), class: "cards__expander-button btn btn--circle txt-x-small borderless", data: { turbo_frame: "_top" } do %> + <%= icon_tag "expand", class: "translucent" %> + Expand column + <% end %> +
+
+ + <%= render "columns/show/add_card_button", collection: collection %> + + <% if page.used? %> + <%= with_automatic_pagination "the-stream", @page do %> + <%= render "collections/columns/list", cards: page.records, draggable: true %> <% end %> -
-
- - <%= render "columns/show/add_card_button", collection: collection %> - - <% if page.used? %> - <%= with_automatic_pagination "the-stream", @page do %> - <%= render "collections/columns/list", cards: page.records, draggable: true %> <% end %> - <% end %> + From b421c48595a13acd26a109f3233c12d2f8ac2f2e Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Wed, 5 Nov 2025 10:07:40 -0600 Subject: [PATCH 3/9] Move translate to the translate container --- app/assets/stylesheets/card-columns.css | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css index 753c90e63..4c4595e6b 100644 --- a/app/assets/stylesheets/card-columns.css +++ b/app/assets/stylesheets/card-columns.css @@ -67,12 +67,6 @@ inline-size: var(--column-width-expanded); position: relative; scroll-snap-align: start; - translate: 0; - transition: translate var(--column-transition-duration) var(--ease-out-overshoot-subtle); - - .no-transitions & { - transition: none; - } &:not(.is-collapsed) { padding-inline: var(--column-padding-expanded); @@ -85,10 +79,6 @@ .card { display: none; } - - &:not(.cards--considering) { - translate: 0 var(--column-width-collapsed); - } } &.drag-and-drop__hover-container { @@ -106,6 +96,16 @@ .cards__transition-container { block-size: 100%; + translate: 0; + transition: translate var(--column-transition-duration) var(--ease-out-overshoot-subtle); + + .is-collapsed:not(.cards--considering) & { + translate: 0 var(--column-width-collapsed); + } + + .no-transitions & { + transition: none; + } } .cards__header { From b0f7c10bf9d76ed5abca36f2d4bd42dcf1f3933f Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Wed, 5 Nov 2025 10:10:58 -0600 Subject: [PATCH 4/9] Apply drag and drop effects to transition container --- app/assets/stylesheets/card-columns.css | 25 ++++++++++++++++++------- 1 file changed, 18 insertions(+), 7 deletions(-) diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css index 4c4595e6b..1f8c4611e 100644 --- a/app/assets/stylesheets/card-columns.css +++ b/app/assets/stylesheets/card-columns.css @@ -63,15 +63,10 @@ .cards { --column-color: color-mix(in srgb, var(--card-color) 15%, var(--color-canvas)); - border-radius: calc(var(--column-width-collapsed) / 2); inline-size: var(--column-width-expanded); position: relative; scroll-snap-align: start; - &:not(.is-collapsed) { - padding-inline: var(--column-padding-expanded); - } - &.is-collapsed { inline-size: var(--column-width-collapsed); @@ -82,8 +77,8 @@ } &.drag-and-drop__hover-container { - --dnd-bg-color: var(--column-color); - --dnd-border-color: var(--card-color); + --dnd-bg-color: transparent; + --dnd-border-color: transparent; } @media (any-hover: hover) { @@ -96,6 +91,7 @@ .cards__transition-container { block-size: 100%; + border-radius: calc(var(--column-width-collapsed) / 2); translate: 0; transition: translate var(--column-transition-duration) var(--ease-out-overshoot-subtle); @@ -103,6 +99,21 @@ translate: 0 var(--column-width-collapsed); } + .cards:not(.is-collapsed) & { + padding-inline: var(--column-padding-expanded); + } + + .drag-and-drop__hover-container & { + --dnd-bg-color: var(--column-color); + --dnd-border-color: var(--card-color); + + background-color: var(--dnd-bg-color); + outline: 2px dashed var(--dnd-border-color); + outline-offset: -2px; + transition: background-color 200ms; + z-index: 1; + } + .no-transitions & { transition: none; } From ce57313ba332c06e52b287cab4e152e21b4007af Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Wed, 5 Nov 2025 10:20:25 -0600 Subject: [PATCH 5/9] Add CSS to show column name on hover --- app/assets/stylesheets/card-columns.css | 23 ++++++++++++++++++++ app/views/collections/show/_closed.html.erb | 1 + app/views/collections/show/_column.html.erb | 1 + app/views/collections/show/_not_now.html.erb | 1 + app/views/collections/show/_stream.html.erb | 1 + 5 files changed, 27 insertions(+) diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css index 1f8c4611e..77718633a 100644 --- a/app/assets/stylesheets/card-columns.css +++ b/app/assets/stylesheets/card-columns.css @@ -79,8 +79,31 @@ &.drag-and-drop__hover-container { --dnd-bg-color: transparent; --dnd-border-color: transparent; + + &.show-column-name-on-hover { + &:after { + color: var(--card-color); + content: attr(data-column-name); + font-size: var(--text-x-small); + font-weight: 500; + line-height: var(--column-width-collapsed); + padding-inline: 1ch; + position: fixed; + text-transform: uppercase; + top: 0; + translate: -50%; + border-radius: 99rem; + } + + &.is-collapsed { + &:after { + writing-mode: vertical-rl; + } + } + } } + @media (any-hover: hover) { .card:has(.card__background img:not([src=""])):hover .card__background img:not([src=""]) { filter: blur(3px) brightness(1.2); diff --git a/app/views/collections/show/_closed.html.erb b/app/views/collections/show/_closed.html.erb index 98fa7e22b..97a67698f 100644 --- a/app/views/collections/show/_closed.html.erb +++ b/app/views/collections/show/_closed.html.erb @@ -2,6 +2,7 @@ data-drag-and-drop-target="container" data-drag-and-strum-target="container" data-collapsible-columns-target="column" + data-column-name="Done" data-action="turbo:before-morph-attribute->collapsible-columns#preventToggle" data-drag-and-drop-url="<%= columns_card_drops_closure_path("__id__") %>" > diff --git a/app/views/collections/show/_column.html.erb b/app/views/collections/show/_column.html.erb index 32d3d6a39..7cb1642bb 100644 --- a/app/views/collections/show/_column.html.erb +++ b/app/views/collections/show/_column.html.erb @@ -4,6 +4,7 @@ data-drag-and-strum-target="container" data-collapsible-columns-target="column" data-controller="clicker" + data-column-name="<%= column.name %>" data-action="turbo:before-morph-attribute->collapsible-columns#preventToggle turbo:before-stream-render@document->collapsible-columns#restoreState" data-drag-and-drop-url="<%= columns_card_drops_column_path("__id__", column_id: column.id) %>" > diff --git a/app/views/collections/show/_not_now.html.erb b/app/views/collections/show/_not_now.html.erb index f98a6ba38..a5fe53d05 100644 --- a/app/views/collections/show/_not_now.html.erb +++ b/app/views/collections/show/_not_now.html.erb @@ -2,6 +2,7 @@ data-collapsible-columns-target="column" data-drag-and-drop-target="container" data-drag-and-strum-target="container" + data-column-name="Not Now" data-action="turbo:before-morph-attribute->collapsible-columns#preventToggle" data-drag-and-drop-url="<%= columns_card_drops_not_now_path("__id__") %>" > diff --git a/app/views/collections/show/_stream.html.erb b/app/views/collections/show/_stream.html.erb index 253dcb82d..93980b991 100644 --- a/app/views/collections/show/_stream.html.erb +++ b/app/views/collections/show/_stream.html.erb @@ -1,5 +1,6 @@
">
From 623d2468efc217224ca0f70a71ad4a27b572709a Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Wed, 5 Nov 2025 10:42:31 -0600 Subject: [PATCH 6/9] Add intersection observer to only show when title isn't visible --- app/assets/stylesheets/card-columns.css | 11 +++++-- .../collapsible_columns_controller.js | 31 +++++++++++++++++-- app/views/collections/show/_columns.html.erb | 8 ++++- app/views/collections/show/_expander.html.erb | 2 +- app/views/collections/show/_stream.html.erb | 2 +- .../public/collections/show/_stream.html.erb | 2 +- 6 files changed, 47 insertions(+), 9 deletions(-) diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css index 77718633a..945700f35 100644 --- a/app/assets/stylesheets/card-columns.css +++ b/app/assets/stylesheets/card-columns.css @@ -80,9 +80,8 @@ --dnd-bg-color: transparent; --dnd-border-color: transparent; - &.show-column-name-on-hover { + &.is-off-screen { &:after { - color: var(--card-color); content: attr(data-column-name); font-size: var(--text-x-small); font-weight: 500; @@ -92,7 +91,6 @@ text-transform: uppercase; top: 0; translate: -50%; - border-radius: 99rem; } &.is-collapsed { @@ -100,6 +98,13 @@ writing-mode: vertical-rl; } } + + &:not(.is-collapsed) { + &:after { + background-color: var(--column-color); + inline-size: calc(var(--column-width-expanded) - 4px); /* make room for the dnd border */ + } + } } } diff --git a/app/javascript/controllers/collapsible_columns_controller.js b/app/javascript/controllers/collapsible_columns_controller.js index 0a87e47d5..3d9c8f412 100644 --- a/app/javascript/controllers/collapsible_columns_controller.js +++ b/app/javascript/controllers/collapsible_columns_controller.js @@ -2,8 +2,8 @@ import { Controller } from "@hotwired/stimulus" import { nextFrame, debounce } from "helpers/timing_helpers"; export default class extends Controller { - static classes = [ "collapsed", "noTransitions" ] - static targets = [ "column", "button" ] + static classes = [ "collapsed", "noTransitions", "titleNotVisible" ] + static targets = [ "column", "button", "title" ] static values = { collection: String } @@ -14,6 +14,14 @@ export default class extends Controller { async connect() { await this.#restoreColumnsDisablingTransitions() + this.#setupIntersectionObserver() + } + + disconnect() { + if (this._intersectionObserver) { + this._intersectionObserver.disconnect() + this._intersectionObserver = null + } } toggle({ target }) { @@ -106,4 +114,23 @@ export default class extends Controller { #localStorageKeyFor(column) { return `expand-${this.collectionValue}-${column.getAttribute("id")}` } + + #setupIntersectionObserver() { + if (typeof IntersectionObserver === "undefined") return + if (this._intersectionObserver) this._intersectionObserver.disconnect() + + this._intersectionObserver = new IntersectionObserver(entries => { + entries.forEach(entry => { + const title = entry.target + const column = title.closest('[data-collapsible-columns-target="column"]') + + if (!column) return + + const offscreen = entry.intersectionRatio === 0 + column.classList.toggle(this.titleNotVisibleClass, offscreen) + }) + }, { threshold: [0] }) + + this.titleTargets.forEach(title => this._intersectionObserver.observe(title)) + } } diff --git a/app/views/collections/show/_columns.html.erb b/app/views/collections/show/_columns.html.erb index 27912c09d..a52a308dd 100644 --- a/app/views/collections/show/_columns.html.erb +++ b/app/views/collections/show/_columns.html.erb @@ -8,7 +8,13 @@ dragenter->drag-and-strum#dragEnter drop->drag-and-drop#drop dragend->drag-and-drop#dragEnd" } do %> -
+
<%= render "collections/show/not_now", collection: collection %>
diff --git a/app/views/collections/show/_expander.html.erb b/app/views/collections/show/_expander.html.erb index 91e6466da..ea58f061f 100644 --- a/app/views/collections/show/_expander.html.erb +++ b/app/views/collections/show/_expander.html.erb @@ -1,6 +1,6 @@ <%= yield if block_given? %> diff --git a/app/views/collections/show/_stream.html.erb b/app/views/collections/show/_stream.html.erb index 93980b991..6e19774f2 100644 --- a/app/views/collections/show/_stream.html.erb +++ b/app/views/collections/show/_stream.html.erb @@ -6,7 +6,7 @@
-

Maybe?

+

Maybe?

<%= link_to collection_columns_stream_path(collection), class: "cards__expander-button btn btn--circle txt-x-small borderless", data: { turbo_frame: "_top" } do %> <%= icon_tag "expand", class: "translucent" %> Expand column diff --git a/app/views/public/collections/show/_stream.html.erb b/app/views/public/collections/show/_stream.html.erb index fc0d532a8..4fc065e78 100644 --- a/app/views/public/collections/show/_stream.html.erb +++ b/app/views/public/collections/show/_stream.html.erb @@ -1,7 +1,7 @@
-

Maybe?

+

Maybe?

<% if page.used? %> From 6713a97cc7bcabcb4012393bd0db0b3cc896ee45 Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Wed, 5 Nov 2025 11:05:33 -0600 Subject: [PATCH 7/9] Add hover effect back to Maybe column --- app/assets/stylesheets/card-columns.css | 6 ++---- app/views/collections/show/_stream.html.erb | 2 +- 2 files changed, 3 insertions(+), 5 deletions(-) diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css index 945700f35..8089110b0 100644 --- a/app/assets/stylesheets/card-columns.css +++ b/app/assets/stylesheets/card-columns.css @@ -527,11 +527,9 @@ /* ------------------------------------------------------------------------ */ .cards--considering { - position: relative; + --card-color: oklch(var(--lch-blue-medium)); - @media (min-width: 640px) { - padding-inline: var(--cards-gap); - } + position: relative; .card { --avatar-size: 2.75em; diff --git a/app/views/collections/show/_stream.html.erb b/app/views/collections/show/_stream.html.erb index 6e19774f2..1fd846bdc 100644 --- a/app/views/collections/show/_stream.html.erb +++ b/app/views/collections/show/_stream.html.erb @@ -3,7 +3,7 @@ data-column-name="Maybe?" data-action="turbo:before-morph-attribute->collapsible-columns#preventToggle" data-drag-and-drop-url="<%= columns_card_drops_stream_path("__id__") %>"> -
+

Maybe?

From 3e7cd204db8bce832aef8ee85b38f1147014bb62 Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Wed, 5 Nov 2025 11:14:30 -0600 Subject: [PATCH 8/9] Add title to Maybe column --- .../collapsible_columns_controller.js | 4 +-- app/views/collections/show/_columns.html.erb | 32 ++++++++----------- .../public/collections/show/_stream.html.erb | 2 +- 3 files changed, 17 insertions(+), 21 deletions(-) diff --git a/app/javascript/controllers/collapsible_columns_controller.js b/app/javascript/controllers/collapsible_columns_controller.js index 3d9c8f412..2b6c24e71 100644 --- a/app/javascript/controllers/collapsible_columns_controller.js +++ b/app/javascript/controllers/collapsible_columns_controller.js @@ -122,8 +122,8 @@ export default class extends Controller { this._intersectionObserver = new IntersectionObserver(entries => { entries.forEach(entry => { const title = entry.target - const column = title.closest('[data-collapsible-columns-target="column"]') - + const column = title.closest(".cards") + if (!column) return const offscreen = entry.intersectionRatio === 0 diff --git a/app/views/collections/show/_columns.html.erb b/app/views/collections/show/_columns.html.erb index a52a308dd..79a1cf4ec 100644 --- a/app/views/collections/show/_columns.html.erb +++ b/app/views/collections/show/_columns.html.erb @@ -1,32 +1,28 @@ -<%= tag.div data: { - controller: "drag-and-drop drag-and-strum", +<%= tag.div class: "card-columns", data: { + controller: "drag-and-drop drag-and-strum collapsible-columns", drag_and_drop_dragged_item_class: "drag-and-drop__dragged-item", drag_and_drop_hover_container_class: "drag-and-drop__hover-container", + collapsible_columns_collection_value: collection.id, + collapsible_columns_collapsed_class: "is-collapsed", + collapsible_columns_title_not_visible_class: "is-off-screen", + collapsible_columns_no_transitions_class: "no-transitions", action: " dragstart->drag-and-drop#dragStart dragover->drag-and-drop#dragOver dragenter->drag-and-strum#dragEnter drop->drag-and-drop#drop dragend->drag-and-drop#dragEnd" } do %> -
-
- <%= render "collections/show/not_now", collection: collection %> -
+
+ <%= render "collections/show/not_now", collection: collection %> +
- <%= render "collections/show/stream", collection: collection, page: page %> + <%= render "collections/show/stream", collection: collection, page: page %> -
- <%= render partial: "collections/show/column", collection: collection.columns.sorted, cached: ->(column){ [ column, column.leftmost?, column.rightmost? ] } %> - <%= render "collections/show/closed", collection: collection %> +
+ <%= render partial: "collections/show/column", collection: collection.columns.sorted, cached: ->(column){ [ column, column.leftmost?, column.rightmost? ] } %> + <%= render "collections/show/closed", collection: collection %> - <%= render "collections/show/menu/columns", collection: collection %> -
+ <%= render "collections/show/menu/columns", collection: collection %>
<% end %> diff --git a/app/views/public/collections/show/_stream.html.erb b/app/views/public/collections/show/_stream.html.erb index 4fc065e78..94df5f07d 100644 --- a/app/views/public/collections/show/_stream.html.erb +++ b/app/views/public/collections/show/_stream.html.erb @@ -1,4 +1,4 @@ -

Maybe?

From 52c49d99c036bb64c4b9d8c8ccb4f51f9c75e280 Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Wed, 5 Nov 2025 12:47:27 -0600 Subject: [PATCH 9/9] Cleanup after merging from Main --- app/views/boards/show/_columns.html.erb | 26 +++++++++++++------------ app/views/boards/show/_stream.html.erb | 2 +- 2 files changed, 15 insertions(+), 13 deletions(-) diff --git a/app/views/boards/show/_columns.html.erb b/app/views/boards/show/_columns.html.erb index a2a406aff..5223b9254 100644 --- a/app/views/boards/show/_columns.html.erb +++ b/app/views/boards/show/_columns.html.erb @@ -1,26 +1,28 @@ -<%= tag.div data: { - controller: "drag-and-drop drag-and-strum", +<%= tag.div class: "card-columns", data: { + controller: "collapsible-columns drag-and-drop drag-and-strum", drag_and_drop_dragged_item_class: "drag-and-drop__dragged-item", drag_and_drop_hover_container_class: "drag-and-drop__hover-container", + collapsible_columns_board_value: board.id, + collapsible_columns_collapsed_class: "is-collapsed", + collapsible_columns_no_transitions_class: "no-transitions", + collapsible_columns_title_not_visible_class: "is-off-screen", action: " dragstart->drag-and-drop#dragStart dragover->drag-and-drop#dragOver dragenter->drag-and-strum#dragEnter drop->drag-and-drop#drop dragend->drag-and-drop#dragEnd" } do %> -
-
- <%= render "boards/show/not_now", board: board %> -
+
+ <%= render "boards/show/not_now", board: board %> +
- <%= render "boards/show/stream", board: board, page: page %> + <%= render "boards/show/stream", board: board, page: page %> -
- <%= render partial: "boards/show/column", collection: board.columns.sorted, cached: ->(column){ [ column, column.leftmost?, column.rightmost? ] } %> - <%= render "boards/show/closed", board: board %> +
+ <%= render partial: "boards/show/column", collection: board.columns.sorted, cached: ->(column){ [ column, column.leftmost?, column.rightmost? ] } %> + <%= render "boards/show/closed", board: board %> - <%= render "boards/show/menu/columns", board: board %> -
+ <%= render "boards/show/menu/columns", board: board %>
<% end %> diff --git a/app/views/boards/show/_stream.html.erb b/app/views/boards/show/_stream.html.erb index ed3aba323..5d5f6508f 100644 --- a/app/views/boards/show/_stream.html.erb +++ b/app/views/boards/show/_stream.html.erb @@ -6,7 +6,7 @@
-

Maybe?

+

Maybe?

<%= link_to board_columns_stream_path(board), class: "cards__expander-button btn btn--circle txt-x-small borderless", data: { turbo_frame: "_top" } do %> <%= icon_tag "expand", class: "translucent" %> Expand column