Merge pull request #1560 from basecamp/mobile-column-view

Mobile column view

app/assets/stylesheets/card-columns.css

@@ -45,8 +45,9 @@
       min-block-size: 20lh;
     }
 
-    @media (max-width: 639px) {
-      --bubble-size: 3rem;
+    /* Hide on small, fat-finger touch devices */
+    @media (hover: none) and (pointer: coarse) and (max-width: 519px) {
+      display: none;
     }
   }
 
@@ -730,4 +731,52 @@
       }
     }
   }
+
+  /* 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: 3vw;
+
+    /* Hide on larger devices with cursors */
+    @media (hover: hover) and (min-width: 520px) {
+      display: none;
+    }
+
+    .cards.is-collapsed {
+      inline-size: auto;
+      display: block;
+      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;
+      }
+    }
+  }
 }

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 %>

app/views/boards/show/_columns.html.erb

@@ -25,4 +25,3 @@
     <%= render "boards/show/menu/columns", board: board %>
   </div>
 <% end %>
-

app/views/boards/show/_mobile_columns.html.erb

@@ -0,0 +1,39 @@
+<section class="mobile-card-columns">
+  <%= 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 %>
+    <div class="cards__expander btn btn--plain" style="--card-count: <%= board.cards.postponed.count %>">
+      <span class="cards__expander-count"><%= board.cards.postponed.count %></span>
+      <h2 class="cards__expander-title">
+        Not Now
+      </h2>
+    </div>
+  <% end %>
+
+  <%= link_to board_columns_stream_path(board), class: "cards cards--considering is-collapsed", data: { turbo_frame: "_top" } do %>
+    <div class="cards__expander btn btn--plain" style="--card-count: <%= board.cards.awaiting_triage.count %>">
+      <span class="cards__expander-count"><%= board.cards.awaiting_triage.count %></span>
+      <h2 class="cards__expander-title">
+        Maybe?
+      </h2>
+    </div>
+  <% 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}", data: { turbo_frame: "_top" } do %>
+      <div class="cards__expander btn btn--plain" style="--card-count: <%= column.cards.active.count %>">
+        <span class="cards__expander-count"><%= column.cards.active.count %></span>
+        <h2 class="cards__expander-title">
+          <%= column.name %>
+        </h2>
+      </div>
+    <% end %>
+  <% end %>
+
+  <%= 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 %>
+    <div class="cards__expander btn btn--plain" style="--card-count: <%= board.cards.closed.count %>">
+      <span class="cards__expander-count"><%= board.cards.closed.count %></span>
+      <h2 class="cards__expander-title">
+        Done
+      </h2>
+    </div>
+  <% end %>
+</section>