diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css index 0fe0d6a0e..108e7fd19 100644 --- a/app/assets/stylesheets/card-columns.css +++ b/app/assets/stylesheets/card-columns.css @@ -167,6 +167,51 @@ @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; + font-size: 0.75em; + 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/assets/stylesheets/cards.css b/app/assets/stylesheets/cards.css index ac700ba51..41c27cfa3 100644 --- a/app/assets/stylesheets/cards.css +++ b/app/assets/stylesheets/cards.css @@ -69,6 +69,11 @@ margin-block-start: calc(-1 * var(--card-padding-block)); margin-inline-start: calc(-1 * var(--card-padding-inline)); min-inline-size: 0; + + .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 { @@ -78,6 +83,12 @@ font-weight: 800; padding: var(--block-space-half) var(--inline-space) var(--block-space-half) var(--inline-space-double); text-transform: uppercase; + + .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__id { @@ -96,6 +107,11 @@ 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 { @@ -148,13 +164,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; @@ -256,7 +267,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; @@ -273,7 +284,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 ead910bd9..4bdccb6bb 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 overflow-ellipsis" %> - - <%= 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? %> 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 %> +
<% end %> 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| %> + + <% 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 %>