From e5f25b8d39fb28e383165fb398eb94fce75cd955 Mon Sep 17 00:00:00 2001 From: Jason Zimdars Date: Tue, 20 May 2025 15:43:24 -0500 Subject: [PATCH 1/3] Introduce a list style for all but the first six completed cards --- app/assets/stylesheets/card-columns.css | 44 +++++++++++++++++++ .../cards/display/common/_background.html.erb | 2 +- 2 files changed, 45 insertions(+), 1 deletion(-) diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css index 0fe0d6a0e..6a84f60ec 100644 --- a/app/assets/stylesheets/card-columns.css +++ b/app/assets/stylesheets/card-columns.css @@ -167,6 +167,50 @@ @media (max-width: 960px) { inline-size: calc((100% - var(--cards-gap)) / 2); } + + &:nth-of-type(7) { + margin-block-start: var(--cards-gap); + } + + &:nth-of-type(n+7) { + background-color: var(--color-canvas); + border: none; + border-block-end: 1px solid var(--color-ink-lighter); + box-shadow: none; + inline-size: 100%; + margin-inline: auto; + max-inline-size: 110ch; + padding-block: 0 var(--cards-gap); + + .card__background, + .card__meta { + display: none; + } + + .card__body { + padding-block-end: 0; + } + + .card__closed { + aspect-ratio: unset; + border-width: 0.5ch; + inset: auto 0 auto auto; + transform: none; + } + + .card__closed-by-line, + .card__closed-date { + display: none; + } + + .card__header { + margin: 0; + } + + .card__title { + min-block-size: 0; + } + } } } } diff --git a/app/views/cards/display/common/_background.html.erb b/app/views/cards/display/common/_background.html.erb index f9ba58886..ac78ffa0b 100644 --- a/app/views/cards/display/common/_background.html.erb +++ b/app/views/cards/display/common/_background.html.erb @@ -6,6 +6,6 @@
<%= card.closure.reason %> <%= card.closed_at.strftime("%b %d, %Y") %> - by <%= card.closed_by.familiar_name %> + by <%= card.closed_by.familiar_name %>
<% end %> From 46ca6f13f6b6c8a4d5650a8112cfcb12a972c5aa Mon Sep 17 00:00:00 2001 From: Jason Zimdars Date: Tue, 20 May 2025 16:24:12 -0500 Subject: [PATCH 2/3] Stub recently closed filter --- .../cards/index/_closure_filter.html.erb | 37 +++++++++++++++++++ .../cards/index/engagement/_closed.html.erb | 4 +- 2 files changed, 38 insertions(+), 3 deletions(-) create mode 100644 app/views/cards/index/_closure_filter.html.erb diff --git a/app/views/cards/index/_closure_filter.html.erb b/app/views/cards/index/_closure_filter.html.erb new file mode 100644 index 000000000..120519c2f --- /dev/null +++ b/app/views/cards/index/_closure_filter.html.erb @@ -0,0 +1,37 @@ +
+ + + + Closed with reason… + <%= form_with url: cards_path, method: :get, class: "flex flex-column full-width popup__list", + data: { controller: "form" } do |form| %> + <% filter.as_params.except(:closure_reason_ids).each do |key, value| %> + <%= filter_hidden_field_tag key, value %> + <% end %> + + <%= link_to cards_path(filter.as_params.except(:closure_reason_ids)), class: "btn popup__item" do %> + All recently closed + <% end %> + + <% Closure::Reason.all.each do |reason| %> +
+ <%= form.check_box :closure_reason_ids, { + multiple: true, + checked: false, + data: { action: "change->form#submit" }, + include_hidden: false, + }, reason.label %> + + <%= form.label :closure_reason_ids, reason.label, for: form.field_id(:closure_reason_ids, reason.label), class: "overflow-ellipsis" %> + <%= icon_tag "check", size: 18, class: "checked flex-item-justify-end" %> +
+ <% end %> + <% end %> + +
diff --git a/app/views/cards/index/engagement/_closed.html.erb b/app/views/cards/index/engagement/_closed.html.erb index 656106a15..c8259f8ac 100644 --- a/app/views/cards/index/engagement/_closed.html.erb +++ b/app/views/cards/index/engagement/_closed.html.erb @@ -1,7 +1,5 @@
-

- Recently closed -

+ <%= render "cards/index/closure_filter", filter: filter %> <% if page.used? %> <%= render partial: "cards/display/preview", collection: page.records, as: :card, cached: true %> From f5e3e58be45a95f4aa00f4c5d72c8071bc6e4b4d Mon Sep 17 00:00:00 2001 From: Jason Zimdars Date: Tue, 20 May 2025 18:11:18 -0500 Subject: [PATCH 3/3] Tighten cards --- app/assets/stylesheets/card-columns.css | 1 + app/assets/stylesheets/cards.css | 27 ++++++++++++----- app/views/cards/display/_preview.html.erb | 36 +++++++++++++---------- 3 files changed, 41 insertions(+), 23 deletions(-) diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css index 6a84f60ec..108e7fd19 100644 --- a/app/assets/stylesheets/card-columns.css +++ b/app/assets/stylesheets/card-columns.css @@ -194,6 +194,7 @@ .card__closed { aspect-ratio: unset; border-width: 0.5ch; + font-size: 0.75em; inset: auto 0 auto auto; transform: none; } diff --git a/app/assets/stylesheets/cards.css b/app/assets/stylesheets/cards.css index 239d6e7fc..b77a70fa0 100644 --- a/app/assets/stylesheets/cards.css +++ b/app/assets/stylesheets/cards.css @@ -89,20 +89,38 @@ .card__header { margin-block-start: calc(-1 * var(--card-padding-block)); margin-inline-start: calc(-1 * var(--card-padding-inline)); + + .cards--considering & { + color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink)); + margin: 0 0 calc(-0.5 * var(--card-padding-inline)) 0; + } } .card__collection { background-color: var(--card-color); border-radius: var(--border-radius) 0 var(--border-radius) 0; + color: var(--color-ink-inverted); font-weight: 800; padding: var(--block-space-half) var(--inline-space) var(--block-space-half) var(--inline-space-double); + + .cards--considering & { + background-color: var(--color-canvas); + color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink)); + padding: 0 0 0 var(--inline-space); + } } .card__collection-name { border-inline-start: 1px solid color-mix(in srgb, var(--color-ink-inverted) 33%, var(--card-color)); + color: var(--color-ink-inverted); display: inline-flex; margin-inline-start: var(--inline-space-half); padding-inline-start: calc(var(--inline-space) * 0.75); + + .cards--considering & { + border-inline-start: 1px solid color-mix(in srgb, var(--color-ink) 33%, var(--color-canvas)); + color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink)); + } } .card__tags { @@ -151,13 +169,8 @@ font-size: var(--text-xx-large); font-weight: 900; line-height: 1.2; - min-block-size: 3lh; text-wrap: balance; - .card-perma__bg & { - min-block-size: unset; - } - .card-field__title { &:is(textarea)::placeholder { color: inherit; @@ -255,7 +268,7 @@ inset: auto var(--block-space) var(--block-space-double) auto; justify-content: center; max-inline-size: 25ch; - min-inline-size: 18ch; + min-inline-size: 16ch; mix-blend-mode: multiply; padding: 1ch; position: absolute; @@ -272,7 +285,7 @@ } .card__closed-title { - font-size: 1.5em; + font-size: 1.3em; font-weight: 900; line-height: 1.2; position: relative; diff --git a/app/views/cards/display/_preview.html.erb b/app/views/cards/display/_preview.html.erb index 359c5a98a..fc6348dd1 100644 --- a/app/views/cards/display/_preview.html.erb +++ b/app/views/cards/display/_preview.html.erb @@ -1,23 +1,27 @@ <% cache card do %> <%= card_article_tag card, class: "card" do %> -
- - <%= card.id %> - <%= link_to card.collection.name, cards_path(collection_ids: [ card.collection ]), - class: "card__collection-name txt-uppercase overflow-ellipsis txt-reversed" %> - - <%= render "cards/display/preview/tags", card: card %> -
+
+
+
+ + <%= card.id %> + <%= link_to card.collection.name, cards_path(collection_ids: [ card.collection ]), + class: "card__collection-name txt-uppercase overflow-ellipsis" %> + + <%= render "cards/display/preview/tags", card: card %> +
-
-
-

- <%= card.title %> -

+
+
+

+ <%= card.title %> +

- <%= link_to collection_card_path(card.collection, card), class: "card__link", title: card_title_tag(card), data: { action: "dialog#close", turbo_frame: "_top" } do %> - <%= card.title %> - <% end %> + <%= link_to collection_card_path(card.collection, card), class: "card__link", title: card_title_tag(card), data: { action: "dialog#close", turbo_frame: "_top" } do %> + <%= card.title %> + <% end %> +
+
<%= render "cards/stagings/stages", card: card if card.doing? %>