From f16f0ae48f2a879dbf2cdb91ad77ef069d7d6859 Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Mon, 31 Mar 2025 14:04:20 -0500
Subject: [PATCH] Mock layout

---
 app/assets/stylesheets/cards.css     | 12 +++++++++---
 app/assets/stylesheets/filters.css   |  3 +++
 app/views/bubbles/index.html.erb     | 15 ++++++++++++---
 app/views/filters/_settings.html.erb | 18 +++++++++---------
 4 files changed, 33 insertions(+), 15 deletions(-)

diff --git a/app/assets/stylesheets/cards.css b/app/assets/stylesheets/cards.css
index c17c1278c..1da955967 100644
--- a/app/assets/stylesheets/cards.css
+++ b/app/assets/stylesheets/cards.css
@@ -16,7 +16,7 @@
     font-size: 1.8cqi;
     flex: 0 1 var(--card-size);
     inline-size: var(--card-size);
-    margin: calc(var(--block-space) * 1.5) auto;
+    margin: var(--block-space) auto calc(var(--block-space) * 1.5);
   }
 
   :is(.card--mini) {
@@ -26,7 +26,7 @@
     aspect-ratio: unset;
     line-height: 1.2;
     padding: calc(var(--block-space) * 1.5) var(--block-space);
-    margin: var(--block-space) auto;
+    margin: var(--block-space) auto calc(var(--block-space) * 1.5);
   
     .card__title {
       margin-block-start: 0.1em;
@@ -66,6 +66,10 @@
   padding-block: var(--block-space-half);
   position: relative;
   z-index: 0;
+
+  .card {
+    aspect-ratio: unset;
+  }
 }
 
 .card {
@@ -210,12 +214,13 @@
 
 .cards--grid {
   --block-space: 2cqi;
-  --container-gap: var(--block-space);
+  --container-gap: var(--block-space-double);
   --container-padding: calc(var(--block-space) * 1.5);
 
   container-type: inline-size;
   display: flex;
   flex-wrap: wrap;
+  gap: var(--container-gap);
   inline-size: 100%;
   margin: 0 auto;
   max-inline-size: 120ch;
@@ -379,6 +384,7 @@
   --input-padding: 0;
 
   color: inherit;
+  font-size: inherit;
   font-weight: inherit;
   inline-size: min-content;
   max-inline-size: 3ch;
diff --git a/app/assets/stylesheets/filters.css b/app/assets/stylesheets/filters.css
index d573e179b..e76311dbb 100644
--- a/app/assets/stylesheets/filters.css
+++ b/app/assets/stylesheets/filters.css
@@ -1,4 +1,7 @@
 .filters {
+  position: absolute;
+  inset: auto auto -5.25em;
+
   #header:has(&) {
     position: relative;
     z-index: 1;
diff --git a/app/views/bubbles/index.html.erb b/app/views/bubbles/index.html.erb
index 4845f7978..83f30dcd8 100644
--- a/app/views/bubbles/index.html.erb
+++ b/app/views/bubbles/index.html.erb
@@ -12,7 +12,16 @@
 
     <div class="btn btn--placeholder flex-item-justify-start"></div>
 
-    <header class="flex flex-inline flex-column center flex-shrink txt--large">
+    <header class="flex flex-inline flex-column center flex-shrink">
+      <h1 class="txt-large margin-none-block-end">
+        <% if @filter.buckets.none? %>
+          All collections
+        <% elsif @filter.buckets.one? %>
+          <%= @filter.buckets.first.name %>
+        <% else %>
+          <%= pluralize(@filter.buckets.size, "project") %>
+        <% end %>
+      </h1>
       <%= render "bubbles/filters", filter: @filter %>
     </header>
 
@@ -53,10 +62,10 @@
 </div>
 
 <div class="margin-block">
-  <h2 class="txt-align-center flex-inline center txt-uppercase txt-medium margin-none-block-start">
+  <h2 class="txt-align-center flex-inline center txt-uppercase txt-medium margin-none">
     Recently closed
   </h2>
-  <section class="cards--grid gap position-relative">
+  <section class="cards--grid position-relative">
     <% if (popped_bubbles = Filter.from_params(@filter.as_params.merge(indexed_by: "popped")).tap { |f| f.creator = Current.user }.bubbles).any? %>
       <%= render partial: "bubbles/card", collection: popped_bubbles.limit(@display_count), as: :bubble, cached: true %>
     <% else %>
diff --git a/app/views/filters/_settings.html.erb b/app/views/filters/_settings.html.erb
index a266f33e1..e2de05157 100644
--- a/app/views/filters/_settings.html.erb
+++ b/app/views/filters/_settings.html.erb
@@ -1,23 +1,23 @@
 <div class="filters flex-inline align-center gap-half margin-block-end margin-block-start-half">
-  <button class="btn btn--plain txt-small" data-action="click->dialog#toggle">
+  <button class="btn borderless txt-medium" data-action="click->dialog#toggle">
     <%= icon_tag "filter" %>
     <span class="for-screen-reader">Filter</span>
   </button>
 
   <div class="flex-inline center align-center gap-half">
-    <%= render "filters/buckets", filter: filter %>
-    <%= render "filters/indexed_by", filter: filter %>
-    <%= render "filters/stages", filter: filter %>
-    <%= render "filters/tags", filter: filter %>
-    <%= render "filters/assignees", filter: filter %>
-    <%= render "filters/creators", filter: filter %>
+    <%#= render "filters/buckets", filter: filter %>
+    <%#= render "filters/indexed_by", filter: filter %>
+    <%#= render "filters/stages", filter: filter %>
+    <%#= render "filters/tags", filter: filter %>
+    <%#= render "filters/assignees", filter: filter %>
+    <%#= render "filters/creators", filter: filter %>
 
     <% filter.terms.each do |term| %>
-      <%= filter_chip_tag %Q("#{term}"), filter.as_params_without(:terms, term) %>
+      <%#= filter_chip_tag %Q("#{term}"), filter.as_params_without(:terms, term) %>
     <% end %>
 
     <% if any_filters?(filter) %>
-      <%= link_to bubbles_path, class: "btn btn--remove txt-small" do %>
+      <%= link_to bubbles_path, class: "btn btn--remove txt-small", hidden: true do %>
         <%= icon_tag "close" %>
         <span class="for-screen-reader">Clear all</span>
       <% end %>