From 940db09063d2bc74a590a4cd8bdeffd454129a57 Mon Sep 17 00:00:00 2001 From: Jason Zimdars Date: Mon, 13 Oct 2025 17:58:33 -0500 Subject: [PATCH] Refactor to remove workflows styles --- app/assets/stylesheets/card-columns.css | 54 ++++++++-- app/assets/stylesheets/card-perma.css | 2 +- app/assets/stylesheets/cards.css | 2 +- app/assets/stylesheets/trays.css | 2 +- app/assets/stylesheets/workflows.css | 101 ------------------ app/helpers/columns_helper.rb | 2 +- app/views/cards/display/_preview.html.erb | 2 +- .../cards/display/preview/_columns.html.erb | 2 +- .../display/public_preview/_columns.html.erb | 2 +- app/views/cards/triage/_columns.html.erb | 6 +- 10 files changed, 57 insertions(+), 118 deletions(-) delete mode 100644 app/assets/stylesheets/workflows.css diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css index c84f57944..324c02997 100644 --- a/app/assets/stylesheets/card-columns.css +++ b/app/assets/stylesheets/card-columns.css @@ -143,7 +143,7 @@ inline-size: calc((100% - var(--cards-gap) * (var(--card-grid-columns) - 1) ) / var(--card-grid-columns)); } - .card__header .workflow-stage--current { + .card__header .card__column-name--current { --btn-padding: 0.1em 0.5em; background: none; @@ -153,11 +153,6 @@ flex: 0 1 auto; inline-size: fit-content; margin: 0 0 0 auto; - transition: translate 150ms ease-out; - - [open] & { - translate: -2em; - } } } @@ -416,7 +411,7 @@ .card:has(.card__background img:not([src=""])) { .card__content, .card__meta, - .workflow-stage:not(.workflow-stage--current) { + .card__column-name:not(.card__column-name--current) { opacity: 0; transition: opacity 0.2s ease-in-out; @@ -692,4 +687,49 @@ .cards--considering:has(.bubble:not([hidden])) .cards__expander-title:before { translate: 120% 50%; } + + /* Card column indicators + /* -------------------------------------------------------------------------- */ + + .card__column-name { + --btn-background: transparent; + --btn-padding: 0.2em 0.5em; + --btn-border-size: 0; + --btn-border-radius: 0.2em; + + color: inherit; + inline-size: 100%; + justify-content: flex-start; + text-transform: uppercase; + + @media (hover: hover) { + &:hover { + --btn-background: color(from var(--card-color) srgb r g b / 0.15); + } + } + } + + .card__column-name--current { + --btn-background: var(--card-color); + + color: var(--color-ink-inverted); + + @media (hover: hover) { + &:hover { + --btn-background: var(--card-color); + } + } + } + + @supports(mask: radial-gradient(black)) { + .card__column-name--stream:before { + background: white; + content: ""; + inset: 0; + mask: var(--wavy-background-mask); + position: absolute; + z-index: 0; + opacity: 0.25; + } + } } diff --git a/app/assets/stylesheets/card-perma.css b/app/assets/stylesheets/card-perma.css index dd4d18c1d..059a0f021 100644 --- a/app/assets/stylesheets/card-perma.css +++ b/app/assets/stylesheets/card-perma.css @@ -74,7 +74,7 @@ } } - .workflow-stage { + .card__column-name { @media (max-width: 639px) { --btn-border-radius: 0; } diff --git a/app/assets/stylesheets/cards.css b/app/assets/stylesheets/cards.css index e9eb53de6..add8f892f 100644 --- a/app/assets/stylesheets/cards.css +++ b/app/assets/stylesheets/cards.css @@ -50,7 +50,7 @@ max-inline-size: unset; min-inline-size: 0; - .workflow-stage { + .card__column-name { display: none; } } diff --git a/app/assets/stylesheets/trays.css b/app/assets/stylesheets/trays.css index 11c902cf5..194057807 100644 --- a/app/assets/stylesheets/trays.css +++ b/app/assets/stylesheets/trays.css @@ -423,7 +423,7 @@ margin-block-start: 0.3em; } - .workflow-stage--current { + .card__column-name--current { --btn-padding: 0.1em 0.5em; background: none !important; diff --git a/app/assets/stylesheets/workflows.css b/app/assets/stylesheets/workflows.css deleted file mode 100644 index 5baee3422..000000000 --- a/app/assets/stylesheets/workflows.css +++ /dev/null @@ -1,101 +0,0 @@ -@layer components { - .workflow-stage { - --btn-background: transparent; - --btn-padding: 0.2em 0.5em; - --btn-border-size: 0; - --btn-border-radius: 0.2em; - - color: inherit; - inline-size: 100%; - justify-content: flex-start; - text-transform: uppercase; - - @media (hover: hover) { - &:hover { - --btn-background: color(from var(--card-color) srgb r g b / 0.15); - } - } - } - - .workflow-stage--current { - --btn-background: var(--card-color); - - color: var(--color-ink-inverted); - - @media (hover: hover) { - &:hover { - --btn-background: var(--card-color); - } - } - } - - @supports(mask: radial-gradient(black)) { - .workflow-stage--stream:before { - background: white; - content: ""; - inset: 0; - mask: var(--wavy-background-mask); - position: absolute; - z-index: 0; - opacity: 0.25; - } - } - - /* Workflow settings - /* ------------------------------------------------------------------------ */ - - .workflow-preview { - --border-size: 0.2em; - - aspect-ratio: 1; - border: 0.2em solid var(--color-ink-lighter); - flex: 1 1 30%; - max-inline-size: 30%; - - @media (any-hover: hover) { - &:hover:not(.workflow-preview--selected) { - border-color: var(--color-ink-light); - } - } - - button { - appearance: none; - aspect-ratio: 1; - background: transparent; - block-size: 100%; - border: none; - cursor: pointer; - display: flex; - flex-direction: column; - gap: 0.5em; - inline-size: 100%; - margin: 0; - max-inline-size: 100%; - outline: 0; - overflow: hidden; - padding: var(--inline-space); - text-align: start; - } - } - - .workflow-preview--selected { - border-color: var(--color-link); - } - - .workflow-preview__swatch { - --btn-size: 1em; - --btn-border-radius: 50%; - --btn-border-size: 0; - - cursor: auto; - } - - .workflow__swatch-btn { - - @media (any-hover: hover) { - &:hover { - filter: brightness(0.9); - } - } - } -} diff --git a/app/helpers/columns_helper.rb b/app/helpers/columns_helper.rb index 008cc0404..402124455 100644 --- a/app/helpers/columns_helper.rb +++ b/app/helpers/columns_helper.rb @@ -4,7 +4,7 @@ module ColumnsHelper tag.span(column.name, class: "overflow-ellipsis"), card_triage_path(card, column_id: column), method: :post, - class: [ "workflow-stage btn", { "workflow-stage--current": column == card.column } ], + class: [ "card__column-name btn", { "card__column-name--current": column == card.column } ], form_class: "flex align-center gap-half", data: { turbo_frame: "_top" } end diff --git a/app/views/cards/display/_preview.html.erb b/app/views/cards/display/_preview.html.erb index ce8f3d026..07a070a9a 100644 --- a/app/views/cards/display/_preview.html.erb +++ b/app/views/cards/display/_preview.html.erb @@ -9,7 +9,7 @@ <%= icon_tag "attachment", class: "card__attachments-indicator translucent" if card.has_attachments? %> <% if card.triaged? %> - + <%= card.column.name %> <% end %> diff --git a/app/views/cards/display/preview/_columns.html.erb b/app/views/cards/display/preview/_columns.html.erb index b99a37930..e6ab890ab 100644 --- a/app/views/cards/display/preview/_columns.html.erb +++ b/app/views/cards/display/preview/_columns.html.erb @@ -1,5 +1,5 @@
<% card.collection.columns.each do |column| %> - <%= tag.span column.name, class: ["workflow-stage btn overflow-ellipsis", { "workflow-stage--current": column == card.column }] %> + <%= tag.span column.name, class: ["card__column-name btn overflow-ellipsis", { "card__column-name--current": column == card.column }] %> <% end %>
diff --git a/app/views/cards/display/public_preview/_columns.html.erb b/app/views/cards/display/public_preview/_columns.html.erb index 459893b7f..699c4c7a3 100644 --- a/app/views/cards/display/public_preview/_columns.html.erb +++ b/app/views/cards/display/public_preview/_columns.html.erb @@ -1,6 +1,6 @@
<% card.collection.columns.each do |column| %> <%= tag.div column.name, - class: ["workflow-stage overflow-ellipsis flex align-center gap-half btn non-clickable no-hover", { "workflow-stage--current": column == card.column }] %> + class: ["card__column-name overflow-ellipsis flex align-center gap-half btn non-clickable no-hover", { "card__column-name--current": column == card.column }] %> <% end %>
diff --git a/app/views/cards/triage/_columns.html.erb b/app/views/cards/triage/_columns.html.erb index ee0e1e24e..c77f06529 100644 --- a/app/views/cards/triage/_columns.html.erb +++ b/app/views/cards/triage/_columns.html.erb @@ -2,13 +2,13 @@ Choose a column for this card <%= button_to "Not now", card_not_now_path(card), - class: [ "workflow-stage btn", { "workflow-stage--current": card.postponed? } ], + class: [ "card__column-name btn", { "card__column-name--current": card.postponed? } ], role: "radio", aria: { checked: card.postponed? }, form_class: "flex align-center gap-half" %> <%= button_to "The Stream", card_triage_path(card), method: :delete, - class: [ "workflow-stage workflow-stage--stream btn", { "workflow-stage--current": card.awaiting_triage? } ], + class: [ "card__column-name card__column-name--stream btn", { "card__column-name--current": card.awaiting_triage? } ], role: "radio", aria: { checked: card.awaiting_triage? }, form_class: "flex align-center gap-half" %> @@ -18,7 +18,7 @@ <% end %> <%= button_to "Done", card_closure_path(card, reason: "Completed"), - class: [ "workflow-stage btn", { "workflow-stage--current": card.closed? } ], + class: [ "card__column-name btn", { "card__column-name--current": card.closed? } ], role: "radio", aria: { checked: card.closed? }, form_class: "flex align-center gap-half" %>