From df96ee80fa5d6b60c2a77159a8333732992bda3d Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Fri, 11 Apr 2025 12:21:14 -0500
Subject: [PATCH] Style drafted cards

---
 app/assets/stylesheets/cards.css              | 7 +++++++
 app/views/cards/display/_mini.html.erb        | 5 +++--
 app/views/cards/display/common/_meta.html.erb | 3 +++
 3 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/app/assets/stylesheets/cards.css b/app/assets/stylesheets/cards.css
index 8a30732ed..57024929f 100644
--- a/app/assets/stylesheets/cards.css
+++ b/app/assets/stylesheets/cards.css
@@ -50,6 +50,13 @@
       .card__tags {
         font-size: var(--text-small);
       }
+
+      &:is(.card--drafted) {
+        --card-color: var(--color-subtle-dark) !important;
+
+        border-color: var(--card-color) !important;
+        border-style: dashed !important;
+      }
     }
   }
 
diff --git a/app/views/cards/display/_mini.html.erb b/app/views/cards/display/_mini.html.erb
index 2dd1ff438..8ed453216 100644
--- a/app/views/cards/display/_mini.html.erb
+++ b/app/views/cards/display/_mini.html.erb
@@ -1,4 +1,5 @@
-<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) %>;">
+<%= tag.div class: ["card card--mini border flex flex-column gap position-relative txt-align-start full-width border-radius fill-white", { "card--drafted": card.drafted? }], 
+    style: "--card-color: #{ card.color }; view-transition-name: #{ dom_id(card, :ticket) };" do %>
   <header class="card__header flex align-center gap min-width">
     <span class="card__collection txt-uppercase overflow-ellipsis txt-reversed">
       <%= card.collection.name %>
@@ -20,4 +21,4 @@
   <%= link_to collection_card_path(card.collection, card), class: "card__link" do %>
     <span class="for-screen-reader"><%= card_title(card) %></span>
   <% end %>
-</div>
+<% end %>
diff --git a/app/views/cards/display/common/_meta.html.erb b/app/views/cards/display/common/_meta.html.erb
index d27ff3485..eda0a910b 100644
--- a/app/views/cards/display/common/_meta.html.erb
+++ b/app/views/cards/display/common/_meta.html.erb
@@ -4,6 +4,9 @@
   <div class="flex flex-column gap txt-align-start">
     <span class="pad-inline overflow-ellipsis">Added
       <%= local_datetime_tag(card.created_at, style: :daysago) %>
+      <% if card.drafted? %>
+        <strong>(Draft)</strong>
+      <% end %>
     </span>
 
     <hr class="full-width separator--horizontal unpad margin-none">