diff --git a/app/assets/stylesheets/cards.css b/app/assets/stylesheets/cards.css index 1a8325e45..61beab9b2 100644 --- a/app/assets/stylesheets/cards.css +++ b/app/assets/stylesheets/cards.css @@ -97,12 +97,12 @@ } } - .card--golden { + .card--golden.card--doing { --border-color: var(--color-bg) !important; background-color: var(--color-bg); background-image: linear-gradient(90deg, oklch(var(--lch-golden) / 0.5) 0%, oklch(var(--lch-golden) / 0.1) 50%, oklch(var(--lch-golden) / 0.75) 100%); - box-shadow: + box-shadow: 0 0 0.5em 0.2em var(--color-golden), 0 0 1em 0.4em var(--color-golden) !important; outline: 1px solid var(--color-golden); @@ -154,7 +154,7 @@ &.card__actions-container--top { margin: calc(var(--block-space) * 1) auto calc(var(--block-space) * -0.66); min-inline-size: 30ch; - + #header:has(&) { position: relative; z-index: 1; diff --git a/app/helpers/cards_helper.rb b/app/helpers/cards_helper.rb index ba75a6d4a..1546efd8e 100644 --- a/app/helpers/cards_helper.rb +++ b/app/helpers/cards_helper.rb @@ -26,4 +26,19 @@ module CardsHelper class: "btn txt-small", **options end + + def card_article_tag(card, id: dom_id(card, :ticket), **options, &block) + classes = [ + options.delete(:class), + ("card--golden" if card.golden?), + ("card--doing" if card.doing?) + ].compact.join(" ") + + tag.article \ + id: id, + style: "--card-color: #{card.color}; view-transition-name: #{id}", + class: classes, + **options, + &block + end end diff --git a/app/views/cards/display/_perma.html.erb b/app/views/cards/display/_perma.html.erb index bdc1a3c4d..c4c89046c 100644 --- a/app/views/cards/display/_perma.html.erb +++ b/app/views/cards/display/_perma.html.erb @@ -1,7 +1,5 @@ <% cache card do %> -
+ <%= card_article_tag card, class: "card shadow border flex flex-column position-relative txt-align-start border-radius" do %>
<%= link_to card.collection.name, cards_path(collection_ids: [card.collection]), class: "card__collection txt-uppercase overflow-ellipsis txt-reversed" %> @@ -39,5 +37,5 @@ <%= render "cards/display/common/background", card: card %> -
+ <% end %> <% end %> diff --git a/app/views/cards/display/_preview.html.erb b/app/views/cards/display/_preview.html.erb index c8fcbe8c5..ceffc0867 100644 --- a/app/views/cards/display/_preview.html.erb +++ b/app/views/cards/display/_preview.html.erb @@ -1,7 +1,5 @@ <% cache [ card ] do %> -
+ <%= card_article_tag card, class: "card shadow border flex flex-column position-relative txt-align-start full-width border-radius" do %>
<%= card.collection.name %> <%= render "cards/display/preview/tags", card: card %> @@ -26,5 +24,5 @@ <%= render "cards/display/common/background", card: card %> -
+ <% end %> <% end %>