From 3de37f3ab35eb8fdb5b8da26d8f59b3d4ca0c1a5 Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Wed, 29 Oct 2025 10:58:26 -0500 Subject: [PATCH 1/5] Drag container outline offset --- app/assets/stylesheets/drag_and_drop.css | 1 + 1 file changed, 1 insertion(+) diff --git a/app/assets/stylesheets/drag_and_drop.css b/app/assets/stylesheets/drag_and_drop.css index 4af492a85..99b3089eb 100644 --- a/app/assets/stylesheets/drag_and_drop.css +++ b/app/assets/stylesheets/drag_and_drop.css @@ -9,6 +9,7 @@ .drag-and-drop__hover-container { background-color: var(--color-selected-light); outline: 2px dashed var(--color-selected-dark); + outline-offset: -2px; transition: background-color 200ms; z-index: 1; From ff5e1fb80a4657b61104654b8c861d36d6864137 Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Wed, 29 Oct 2025 10:59:02 -0500 Subject: [PATCH 2/5] Remove column transition --- app/assets/stylesheets/card-columns.css | 3 --- 1 file changed, 3 deletions(-) diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css index f9559dee9..012f7faa8 100644 --- a/app/assets/stylesheets/card-columns.css +++ b/app/assets/stylesheets/card-columns.css @@ -66,8 +66,6 @@ inline-size: var(--column-width-expanded); position: relative; scroll-snap-align: start; - transition: inline-size 300ms ease-out; - will-change: inline-size; .no-transitions & { transition: none; @@ -80,7 +78,6 @@ &.is-collapsed { inline-size: var(--column-width-collapsed); - .blank-slate, .pagination-link.pagination-link--active-when-observed, .card { display: none; From 9f61907eb860bb86deb6351a6f0e23c5f104cd79 Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Wed, 29 Oct 2025 11:02:47 -0500 Subject: [PATCH 3/5] Add bounce to cards --- app/assets/stylesheets/card-columns.css | 3 +++ app/views/collections/columns/closeds/show.html.erb | 8 +++++--- app/views/collections/columns/not_nows/show.html.erb | 8 +++++--- app/views/collections/columns/show.html.erb | 8 +++++--- 4 files changed, 18 insertions(+), 9 deletions(-) diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css index 012f7faa8..e13ba8b59 100644 --- a/app/assets/stylesheets/card-columns.css +++ b/app/assets/stylesheets/card-columns.css @@ -106,9 +106,12 @@ margin-block-start: -1ch; margin-inline: -1ch; overflow: hidden; + translate: 0 -1ch; + transition: translate 300ms var(--ease-out-overshoot); .cards:not(.is-collapsed) & { padding: 1ch; + translate: 0 0; } .card { diff --git a/app/views/collections/columns/closeds/show.html.erb b/app/views/collections/columns/closeds/show.html.erb index 06f9b82fc..7ed422c02 100644 --- a/app/views/collections/columns/closeds/show.html.erb +++ b/app/views/collections/columns/closeds/show.html.erb @@ -24,9 +24,11 @@ <%= render "collections/columns/list", cards: @page.records, draggable: true %> <% end %> <% else %> -
-

Drag cards here

-

Nothing here

+
+
+

Drag cards here

+

Nothing here

+
<% end %> <% end %> diff --git a/app/views/collections/columns/not_nows/show.html.erb b/app/views/collections/columns/not_nows/show.html.erb index d668934e4..91f899db5 100644 --- a/app/views/collections/columns/not_nows/show.html.erb +++ b/app/views/collections/columns/not_nows/show.html.erb @@ -24,9 +24,11 @@ <%= render "collections/columns/list", cards: @page.records, draggable: true %> <% end %> <% else %> -
-

Drag cards here

-

Nothing here

+
+
+

Drag cards here

+

Nothing here

+
<% end %> <% end %> diff --git a/app/views/collections/columns/show.html.erb b/app/views/collections/columns/show.html.erb index b21a9aa87..19123c79f 100644 --- a/app/views/collections/columns/show.html.erb +++ b/app/views/collections/columns/show.html.erb @@ -24,9 +24,11 @@ <%= render "collections/columns/list", cards: @page.records, draggable: true %> <% end %> <% else %> -
-

Drag cards here

-

Nothing here

+
+
+

Drag cards here

+

Nothing here

+
<% end %> <% end %> From c3024e251ef35e875aeff595ba0780bc5d820b73 Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Wed, 29 Oct 2025 11:04:30 -0500 Subject: [PATCH 4/5] Also fade out opacity --- app/assets/stylesheets/card-columns.css | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css index e13ba8b59..b258425d8 100644 --- a/app/assets/stylesheets/card-columns.css +++ b/app/assets/stylesheets/card-columns.css @@ -105,11 +105,14 @@ gap: var(--cards-gap); margin-block-start: -1ch; margin-inline: -1ch; + opacity: 0; overflow: hidden; translate: 0 -1ch; - transition: translate 300ms var(--ease-out-overshoot); + transition: 350ms var(--ease-out-overshoot); + transition-property: opacity, translate; .cards:not(.is-collapsed) & { + opacity: 1; padding: 1ch; translate: 0 0; } From 2cc694281c364f140d6f8100775a106cdfa824d2 Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Wed, 29 Oct 2025 11:09:42 -0500 Subject: [PATCH 5/5] Animate the column BG --- app/assets/stylesheets/card-columns.css | 39 ++++++++++++++++--------- 1 file changed, 26 insertions(+), 13 deletions(-) diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css index b258425d8..75c51b576 100644 --- a/app/assets/stylesheets/card-columns.css +++ b/app/assets/stylesheets/card-columns.css @@ -7,6 +7,7 @@ --cards-gap: min(1.2cqi, 1.7rem); --column-gap: 8px; --column-padding-expanded: calc(var(--column-gap) * 2); + --column-transition-duration: 300ms; --column-width-collapsed: 40px; --column-width-expanded: 450px; --progress-increment: var(--progress-max-height) / var(--progress-max-cards); @@ -108,7 +109,7 @@ opacity: 0; overflow: hidden; translate: 0 -1ch; - transition: 350ms var(--ease-out-overshoot); + transition: var(--column-transition-duration) var(--ease-out-overshoot); transition-property: opacity, translate; .cards:not(.is-collapsed) & { @@ -130,7 +131,9 @@ margin-block-start: var(--column-width-collapsed); } - /* Used when filtering */ + /* Cards grid; used when filtering + /* -------------------------------------------------------------------------- */ + .cards--grid { --cards-gap: 1rem; --card-grid-columns: 1; @@ -190,6 +193,25 @@ } } + /* Progress */ + &:after { + background: linear-gradient(to bottom, var(--card-color), var(--column-color) 80%); + block-size: var(--column-width-collapsed); + border-radius: 99rem; + content: ""; + inset: 0 0 auto; + margin-inline: auto; + max-block-size: var(--progress-max-height); + min-block-size: var(--column-width-collapsed); + opacity: 0; + position: absolute; + transition: + block-size 500ms var(--ease-out-overshoot), + inline-size var(--column-transition-duration) ease-out, + opacity var(--column-transition-duration) ease-out; + z-index: -1; + } + .cards.is-collapsed & { block-size: 100%; flex-direction: column; @@ -208,19 +230,10 @@ z-index: -2; } - /* Progress */ &:after { - background: linear-gradient(to bottom, var(--card-color), var(--column-color) 80%); block-size: calc(var(--column-width-collapsed) + var(--card-count) * var(--progress-increment)); - border-radius: 99rem; - content: ""; - inline-size: 100%; - inset: 0 0 auto; - max-block-size: var(--progress-max-height); - min-block-size: var(--column-width-collapsed); - position: absolute; - transition: block-size 500ms var(--ease-out-overshoot); - z-index: -1; + opacity: 1; + inline-size: var(--column-width-collapsed); } }