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

Merge pull request #399 from basecamp/consolidate-cards

Browse Source 
Consolidate cards
This commit is contained in:
Andy Smith
2025-04-14 09:40:58 -05:00
committed by GitHub
parent 289487a383 a88264ed0a
commit bc8060a2dd
33 changed files with 646 additions and 611 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/stylesheets/_global.css
+18
View File
@@ -19,6 +19,17 @@
--text-x-large: 1.8rem;
--text-xx-large: 2.5rem;
/* Borders */
--border: 1px solid var(--color-subtle);
/* Shadows */
--shadow: 0 0 0 1px oklch(var(--lch-always-black) / 0.02),
0 .2em 1.6em -0.8em oklch(var(--lch-always-black) / 0.2),
0 .4em 2.4em -1em oklch(var(--lch-always-black) / 0.3),
0 .4em .8em -1.2em oklch(var(--lch-always-black) / 0.4),
0 .8em 1.2em -1.6em oklch(var(--lch-always-black) / 0.5),
0 1.2em 1.6em -2em oklch(var(--lch-always-black) / 0.6);
/* Components */
--btn-size: 2.65em;
@@ -75,5 +86,12 @@
--lch-green-light: 28.11% 0.02 142.49;
--lch-yellow: 40.9% 0.06 88.9;
--lch-light-blue: 20.62% 0.048 216.62;
--shadow: 0 0 0 1px oklch(var(--lch-always-black) / 0.42),
0 .2em 1.6em -0.8em oklch(var(--lch-always-black) / 0.6),
0 .4em 2.4em -1em oklch(var(--lch-always-black) / 0.7),
0 .4em .8em -1.2em oklch(var(--lch-always-black) / 0.8),
0 .8em 1.2em -1.6em oklch(var(--lch-always-black) / 0.9),
0 1.2em 1.6em -2em oklch(var(--lch-always-black) / 1);
}
}
app/assets/stylesheets/avatars.css
+1
View File
@@ -3,6 +3,7 @@
--avatar-border-radius: 50%;
aspect-ratio: 1;
block-size: var(--avatar-size, 5ch);
border-radius: var(--avatar-border-radius);
display: grid;
inline-size: var(--avatar-size, 5ch);
app/assets/stylesheets/buttons.css
+5 -5
View File
@@ -109,7 +109,7 @@
display: none;
}
}
&:has(input:checked) {
--btn-background: var(--color-ink);
--btn-color: var(--color-ink-reversed);
@@ -201,17 +201,17 @@
}
:first-of-type .btn {
border-bottom-left-radius: 2em;
border-end-start-radius: 2em;
border-inline-end: 0;
border-top-left-radius: 2em;
border-start-start-radius: 2em;
flex: 1 0 50%;
padding-inline-end: 0.8em;
}
:last-of-type .btn {
border-bottom-right-radius: 2em;
border-end-end-radius: 2em;
border-inline-start: 0;
border-top-right-radius: 2em;
border-start-end-radius: 2em;
flex: 1 0 50%;
padding-inline-start: 0.8em;
}
app/assets/stylesheets/card-columns.css
+142
View File
@@ -0,0 +1,142 @@
@layer components {
/* Coluns
/* -------------------------------------------------------------------------- */
/* Card contents are resized via container queries. We're using #main here as
the primary container so all cards have the same container reference */
#main:has(.card-columns) {
container-type: inline-size;
max-inline-size: 1400px;
}
.card-columns {
border-block-start: 1px solid var(--color-subtle);
display: grid;
grid-template-columns: repeat(2, 50%);
margin: auto;
max-inline-size: 1080px;
.cards:first-child {
border-inline-end: var(--border);
padding-inline-end: var(--cards-gap);
}
.cards:last-child {
padding-inline-start: var(--cards-gap);
}
}
/* Cards
/* -------------------------------------------------------------------------- */
.cards {
--cards-gap: 2cqi;
align-items: center;
display: flex;
flex-direction: column;
gap: var(--cards-gap);
justify-content: start;
padding-block: var(--cards-gap);
.card {
--block-space: 1em;
--block-space-half: 0.5em;
--text-xx-large: 2em;
/* Set lower limit for font size */
font-size: clamp(0.45rem, 0.85cqi, 100px);
}
.card__title {
pointer-events: none;
}
.card__link {
z-index: 1;
}
.card__hide-on-index {
display: none;
}
}
.cards__heading {
display: inline-flex;
font-size: var(--text-medium);
inline-size: 100%;
justify-content: center;
text-transform: uppercase;
}
/* Considering
/* ------------------------------------------------------------------------ */
.cards--considering {
.card {
--text-xx-large: 1.6em;
--text-small: 1.1em;
background-color: var(--color-bg);
box-shadow: 0 0 0 1px var(--color-subtle);
line-height: 1.2;
@media (prefers-color-scheme: dark) {
box-shadow: 0 0 0 1px var(--color-subtle-dark);
}
.avatar {
block-size: 2.75em;
inline-size: 2.75em;
}
}
.card--drafted {
--card-color: var(--color-subtle-dark) !important;
border-color: var(--card-color) !important;
border-style: dashed !important;
}
.card__background {
display: none;
}
.card__title {
margin-block-start: 0.1em;
min-block-size: 0;
}
.card__people-label {
display: none;
}
.card__body {
padding-inline: 0;
}
.card__tags {
font-size: var(--text-small);
}
}
/* Closed
/* -------------------------------------------------------------------------- */
.cards--closed {
border-block-start: 1px solid var(--color-subtle);
justify-content: center;
flex-direction: row;
flex-wrap: wrap;
inline-size: 100%;
margin: 0 auto;
.card {
inline-size: calc((100% - var(--cards-gap) * 2) / 3);
@media (max-width: 960px) {
inline-size: calc((100% - var(--cards-gap)) / 2);
}
}
}
}
app/assets/stylesheets/card-filters.css
+40
View File
@@ -0,0 +1,40 @@
@layer components {
.card-filter--collection {
> button {
--hover-size: 0;
}
}
.card-filter--column {
> button {
--hover-size: 0;
inline-size: auto;
padding: 0 2em 0 0;
margin-inline-start: 2em;
}
}
.card-filter--sorting {
inset: auto 50% -4em;
margin-inline-start: -1em;
position: absolute;
transform: translateX(-50%);
#header:has(&) {
position: relative;
z-index: 1;
}
}
.card-count__selector {
inset: 0.5cqi 0.5cqi auto auto;
position: absolute;
text-align: start;
z-index: 1;
.popup {
inset: 1em 1em auto auto;
}
}
}
app/assets/stylesheets/card-perma.css
+153
View File
@@ -0,0 +1,153 @@
/* Card container for the perma. Tools and actions and whatnot */
@layer components {
.card-perma {
--actions-block-inset: 1.5rem;
--actions-inline-inset: 4rem;
--color-container: color-mix(in srgb, var(--card-color) 33%, var(--color-bg));
--padding-inline: calc(var(--block-space-double) + var(--block-space));
--padding-block: var(--block-space-double) calc(var(--block-space-double) + var(--block-space-half));
align-items: start;
column-gap: var(--inline-space);
display: grid;
grid-template-areas:
"qw notch-top we"
"actions-left card actions-right"
"er notch-bottom rt";
grid-template-columns: 48px minmax(0, 960px) 48px;
inline-size: fit-content;
max-inline-size: 100%;
margin-inline: auto;
&:has(.card-perma__star-input:checked) {
.card {
outline: 4px solid var(--color-negative);
}
}
.card {
--card-aspect-ratio: 2 / 0.95;
border: none;
}
}
/* Children
/* ------------------------------------------------------------------------ */
.card-perma__bg {
background-color: var(--color-container);
border-radius: 0.2em;
grid-area: card;
padding: var(--padding-block) var(--padding-inline);
}
.card-perma__actions {
display: grid;
gap: var(--block-space-half);
&:has([open]) {
position: relative;
z-index: 1;
}
}
.card-perma__actions--left { grid-area: actions-left; }
.card-perma__actions--right { grid-area: actions-right; }
/* Notches
/* -------------------------------------------------------------------------- */
.card-perma__notch {
--card-notch-padding: 0.5ch;
--border-radius: 1em;
align-items: center;
background-color: var(--color-bg);
border-radius: 99rem;
color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink));
display: inline-flex;
inline-size: auto;
gap: var(--inline-space);
justify-content: center;
margin-inline: auto;
position: relative;
text-align: center;
z-index: 0;
}
.card-perma__notch--top {
grid-area: notch-top;
inset-inline-start: 50%;
min-inline-size: 36ch;
position: absolute;
translate: -50% -50%;
.btn {
--btn-border-color: var(--card-color);
--btn-color: var(--card-color);
text-align: center;
&:has(input:checked) {
--btn-background: var(--card-color);
--btn-color: var(--color-ink-reversed);
}
}
}
.card-perma__notch--bottom {
grid-area: notch-bottom;
padding: calc(var(--block-space) * 0.75) calc(var(--block-space) * 0.66);
translate: 0 -50%;
&:has([open]) {
z-index: 1;
}
.btn:not(.popup__item, .btn--plain) {
--btn-background: var(--card-color);
--btn-color: var(--color-ink-reversed);
}
.btn--plain {
--btn-color: var(--card-color);
text-decoration: underline;
}
}
.card-perma__closure-message {
color: var(--card-color);
&:first-child {
padding-left: 1ch;
}
}
/* Variants
/* ------------------------------------------------------------------------ */
.card-perma--pointing {
--arrow-size: 20em;
--aspect-ratio: 7;
position: relative;
margin-block-end: calc(var(--arrow-size) / var(--aspect-ratio));
&::after {
aspect-ratio: var(--aspect-ratio);
background-color: var(--color-container);
clip-path: polygon(50% 100%, 100% 0, 0 0);
inline-size: var(--arrow-size);
content: "";
display: block;
inset-block-start: 99%;
inset-inline-start: 50%;
position: absolute;
transform: translateX(-50%);
z-index: -1;
}
}
}
app/assets/stylesheets/cards.css
+94 -379
View File
@@ -1,106 +1,30 @@
@layer components {
.cards {
--block-space: 2cqi;
--container-gap: var(--block-space);
--container-padding: calc(var(--block-space) * 1.5);
container-type: inline-size;
padding: var(--block-space-half) 0;
justify-content: start;
:where(.card) {
--block-space: 1em;
--block-space-half: 0.5em;
--card-size: calc(100% - (var(--container-padding) * 2) / 2);
--text-xx-large: 2em;
font-size: 1.8cqi;
flex: 0 1 var(--card-size);
inline-size: var(--card-size);
margin: var(--block-space) auto calc(var(--block-space) * 1.5);
}
:is(.card--mini) {
--text-xx-large: 1.6em;
--text-small: 1.1em;
aspect-ratio: unset;
border: 1px solid var(--color-subtle) !important;
line-height: 1.2;
padding: 0;
margin: var(--block-space) auto calc(var(--block-space) * 1.5);
@media (prefers-color-scheme: dark) {
border-color: var(--color-subtle-dark) !important;
}
.card__title {
margin-block-start: 0.1em;
min-block-size: 0;
}
.card__body {
padding-inline: 0;
.card--mini & {
padding: 0 var(--inline-space-double) var(--block-space);
}
}
.card__tags {
font-size: var(--text-small);
}
&:is(.card--drafted) {
--card-color: var(--color-subtle-dark) !important;
border-color: var(--card-color) !important;
border-style: dashed !important;
}
}
}
.cards--columns {
border-block: 1px solid var(--color-subtle);
display: grid;
grid-template-columns: repeat(2, 50%);
margin: auto;
max-inline-size: 100ch;
padding-block: var(--block-space-half);
.card {
aspect-ratio: unset;
z-index: unset;
}
}
.card {
--card-padding-inline: var(--inline-space-double);
--card-padding-block: var(--block-space);
--border-color: transparent;
--border-radius: 0.2em;
--border-size: 0;
aspect-ratio: 2/0.95;
aspect-ratio: var(--card-aspect-ratio, auto);
background-color: color-mix(in srgb, var(--card-color) 4%, var(--color-bg));
border-radius: 0.5em;
box-shadow: var(--shadow);
color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink));
max-inline-size: 75ch;
display: flex;
flex-direction: column;
inline-size: 100%;
padding: var(--card-padding-block) var(--card-padding-inline);
position: relative;
text-align: start;
z-index: 1;
.card__container & {
inline-size: calc(100dvw - var(--actions-inline-inset) * 2 - var(--btn-size) * 2);
}
.local-time-value {
font-weight: bold;
}
.avatar {
block-size: 2.75em;
inline-size: 2.75em;
--avatar-size: 2.75em;
}
@media (prefers-color-scheme: dark) {
--border-color: var(--color-subtle-dark);
--border-size: 1px;
}
}
@@ -115,79 +39,6 @@
outline: 1px solid var(--color-golden);
}
.card__actions {
position: absolute;
inset: var(--actions-block-inset) auto auto calc(var(--actions-inline-inset) * -1);
z-index: 0;
&:has(dialog[open]) {
z-index: 1;
}
}
.card__actions--right {
inset: var(--actions-block-inset) calc(var(--actions-inline-inset) * -1) auto auto;
}
.card__actions-container {
--border-radius: 6em;
background-color: var(--color-bg);
color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink));
margin-block: calc(var(--block-space) * -1.66) calc(var(--block-space) * 1.66);
padding: calc(var(--block-space) * 0.75) calc(var(--block-space) * 0.66);
position: relative;
z-index: 0;
&:has([open]) {
z-index: 1;
}
.btn:not(.popup__item, .btn--plain, :has(input[type="radio"])) {
--btn-background: var(--card-color);
--btn-color: var(--color-ink-reversed);
}
.btn--plain {
--btn-color: var(--card-color);
text-decoration: underline;
}
.card__closure-message {
color: var(--card-color);
}
&.card__actions-container--top {
margin: calc(var(--block-space) * 1) auto calc(var(--block-space) * -0.66);
min-inline-size: 28ch;
padding: 0;
#header:has(&) {
position: relative;
z-index: 1;
}
.btn {
--btn-border-color: var(--card-color);
--btn-color: var(--card-color);
text-align: center;
&:has(input:checked) {
--btn-background: var(--card-color);
--btn-color: var(--color-ink-reversed);
}
}
}
}
.cards .card__assignees:not(:has(.avatar)) {
.txt-uppercase {
display: none;
}
}
.card__background {
inset: 0;
position: absolute;
@@ -211,180 +62,6 @@
}
}
.card__body {
padding-inline: var(--inline-space-double);
}
.card__body-header {
flex: 2 1 75%;
padding-block: var(--block-space);
}
.card__collection {
background-color: var(--card-color);
font-weight: 800;
letter-spacing: 0.5ch;
padding: var(--block-space-half) var(--inline-space-double);
}
.card-collection__filter {
> button {
--hover-size: 0;
}
}
.card-column__filter {
> button {
--hover-size: 0;
inline-size: auto;
padding: 0 2em 0 0;
margin-inline-start: 2em;
}
}
.card-sorting__filter {
inset: auto 50% calc(var(--btn-size) * -0.66);
margin-inline-start: -1em;
position: absolute;
transform: translate(-50%, 50%);
#header:has(&) {
position: relative;
z-index: 1;
}
}
.card__container {
--actions-block-inset: 1.5rem;
--actions-inline-inset: 4rem;
--padding-inline: calc(var(--block-space-double) + var(--block-space));
--padding-block: var(--block-space-double) calc(var(--block-space-double) + var(--block-space-half));
background-color: color-mix(in srgb, var(--card-color) 33%, var(--color-bg));
border-radius: 0.2em;
display: inline-flex;
margin-block: calc(var(--block-space) * -1) calc(var(--block-space) * -0.33);
padding: var(--padding-block) var(--padding-inline);
}
.card__container--pointing {
--arrow-size: 20em;
--aspect-ratio: 7;
position: relative;
margin-block-end: calc(var(--arrow-size) / var(--aspect-ratio));
&::after {
aspect-ratio: var(--aspect-ratio);
background: color-mix(in srgb, var(--card-color) 33%, var(--color-bg));
clip-path: polygon(50% 100%, 100% 0, 0 0);
inline-size: var(--arrow-size);
content: "";
display: block;
inset-block-start: 99%;
inset-inline-start: 50%;
position: absolute;
transform: translateX(-50%);
z-index: -1;
}
}
.card__delete-btn {
.cards & {
display: none;
}
}
.card__footer {
margin-block-end: var(--block-space);
}
.cards--grid {
--block-space: 2cqi;
--container-gap: var(--block-space-double);
--container-padding: calc(var(--block-space) * 1.5);
container-type: inline-size;
display: flex;
flex-wrap: wrap;
gap: var(--container-gap);
inline-size: 100%;
margin: 0 auto;
max-inline-size: 120ch;
padding: var(--container-padding);
place-content: center;
position: relative;
z-index: 0;
.card {
--block-space: 1em;
--block-space-half: 0.5em;
--card-size: calc(100% - (var(--container-padding) * 2) / 2);
--text-xx-large: 1.8em;
block-size: 50%;
font-size: 3cqi;
flex: 0 0 var(--card-size);
inline-size: var(--card-size);
z-index: 0;
}
.card__meta,
.card__stages {
display: none;
}
@media (min-width: 1ch) {
--block-space: 1cqi;
--container-gap: calc(var(--block-space) * 2);
--container-padding: calc(var(--block-space) * 2.5);
.card {
--card-size: calc(50% - var(--container-gap) - (var(--container-padding) * 2) / 4);
--text-xx-large: 1.6em;
font-size: 1.5cqi;
}
.card__footer,
.card__header,
.card__stages {
font-size: 0.85em;
}
}
@media (min-width: 120ch) {
--block-space: 0.9cqi;
--container-gap: calc(var(--block-space) * 2);
--container-padding: calc(var(--block-space) * 2.5);
.card {
--card-size: calc(33% - var(--container-gap) / 2 - (var(--container-padding) * 2) / 6);
--text-xx-large: 1.8em;
font-size: 1cqi;
}
.card__footer,
.card__header,
.card__stages {
font-size: 0.85em;
}
}
}
.card__header {
padding-inline-end: var(--inline-space);
}
.card__hide-on-index {
.cards &,
.cards--grid & {
display: none;
}
}
.card__link {
--hover-size: 0;
@@ -392,43 +69,25 @@
inset: 0;
position: absolute;
z-index: -1;
.cards &,
.cards--grid & {
z-index: 1;
}
}
.card__meta {
--border-color: var(--card-color);
--border-size: 1px;
--row-gap: 0.25em;
margin-inline: var(--inline-space-double);
strong {
font-weight: 900;
}
.separator {
height: calc(2lh + 2ex);
}
.card--mini & {
margin-inline-start: 0;
}
.card__header {
margin-block-start: calc(-1 * var(--card-padding-block));
margin-inline-start: calc(-1 * var(--card-padding-inline));
}
.card__move-button {
--btn-background: color-mix(in srgb, var(--card-color) 40%, var(--color-ink));
margin-block-start: calc(var(--block-space) * 1.2);
margin-inline-end: calc(var(--inline-space) * -4);
padding-inline-end: var(--inline-space);
.card__collection {
background-color: var(--card-color);
border-radius: var(--border-radius) 0 var(--border-radius) 0;
font-weight: 800;
letter-spacing: 0.4ch;
padding: var(--block-space-half) var(--inline-space-double);
}
.card__stages {
flex: 1 1 25%;
.card__tags {
align-items: center;
color: var(--card-color);
display: flex;
}
.card__tag {
@@ -436,31 +95,25 @@
font-weight: 700;
}
.card__tags {
color: var(--card-color);
.card__body {
padding-block: var(--card-padding-block);
}
.card__title {
--hover-size: 0;
--input-border-radius: 0;
flex: 2 1 75%;
font-size: var(--text-xx-large);
font-weight: 900;
line-height: 1.1;
min-block-size: 3lh;
text-wrap: balance;
.cards & {
pointer-events: none;
}
.card__title-field {
&:is(textarea) {
&::placeholder {
color: inherit;
opacity: 0.5;
}
&:is(textarea)::placeholder {
color: inherit;
opacity: 0.5;
}
}
@@ -471,14 +124,76 @@
}
}
.card__stages {
display: flex;
flex: 1 1 25%;
flex-direction: column;
max-width: 100%;
min-width: 0;
padding-block: var(--block-space);
}
.card__move-button {
--btn-background: color-mix(in srgb, var(--card-color) 40%, var(--color-ink));
margin-block-start: calc(var(--block-space) * 1.2);
margin-inline-end: calc(var(--inline-space) * -4);
padding-inline-end: var(--inline-space);
}
.card__meta {
--border: 1px solid var(--card-color);
align-items: center;
display: flex;
max-inline-size: 100%;
min-inline-size: 0;
}
.card__meta-grid {
display: grid;
grid-template-columns: auto auto;
}
.card__meta-item {
text-transform: uppercase;
strong,
.local-time-value {
font-weight: 900;
}
&:nth-child(odd) {
border-inline-end: var(--border);
padding-inline-end: var(--inline-space);
}
&:nth-child(even) {
padding-inline-start: var(--inline-space);
}
/* First two */
&:nth-child(-n+2) {
border-block-end: var(--border);
padding-block-end: 0.25ch;
}
/* Last two */
&:nth-child(n+3) {
padding-block-start: 0.25ch;
}
}
.card__closed {
align-items: center;
aspect-ratio: 7/4;
border: var(--block-space-half) solid var(--card-color);
position: absolute;
display: flex;
flex-direction: column;
inset: auto var(--block-space) var(--block-space-double) auto;
justify-content: space-between;
padding: var(--block-space-half) calc(var(--inline-space) * 1.5);
position: absolute;
transform: rotate(-10deg);
z-index: -1;
}
app/assets/stylesheets/inputs.css
+31
View File
@@ -223,4 +223,35 @@
opacity: 0;
padding: 0;
}
.input.boost__input {
--hover-size: 0;
--input-border-radius: 0;
--input-border-size: 0;
--input-padding: 0;
--outline-size: 0;
color: inherit;
font-size: inherit;
font-weight: inherit;
inline-size: min-content;
max-inline-size: 3ch;
min-inline-size: 1ch;
outline: none;
@supports (field-sizing: content) {
field-sizing: content;
max-inline-size: unset;
}
&:focus {
background-color: var(--color-highlight);
}
&::-webkit-outer-spin-button,
&::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
}
}
app/assets/stylesheets/pins.css
+64 -38
View File
@@ -1,48 +1,13 @@
@layer components {
.pin__collection {
background-color: var(--card-color);
font-weight: 800;
letter-spacing: 0.3ch;
padding: 0.3em 0.6em 0.3em 1.5em;
}
.pin__content {
--border-color: transparent;
--border-radius: 0.2em;
--padding: 0.75em;
padding: var(--padding);
@media (prefers-color-scheme: dark) {
--border-color: var(--color-subtle-dark);
}
}
.pin__header {
margin: calc(var(--padding) * -1) calc(var(--padding) * -1) auto;
padding: 0 0.2em 0 0;
}
.pin__stage {
--border-color: currentColor;
padding: 0.2em 0.5em;
}
.pin__tags {
color: var(--card-color);
}
.pin__title {
margin-block-start: 0.3rem;
}
.pin-tray {
inset: auto auto var(--block-space-half) var(--inline-space);
.pin {
--z: calc(10 - var(--position));
container-type: inline-size;
font-size: 10px;
&:nth-child(7) { --position: 7; }
&:nth-child(8) { --position: 8; }
&:nth-child(9) { --position: 9; }
@@ -50,5 +15,66 @@
&:nth-child(1n + 11) { display: none; }
}
.avatar,
.card__tags,
.card__meta .btn,
.card__meta-item:not(.card__meta-item--updated),
.workflow-stage:not(.workflow-stage--current),
.card__closed {
display: none;
}
.card {
--block-space: 1em;
--block-space-half: 0.5em;
--text-xx-large: 2em;
border: 1px solid var(--color-bg);
}
.card__collection {
padding-block: 0.25ch;
}
.card__body {
display: block;
padding-block-end: 0;
}
.card__title {
font-size: var(--text-small);
font-weight: bold;
min-block-size: 0;
}
.card__title-link {
--lines: 1;
}
.card__stages {
padding: 0;
}
.card__meta-item--updated {
border: 0;
font-size: var(--text-x-small);
opacity: 0.66;
padding: 0;
text-transform: none;
.local-time-value {
font-weight: normal;
}
}
.workflow-stage--current {
background: none;
border: 1px solid currentColor;
color: var(--color-ink);
inline-size: fit-content;
inset: 0 0 auto auto;
position: absolute;
}
}
}
app/assets/stylesheets/utilities.css
+1 -19
View File
@@ -167,25 +167,7 @@
.border-radius { border-radius: var(--border-radius, 0.5em); }
/* Shadows */
.shadow {
box-shadow:
0 0 0 1px oklch(var(--lch-always-black) / 0.02),
0 .2em 1.6em -0.8em oklch(var(--lch-always-black) / 0.2),
0 .4em 2.4em -1em oklch(var(--lch-always-black) / 0.3),
0 .4em .8em -1.2em oklch(var(--lch-always-black) / 0.4),
0 .8em 1.2em -1.6em oklch(var(--lch-always-black) / 0.5),
0 1.2em 1.6em -2em oklch(var(--lch-always-black) / 0.6);
@media (prefers-color-scheme: dark) {
box-shadow:
0 0 0 1px oklch(var(--lch-always-black) / 0.42),
0 .2em 1.6em -0.8em oklch(var(--lch-always-black) / 0.6),
0 .4em 2.4em -1em oklch(var(--lch-always-black) / 0.7),
0 .4em .8em -1.2em oklch(var(--lch-always-black) / 0.8),
0 .8em 1.2em -1.6em oklch(var(--lch-always-black) / 0.9),
0 1.2em 1.6em -2em oklch(var(--lch-always-black) / 1);
}
}
.shadow { box-shadow: var(--shadow); }
/* Lists */
:where(.list-style-none) {
app/assets/stylesheets/workflows.css
+1
View File
@@ -7,6 +7,7 @@
--hover-size: 0;
color: inherit;
inline-size: 100%;
text-transform: uppercase;
@media (hover: hover) {
app/controllers/cards/pins_controller.rb
+1 -1
View File
@@ -20,7 +20,7 @@ class Cards::PinsController < ApplicationController
private
def broadcast_my_new(pin)
pin.broadcast_prepend_later_to [ Current.user, :pins ], target: "pins", partial: "my/pins/pin"
pin.card.broadcast_prepend_later_to [ Current.user, :pins ], target: "pins", partial: "cards/display/preview"
end
def broadcast_my_removed(pin)
app/helpers/workflows_helper.rb
+1 -1
View File
@@ -1,7 +1,7 @@
module WorkflowsHelper
def button_to_set_stage(card, stage)
button_to card_stagings_path(card, stage_id: stage),
method: :post, class: [ "btn full-width justify-start workflow-stage txt-uppercase", { "workflow-stage--current": stage == card.stage } ],
method: :post, class: [ "btn justify-start workflow-stage txt-uppercase workflow-stage", { "workflow-stage--current": stage == card.stage } ],
form_class: "flex align-center gap-half",
data: { turbo_frame: "_top" } do
tag.span class: "overflow-ellipsis" do
app/views/cards/_closure_toggle.html.erb
+3 -3
View File
@@ -1,6 +1,6 @@
<div class="card__actions-container center border-radius flex-inline align-center justify-center gap" id="<%= dom_id(@card, :card_closure_toggle) %>" style="--card-color: <%= @card.color %>">
<div class="card-perma__notch card-perma__notch--bottom" id="<%= dom_id(@card, :card_closure_toggle) %> style="--card-color: <%= @card.color %>">
<% if card.closed? %>
<span class="card__closure-message pad-inline-start">Completed by <%= card.closed_by.name %> on <%= local_datetime_tag(card.closed_at, style: :shortdate) %>.</span>
<span class="card-perma__closure-message">Completed by <%= card.closed_by.name %> on <%= local_datetime_tag(card.closed_at, style: :shortdate) %>.</span>
<%= button_to card_closure_path(card), method: :delete, class: "btn btn--plain borderless fill-transparent" do %>
<span class="pad-inline-end">Un-do</span>
<% end %>
@@ -19,7 +19,7 @@
</div>
</details>
<span class="card__closure-message">
<span class="card-perma__closure-message">
<% if card.doing? %>
Returns to <em>Considering</em> if no activity <%= local_datetime_tag(card.auto_reconsider_at, style: :indays) -%>.
<% else %>
app/views/cards/_doing_toggle.html.erb
+19
View File
@@ -0,0 +1,19 @@
<% if @card.published? && !@card.closed? %>
<div class="card-perma__notch card-perma__notch--top" id="<%= dom_id(@card, :card_engagement_toggle) %>" style="--card-color: <%= @card.color %>;">
<div class="btn__group flex full-width txt-uppercase">
<%= form_with url: card_engagement_path(@card), method: :delete, data: { controller: "form" } do |form| %>
<%= form.label :engagement, value: "considering", class: "btn", aria: { label: "Move to Doing"} do %>
<%= form.radio_button :engagement, "considering", checked: @card.considering?, class: "for-screen-reader", data: { action: "change->form#submit" } %>
<span>Considering</span>
<% end %>
<% end %>
<%= form_with url: card_engagement_path(@card), method: :post, data: { controller: "form" } do |form| %>
<%= form.label :engagement, value: "doing", class: "btn", aria: { label: "Move back to Considering"} do %>
<%= form.radio_button :engagement, "doing", checked: @card.doing?, class: "for-screen-reader", data: { action: "change->form#submit" } %>
<span>Doing</span>
<% end %>
<% end %>
</div>
</div>
<% end %>
app/views/cards/display/_mini.html.erb
-24
View File
@@ -1,24 +0,0 @@
<%= tag.div class: ["card card--mini border flex flex-column gap position-relative txt-align-start full-width border-radius fill-white", { "card--drafted": card.drafted? }],
style: "--card-color: #{ card.color }; view-transition-name: #{ dom_id(card, :ticket) };" do %>
<header class="card__header flex align-center gap min-width">
<span class="card__collection txt-uppercase overflow-ellipsis txt-reversed">
<%= card.collection.name %>
</span>
<div class="overflow-ellipsis"><%= render "cards/display/mini/tags", card: card %></div>
</header>
<div class="card__body flex flex-column gap-half full-width flex-item-grow min-width max-width">
<div class="flex align-center gap min-width margin-block-end-half">
<h3 class="card__title overflow-ellipsis">
<%= card.title %>
</h3>
</div>
<%= render "cards/display/mini/meta", card: card %>
</div>
<%= link_to collection_card_path(card.collection, card), class: "card__link" do %>
<span class="for-screen-reader"><%= card.title %></span>
<% end %>
<% end %>
app/views/cards/display/_perma.html.erb
+14 -16
View File
@@ -1,5 +1,5 @@
<% cache card do %>
<%= card_article_tag card, class: "card shadow border flex flex-column position-relative txt-align-start border-radius" do %>
<%= card_article_tag card, class: "card" do %>
<header class="card__header flex align-center gap min-width">
<%= link_to card.collection.name, cards_path(collection_ids: [card.collection]),
class: "card__collection txt-uppercase overflow-ellipsis txt-reversed" %>
@@ -8,22 +8,20 @@
</header>
<div class="card__body flex gap full-width flex-item-grow">
<div class="card__body-header">
<h1 class="card__title">
<% if card.published? %>
<%= turbo_frame_tag card, :edit do %>
<%= link_to card.title, edit_collection_card_path(card.collection, card), class: "card__title-link overflow-line-clamp" %>
<% end %>
<% else %>
<%= form_with model: card, url: collection_card_path(card.collection, card), id: "card_form", data: { controller: "auto-save" } do |form| %>
<%= form.text_area :title, placeholder: "Name it…",
class: "input input--textarea full-width borderless txt-align-start #{ "fill-highlight" if card.creating? }",
autofocus: card.title.blank?,
data: { action: "auto-save#change blur->auto-save#submit keydown.enter->auto-save#submit:prevent keydown.ctrl+enter->auto-save#submit:prevent" } %>
<% end %>
<h1 class="card__title">
<% if card.published? %>
<%= turbo_frame_tag card, :edit do %>
<%= link_to card.title, edit_collection_card_path(card.collection, card), class: "card__title-link overflow-line-clamp" %>
<% end %>
</h1>
</div>
<% else %>
<%= form_with model: card, url: collection_card_path(card.collection, card), id: "card_form", data: { controller: "auto-save" } do |form| %>
<%= form.text_area :title, placeholder: "Name it…",
class: "input input--textarea full-width borderless txt-align-start #{ "fill-highlight" if card.creating? }",
autofocus: card.title.blank?,
data: { action: "auto-save#change blur->auto-save#submit keydown.enter->auto-save#submit:prevent keydown.ctrl+enter->auto-save#submit:prevent" } %>
<% end %>
<% end %>
</h1>
<% if card.doing? %>
<%= turbo_frame_tag dom_id(@card, :stages) do %>
app/views/cards/display/_preview.html.erb
+4 -6
View File
@@ -1,16 +1,14 @@
<% 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_article_tag card, class: "card" do %>
<header class="card__header flex align-center gap min-width">
<span class="card__collection txt-uppercase overflow-ellipsis txt-reversed"><%= card.collection.name %></span>
<%= render "cards/display/preview/tags", card: card %>
</header>
<div class="card__body flex gap full-width flex-item-grow">
<div class="card__body-header">
<h1 class="card__title">
<span class="card__title-link overflow-line-clamp"><%= card.title %></span>
</h1>
</div>
<h1 class="card__title">
<span class="card__title-link overflow-line-clamp"><%= card.title %></span>
</h1>
<%= link_to collection_card_path(card.collection, card), class: "card__link" do %>
<span class="for-screen-reader"><%= card.title %></span>
app/views/cards/display/common/_background.html.erb
+1 -1
View File
@@ -3,7 +3,7 @@
</div>
<% if card.closed? %>
<div class="card__closed flex flex-column">
<div class="card__closed">
<span class="card__closed-title txt-uppercase"><%= card.closure.reason %></span>
<strong><%= card.closed_at.strftime("%b %d, %Y") %></strong>
<span>by <span class="card__closed-by"><%= card.closed_by.name %></span></span>
app/views/cards/display/common/_meta.html.erb
+10 -20
View File
@@ -1,25 +1,14 @@
<div class="card__meta flex align-center txt-tight-lines txt-uppercase max-width min-width" id="<%= dom_id(card, :meta) %>">
<div class="card__meta" id="<%= dom_id(card, :meta) %>">
<%= avatar_image_tag card.creator, class: "avatar margin-inline-end" %>
<div class="flex flex-column gap txt-align-start">
<span class="pad-inline overflow-ellipsis">Added
<%= local_datetime_tag(card.created_at, style: :daysago) %>
<div class="card__meta-grid">
<span class="card__meta-item card__meta-item--added overflow-ellipsis">
Added <%= local_datetime_tag(card.created_at, style: :daysago) %>
<% if card.drafted? %>
<strong>(Draft)</strong>
<% end %>
</span>
<hr class="full-width separator--horizontal unpad margin-none">
<span class="pad-inline overflow-ellipsis">
Reported by <strong><%= familiar_name_for(card.creator) %></strong>
</span>
</div>
<hr class="separator margin-none unpad">
<div class="flex flex-column gap txt-align-start overflow-ellipsis">
<span class="pad-inline overflow-ellipsis">
<span class="card__meta-item card__meta-item--updated overflow-ellipsis">
<% if card.creating? %>
&nbsp;
<% else %>
@@ -27,10 +16,10 @@
<%= local_datetime_tag(card.updated_at, style: :daysago) %>
<% end %>
</span>
<hr class="full-width separator--horizontal unpad margin-none">
<span class="pad-inline overflow-ellipsis">
<span class="card__meta-item card__meta-item--reported overflow-ellipsis">
Reported by <strong><%= familiar_name_for(card.creator) %></strong>
</span>
<span class="card__meta-item card__meta-item--assigned overflow-ellipsis">
Assigned to <%= card.assignees.any? ? card.assignees.map { |assignee| "<strong>#{familiar_name_for(assignee)}</strong>" }.to_sentence.html_safe : "no one" %>
</span>
</div>
@@ -39,3 +28,4 @@
<%= yield %>
</div>
</div>
app/views/cards/display/perma/_tags.html.erb
+1 -1
View File
@@ -1,4 +1,4 @@
<div id="<%= dom_id(card, :tags) %>" class="card__tags flex align-center flex-item-grow min-width">
<div id="<%= dom_id(card, :tags) %>" class="card__tags flex-item-grow min-width">
<div class="overflow-ellipsis">
<% if card.tags.any? || card.creating? %>
<span># </span>
app/views/cards/display/preview/_stages.html.erb
+2 -2
View File
@@ -1,9 +1,9 @@
<% workflow = card.collection.workflow %>
<% if workflow %>
<div class="card__stages flex flex-column max-width min-width pad-block">
<div class="card__stages">
<% workflow.stages.each do |stage| %>
<%= tag.span stage.name, class: ["overflow-ellipsis btn full-width justify-start workflow-stage txt-uppercase", { "workflow-stage--current": stage == card.stage }] %>
<%= tag.span stage.name, class: ["overflow-ellipsis btn justify-start workflow-stage txt-uppercase workflow-stage", { "workflow-stage--current": stage == card.stage }] %>
<% end %>
</div>
<% end %>
app/views/cards/display/preview/_tags.html.erb
+1 -1
View File
@@ -1,4 +1,4 @@
<div class="card__tags flex align-center flex-item-grow min-width">
<div class="card__tags flex-item-grow min-width">
<div class="overflow-ellipsis">
<% if card.tags.any? %>
<span># </span>
app/views/cards/index.html.erb
+1 -1
View File
@@ -6,7 +6,7 @@
<%= render "cards/index/header", filter: @filter %>
<% end %>
<div class="cards--columns">
<div class="card-columns">
<%= render "cards/index/engagement/considering", **@considering.to_h %>
<%= render "cards/index/engagement/doing", **@doing.to_h %>
</div>
app/views/cards/index/_header.html.erb
+1 -1
View File
@@ -5,7 +5,7 @@
<div class="btn btn--placeholder flex-item-justify-start"></div>
<header class="flex flex-inline flex-column center flex-shrink">
<div class="card-collection__filter flex-inline center position-relative" data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
<div class="card-filter--collection flex-inline center position-relative" data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
<button class="txt-align-center input input--select borderless center txt-medium" data-action="click->dialog#open:stop">
<h1 class="txt-large overflow-ellipsis margin-none">
<%= filter_title filter %>
app/views/cards/index/_workflow_filter.html.erb
+2 -2
View File
@@ -1,5 +1,5 @@
<div class="card-column__filter flex-inline center position-relative" data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
<button class="txt-align-center input input--select borderless center txt-uppercase txt-medium margin-none-block-start margin-block-end" data-action="click->dialog#open:stop">
<div class="card-filter--column flex-inline center position-relative" data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
<button class="cards__heading input input--select borderless" data-action="click->dialog#open:stop">
<strong class="overflow-ellipsis">
<% if filter.stages.any? %>
<%= filter.stages.map(&:name).to_sentence %>
app/views/cards/index/engagement/_closed.html.erb
+10 -12
View File
@@ -1,17 +1,15 @@
<div class="margin-block">
<h2 class="txt-align-center flex-inline center txt-uppercase txt-medium margin-none">
<section id="closed-cards" class="cards cards--closed">
<h2 class="cards__heading">
Recently closed
</h2>
<section id="closed-cards" class="cards--grid">
<% if page.used? %>
<%= render partial: "cards/display/preview", collection: page.records, as: :card, cached: true %>
<% if page.used? %>
<%= render partial: "cards/display/preview", collection: page.records, as: :card, cached: true %>
<% unless page.last? %>
<%= cards_next_page_link "closed-cards", page: page, filter: filter, fetch_on_visible: true %>
<% end %>
<% else %>
<p class="txt-medium translucent">Nothing here</p>
<% unless page.last? %>
<%= cards_next_page_link "closed-cards", page: page, filter: filter, fetch_on_visible: true %>
<% end %>
</section>
</div>
<% else %>
<p class="txt-medium translucent">Nothing here</p>
<% end %>
</section>
app/views/cards/index/engagement/_considering.html.erb
+3 -3
View File
@@ -1,10 +1,10 @@
<section id="considering-cards" class="cards" style="align-items: center; border-inline-end: 1px solid var(--color-subtle);">
<h2 class="txt-align-center flex-inline center txt-uppercase txt-medium margin-none-block-start margin-block-end">
<section id="considering-cards" class="cards cards--considering">
<h2 class="cards__heading">
Considering
</h2>
<% if page.used? %>
<%= render partial: "cards/display/mini", collection: page.records, as: :card, cached: true %>
<%= render partial: "cards/display/preview", collection: page.records, as: :card, cached: true %>
<% unless page.last? %>
<%= cards_next_page_link "considering-cards", page: page, filter: filter %>
app/views/cards/index/engagement/_doing.html.erb
+2 -2
View File
@@ -1,8 +1,8 @@
<section id="doing-cards" class="cards gap position-relative" style="align-items: center; view-transition-name: cards-container;" data-controller="card-size" data-action="turbo:morph@window->card-size#resize">
<section id="doing-cards" class="cards cards--doing" style="view-transition-name: cards-container;" data-controller="card-size" data-action="turbo:morph@window->card-size#resize">
<% if workflow = filter.single_workflow %>
<%= render "cards/index/workflow_filter", workflow: workflow, filter: filter %>
<% else %>
<h2 class="txt-align-center flex-inline center txt-uppercase txt-medium margin-none-block-start margin-block-end">
<h2 class="cards__heading">
Doing
</h2>
<% end %>
app/views/cards/show.html.erb
+14 -35
View File
@@ -23,39 +23,16 @@
<nav class="align-start max-width">
<%= link_to_home %>
<%= link_to_back fallback_path: cards_path(collection_id: @card.collection) %>
<% if @card.published? && !@card.closed? %>
<div class="card__actions-container card__actions-container--top center border-radius" id="<%= dom_id(@card, :card_engagement_toggle) %>" style="--card-color: <%= @card.color %>;">
<div class="btn__group flex full-width txt-uppercase">
<%= form_with url: card_engagement_path(@card), method: :delete, data: { controller: "form" } do |form| %>
<%= form.label :engagement, value: "considering", class: "btn", aria: { label: "Move to Doing"} do %>
<%= form.radio_button :engagement, "considering", checked: @card.considering?, class: "for-screen-reader", data: { action: "change->form#submit" } %>
<span>Considering</span>
<% end %>
<% end %>
<%= form_with url: card_engagement_path(@card), method: :post, data: { controller: "form" } do |form| %>
<%= form.label :engagement, value: "doing", class: "btn", aria: { label: "Move back to Considering"} do %>
<%= form.radio_button :engagement, "doing", checked: @card.doing?, class: "for-screen-reader", data: { action: "change->form#submit" } %>
<span>Doing</span>
<% end %>
<% end %>
</div>
</div>
<% end %>
<div class="btn btn--placeholder flex-item-justify-end"></div>
<div class="btn btn--placeholder"></div>
</nav>
<% end %>
<div data-controller="beacon" data-beacon-url-value="<%= card_reading_url(@card) %>">
<div id="<%= dom_id(@card, :card_container) %>" class="card__container position-relative <%= "card__container--pointing" unless @card.published? %>" style="--card-color: <%= @card.color %>;">
<%= render "cards/display/perma", card: @card %>
<section id="<%= dom_id(@card, :card_container) %>" class="card-perma <%= "card-perma--pointing" unless @card.published? %>" style="--card-color: <%= @card.color %>;">
<div class="card__actions flex flex-column gap-half">
<%= render "cards/doing_toggle", card: @card %>
<aside class="card-perma__actions card-perma__actions--left" role="toolbar">
<%= render "cards/golden_toggle", card: @card if @card.doing? %>
<%= render "cards/image", card: @card %>
<%= button_to collection_card_path(@card.collection, @card),
method: :delete,
@@ -64,22 +41,24 @@
<%= icon_tag "trash" %>
<span class="for-screen-reader">Delete</span>
<% end %>
</div>
</aside>
<div class="card-perma__bg">
<%= render "cards/display/perma", card: @card %>
</div>
<% if @card.published? %>
<div class="card__actions card__actions--right flex flex-column gap-half">
<aside class="card-perma__actions card-perma__actions--right" role="toolbar">
<%= turbo_frame_tag dom_id(@card, :watch), src: card_watch_path(@card), refresh: :morph %>
<%= turbo_frame_tag dom_id(@card, :pin), src: card_pin_path(@card), refresh: :morph %>
</div>
</aside>
<% end %>
</div>
<% unless @card.drafted? || @card.creating? %>
<div class="card__actions-wrapper">
<% unless @card.drafted? || @card.creating? %>
<%= render "cards/closure_toggle", card: @card %>
</div>
<% end %>
<% end %>
</section>
<% if @card.published? %>
<%= render "cards/messages", card: @card %>
app/views/cards/stagings/_stages.html.erb
+1 -1
View File
@@ -1,7 +1,7 @@
<% workflow = card.collection.workflow %>
<% if workflow %>
<div id="<%= dom_id(card, "stages") %>" class="card__stages flex flex-column max-width min-width pad-block">
<div id="<%= dom_id(card, "stages") %>" class="card__stages">
<% workflow.stages.each do |stage| %>
<%= button_to_set_stage card, stage %>
<% end %>
app/views/my/pins/_pin.html.erb
-36
View File
@@ -1,36 +0,0 @@
<% cache pin do %>
<%= tag.div id: dom_id(pin), class: "pin tray__item txt-normal" do %>
<%= link_to collection_card_path(pin.card.collection, pin.card),
class: "pin__content shadow fill-white flex align-start txt-align-start gap flex-item-grow max-width border border-radius txt-ink overflow-clip",
data: { action: "click->dialog#close", turbo_frame: "_top" },
style: "--card-color: #{ pin.card.color };" do %>
<div class="flex flex-column min-width flex-item-grow">
<div class="pin__header flex gap-half align-center txt-uppercase">
<div class="pin__collection flex-inline flex-item-justify-start txt-reversed min-width txt-xx-small">
<span class="txt-xx-small overflow-ellipsis"><%= pin.card.collection.name %></span>
</div>
<% if pin.card&.stage %>
<strong class="pin__stage border txt-tight-lines flex-item-justify-end txt-xx-small">
<%= pin.card&.stage&.name %>
</strong>
<% end %>
</div>
<strong class="pin__title overflow-ellipsis txt-small"><%= pin.card.title %></strong>
<div class="tray__item-meta flex align-end gap-half txt-tight-lines">
<div class="translucent">
<span>Updated</span> <%= local_datetime_tag(pin.card.updated_at, style: :ago) -%>
</div>
<%= " · " if pin.card.tags.any? %>
<div class="overflow-ellipsis pin__tags txt-uppercase">
<%= "#" if pin.card.tags.any? %>
<%= pin.card.tags.map(&:title).join(", ") %>
</div>
</div>
</div>
<% end %>
<% end %>
<% end %>
app/views/my/pins/index.html.erb
+5 -1
View File
@@ -1,3 +1,7 @@
<%= turbo_frame_tag "pins" do %>
<%= render collection: @pins, partial: "my/pins/pin" %>
<% @pins.map(&:card).each do |card| %>
<div class="pin tray__item">
<%= render partial: "cards/display/preview", locals: { card: card } %>
</div>
<% end %>
<% end %>