From f53ae635389bd18c23beca403f2be0b023812999 Mon Sep 17 00:00:00 2001 From: Jason Zimdars Date: Wed, 17 Sep 2025 16:38:51 -0500 Subject: [PATCH 001/161] First pass at collapsible columns --- app/assets/stylesheets/card-columns.css | 113 ++++++++---------- app/views/cards/display/_preview.html.erb | 2 +- app/views/cards/index/_columns.html.erb | 14 ++- .../index/engagement/_considering.html.erb | 2 - .../cards/index/engagement/_doing.html.erb | 45 +++---- .../cards/index/engagement/_on_deck.html.erb | 2 - 6 files changed, 83 insertions(+), 95 deletions(-) diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css index 3c85d3517..637470c3b 100644 --- a/app/assets/stylesheets/card-columns.css +++ b/app/assets/stylesheets/card-columns.css @@ -21,9 +21,14 @@ } .card-columns { - margin: auto; - max-inline-size: 100%; - padding-inline: var(--reserved-bubble-space); + --collapsed: 56px; + --expanded-min: 400px; + + display: flex; + gap: 0.5em; + justify-content: center; + align-items: stretch; + position: relative; transition: 300ms ease-in-out; @@ -42,8 +47,8 @@ } @media (min-width: 640px) { - display: grid; - grid-template-columns: repeat(3, 1fr); + /* display: grid; */ + /* grid-template-columns: repeat(3, 1fr); */ } } @@ -52,23 +57,60 @@ .cards { align-items: stretch; + background-color: color-mix(in srgb, var(--card-color) 30%, var(--color-canvas)); display: flex; flex-direction: column; gap: var(--cards-gap); justify-content: start; - padding: 0 var(--cards-gap) var(--cards-gap); + padding: var(--cards-gap); position: relative; + scroll-snap-align: start; + flex: 1 0 var(--expanded-min); + min-width: var(--expanded-min); + max-width: var(--expanded-min); + transition: all 300ms ease; /* Make sure filter dialogs don't end up behind sticky headers */ &:has([open]) { z-index: 3; } + &.is-collapsed { + flex: 0 0 var(--collapsed); + min-width: auto; + width: var(--collapsed); + + .blank-slate, + .card { + display: none; + } + } + @media (max-width: 639px) { padding-block-end: calc(var(--cards-gap) * 2); padding-inline-start: var(--cards-gap); } + .cards__expander { + flex-direction: row-reverse; + gap: 0.5ch; + + .cards.is-collapsed & { + block-size: 100%; + display: flex; + flex-direction: column; + justify-content: start; + } + } + + .cards__expander-button { + --btn-padding: 0; + + .cards.is-collapsed & { + writing-mode: vertical-rl; + } + } + .card { --block-space: 1em; --block-space-half: 0.5em; @@ -178,67 +220,10 @@ /* ------------------------------------------------------------------------ */ .cards--considering { - background-color: var(--color-canvas); - background-image: linear-gradient(90deg, - transparent 0%, - color-mix(in srgb, var(--color-considering) 25%, transparent) 33%, - color-mix(in srgb, var(--color-considering) 25%, transparent) 66%, - transparent 100%); - padding-block-start: 2em; - - @supports(mask: radial-gradient(black)) { - &:before { - background: linear-gradient(90deg, - color-mix(in oklch, var(--color-considering) 0%, transparent) 0%, - color-mix(in oklch, var(--color-considering) 20%, transparent) 25%, - color-mix(in oklch, var(--color-considering) 20%, transparent) 50%, - color-mix(in oklch, var(--color-considering) 0%, transparent) 100%); - content: ""; - inset: 0; - mask: radial-gradient(6px at 50% calc(100% + 3px), transparent calc(99% - 2px), black calc(101% - 2px) 99%, transparent 101%) calc(50% - 8px) calc(50% - 3px + .5px)/16px 6px, - radial-gradient(6px at 50% -3px, transparent calc(99% - 2px), black calc(101% - 2px) 99%, transparent 101%) 50% calc(50% + 3px)/16px 6px; - position: absolute; - z-index: 0; - } - } - @media (min-width: 640px) { padding-inline: var(--cards-gap); } - .cards__decoration { - --size: 4.25em; - - background-color: var(--color-canvas); - background-image: radial-gradient(ellipse at bottom, - color-mix(in srgb, var(--color-considering) 30%, transparent) 0%, - transparent 70%); - block-size: var(--size); - inline-size: 100%; - inset: calc(var(--size) * -1) 0 auto 0; - position: absolute; - z-index: -1; - - @supports(mask: radial-gradient(black)) { - &:before { - background: radial-gradient(ellipse at bottom, - color-mix(in srgb, var(--color-considering) 30%, transparent) 0%, - transparent 70%); - content: ""; - inset: 0; - mask: radial-gradient(6px at 50% calc(100% + 3px), transparent calc(99% - 2px), black calc(101% - 2px) 99%, transparent 101%) calc(50% - 8px) calc(50% - 3px + .5px)/16px 6px, - radial-gradient(6px at 50% -3px, transparent calc(99% - 2px), black calc(101% - 2px) 99%, transparent 101%) 50% calc(50% + 3px)/16px 6px; - position: absolute; - z-index: 0; - } - } - - &.cards__decoration--end { - inset: auto 0 calc(var(--size) * -1); - rotate: 180deg; - } - } - .card { --avatar-size: 2.75em; --text-small: 1.1em; @@ -343,6 +328,8 @@ /* ------------------------------------------------------------------------ */ .cards--doing { + margin-block: var(--cards-gap); + @media (min-width: 640px) { padding-inline: var(--cards-gap); } diff --git a/app/views/cards/display/_preview.html.erb b/app/views/cards/display/_preview.html.erb index 9fda1c484..771eedc91 100644 --- a/app/views/cards/display/_preview.html.erb +++ b/app/views/cards/display/_preview.html.erb @@ -23,7 +23,7 @@ - <%= render "cards/display/preview/stages", card: card if card.doing? %> + <%# render "cards/display/preview/stages", card: card if card.doing? %> diff --git a/app/views/cards/index/_columns.html.erb b/app/views/cards/index/_columns.html.erb index 9104145fc..e64489799 100644 --- a/app/views/cards/index/_columns.html.erb +++ b/app/views/cards/index/_columns.html.erb @@ -1,10 +1,14 @@ <% cache @cache_key do %> <%= turbo_frame_tag :card_columns do %> -
- <% unless user_filtering.only_closed? %> - <%= render "cards/index/engagement/on_deck", user_filtering: user_filtering, **on_deck.to_h %> - <%= render "cards/index/engagement/considering", user_filtering: user_filtering, **considering.to_h %> - <%= render "cards/index/engagement/doing", user_filtering: user_filtering, **doing.to_h %> +
+ <%= render "cards/index/engagement/considering", user_filtering: user_filtering, **considering.to_h %> + + <% if workflow = user_filtering.single_collection.workflow %> + <% workflow.stages.each do |stage| %> + <%= render "cards/index/engagement/doing", user_filtering: user_filtering, **doing.to_h, stage: stage, last: stage == workflow.stages.last %> + <% end %> + <% else %> + <%= render "cards/index/engagement/doing", user_filtering: user_filtering, **doing.to_h, last: false %> <% end %>
diff --git a/app/views/cards/index/engagement/_considering.html.erb b/app/views/cards/index/engagement/_considering.html.erb index 44a80c0e5..68f52aa07 100644 --- a/app/views/cards/index/engagement/_considering.html.erb +++ b/app/views/cards/index/engagement/_considering.html.erb @@ -4,7 +4,6 @@ data-related-element-target="related" data-related-element-group-value="card-columns" data-action="mouseover->related-element#highlight mouseout->related-element#unhighlight"> -
<%= render "cards/index/add_card_button", user_filtering: user_filtering %> <% if page.used? %> <%= render partial: "cards/display/preview", collection: page.records, as: :card, locals: { draggable: true }, cached: true %> @@ -15,5 +14,4 @@
<% end %> <% end %> -
diff --git a/app/views/cards/index/engagement/_doing.html.erb b/app/views/cards/index/engagement/_doing.html.erb index 7d69e9322..c64e28d1a 100644 --- a/app/views/cards/index/engagement/_doing.html.erb +++ b/app/views/cards/index/engagement/_doing.html.erb @@ -1,26 +1,27 @@ -
- <% if workflow = filter.single_workflow %> - <%= render "cards/index/workflow_filter", workflow: workflow, filter: filter %> - <% else %> -

- Working On -

- <% end %> +
" style="--card-color: <%= stage.color if defined?(stage) && stage %>" + data-controller="toggle-class" data-toggle-class-toggle-class="is-collapsed"> + <% + filtered_records = if defined?(stage) && stage + page.records.select { |card| card.stage == stage } + else + page.records + end + %> - <% if page.used? %> - <%= render partial: "cards/display/preview", collection: page.records, as: :card, locals: { draggable: true }, cached: ->(card) { cacheable_preview_parts_for(card) } %> +
+ <%= filtered_records.count %> + +
- <% unless page.last? %> -
- <%= cards_next_page_link "doing-cards", page: page, filter: filter %> -
- <% end %> - <% else %> -

<%= user_filtering.any? ? "No matches" : "Nothing here" %>

+ <% if filtered_records.any? %> + <%= render partial: "cards/display/preview", collection: filtered_records, as: :card, locals: { draggable: true }, cached: ->(card) { cacheable_preview_parts_for(card) } %> + + <% unless page.last? %> +
+ <%= cards_next_page_link "doing-cards", page: page, filter: filter %> +
<% end %> + <% else %> +

<%= user_filtering.any? ? "No matches" : "Nothing here" %>

+ <% end %>
diff --git a/app/views/cards/index/engagement/_on_deck.html.erb b/app/views/cards/index/engagement/_on_deck.html.erb index c56871f7c..b9b74f19a 100644 --- a/app/views/cards/index/engagement/_on_deck.html.erb +++ b/app/views/cards/index/engagement/_on_deck.html.erb @@ -4,8 +4,6 @@ data-related-element-target="related" data-related-element-group-value="card-columns" data-action="mouseover->related-element#highlight mouseout->related-element#unhighlight"> -

On Deck

- <% if page.used? %> <%= render partial: "cards/display/preview", collection: page.records, as: :card, locals: { draggable: true }, cached: true %> From 2e662a30c2261221e15c6c1be99bd699f43c1b9a Mon Sep 17 00:00:00 2001 From: Jason Zimdars Date: Thu, 18 Sep 2025 09:41:49 -0500 Subject: [PATCH 002/161] Bring back visual effect --- app/assets/stylesheets/card-columns.css | 57 +++++++++++++++++++ .../index/engagement/_considering.html.erb | 7 +-- 2 files changed, 60 insertions(+), 4 deletions(-) diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css index 637470c3b..8b4b0f22f 100644 --- a/app/assets/stylesheets/card-columns.css +++ b/app/assets/stylesheets/card-columns.css @@ -220,10 +220,67 @@ /* ------------------------------------------------------------------------ */ .cards--considering { + background-color: var(--color-canvas); + background-image: linear-gradient(90deg, + transparent 0%, + color-mix(in srgb, var(--color-considering) 25%, transparent) 33%, + color-mix(in srgb, var(--color-considering) 25%, transparent) 66%, + transparent 100%); + padding-block-start: 2em; + + @supports(mask: radial-gradient(black)) { + &:before { + background: linear-gradient(90deg, + color-mix(in oklch, var(--color-considering) 0%, transparent) 0%, + color-mix(in oklch, var(--color-considering) 20%, transparent) 25%, + color-mix(in oklch, var(--color-considering) 20%, transparent) 50%, + color-mix(in oklch, var(--color-considering) 0%, transparent) 100%); + content: ""; + inset: 0; + mask: radial-gradient(6px at 50% calc(100% + 3px), transparent calc(99% - 2px), black calc(101% - 2px) 99%, transparent 101%) calc(50% - 8px) calc(50% - 3px + .5px)/16px 6px, + radial-gradient(6px at 50% -3px, transparent calc(99% - 2px), black calc(101% - 2px) 99%, transparent 101%) 50% calc(50% + 3px)/16px 6px; + position: absolute; + z-index: 0; + } + } + @media (min-width: 640px) { padding-inline: var(--cards-gap); } + .cards__decoration { + --size: 4.25em; + + background-color: var(--color-canvas); + background-image: radial-gradient(ellipse at bottom, + color-mix(in srgb, var(--color-considering) 30%, transparent) 0%, + transparent 70%); + block-size: var(--size); + inline-size: 100%; + inset: calc(var(--size) * -1) 0 auto 0; + position: absolute; + z-index: -1; + + @supports(mask: radial-gradient(black)) { + &:before { + background: radial-gradient(ellipse at bottom, + color-mix(in srgb, var(--color-considering) 30%, transparent) 0%, + transparent 70%); + content: ""; + inset: 0; + mask: radial-gradient(6px at 50% calc(100% + 3px), transparent calc(99% - 2px), black calc(101% - 2px) 99%, transparent 101%) calc(50% - 8px) calc(50% - 3px + .5px)/16px 6px, + radial-gradient(6px at 50% -3px, transparent calc(99% - 2px), black calc(101% - 2px) 99%, transparent 101%) 50% calc(50% + 3px)/16px 6px; + position: absolute; + z-index: 0; + } + } + + &.cards__decoration--end { + inset: auto 0 calc(var(--size) * -1); + rotate: 180deg; + } + } + .card { --avatar-size: 2.75em; --text-small: 1.1em; diff --git a/app/views/cards/index/engagement/_considering.html.erb b/app/views/cards/index/engagement/_considering.html.erb index 68f52aa07..df137f009 100644 --- a/app/views/cards/index/engagement/_considering.html.erb +++ b/app/views/cards/index/engagement/_considering.html.erb @@ -1,9 +1,7 @@
+ data-drop-target="considering"> +
<%= render "cards/index/add_card_button", user_filtering: user_filtering %> <% if page.used? %> <%= render partial: "cards/display/preview", collection: page.records, as: :card, locals: { draggable: true }, cached: true %> @@ -14,4 +12,5 @@ <% end %> <% end %> +
From c0058dbb2c071e83c2c75107c8c91c1f240e74e3 Mon Sep 17 00:00:00 2001 From: Jason Zimdars Date: Thu, 18 Sep 2025 10:02:50 -0500 Subject: [PATCH 003/161] Improve collapsed display --- app/assets/stylesheets/card-columns.css | 15 ++++++++++++--- app/views/cards/index/_columns.html.erb | 4 ++-- app/views/cards/index/engagement/_doing.html.erb | 4 ++-- 3 files changed, 16 insertions(+), 7 deletions(-) diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css index 8b4b0f22f..6817b763c 100644 --- a/app/assets/stylesheets/card-columns.css +++ b/app/assets/stylesheets/card-columns.css @@ -28,9 +28,8 @@ gap: 0.5em; justify-content: center; align-items: stretch; - position: relative; - transition: 300ms ease-in-out; + transition: 200ms var(--ease-out-expo); &:has(.cards) { min-block-size: 20lh; @@ -57,7 +56,6 @@ .cards { align-items: stretch; - background-color: color-mix(in srgb, var(--card-color) 30%, var(--color-canvas)); display: flex; flex-direction: column; gap: var(--cards-gap); @@ -76,6 +74,9 @@ } &.is-collapsed { + background-color: color-mix(in srgb, var(--card-color) 30%, var(--color-canvas)); + border-radius: 0.2em; + box-shadow: var(--shadow); flex: 0 0 var(--collapsed); min-width: auto; width: var(--collapsed); @@ -111,6 +112,14 @@ } } + .cards__expander-count { + display: none; + + .cards.is-collapsed & { + display: initial; + } + } + .card { --block-space: 1em; --block-space-half: 0.5em; diff --git a/app/views/cards/index/_columns.html.erb b/app/views/cards/index/_columns.html.erb index e64489799..53ff01811 100644 --- a/app/views/cards/index/_columns.html.erb +++ b/app/views/cards/index/_columns.html.erb @@ -5,10 +5,10 @@ <% if workflow = user_filtering.single_collection.workflow %> <% workflow.stages.each do |stage| %> - <%= render "cards/index/engagement/doing", user_filtering: user_filtering, **doing.to_h, stage: stage, last: stage == workflow.stages.last %> + <%= render "cards/index/engagement/doing", user_filtering: user_filtering, **doing.to_h, stage: stage%> <% end %> <% else %> - <%= render "cards/index/engagement/doing", user_filtering: user_filtering, **doing.to_h, last: false %> + <%= render "cards/index/engagement/doing", user_filtering: user_filtering, **doing.to_h %> <% end %> diff --git a/app/views/cards/index/engagement/_doing.html.erb b/app/views/cards/index/engagement/_doing.html.erb index c64e28d1a..f1a717196 100644 --- a/app/views/cards/index/engagement/_doing.html.erb +++ b/app/views/cards/index/engagement/_doing.html.erb @@ -1,4 +1,4 @@ -
" style="--card-color: <%= stage.color if defined?(stage) && stage %>" +