From 287cac239ae6860757db2674cddd38fd455396f7 Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Tue, 11 Nov 2025 14:33:19 -0600 Subject: [PATCH 1/7] Stub out mobile view and styles --- app/assets/stylesheets/card-columns.css | 48 +++++++++++++++++++ app/views/boards/show.html.erb | 1 + app/views/boards/show/_columns.html.erb | 1 - .../boards/show/_mobile_columns.html.erb | 41 ++++++++++++++++ 4 files changed, 90 insertions(+), 1 deletion(-) create mode 100644 app/views/boards/show/_mobile_columns.html.erb diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css index 51816ae4d..d9acbb50d 100644 --- a/app/assets/stylesheets/card-columns.css +++ b/app/assets/stylesheets/card-columns.css @@ -47,6 +47,8 @@ @media (max-width: 639px) { --bubble-size: 3rem; + + display: none; } } @@ -730,4 +732,50 @@ } } } + + /* Mobile columns + /* -------------------------------------------------------------------------- */ + + .mobile-card-columns { + --column-gap: 8px; + --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-width: 100%; + + padding-inline: 1ch; + + @media (min-width: 640px) { + display: none; + } + + .cards.is-collapsed { + inline-size: auto; + padding-block: 0.5ch; + + .cards__expander { + flex-direction: row; + inline-size: auto; + + &:before { + block-size: 1px; + inline-size: 100%; + inset: 50% 0 auto; + translaate: 0 -50%; + } + + &:after { + block-size: var(--column-width-collapsed); + inline-size: calc(var(--column-width-collapsed) + var(--card-count) * var(--progress-increment)); + margin-inline-start: 0; + max-inline-size: var(--progress-max-width); + } + } + + .cards__expander-title { + writing-mode: revert; + } + } + } } diff --git a/app/views/boards/show.html.erb b/app/views/boards/show.html.erb index bd3266ac3..9f0c2ebee 100644 --- a/app/views/boards/show.html.erb +++ b/app/views/boards/show.html.erb @@ -26,5 +26,6 @@ <%= render "boards/show/filtered_cards", page: @page %> <% else %> <%= render "boards/show/columns", page: @page, board: @board %> + <%= render "boards/show/mobile_columns", page: @page, board: @board %> <% end %> <% end %> diff --git a/app/views/boards/show/_columns.html.erb b/app/views/boards/show/_columns.html.erb index 5223b9254..31938ef28 100644 --- a/app/views/boards/show/_columns.html.erb +++ b/app/views/boards/show/_columns.html.erb @@ -25,4 +25,3 @@ <%= render "boards/show/menu/columns", board: board %> <% end %> - diff --git a/app/views/boards/show/_mobile_columns.html.erb b/app/views/boards/show/_mobile_columns.html.erb new file mode 100644 index 000000000..e58c6b629 --- /dev/null +++ b/app/views/boards/show/_mobile_columns.html.erb @@ -0,0 +1,41 @@ +
+ + + + + + <% board.columns.sorted.each do |column| %> + + <% end %> + + + +
From e53d6912f61241a412515e58eaf8f3cd39444dc4 Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Tue, 11 Nov 2025 14:41:09 -0600 Subject: [PATCH 2/7] Add links to column show pages --- app/assets/stylesheets/card-columns.css | 1 + .../boards/show/_mobile_columns.html.erb | 30 +++++++++---------- 2 files changed, 16 insertions(+), 15 deletions(-) diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css index d9acbb50d..29bacd085 100644 --- a/app/assets/stylesheets/card-columns.css +++ b/app/assets/stylesheets/card-columns.css @@ -752,6 +752,7 @@ .cards.is-collapsed { inline-size: auto; + display: block; padding-block: 0.5ch; .cards__expander { diff --git a/app/views/boards/show/_mobile_columns.html.erb b/app/views/boards/show/_mobile_columns.html.erb index e58c6b629..732f71875 100644 --- a/app/views/boards/show/_mobile_columns.html.erb +++ b/app/views/boards/show/_mobile_columns.html.erb @@ -1,41 +1,41 @@
- - - + <% end %> <% board.columns.sorted.each do |column| %> - + <% end %> <% end %> - + <% end %> + + <%= link_to board_columns_not_now_path(board), class: "cards cards--on-deck is-collapsed", style: "--card-color: var(--color-card-complete);" do %> +
+ 0 +

+ Not Now +

+
+ <% end %>
From 822786af723ae46f1d2b2a2d61bb3c398fd4fbff Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Tue, 11 Nov 2025 14:51:27 -0600 Subject: [PATCH 3/7] Add correct counts to columns --- app/views/boards/show/_mobile_columns.html.erb | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/app/views/boards/show/_mobile_columns.html.erb b/app/views/boards/show/_mobile_columns.html.erb index 732f71875..15b5e6830 100644 --- a/app/views/boards/show/_mobile_columns.html.erb +++ b/app/views/boards/show/_mobile_columns.html.erb @@ -1,8 +1,8 @@
<%= link_to board_columns_stream_path(board), class: "cards cards--considering is-collapsed" do %> -
- 0 +
+ <%= board.cards.awaiting_triage.count %>

Maybe?

@@ -11,8 +11,8 @@ <% board.columns.sorted.each do |column| %> <%= link_to board_column_path(column.board, column), class: "cards cards--doing is-collapsed", style: "--card-color: #{column.color}" do %> -
- 0 +
+ <%= column.cards.active.count %>

<%= column.name %>

@@ -21,8 +21,8 @@ <% end %> <%= link_to board_columns_closed_path(board), class: "cards cards--on-deck is-collapsed", style: "--card-color: var(--color-card-complete);" do %> -
- 0 +
+ <%= board.cards.closed.count %>

Done

@@ -30,8 +30,8 @@ <% end %> <%= link_to board_columns_not_now_path(board), class: "cards cards--on-deck is-collapsed", style: "--card-color: var(--color-card-complete);" do %> -
- 0 +
+ <%= board.cards.postponed.count %>

Not Now

From 3892003baab599a56b44244b161def0fa8c75917 Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Tue, 11 Nov 2025 14:54:12 -0600 Subject: [PATCH 4/7] Add turbo attributes to fix content missing error --- app/views/boards/show/_mobile_columns.html.erb | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/app/views/boards/show/_mobile_columns.html.erb b/app/views/boards/show/_mobile_columns.html.erb index 15b5e6830..13b275c65 100644 --- a/app/views/boards/show/_mobile_columns.html.erb +++ b/app/views/boards/show/_mobile_columns.html.erb @@ -1,6 +1,6 @@
- <%= link_to board_columns_stream_path(board), class: "cards cards--considering is-collapsed" do %> + <%= link_to board_columns_stream_path(board), class: "cards cards--considering is-collapsed", data: { turbo_frame: "_top" } do %>
<%= board.cards.awaiting_triage.count %>

@@ -10,7 +10,7 @@ <% end %> <% board.columns.sorted.each do |column| %> - <%= link_to board_column_path(column.board, column), class: "cards cards--doing is-collapsed", style: "--card-color: #{column.color}" do %> + <%= link_to board_column_path(column.board, column), class: "cards cards--doing is-collapsed", style: "--card-color: #{column.color}", data: { turbo_frame: "_top" } do %>
<%= column.cards.active.count %>

@@ -20,7 +20,7 @@ <% end %> <% end %> - <%= link_to board_columns_closed_path(board), class: "cards cards--on-deck is-collapsed", style: "--card-color: var(--color-card-complete);" do %> + <%= link_to board_columns_closed_path(board), class: "cards cards--on-deck is-collapsed", style: "--card-color: var(--color-card-complete);", data: { turbo_frame: "_top" } do %>
<%= board.cards.closed.count %>

@@ -29,7 +29,7 @@

<% end %> - <%= link_to board_columns_not_now_path(board), class: "cards cards--on-deck is-collapsed", style: "--card-color: var(--color-card-complete);" do %> + <%= link_to board_columns_not_now_path(board), class: "cards cards--on-deck is-collapsed", style: "--card-color: var(--color-card-complete);", data: { turbo_frame: "_top" } do %>
<%= board.cards.postponed.count %>

From d8c6b06ae7b30b88361fca0bfc2e19333bbd32b1 Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Tue, 11 Nov 2025 15:51:34 -0600 Subject: [PATCH 5/7] Start at smaller viewport size --- app/assets/stylesheets/card-columns.css | 6 +++--- app/views/boards/show/_mobile_columns.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 29bacd085..9ea410fd3 100644 --- a/app/assets/stylesheets/card-columns.css +++ b/app/assets/stylesheets/card-columns.css @@ -45,7 +45,7 @@ min-block-size: 20lh; } - @media (max-width: 639px) { + @media (max-width: 519px) { --bubble-size: 3rem; display: none; @@ -744,9 +744,9 @@ --progress-max-cards: 20; --progress-max-width: 100%; - padding-inline: 1ch; + padding-inline: 3vw; - @media (min-width: 640px) { + @media (min-width: 520px) { display: none; } diff --git a/app/views/boards/show/_mobile_columns.html.erb b/app/views/boards/show/_mobile_columns.html.erb index 13b275c65..14c6b9804 100644 --- a/app/views/boards/show/_mobile_columns.html.erb +++ b/app/views/boards/show/_mobile_columns.html.erb @@ -1,5 +1,4 @@
- <%= link_to board_columns_stream_path(board), class: "cards cards--considering is-collapsed", data: { turbo_frame: "_top" } do %>
<%= board.cards.awaiting_triage.count %> @@ -37,5 +36,4 @@

<% end %> -

From 58859cdc0b8b58797153afa42e33890d6f854d23 Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Wed, 12 Nov 2025 11:02:57 -0600 Subject: [PATCH 6/7] Move Not Now to top --- app/views/boards/show/_mobile_columns.html.erb | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/app/views/boards/show/_mobile_columns.html.erb b/app/views/boards/show/_mobile_columns.html.erb index 14c6b9804..fd0b29b58 100644 --- a/app/views/boards/show/_mobile_columns.html.erb +++ b/app/views/boards/show/_mobile_columns.html.erb @@ -1,4 +1,13 @@
+ <%= link_to board_columns_not_now_path(board), class: "cards cards--on-deck is-collapsed", style: "--card-color: var(--color-card-complete);", data: { turbo_frame: "_top" } do %> +
+ <%= board.cards.postponed.count %> +

+ Not Now +

+
+ <% end %> + <%= link_to board_columns_stream_path(board), class: "cards cards--considering is-collapsed", data: { turbo_frame: "_top" } do %>
<%= board.cards.awaiting_triage.count %> @@ -27,13 +36,4 @@
<% end %> - - <%= link_to board_columns_not_now_path(board), class: "cards cards--on-deck is-collapsed", style: "--card-color: var(--color-card-complete);", data: { turbo_frame: "_top" } do %> -
- <%= board.cards.postponed.count %> -

- Not Now -

-
- <% end %>
From b143fef0a493fa2689bf073c23f220d30f611702 Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Wed, 12 Nov 2025 11:07:41 -0600 Subject: [PATCH 7/7] Show only on fat-finger touch devices --- app/assets/stylesheets/card-columns.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css index 9ea410fd3..f5346f9e2 100644 --- a/app/assets/stylesheets/card-columns.css +++ b/app/assets/stylesheets/card-columns.css @@ -45,9 +45,8 @@ min-block-size: 20lh; } - @media (max-width: 519px) { - --bubble-size: 3rem; - + /* Hide on small, fat-finger touch devices */ + @media (hover: none) and (pointer: coarse) and (max-width: 519px) { display: none; } } @@ -746,7 +745,8 @@ padding-inline: 3vw; - @media (min-width: 520px) { + /* Hide on larger devices with cursors */ + @media (hover: hover) and (min-width: 520px) { display: none; }