From 287cac239ae6860757db2674cddd38fd455396f7 Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Tue, 11 Nov 2025 14:33:19 -0600
Subject: [PATCH] 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 %>
   </div>
 <% 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 @@
+<section class="mobile-card-columns">
+
+  <div class="cards cards--on-deck is-collapsed" style="--card-color: var(--color-card-complete);">
+    <div class="cards__expander btn btn--plain" style="--card-count: 0">
+      <span class="cards__expander-count">0</span>
+      <h2 class="cards__expander-title">
+        Not Now
+      </h2>
+    </div>
+  </div>
+
+  <div class="cards cards--considering is-collapsed">
+    <div class="cards__expander btn btn--plain" style="--card-count: 0">
+      <span class="cards__expander-count">0</span>
+      <h2 class="cards__expander-title">
+        Maybe?
+      </h2>
+    </div>
+  </div>
+
+  <% board.columns.sorted.each do |column| %>
+    <div class="cards cards--doing is-collapsed" style="--card-color: <%= column.color %>;">
+      <div class="cards__expander btn btn--plain" style="--card-count: 0">
+        <span class="cards__expander-count">0</span>
+        <h2 class="cards__expander-title">
+          <%= column.name %>
+        </h2>
+      </div>
+    </div>
+  <% end %>
+
+  <div class="cards cards--on-deck is-collapsed" style="--card-color: var(--color-card-complete);">
+    <div class="cards__expander btn btn--plain" style="--card-count: 0">
+      <span class="cards__expander-count">0</span>
+      <h2 class="cards__expander-title">
+        Done
+      </h2>
+    </div>
+  </div>
+
+</section>