bterkuile/fizzy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Move closure message to its own grid area

Browse Source
This commit is contained in:
Andy Smith
2025-12-18 11:17:10 -06:00
parent 5d6f3f5156
commit d751ae5522
2 changed files with 27 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/stylesheets/card-perma.css
+12 -5
View File
@@ -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;
}
}
app/views/cards/container/_closure.html.erb
+15 -14
View File
@@ -1,20 +1,21 @@
<div class="card-perma__notch card-perma__notch--bottom flex-column" id="<%= dom_id(card, :card_closure_toggle) %>">
<div class="display-contents" id="<%= dom_id(card, :card_closure_toggle) %>">
<% if card.closed? %>
<div class="flex gap-half margin-block-start-double margin-block-end">
<span class="card-perma__closure-message">Completed by <%= card.closed_by.name %> on <%= local_datetime_tag(card.closed_at, style: :shortdate) %>.</span>
<%= button_to card_closure_path(card), method: :delete, class: "btn btn--plain borderless fill-transparent" do %>
<span class="pad-inline-end">Undo</span>
<% end %>
<div class="card-perma__notch card-perma__notch--bottom flex-column">
<div class="flex gap-half margin-block-start-double margin-block-end">
<span class="card-perma__closure-message">Completed by <%= card.closed_by.name %> on <%= local_datetime_tag(card.closed_at, style: :shortdate) %>.</span>
<%= button_to card_closure_path(card), method: :delete, class: "btn btn--plain borderless fill-transparent" do %>
<span class="pad-inline-end">Undo</span>
<% end %>
</div>
</div>
<% else %>
<%= render "cards/container/closure_buttons", card: card %>
<div id="<%= dom_id(card, :closure_notice) %>">
<% if card.entropic? && card.open? && !card.postponed? %>
<div class="card-perma__closure-message">
Moves to “Not Now” <%= local_datetime_tag(card.entropy.auto_clean_at, style: :indays) -%> if there’s no activity.
</div>
<% end %>
<div class="card-perma__notch card-perma__notch--bottom flex-column">
<%= render "cards/container/closure_buttons", card: card %>
</div>
<% if card.entropic? && card.open? && !card.postponed? %>
<div class="card-perma__closure-message" id="<%= dom_id(card, :closure_notice) %>">
Moves to “Not Now” <%= local_datetime_tag(card.entropy.auto_clean_at, style: :indays) -%> if there’s no activity.
</div>
<% end %>
<% end %>
</div>