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

Merge branch 'collapsing-columns' into collapsing-columns+domain

Browse Source 
# Conflicts:
#	app/helpers/cards_helper.rb
This commit is contained in:
Jorge Manrubia
2025-09-26 18:48:48 +02:00
parent 0e8bf9b03f 906aa0d691
commit b94af96e8f
20 changed files with 231 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/images/tag-outline.svg
+1
View File
@@ -0,0 +1 @@
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m2 13c0 .55.21985 1.0502.58984 1.4102l7 7 .14161.1289c.34435.2851.78735.4609 1.26855.4609s.9243-.1758 1.2754-.4609l.1445-.1289 8.9903-9c.37-.36.5898-.8602.5898-1.4102v-7c0-1.11-.89-2-2-2h-7c-.55 0-1.0502.22008-1.4102.58008l-8.99996 9.00002c-.35993.36-.58984.86-.58984 1.4199zm18-2.0088-8.9775 8.9873-.0205.0147-6.99809-6.9971v-.002l8.99409-8.9941h7.002z"/><circle cx="17.5" cy="6.5" r="1.5"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 468 B

app/assets/images/tag.svg
+1 -1
View File
@@ -1 +1 @@
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m5.5 7a1.5 1.5 0 0 1 -1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5 1.5 1.5 0 0 1 -1.5 1.5m15.91 4.58-9-9c-.36-.36-.86-.58-1.41-.58h-7c-1.11 0-2 .89-2 2v7c0 .55.22 1.05.59 1.41l8.99 9c.37.36.87.59 1.42.59s1.05-.23 1.41-.59l7-7c.37-.36.59-.86.59-1.41 0-.56-.23-1.06-.59-1.42z"/></svg>
<svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m18.5 7c.3978 0 .7794-.15804 1.0607-.43934s.4393-.66284.4393-1.06066-.158-.77936-.4393-1.06066-.6629-.43934-1.0607-.43934-.7794.15804-1.0607.43934-.4393.66284-.4393 1.06066.158.77936.4393 1.06066.6629.43934 1.0607.43934zm-15.91 4.58 9-9c.36-.36.86-.58 1.41-.58h7c1.11 0 2 .89 2 2v7c0 .55-.22 1.05-.59 1.41l-8.99 9c-.37.36-.87.59-1.42.59s-1.05-.23-1.41-.59l-7-7c-.37-.36-.59-.86-.59-1.41 0-.56.23-1.06.59-1.42z" fill="#000"/></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 358 B

After

Width:  |  Height:  |  Size: 534 B

app/assets/stylesheets/_global.css
+5 -1
View File
@@ -43,6 +43,10 @@
0 0.4em 0.4em oklch(var(--lch-black) / 5%),
0 0.8em 0.8em oklch(var(--lch-black) / 5%);
/* Patterns */
--wavy-background-mask: radial-gradient(6px at 50% calc(100% + 3px), transparent calc(99% - 2px), black calc(101% - 2px) 99%, transparent 101%) calc(50% - 8px) calc(50% - 3px + .5px)/16px 6px,
radial-gradient(6px at 50% -3px, transparent calc(99% - 2px), black calc(101% - 2px) 99%, transparent 101%) 50% calc(50% + 3px)/16px 6px;
/* Components */
--btn-size: 2.65em;
--footer-height: 3.5rem;
@@ -206,7 +210,7 @@
/* Colors: Cards */
--color-card-default: oklch(var(--lch-blue-dark));
--color-card-complete: var(--color-ink);
--color-card-complete: var(--color-ink-darker);
--color-card-1: oklch(var(--lch-ink-medium));
--color-card-2: oklch(var(--lch-uncolor-medium));
--color-card-3: oklch(var(--lch-yellow-medium));
app/assets/stylesheets/card-columns.css
+109 -36
View File
@@ -91,7 +91,7 @@
}
&:not(.is-collapsed) {
padding-inline: var(--column-gap);
padding-inline: calc(var(--column-gap) * 2);
}
}
@@ -101,14 +101,21 @@
.cards__expander {
align-items: center;
border-radius: 99rem;
cursor: pointer;
display: flex;
flex-direction: row-reverse;
font-size: var(--text-x-small);
font-weight: 600;
gap: 0.5ch;
line-height: var(--column-width-collapsed);
position: relative;
text-transform: uppercase;
transition: 100ms ease-out;
@media (any-hover: hover) {
&:hover {
filter: brightness(0.9);
}
}
.cards.is-collapsed & {
block-size: 100%;
@@ -145,6 +152,9 @@
}
.cards:not(.is-collapsed) & {
display: grid;
grid-template-columns: auto 1fr auto;
inline-size: 100%;
margin-block-end: calc(-0.5 * var(--cards-gap));
&:hover {
@@ -155,20 +165,49 @@
}
.cards__expander-count {
line-height: var(--column-width-collapsed);
inline-size: var(--column-width-collapsed);
.cards:not(.is-collapsed) & {
display: none;
opacity: 0;
}
}
.cards__expander-title {
font-weight: inherit;
font-size: inherit;
grid-column: 2;
line-height: var(--column-width-collapsed);
.cards.is-collapsed & {
writing-mode: vertical-rl;
}
}
.cards__expander-menu {
.btn--circle {
--btn-background: transparent;
block-size: var(--column-width-collapsed);
inline-size: var(--column-width-collapsed);
}
.panel {
--panel-padding: 1ch;
}
.cards.is-collapsed & {
display: none;
}
}
.blank-slate--card {
box-shadow: none !important;
border: 2px dashed color-mix(in srgb, var(--card-color) 40%, var(--color-canvas));;
font-weight: 600;
rotate: 2deg;
}
/* TODO: I think this is legacy now? */
.cards__heading {
display: flex;
@@ -213,16 +252,10 @@
/* ------------------------------------------------------------------------ */
.cards {
.blank-slate--card {
box-shadow: none !important;
border: 2px dashed color-mix(in srgb, var(--card-color) 40%, var(--color-canvas));;
font-weight: 600;
rotate: 2deg;
}
.card {
--block-space: 1em;
--block-space-half: 0.5em;
--card-padding-inline: 1em;
--text-xx-large: 1.6em;
--text-x-small: 1em;
@@ -230,12 +263,8 @@
font-size: clamp(0.6rem, 0.85cqi, 100px);
}
.card__body {
margin-block: var(--block-space-half);
}
.card__footer {
margin-block-start: var(--block-space-half);
.card__tags {
gap: calc(var(--card-header-space) / 2);
}
.card__title {
@@ -247,10 +276,24 @@
z-index: 1;
}
.card__stages,
.card__hide-on-index {
display: none;
}
.card__body {
padding-block: calc(var(--card-padding-block) * 0.75) var(--card-padding-block);
}
.card__meta {
font-weight: 600;
strong,
.local-time-value {
font-weight: inherit;
}
}
.card:has(.card__background img:not([src=""])) {
.card__content,
.card__meta,
@@ -300,8 +343,7 @@
color-mix(in oklch, var(--color-considering) 0%, transparent) 100%);
content: "";
inset: 0;
mask: radial-gradient(6px at 50% calc(100% + 3px), transparent calc(99% - 2px), black calc(101% - 2px) 99%, transparent 101%) calc(50% - 8px) calc(50% - 3px + .5px)/16px 6px,
radial-gradient(6px at 50% -3px, transparent calc(99% - 2px), black calc(101% - 2px) 99%, transparent 101%) 50% calc(50% + 3px)/16px 6px;
mask: var(--wavy-background-mask);
position: absolute;
z-index: 0;
}
@@ -352,6 +394,7 @@
rotate: 180deg;
}
}
.card {
--avatar-size: 2.75em;
--text-small: 1.1em;
@@ -370,21 +413,36 @@
&:nth-child(4n) { rotate: 0.5deg; }
}
.card__body {
padding-block-start: 0;
padding-inline: 0;
}
.card__collection {
background-color: transparent;
color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink));
color: var(--card-text-color);
}
.card__collection-name {
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));
/* The following groups the header and title on considering cards */
.card__header {
color: var(--color-ink);
padding-block-start: calc(var(--card-padding-block) / 2);
}
.card__collection,
.card__tags {
color: inherit;
}
.card__body {
padding-block: 0 var(--card-padding-block);
}
/* End */
/* The Uncomment the following to add borders and such */
/*
.card__collection {
border-block-end: var(--card-border);
border-inline-end: var(--card-border);
}
*/
/* End */
.card--drafted {
--card-color: var(--color-ink-medium) !important;
@@ -393,11 +451,6 @@
box-shadow: none !important;
}
.card__header {
color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink));
margin-inline: calc(-0.5 * var(--card-padding-inline)) calc(-0.25 * var(--card-padding-inline));
}
.card__people-label {
display: none;
}
@@ -405,10 +458,6 @@
.card__title {
min-block-size: 0;
}
.card__tags {
font-size: var(--text-small);
}
}
@@ -456,6 +505,30 @@
}
}
/* Doing
/* -------------------------------------------------------------------------- */
/* Surface a mini bubble if there are cards with bubbles inside */
.cards--doing.is-collapsed:has(.bubble:not([hidden])) {
--bubble-color: var(--card-color, oklch(var(--lch-blue-medium)));
--bubble-shape: 54% 46% 61% 39% / 57% 49% 51% 43%;
&:before {
background: radial-gradient(
color-mix(in srgb, var(--bubble-color) 8%, var(--color-canvas)) 50%,
color-mix(in srgb, var(--bubble-color) 48%, var(--color-canvas)) 100%
);
block-size: 1em;
border-radius: var(--bubble-shape);
content: "";
inline-size: 1em;
inset: 0 0 auto auto;
position: absolute;
translate: 25% -25%;
z-index: 1;
}
}
/* Closed
/* ------------------------------------------------------------------------ */
app/assets/stylesheets/cards.css
+41 -36
View File
@@ -5,6 +5,9 @@
.card {
--avatar-size: 2.75em;
--card-bg-color: color-mix(in srgb, var(--card-color) 4%, var(--color-canvas));
--card-text-color: color-mix(in srgb, var(--card-color) 75%, var(--color-ink));
--card-border: 1px solid color-mix(in srgb, var(--card-color) 33%, var(--color-ink-inverted));
--card-header-space: 1ch;
--card-padding-inline: var(--inline-space-double);
--card-padding-block: var(--block-space);
--border-color: transparent;
@@ -15,7 +18,6 @@
background-color: var(--card-bg-color);
border-radius: var(--border-radius);
box-shadow: var(--shadow);
color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink));
display: flex;
flex-direction: column;
inline-size: 100%;
@@ -41,7 +43,7 @@
border-radius: var(--border-radius) 0 0 0;
display: flex;
flex-wrap: nowrap;
gap: var(--inline-space);
gap: var(--card-header-space);
margin-block-start: calc(-1 * var(--card-padding-block));
margin-inline: calc(-1 * var(--card-padding-inline)) calc(-0.5 * var(--card-padding-inline));
max-inline-size: unset;
@@ -52,25 +54,16 @@
}
}
.card__id {
flex-shrink: 0;
margin-inline-start: calc(var(--inline-space) * -1);
.card-perma &:before {
content: "No.";
opacity: 0.5;
}
}
.card__collection {
background-color: var(--card-color);
border-radius: var(--border-radius) 0 var(--border-radius) 0;
color: var(--color-ink-inverted);
display: inline-flex;
font-weight: 800;
font-weight: 600;
max-inline-size: 100%;
min-inline-size: 0;
padding: var(--block-space-half) var(--inline-space) var(--block-space-half) var(--card-padding-inline);
padding-block: 0.25lh;
padding-inline: var(--card-padding-inline) 1ch;
&:has(.collection-picker__button) {
cursor: pointer;
@@ -89,34 +82,43 @@
}
}
.card__collection-name {
border-inline-start: 1px solid color-mix(in srgb, var(--color-ink-inverted) 33%, var(--card-color));
color: currentcolor;
display: flex;
margin-inline-start: var(--inline-space-half);
max-inline-size: 100%;
min-inline-size: 0;
padding-inline-start: calc(var(--inline-space) * 0.75);
text-transform: uppercase;
.card__id {
flex-shrink: 0;
.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-perma &:before {
content: "No.";
opacity: 0.5;
}
}
.card__tag {
color: var(--card-color);
font-weight: 700;
.card__collection-name {
border-inline-start: 1px solid color-mix(in hsl, transparent 75%, currentColor);
color: currentColor;
display: flex;
margin-inline-start: var(--card-header-space);
max-inline-size: 100%;
min-inline-size: 0;
padding-inline-start: var(--card-header-space);
text-transform: uppercase;
}
.card__tags {
--btn-color: var(--card-color);
align-items: center;
color: var(--card-color);
color: var(--card-text-color);
display: flex;
gap: var(--card-header-space);
min-inline-size: 0;
}
.card__tag {
color: inherit;
font-weight: 600;
min-width: 0;
text-transform: uppercase;
}
/* Body
/* ------------------------------------------------------------------------ */
@@ -133,6 +135,7 @@
}
.card__content {
color: var(--color-ink);
contain: inline-size;
flex: 2 1 auto;
max-inline-size: 100%;
@@ -140,13 +143,12 @@
.card__title {
--input-border-radius: 0;
--input-color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink));
--lines: 3;
color: inherit;
color: var(--color-ink);
font-size: var(--text-xx-large);
font-weight: 900;
line-height: 1.3;
line-height: 1.1;
text-wrap: balance;
@supports not (field-sizing: content) {
@@ -187,9 +189,11 @@
}
.card__stages {
color: var(--card-text-color);
display: flex;
flex: 0 1 auto;
flex-direction: column;
gap: 2px;
justify-self: end;
max-inline-size: 20ch;
padding-block: var(--block-space-half);
@@ -199,11 +203,11 @@
/* ------------------------------------------------------------------------ */
.card__meta {
--meta-border: 1px solid color-mix(in srgb, var(--card-color) 50%, transparent);
--meta-spacer-block: 0.5ch;
--meta-spacer-inline: 0.75ch;
align-items: center;
color: var(--card-text-color);
display: grid;
font-size: var(--text-x-small);
font-weight: 500;
@@ -259,7 +263,7 @@
/* Top */
.card__meta-text:nth-of-type(odd) {
border-block-end: var(--meta-border);
border-block-end: var(--card-border);
padding-block-end: var(--meta-spacer-block);
}
@@ -270,7 +274,7 @@
/* Left */
.card__meta-text:nth-of-type(-n+2) {
border-inline-end: var(--meta-border);
border-inline-end: var(--card-border);
padding-inline-end: var(--meta-spacer-inline);
}
@@ -376,6 +380,7 @@
--card-padding-block: 1ch;
background-color: var(--color-canvas);
color: var(--card-text-color);
&.card--closed {
--card-color: var(--color-card-complete) !important;
app/assets/stylesheets/filters.css
+3 -1
View File
@@ -106,7 +106,9 @@
.filter__terms {
--input-background: var(--color-canvas);
min-inline-size: 30ch;
.filters:not(.filters--expanded) & {
min-inline-size: 40ch;
}
}
.quick-filter {
app/assets/stylesheets/icons.css
+1
View File
@@ -85,6 +85,7 @@
.icon--sliders { --svg: url("sliders.svg "); }
.icon--switch { --svg: url("switch.svg "); }
.icon--tag { --svg: url("tag.svg "); }
.icon--tag-outline { --svg: url("tag-outline.svg "); }
.icon--thumb-up { --svg: url("thumb-up.svg "); }
.icon--trash { --svg: url("trash.svg "); }
.icon--unpinned { --svg: url("unpinned.svg"); }
app/assets/stylesheets/workflows.css
+14
View File
@@ -7,6 +7,8 @@
color: inherit;
inline-size: 100%;
justify-content: flex-start;
text-transform: uppercase;
@media (hover: hover) {
&:hover {
@@ -27,6 +29,18 @@
}
}
@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
/* ------------------------------------------------------------------------ */
app/helpers/cards_helper.rb
+17 -1
View File
@@ -71,9 +71,25 @@ module CardsHelper
end
def cards_expander(title, count)
tag.header class: "cards__expander btn btn--plain", data: { action: "click->collapsible-columns#toggle" }, style: "--card-count: #{[count, 20].min}", aria: { role: "button" } do
tag.header class: "cards__expander", data: { action: "click->collapsible-columns#toggle" }, style: "--card-count: #{[count, 20].min}", aria: { role: "button" } do
concat(tag.span count > 99 ? "99+" : count, class: "cards__expander-count", "data-drag-and-drop-counter": true)
concat(tag.h2 title, class: "cards__expander-title")
concat(tag.div class: "cards__expander-menu position-relative", data: { controller: "dialog", action: "keydown.esc->dialog#close click@document->dialog#closeOnClickOutside" } do
concat(tag.button class: "btn btn--circle txt-x-small borderless", data: { action: "click->dialog#open:stop" } do
concat(icon_tag "menu-dots-horizontal", class: "translucent")
concat(tag.span "Column options", class: "for-screen-reader")
end)
concat(tag.dialog class: "popup panel flex-column gap fill-white shadow txt-small margin-block-double", data: { dialog_target: "dialog" } do
concat(tag.ul class: "popup__list" do
concat(tag.li class: "popup__item" do
concat(tag.button "Rename column", class: "popup__btn btn")
end)
concat(tag.li class: "popup__item" do
concat(tag.button "Delete column", class: "popup__btn btn")
end)
end)
end)
end)
end
end
end
app/helpers/workflows_helper.rb
+1 -1
View File
@@ -4,7 +4,7 @@ module WorkflowsHelper
tag.span(stage.name, class: "overflow-ellipsis"),
card_staging_path(card, stage_id: stage),
method: :put,
class: [ "btn justify-start workflow-stage txt-uppercase", { "workflow-stage--current": stage == card.stage } ],
class: [ "workflow-stage btn", { "workflow-stage--current": stage == card.stage } ],
form_class: "flex align-center gap-half",
data: { turbo_frame: "_top" }
end
app/views/cards/display/_preview.html.erb
+1 -1
View File
@@ -6,7 +6,7 @@
<%= render "cards/display/preview/collection", card: card %>
<%= render "cards/display/preview/tags", card: card %>
<%= render "cards/display/preview/steps", card: card %>
<%= icon_tag "attachment", class: "card__attachments-indicator translucent txt-x-small" if card.has_attachments? %>
<%= 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">
app/views/cards/display/_public_preview.html.erb
-1
View File
@@ -2,7 +2,6 @@
<%= card_article_tag card, class: "card" do %>
<div class="flex flex-column flex-item-grow max-inline-size">
<header class="card__header">
<div class="card__collection flex align-start">
<span class="card__id"><%= card.id %></span>
<span class="card__collection-name">
app/views/cards/display/common/_collection.html.erb
+1 -1
View File
@@ -1,4 +1,4 @@
<label class="card__collection flex align-center">
<label class="card__collection">
<span class="card__id"><%= card.id %></span>
<span class="card__collection-name">
<span class="overflow-ellipsis"><%= card.collection.name %></span>
app/views/cards/display/perma/_tags.html.erb
+12 -13
View File
@@ -1,16 +1,4 @@
<div id="<%= dom_id(card, :tags) %>" class="card__tags gap-half">
<div class="min-width overflow-ellipsis">
<% if card.tags.any? || card.creating? %>
<span class="margin-inline-start-half"># </span>
<% card.tags.each_with_index do |tag, index| %>
<%= link_to cards_path(collection_ids: [ card.collection ], tag_ids: [ tag.id ]),
class: "card__tag btn btn--plain min-width txt-uppercase fill-transparent" do %>
<span class="overflow-ellipsis"><%= tag.title %></span>
<% end %><%= ", " unless index == card.tags.size - 1 %>
<% end %>
<% end %>
</div>
<div id="<%= dom_id(card, :tags) %>" class="card__tags">
<div class="position-relative" data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside" <%= "hidden" if card.closed? %>>
<button class="tag-picker__button btn card__hide-on-index tooltip" data-action="click->dialog#open:stop" style="--btn-background: var(--card-bg-color);">
<%= icon_tag "tag" %>
@@ -21,4 +9,15 @@
<%= turbo_frame_tag card, :tagging, src: new_card_tagging_path(card) %>
</dialog>
</div>
<% if card.tags.any? || card.creating? %>
<div class="min-width overflow-ellipsis">
<% card.tags.each_with_index do |tag, index| %>
<%= link_to cards_path(collection_ids: [ card.collection ], tag_ids: [ tag.id ]),
class: "card__tag btn btn--plain min-width txt-uppercase fill-transparent" do %>
<%= tag.title %>
<% end %><%= "," unless index == card.tags.size - 1 %>
<% end %>
</div>
<% end %>
</div>
app/views/cards/display/preview/_stages.html.erb
+1 -1
View File
@@ -1,7 +1,7 @@
<% if workflow = card.workflow %>
<div class="card__stages">
<% workflow.stages.each do |stage| %>
<%= tag.span stage.name, class: ["overflow-ellipsis btn justify-start workflow-stage txt-uppercase", { "workflow-stage--current": stage == card.stage }] %>
<%= tag.span stage.name, class: ["workflow-stage btn overflow-ellipsis", { "workflow-stage--current": stage == card.stage }] %>
<% end %>
</div>
<% end %>
app/views/cards/display/preview/_tags.html.erb
+8 -8
View File
@@ -1,12 +1,12 @@
<div class="card__tags">
<div class="min-width overflow-ellipsis">
<% if card.tags.any? %>
<span># </span>
<% if card.tags.any? %>
<div class="card__tags">
<%= icon_tag "tag-outline", class: "translucent" %>
<div class="min-width overflow-ellipsis">
<% card.tags.each_with_index do |tag, index| %>
<span class="card__tag btn btn--plain min-width txt-uppercase fill-transparent overflow-ellipsis">
<%= tag.title %>
<span class="card__tag btn btn--plain overflow-ellipsis">
<%= tag.title %><%= "," unless index == card.tags.size - 1 %>
</span>
<% end %>
<% end %>
</div>
</div>
</div>
<% end %>
app/views/cards/display/public_preview/_stages.html.erb
+1 -1
View File
@@ -2,7 +2,7 @@
<div id="<%= dom_id(card, :stages) %>" class="card__stages">
<% workflow.stages.each do |stage| %>
<%= tag.div stage.name,
class: ["overflow-ellipsis flex align-center gap-half btn non-clickable justify-start workflow-stage txt-uppercase no-hover", { "workflow-stage--current": stage == card.stage }] %>
class: ["workflow-stage overflow-ellipsis flex align-center gap-half btn non-clickable no-hover", { "workflow-stage--current": stage == card.stage }] %>
<% end %>
</div>
<% end %>
app/views/cards/index/_columns.html.erb
+10 -4
View File
@@ -18,10 +18,16 @@
<%= render "cards/index/engagement/closed", column: columns.closed %>
<button class="btn btn--circle txt-x-small borderless">
<%= icon_tag "menu-dots-horizontal" %>
<span class="for-screen-reader">Add a new column, etc.</span>
</button>
<div class="position-relative" data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
<button class="btn btn--circle txt-x-small borderless" data-action="click->dialog#open:stop">
<%= icon_tag "add", class: "translucent" %>
<span class="for-screen-reader">Add a new column, etc.</span>
</button>
<dialog class="popup panel flex-column gap fill-white shadow txt-small margin-block-double" data-dialog-target="dialog">
<input class="input" placeholder="Column name" />
<button class="btn btn--link">Add a column</button>
</dialog>
</div>
</div>
</div>
<% end %>
app/views/cards/stagings/_stages.html.erb
+3 -3
View File
@@ -1,16 +1,16 @@
<% if workflow = card.collection.workflow %>
<div id="<%= dom_id(card, :stages) %>" class="card__stages">
<%= button_to "Not now", card_closure_path(card, reason: "Not now"),
class: [ "btn justify-start workflow-stage txt-uppercase", { "workflow-stage--current": card.closed? } ],
class: [ "workflow-stage btn", { "workflow-stage--current": card.closed? } ],
form_class: "flex align-center gap-half" %>
<%= button_to "The Stream", card_engagement_path(card), method: :delete,
class: [ "btn justify-start workflow-stage txt-uppercase", { "workflow-stage--current": card.considering? } ],
class: [ "workflow-stage workflow-stage--stream btn", { "workflow-stage--current": card.considering? } ],
form_class: "flex align-center gap-half" %>
<% workflow.stages.each do |stage| %>
<%= button_to_set_stage card, stage %>
<% end %>
<%= button_to "Closed", card_closure_path(card, reason: "Completed"),
class: [ "btn justify-start workflow-stage txt-uppercase", { "workflow-stage--current": card.closed? } ],
class: [ "workflow-stage btn", { "workflow-stage--current": card.closed? } ],
form_class: "flex align-center gap-half" %>
</div>
<% end %>
app/views/filters/settings/_terms.html.erb
+1 -1
View File
@@ -1,4 +1,4 @@
<%= form.text_field "terms[]", placeholder: "Filter these cards…", class: "input txt-x-small filter__terms",
<%= form.text_field "terms[]", placeholder: "Filter these cards…", class: "filter__terms input txt-x-small",
autofocus: false, autocomplete: :off, autocorrect: "off", data: {
"1p-ignore": "true",
filter_settings_target: "field",