From e4110734eb71a138259d3fff022898f2c84885d0 Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Thu, 10 Apr 2025 14:39:50 -0500
Subject: [PATCH] Rework min card design and meta section for all cards

---
 app/assets/stylesheets/cards.css              | 34 +++++++-------
 app/helpers/users_helper.rb                   |  6 +++
 .../cards/assignments/create.turbo_stream.erb |  2 +-
 app/views/cards/display/_mini.html.erb        | 25 ++++++-----
 app/views/cards/display/_perma.html.erb       |  1 -
 app/views/cards/display/_preview.html.erb     |  3 +-
 app/views/cards/display/common/_meta.html.erb | 44 ++++++++++---------
 .../cards/display/common/_people.html.erb     | 12 -----
 app/views/cards/display/mini/_meta.html.erb   |  3 ++
 .../cards/display/perma/_boosts.html.erb      |  3 --
 app/views/cards/display/perma/_meta.html.erb  |  2 +-
 .../cards/display/perma/_people.html.erb      |  3 --
 .../cards/display/preview/_boosts.html.erb    |  8 ----
 .../cards/display/preview/_meta.html.erb      |  2 +-
 14 files changed, 68 insertions(+), 80 deletions(-)
 delete mode 100644 app/views/cards/display/common/_people.html.erb
 create mode 100644 app/views/cards/display/mini/_meta.html.erb
 delete mode 100644 app/views/cards/display/perma/_boosts.html.erb
 delete mode 100644 app/views/cards/display/perma/_people.html.erb
 delete mode 100644 app/views/cards/display/preview/_boosts.html.erb

diff --git a/app/assets/stylesheets/cards.css b/app/assets/stylesheets/cards.css
index 742d8ea94..55f3d88d6 100644
--- a/app/assets/stylesheets/cards.css
+++ b/app/assets/stylesheets/cards.css
@@ -25,31 +25,26 @@
       --text-small: 1.1em;
 
       aspect-ratio: unset;
+      border: 1px solid var(--color-subtle) !important;
       line-height: 1.2;
-      padding: calc(var(--block-space) * 1.5) var(--block-space);
+      padding: 0;
       margin: var(--block-space) auto calc(var(--block-space) * 1.5);
 
+      @media (prefers-color-scheme: dark) {
+        border-color: var(--color-subtle-dark) !important;
+      }
+
       .card__title {
         margin-block-start: 0.1em;
         min-block-size: 0;
       }
 
-      .card__stuff {
-        .avatar {
-          block-size: 2em;
-          inline-size: 2em;
-          margin: 0;
-        }
-      }
-
       .card__body {
         padding-inline: 0;
-      }
 
-      .avatar {
-        block-size: 3em;
-        inline-size: 3em;
-        margin-block-start: -0.2em;
+        .card--mini & {
+          padding: 0 var(--inline-space-double) var(--block-space);
+        }
       }
 
       .card__tags {
@@ -91,6 +86,11 @@
       font-weight: bold;
     }
 
+    .avatar {
+      block-size: 2.75em;
+      inline-size: 2.75em;
+    }
+
     @media (prefers-color-scheme: dark) {
       --border-color: var(--color-subtle-dark);
       --border-size: 1px;
@@ -393,7 +393,7 @@
     --border-size: 1px;
     --row-gap: 0.25em;
 
-    margin-inline-start: var(--inline-space-double);
+    margin-inline: var(--inline-space-double);
 
     strong {
       font-weight: 900;
@@ -402,6 +402,10 @@
     .separator {
       height: calc(2lh + 2ex);
     }
+
+    .card--mini & {
+      margin-inline-start: 0;
+    }
   }
 
   .card__move-button {
diff --git a/app/helpers/users_helper.rb b/app/helpers/users_helper.rb
index 58b3e12d6..e0a2c4422 100644
--- a/app/helpers/users_helper.rb
+++ b/app/helpers/users_helper.rb
@@ -2,4 +2,10 @@ module UsersHelper
   def prepend_current_user_to(users_scope)
     users_scope.to_a.prepend(Current.user).uniq
   end
+
+  def familiar_name_for(user)
+    names = user.name.split
+    return user.name if names.length == 1
+    "#{names.first} #{names[1..].map { |n| "#{n[0]}." }.join}"
+  end
 end
diff --git a/app/views/cards/assignments/create.turbo_stream.erb b/app/views/cards/assignments/create.turbo_stream.erb
index d66721e4b..f05f15d8d 100644
--- a/app/views/cards/assignments/create.turbo_stream.erb
+++ b/app/views/cards/assignments/create.turbo_stream.erb
@@ -1 +1 @@
-<%= turbo_stream.replace([ @card, :assignees ], partial: "cards/display/perma/assignees", locals: { card: @card }) %>
+<%= turbo_stream.replace([ @card, :meta ], partial: "cards/display/perma/meta", locals: { card: @card }) %>
diff --git a/app/views/cards/display/_mini.html.erb b/app/views/cards/display/_mini.html.erb
index 0fd3892f0..2dd1ff438 100644
--- a/app/views/cards/display/_mini.html.erb
+++ b/app/views/cards/display/_mini.html.erb
@@ -1,19 +1,20 @@
-<div class="card card--mini shadow border flex gap position-relative txt-align-start full-width border-radius" style="view-transition-name: <%= dom_id(card, :ticket) %>;">
-  <%= avatar_image_tag card.creator, class: "avatar" %>
+<div class="card card--mini border flex flex-column gap position-relative txt-align-start full-width border-radius fill-white" style="--card-color: <%= card.color %>; view-transition-name: <%= dom_id(card, :ticket) %>;">
+  <header class="card__header flex align-center gap min-width">
+    <span class="card__collection txt-uppercase overflow-ellipsis txt-reversed">
+      <%= card.collection.name %>
+    </span>
+
+    <div class="overflow-ellipsis"><%= render "cards/display/mini/tags", card: card %></div>
+  </header>
 
   <div class="card__body flex flex-column gap-half full-width flex-item-grow min-width max-width">
-    <h3 class="card__title">
-      <%= card_title(card) %>
-    </h3>
-
-    <div class="txt-small overflow-ellipsis txt-uppercase"><%= "Added to #{card.collection.name} by #{card.creator.name}" %>
-      <%= local_datetime_tag(card.created_at, style: :daysago) %>
+    <div class="flex align-center gap min-width margin-block-end-half">
+      <h3 class="card__title overflow-ellipsis">
+        <%= card_title(card) %>
+      </h3>
     </div>
 
-    <div class="card__stuff flex align-center gap">
-      <%= render "cards/display/mini/assignees", card: card %>
-      <div class="overflow-ellipsis"><%= render "cards/display/mini/tags", card: card %></div>
-    </div>
+    <%= render "cards/display/mini/meta", card: card %>
   </div>
 
   <%= link_to collection_card_path(card.collection, card), class: "card__link" do %>
diff --git a/app/views/cards/display/_perma.html.erb b/app/views/cards/display/_perma.html.erb
index 4b205e33b..814387565 100644
--- a/app/views/cards/display/_perma.html.erb
+++ b/app/views/cards/display/_perma.html.erb
@@ -35,7 +35,6 @@
     </div>
 
     <footer class="card__footer full-width flex align-start gap">
-      <%= render "cards/display/perma/people", card: card %>
       <%= render "cards/display/perma/meta", card: card %>
     </footer>
 
diff --git a/app/views/cards/display/_preview.html.erb b/app/views/cards/display/_preview.html.erb
index 035c72e58..d7ac89149 100644
--- a/app/views/cards/display/_preview.html.erb
+++ b/app/views/cards/display/_preview.html.erb
@@ -21,8 +21,7 @@
       <%= render "cards/stagings/stages", card: card if card.doing? %>
     </div>
 
-    <footer class="card__footer full-width flex align-start gap">
-      <%= render "cards/display/preview/people", card: card %>
+    <footer class="card__footer">
       <%= render "cards/display/preview/meta", card: card %>
     </footer>
 
diff --git a/app/views/cards/display/common/_meta.html.erb b/app/views/cards/display/common/_meta.html.erb
index ef15e4f9d..e90348331 100644
--- a/app/views/cards/display/common/_meta.html.erb
+++ b/app/views/cards/display/common/_meta.html.erb
@@ -1,31 +1,33 @@
-<div class="card__meta flex txt-tight-lines txt-uppercase">
-  <div class="flex flex-column gap txt-align-end">
-    <span class="pad-inline overflow-ellipsis"><%= card.creating? ? "Added" : "Updated" %>
+<div class="card__meta flex align-center txt-tight-lines txt-uppercase max-width min-width" id="<%= dom_id(card, :meta) %>">
+  <%= avatar_image_tag card.creator, class: "avatar margin-inline-end" %>
+
+  <div class="flex flex-column gap txt-align-start">
+    <span class="pad-inline overflow-ellipsis">Added
+      <%= local_datetime_tag(card.created_at, style: :daysago) %>
+    </span>
+
+    <hr class="full-width separator--horizontal unpad margin-none">
+
+    <span class="pad-inline overflow-ellipsis">
+      Reported by <strong><%= familiar_name_for(card.creator) %></strong>  
+    </span>
+  </div>
+
+  <hr class="separator margin-none unpad">
+  
+  <div class="flex flex-column gap txt-align-start overflow-ellipsis">
+    <span class="pad-inline overflow-ellipsis"><%= card.creating? ? "Created" : "Updated" %>
       <%= local_datetime_tag(card.updated_at, style: :daysago) %>
     </span>
 
     <hr class="full-width separator--horizontal unpad margin-none">
 
-    <% if card.creating? %>
-      <span class="pad-inline overflow-ellipsis">Expires
-        <%= local_datetime_tag(card.auto_close_at, style: :indays) %>
-      </span>
-    <% else %>
-      <span class="pad-inline overflow-ellipsis">Added
-        <%= local_datetime_tag(card.created_at, style: :daysago) %>
-      </span>
-    <% end %>
+    <span class="pad-inline overflow-ellipsis">
+      Assigned to <%= card.assignees.any? ? card.assignees.map { |assignee| "<strong>#{familiar_name_for(assignee)}</strong>" }.to_sentence.html_safe : "no one" %>
+    </span>
   </div>
 
-  <hr class="separator margin-none unpad">
-
-  <div class="flex flex-column gap txt-align-start">
-    <span class="pad-inline overflow-ellipsis">
-      <strong><%= card.comments_count %></strong> <%= card.comments_count == 1 ? "comment" : "comments" %>
-    </span>
-
-    <hr class="full-width separator--horizontal unpad margin-none">
-
+  <div class="margin-inline-start flex-item-no-shrink">
     <%= yield %>
   </div>
 </div>
diff --git a/app/views/cards/display/common/_people.html.erb b/app/views/cards/display/common/_people.html.erb
deleted file mode 100644
index dacf301ce..000000000
--- a/app/views/cards/display/common/_people.html.erb
+++ /dev/null
@@ -1,12 +0,0 @@
-<div class="card__people flex gap margin-inline-start">
-  <div class="flex flex-column align-center">
-    <span class="txt-uppercase">Reported</span>
-    <%= avatar_tag card.creator, class: "avatar" %>
-  </div>
-
-  <div class="card__assignees flex flex-column align-center">
-    <span class="txt-uppercase">Assigned</span>
-
-    <%= yield %>
-  </div>
-</div>
diff --git a/app/views/cards/display/mini/_meta.html.erb b/app/views/cards/display/mini/_meta.html.erb
new file mode 100644
index 000000000..3ec056281
--- /dev/null
+++ b/app/views/cards/display/mini/_meta.html.erb
@@ -0,0 +1,3 @@
+<%= render "cards/display/common/meta", card: card do %>
+  <%= render "cards/display/mini/assignees", card: card %>
+<% end %>
diff --git a/app/views/cards/display/perma/_boosts.html.erb b/app/views/cards/display/perma/_boosts.html.erb
deleted file mode 100644
index 1e70de0bb..000000000
--- a/app/views/cards/display/perma/_boosts.html.erb
+++ /dev/null
@@ -1,3 +0,0 @@
-<%= turbo_frame_tag dom_id(card, :boosts) do %>
-  <%= render "cards/boosts/boosts", card: card %>
-<% end %>
diff --git a/app/views/cards/display/perma/_meta.html.erb b/app/views/cards/display/perma/_meta.html.erb
index 6b68b2233..ea99386cf 100644
--- a/app/views/cards/display/perma/_meta.html.erb
+++ b/app/views/cards/display/perma/_meta.html.erb
@@ -1,3 +1,3 @@
 <%= render "cards/display/common/meta", card: card do %>
-  <%= render "cards/display/perma/boosts", card: card %>
+  <%= render "cards/display/perma/assignees", card: card %>
 <% end %>
diff --git a/app/views/cards/display/perma/_people.html.erb b/app/views/cards/display/perma/_people.html.erb
deleted file mode 100644
index 257e112b5..000000000
--- a/app/views/cards/display/perma/_people.html.erb
+++ /dev/null
@@ -1,3 +0,0 @@
-<%= render "cards/display/common/people", card: card do%>
-  <%= render "cards/display/perma/assignees", card: card %>
-<% end %>
diff --git a/app/views/cards/display/preview/_boosts.html.erb b/app/views/cards/display/preview/_boosts.html.erb
deleted file mode 100644
index 6bdee6e61..000000000
--- a/app/views/cards/display/preview/_boosts.html.erb
+++ /dev/null
@@ -1,8 +0,0 @@
-<%= turbo_frame_tag dom_id(card, :boosts) do %>
-  <%= tag.div class: "pad-inline flex align-center gap" do %>
-    <span class="overflow-ellipsis">
-      <strong><%= card.boosts_count %></strong>
-      <span><%= card.boosts_count == 1 ? "boost" : "boosts" %></span>
-    </span>
-  <% end %>
-<% end %>
diff --git a/app/views/cards/display/preview/_meta.html.erb b/app/views/cards/display/preview/_meta.html.erb
index 9fd0ec88a..0b25c23f6 100644
--- a/app/views/cards/display/preview/_meta.html.erb
+++ b/app/views/cards/display/preview/_meta.html.erb
@@ -1,3 +1,3 @@
 <%= render "cards/display/common/meta", card: card do %>
-  <%= render "cards/display/preview/boosts", card: card %>
+  <%= render "cards/display/preview/assignees", card: card %>
 <% end %>