diff --git a/app/assets/images/tag-outline.svg b/app/assets/images/tag-outline.svg
new file mode 100644
index 000000000..1c8fab206
--- /dev/null
+++ b/app/assets/images/tag-outline.svg
@@ -0,0 +1 @@
+
diff --git a/app/assets/images/tag.svg b/app/assets/images/tag.svg
index 76591fe36..aa0368613 100644
--- a/app/assets/images/tag.svg
+++ b/app/assets/images/tag.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/app/assets/stylesheets/_global.css b/app/assets/stylesheets/_global.css
index 0f6c4c2c1..68295ad2a 100644
--- a/app/assets/stylesheets/_global.css
+++ b/app/assets/stylesheets/_global.css
@@ -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));
diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css
index 5d36ad6c0..1f4c3e28d 100644
--- a/app/assets/stylesheets/card-columns.css
+++ b/app/assets/stylesheets/card-columns.css
@@ -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
/* ------------------------------------------------------------------------ */
diff --git a/app/assets/stylesheets/cards.css b/app/assets/stylesheets/cards.css
index f0ae80af0..fad4ac7e0 100644
--- a/app/assets/stylesheets/cards.css
+++ b/app/assets/stylesheets/cards.css
@@ -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;
diff --git a/app/assets/stylesheets/filters.css b/app/assets/stylesheets/filters.css
index db259ee7c..7eeedc3a5 100644
--- a/app/assets/stylesheets/filters.css
+++ b/app/assets/stylesheets/filters.css
@@ -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 {
diff --git a/app/assets/stylesheets/icons.css b/app/assets/stylesheets/icons.css
index 6eab28b1b..3733ceb34 100644
--- a/app/assets/stylesheets/icons.css
+++ b/app/assets/stylesheets/icons.css
@@ -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"); }
diff --git a/app/assets/stylesheets/workflows.css b/app/assets/stylesheets/workflows.css
index 2dc043584..5baee3422 100644
--- a/app/assets/stylesheets/workflows.css
+++ b/app/assets/stylesheets/workflows.css
@@ -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
/* ------------------------------------------------------------------------ */
diff --git a/app/helpers/cards_helper.rb b/app/helpers/cards_helper.rb
index 0a2faf3b8..024457ad5 100644
--- a/app/helpers/cards_helper.rb
+++ b/app/helpers/cards_helper.rb
@@ -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
diff --git a/app/helpers/workflows_helper.rb b/app/helpers/workflows_helper.rb
index f60e9d7f8..67956cd3e 100644
--- a/app/helpers/workflows_helper.rb
+++ b/app/helpers/workflows_helper.rb
@@ -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
diff --git a/app/views/cards/display/_preview.html.erb b/app/views/cards/display/_preview.html.erb
index 034201131..94461f0ae 100644
--- a/app/views/cards/display/_preview.html.erb
+++ b/app/views/cards/display/_preview.html.erb
@@ -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? %>
diff --git a/app/views/cards/display/_public_preview.html.erb b/app/views/cards/display/_public_preview.html.erb
index c35af99a8..b9180d94d 100644
--- a/app/views/cards/display/_public_preview.html.erb
+++ b/app/views/cards/display/_public_preview.html.erb
@@ -2,7 +2,6 @@
<%= card_article_tag card, class: "card" do %>