Merge pull request #1016 from basecamp/fix-draft-restore-banners

Fix rendering and introduce a new style

app/assets/stylesheets/card-perma.css

@@ -142,6 +142,32 @@
     }
   }
 
+  .card__banner {
+    align-items: center;
+    background-color: var(--color-highlight);
+    border-radius: 2em;
+    color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink));
+    display: inline-flex;
+    inline-size: auto;
+    gap: var(--inline-space-half);
+    grid-area: notch-top;
+    justify-content: center;
+    margin-block-start: -4ch;
+    margin-inline: auto;
+    max-inline-size: 36ch;
+    padding: var(--block-space-half) var(--block-space);
+    position: relative;
+    text-align: center;
+    translate: 0 50%;
+    z-index: 0;
+
+    .btn {
+      --btn-background: var(--card-color);
+      --btn-border-color: var(--card-color);
+      --btn-color: var(--color-ink-inverted);
+    }
+  }
+
   /* Notches
   /* -------------------------------------------------------------------------- */
 

app/views/cards/_container.html.erb

@@ -1,6 +1,7 @@
 <section id="<%= dom_id(card, :card_container) %>"
     class="card-perma" style="--card-color: <%= card.color %>;">
   <%= render "cards/container/engagement", card: card %>
+  <%= render "cards/container/status", card: card %>
 
   <aside class="card-perma__actions card-perma__actions--left" role="toolbar">
     <%= render "cards/container/gild", card: card if @card.published? && !@card.closed? %>

app/views/cards/container/_status.html.erb

@@ -0,0 +1,17 @@
+<% if @card.creating? && @card.can_recover_abandoned_creation? %>
+  <div class="card__banner min-width max-width" style="--card-color: <%= @card.color %>;">
+    <span class="overflow-ellipsis">You have an unsaved card. Would you like to continue where you left off?</span>
+    <%= button_to card_recover_path(@card), class: "btn txt-small", data: { turbo_action: "replace" } do %>
+      <span>Restore</span>
+    <% end %>
+  </div>
+<% end %>
+
+<% if @card.drafted? %>
+  <div class="card__banner min-width max-width" style="--card-color: <%= @card.color %>;">
+    <span class="overflow-ellipsis">This is a draft, it’s only visible to you.</span>
+    <%= button_to card_publish_path(@card), class: "btn txt-small", style: "--btn-background: #{@card.color}" do %>
+      <span>Post to project</span>
+    <% end %>
+  </div>
+<% end %>

app/views/cards/show.html.erb

@@ -9,27 +9,6 @@
 <% end %>
 
 <% content_for :header do %>
-  <% if @card.creating? && @card.can_recover_abandoned_creation? %>
-    <div class="fill-selected position-sticky flex align-center gap-half justify-center border-block margin-block-end"
-          style="view-transition-name: draft-banner; --card-color: <%= @card.color %>;">
-      You have an unsaved card. Would you like to continue where you left off?
-      <%= button_to card_recover_path(@card), class: "btn btn--reversed", data: { turbo_action: "replace" } do %>
-        <span>Restore</span>
-      <% end %>
-    </div>
-  <% end %>
-
-  <% if @card.drafted? %>
-    <div class="fill-selected position-sticky flex align-center gap-half fill-highlight justify-center border-block margin-block-end"
-          style="view-transition-name: draft-banner;">
-      This is a draft, it’s only visible to you.
-
-      <%= button_to card_publish_path(@card), class: "btn txt-small btn--link", style: "--btn-background: #{@card.color}" do %>
-        <span>Post to project</span>
-      <% end %>
-    </div>
-  <% end %>
-
   <%= render "filters/menu", user_filtering: @user_filtering %>
 
   <%= link_to cards_path(collection_ids: [ @card.collection ]), class: "header__title btn borderless txt-large", style: "--btn-padding: 0.25ch 1ch 0.25ch 0.75ch; view-transistion-name: card-collection-title;", data: { controller: "hotkey", action: "keydown.esc@document->hotkey#click" } do %>