diff --git a/app/assets/stylesheets/card-perma.css b/app/assets/stylesheets/card-perma.css index 08c859420..792ba33e4 100644 --- a/app/assets/stylesheets/card-perma.css +++ b/app/assets/stylesheets/card-perma.css @@ -5,6 +5,7 @@ --actions-block-inset: 1.5rem; --actions-inline-inset: 4rem; --color-container: color-mix(in srgb, var(--card-color) 33%, var(--color-canvas)); + --half-btn-height: 1.25rem; --padding-inline: calc(var(--block-space-double) + var(--block-space)); --padding-block: calc(var(--block-space-double) + var(--block-space-half)); @@ -14,7 +15,8 @@ grid-template-areas: "notch-top notch-top notch-top" "actions-left card actions-right" - "notch-bottom notch-bottom notch-bottom"; + "notch-bottom notch-bottom notch-bottom" + "closure-message closure-message closure-message"; grid-template-columns: 48px minmax(0, 1120px) 48px; inline-size: fit-content; margin-block-start: var(--block-space); @@ -149,7 +151,8 @@ grid-template-areas: "notch-top notch-top notch-top" "card card card" - "actions-left notch-bottom actions-right"; + "actions-left notch-bottom actions-right" + "closure-message closure-message closure-message"; grid-template-columns: 1fr auto 1fr; inline-size: calc(100% + 2 * var(--padding-inline)); margin-inline: calc(-1 * var(--padding-inline)); @@ -284,13 +287,14 @@ } .card-perma__notch--bottom { - --half-btn-height: 1.25rem; - grid-area: notch-bottom; /* Overlap the card BG by half the button height */ &:has(.btn) { - translate: 0 calc(-1 * var(--half-btn-height)); + &, + ~ .card-perma__closure-message { + translate: 0 calc(-1 * var(--half-btn-height)); + } } form { @@ -322,5 +326,8 @@ .card-perma__closure-message { color: var(--card-color); + grid-area: closure-message; + margin-block-start: 0.5ch; + padding-inline: 1ch; } } diff --git a/app/views/cards/container/_closure.html.erb b/app/views/cards/container/_closure.html.erb index f7c69a98d..09b7a4ef4 100644 --- a/app/views/cards/container/_closure.html.erb +++ b/app/views/cards/container/_closure.html.erb @@ -1,20 +1,21 @@ -
+
<% if card.closed? %> -
- Completed by <%= card.closed_by.name %> on <%= local_datetime_tag(card.closed_at, style: :shortdate) %>. - <%= button_to card_closure_path(card), method: :delete, class: "btn btn--plain borderless fill-transparent" do %> - Undo - <% end %> +
+
+ Completed by <%= card.closed_by.name %> on <%= local_datetime_tag(card.closed_at, style: :shortdate) %>. + <%= button_to card_closure_path(card), method: :delete, class: "btn btn--plain borderless fill-transparent" do %> + Undo + <% end %> +
<% else %> - <%= render "cards/container/closure_buttons", card: card %> - -
- <% if card.entropic? && card.open? && !card.postponed? %> -
- Moves to “Not Now” <%= local_datetime_tag(card.entropy.auto_clean_at, style: :indays) -%> if there’s no activity. -
- <% end %> +
+ <%= render "cards/container/closure_buttons", card: card %>
+ <% if card.entropic? && card.open? && !card.postponed? %> +
+ Moves to “Not Now” <%= local_datetime_tag(card.entropy.auto_clean_at, style: :indays) -%> if there’s no activity. +
+ <% end %> <% end %>