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

Refactor to remove workflows styles

Browse Source
This commit is contained in:
Jason Zimdars
2025-10-13 17:58:33 -05:00
parent 9fb583e21c
commit 940db09063
10 changed files with 57 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/stylesheets/card-columns.css
+47 -7
View File
@@ -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;
}
}
}
app/assets/stylesheets/card-perma.css
+1 -1
View File
@@ -74,7 +74,7 @@
}
}
.workflow-stage {
.card__column-name {
@media (max-width: 639px) {
--btn-border-radius: 0;
}
app/assets/stylesheets/cards.css
+1 -1
View File
@@ -50,7 +50,7 @@
max-inline-size: unset;
min-inline-size: 0;
.workflow-stage {
.card__column-name {
display: none;
}
}
app/assets/stylesheets/trays.css
+1 -1
View File
@@ -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;
app/assets/stylesheets/workflows.css
-101
View File
@@ -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);
}
}
}
}
app/helpers/columns_helper.rb
+1 -1
View File
@@ -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
app/views/cards/display/_preview.html.erb
+1 -1
View File
@@ -9,7 +9,7 @@
<%= icon_tag "attachment", class: "card__attachments-indicator translucent" if card.has_attachments? %>
<% if card.triaged? %>
<span class="btn justify-start workflow-stage workflow-stage--current txt-uppercase min-width max-width">
<span class="btn justify-start card__column-name card__column-name--current txt-uppercase min-width max-width">
<span class="overflow-ellipsis "><%= card.column.name %></span>
</span>
<% end %>
app/views/cards/display/preview/_columns.html.erb
+1 -1
View File
@@ -1,5 +1,5 @@
<div class="card__stages">
<% 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 %>
</div>
app/views/cards/display/public_preview/_columns.html.erb
+1 -1
View File
@@ -1,6 +1,6 @@
<div id="<%= dom_id(card, :columns) %>" class="card__stages">
<% 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 %>
</div>
app/views/cards/triage/_columns.html.erb
+3 -3
View File
@@ -2,13 +2,13 @@
<legend class="for-screen-reader">Choose a column for this card</legend>
<%= 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" %>