From 649b4801bb44db1d77f97bd7cc14aa49fc0be940 Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Thu, 10 Apr 2025 11:45:50 -0500 Subject: [PATCH 01/21] Use preview instead of mini cards --- app/views/cards/index/engagement/_considering.html.erb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/views/cards/index/engagement/_considering.html.erb b/app/views/cards/index/engagement/_considering.html.erb index 58f02a7f3..97feb39aa 100644 --- a/app/views/cards/index/engagement/_considering.html.erb +++ b/app/views/cards/index/engagement/_considering.html.erb @@ -4,7 +4,7 @@ <% if cards.any? %> - <%= render partial: "cards/display/mini", collection: cards, as: :card, cached: true %> + <%= render partial: "cards/display/preview", collection: cards, as: :card, cached: true %> <% else %>

Nothing here

<% end %> From bcc2952b1a3501825f042efd0d65ca42b23fd09a Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Thu, 10 Apr 2025 12:00:33 -0500 Subject: [PATCH 02/21] Stub out variants --- app/assets/stylesheets/_global.css | 18 ++++++++ app/assets/stylesheets/cards.css | 61 +++++++++++++++++++------ app/assets/stylesheets/utilities.css | 20 +------- app/views/cards/display/_perma.html.erb | 4 +- app/views/cards/index.html.erb | 2 +- 5 files changed, 67 insertions(+), 38 deletions(-) diff --git a/app/assets/stylesheets/_global.css b/app/assets/stylesheets/_global.css index 8dc17b990..2628615dc 100644 --- a/app/assets/stylesheets/_global.css +++ b/app/assets/stylesheets/_global.css @@ -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; @@ -73,5 +84,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); } } diff --git a/app/assets/stylesheets/cards.css b/app/assets/stylesheets/cards.css index d16a96e56..6075306f2 100644 --- a/app/assets/stylesheets/cards.css +++ b/app/assets/stylesheets/cards.css @@ -1,12 +1,35 @@ +/* TODO + +• + +*/ + + @layer components { + /* Card containers + /* -------------------------------------------------------------------------- */ + + .card-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 { + z-index: unset; + } + } + .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; + padding: var(--block-space-half) 0; :where(.card) { --block-space: 1em; @@ -58,29 +81,25 @@ } } - .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 items + /* -------------------------------------------------------------------------- */ .card { --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: var(--border); + border-radius: 0.5em; + box-shadow: var(--shadow); color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink)); + display: flex; + flex-direction: column; max-inline-size: 75ch; + position: relative; + text-align: start; z-index: 1; .card__container & { @@ -97,6 +116,18 @@ } } + /* Variants */ + .card--large { + --card-aspect-ratio: 2 / 0.95; + } + + .card--medium {} + .card--small {} + .card--mini {} + + /* Actions around cards + /* -------------------------------------------------------------------------- */ + .card__actions { position: absolute; inset: var(--actions-block-inset) auto auto calc(var(--actions-inline-inset) * -1); diff --git a/app/assets/stylesheets/utilities.css b/app/assets/stylesheets/utilities.css index 614489b3f..6ec13a630 100644 --- a/app/assets/stylesheets/utilities.css +++ b/app/assets/stylesheets/utilities.css @@ -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) { diff --git a/app/views/cards/display/_perma.html.erb b/app/views/cards/display/_perma.html.erb index 4b205e33b..540956ac1 100644 --- a/app/views/cards/display/_perma.html.erb +++ b/app/views/cards/display/_perma.html.erb @@ -1,7 +1,5 @@ <% cache card do %> -
+
<%= link_to card.collection.name, cards_path(collection_ids: [card.collection]), class: "card__collection txt-uppercase overflow-ellipsis txt-reversed" %> diff --git a/app/views/cards/index.html.erb b/app/views/cards/index.html.erb index b8c80ab1d..f9208a546 100644 --- a/app/views/cards/index.html.erb +++ b/app/views/cards/index.html.erb @@ -6,7 +6,7 @@ <%= render "cards/index/header", filter: @filter %> <% end %> -
+
<%= render "cards/index/engagement/considering", cards: @considering_cards %> <%= render "cards/index/engagement/doing", cards: @doing_cards, filter: @filter %>
From e062a80111775c9379243ba6bafac4790608096e Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Thu, 10 Apr 2025 12:34:44 -0500 Subject: [PATCH 03/21] Refactor container BEM names --- app/assets/stylesheets/cards.css | 700 +++++++++++------------ app/assets/stylesheets/inputs.css | 31 + app/views/cards/_closure_toggle.html.erb | 6 +- app/views/cards/show.html.erb | 23 +- 4 files changed, 388 insertions(+), 372 deletions(-) diff --git a/app/assets/stylesheets/cards.css b/app/assets/stylesheets/cards.css index 6075306f2..bf689e22c 100644 --- a/app/assets/stylesheets/cards.css +++ b/app/assets/stylesheets/cards.css @@ -6,6 +6,204 @@ @layer components { + /* Cards + /* -------------------------------------------------------------------------- */ + + .card { + --border-color: transparent; + --border-radius: 0.2em; + --border-size: 0; + + aspect-ratio: var(--card-aspect-ratio, auto); + background-color: color-mix(in srgb, var(--card-color) 4%, var(--color-bg)); + border: var(--border); + border-radius: 0.5em; + box-shadow: var(--shadow); + color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink)); + display: flex; + flex-direction: column; + max-inline-size: 75ch; + position: relative; + text-align: start; + z-index: 1; + + .local-time-value { + font-weight: bold; + } + + @media (prefers-color-scheme: dark) { + --border-color: var(--color-subtle-dark); + } + } + + .card__background { + inset: 0; + position: absolute; + z-index: -1; + + img { + block-size: 100%; + inline-size: 100%; + object-fit: cover; + object-position: center; + opacity: 0.2; + transition: opacity 0.2s ease-in-out; + } + + @media (hover: hover) { + .card:hover & { + img:not([src=""]) { + opacity: 1; + } + } + } + } + + .card__link { + --hover-size: 0; + + content: ""; + inset: 0; + position: absolute; + z-index: -1; + + .cards &, + .cards--grid & { + z-index: 1; + } + } + + .card__header { + padding-inline-end: var(--inline-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__tags { + color: var(--card-color); + } + + .card__tag { + color: var(--card-color); + font-weight: 700; + } + + + .card__body { + padding-inline: var(--inline-space-double); + } + + .card__body-header { + flex: 2 1 75%; + padding-block: var(--block-space); + } + + .card__title { + --hover-size: 0; + --input-border-radius: 0; + + 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; + } + } + } + + .card__title-link { + --lines: 3; + + color: inherit; + } + } + + .card__stages { + flex: 1 1 25%; + } + + .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__footer { + margin-block-end: var(--block-space); + } + + .card__meta { + --border-color: var(--card-color); + --border-size: 1px; + --row-gap: 0.25em; + + margin-inline-start: var(--inline-space-double); + + strong { + font-weight: 900; + } + + .separator { + height: calc(2lh + 2ex); + } + } + + .card__closed { + align-items: center; + aspect-ratio: 7/4; + border: var(--block-space-half) solid var(--card-color); + position: absolute; + 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); + transform: rotate(-10deg); + z-index: -1; + } + + .card__closed-by { + border-block-end: 1px dashed currentcolor; + } + + .card__closed-title { + color: var(--color-ink-reversed); + font-size: var(--text-rel-large); + font-weight: 900; + text-shadow: + -2px -2px 0 var(--card-color), + 2px -2px 0 var(--card-color), + -2px 2px 0 var(--card-color), + 2px 2px 0 var(--card-color); + } + + /* Card variants + /* -------------------------------------------------------------------------- */ + + .card--large { + --card-aspect-ratio: 2 / 0.95; + } + + .card--medium {} + .card--small {} + .card--mini {} + /* Card containers /* -------------------------------------------------------------------------- */ @@ -81,245 +279,12 @@ } } - /* Card items - /* -------------------------------------------------------------------------- */ - - .card { - --border-color: transparent; - --border-radius: 0.2em; - --border-size: 0; - - aspect-ratio: var(--card-aspect-ratio, auto); - background-color: color-mix(in srgb, var(--card-color) 4%, var(--color-bg)); - border: var(--border); - border-radius: 0.5em; - box-shadow: var(--shadow); - color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink)); - display: flex; - flex-direction: column; - max-inline-size: 75ch; - 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; - } - - @media (prefers-color-scheme: dark) { - --border-color: var(--color-subtle-dark); - --border-size: 1px; - } - } - - /* Variants */ - .card--large { - --card-aspect-ratio: 2 / 0.95; - } - - .card--medium {} - .card--small {} - .card--mini {} - - /* Actions around cards - /* -------------------------------------------------------------------------- */ - - .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: 1em; - - 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.66) calc(var(--inline-space) * 1.5); - position: relative; - z-index: 0; - - &: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__closure-message { - color: var(--card-color); - } - } - - .card__actions-container--top { - min-inline-size: 36ch; - margin: calc(var(--block-space) * 1) auto calc(var(--block-space) * -0.33); - padding: 0.5em 0.75em; - - #header:has(&) { - position: relative; - z-index: 1; - } - - .switch__input:checked + .switch__btn { - background-color: var(--card-color) !important; - } - - strong { - flex: 1 0 42%; - text-align: end; - - &:last-of-type { - text-align: start; - } - } - } - .cards .card__assignees:not(:has(.avatar)) { .txt-uppercase { display: none; } } - .card__background { - inset: 0; - position: absolute; - z-index: -1; - - img { - block-size: 100%; - inline-size: 100%; - object-fit: cover; - object-position: center; - opacity: 0.2; - transition: opacity 0.2s ease-in-out; - } - - @media (hover: hover) { - .card:hover & { - img:not([src=""]) { - opacity: 1; - } - } - } - } - - .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% -4em; - margin-inline-start: -1em; - position: absolute; - transform: translateX(-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); - - &:has(.card__star-input:checked) { - .card { - outline: 4px solid var(--color-negative); - } - } - } - - .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: 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; - } - } - - .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); @@ -394,8 +359,26 @@ } } - .card__header { - padding-inline-end: var(--inline-space); + .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: 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; + } } .card__hide-on-index { @@ -405,85 +388,146 @@ } } - .card__link { - --hover-size: 0; + /* Card container for perma + /* -------------------------------------------------------------------------- */ - content: ""; - inset: 0; + /* On the perma */ + .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); + position: relative; + + &:has(.card-container__star-input:checked) { + .card { + outline: 4px solid var(--color-negative); + } + } + + .card & { + inline-size: calc(100dvw - var(--actions-inline-inset) * 2 - var(--btn-size) * 2); + } + } + + .card-container__actions { + display: grid; + gap: var(--block-space-half); + inset-block-start: var(--actions-block-inset); position: absolute; - z-index: -1; + z-index: 0; - .cards &, - .cards--grid & { + &:has([open]) { z-index: 1; } } - .card__meta { - --border-color: var(--card-color); - --border-size: 1px; - --row-gap: 0.25em; + .card-container__actions--left { + inset-inline-start: calc(-1 * var(--actions-inline-inset)); + } - margin-inline-start: var(--inline-space-double); + .card-container__actions--right { + inset-inline-end: calc(-1 * var(--actions-inline-inset)); + } + + .card-container__cutout { + --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; + gap: var(--inline-space); + justify-content: center; + margin-block: calc(var(--block-space) * -1.66) calc(var(--block-space) * 1.66); + padding: 0.5ch 1.5ch; + position: relative; + text-align: center; + z-index: 0; + + &: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-container__cutout--top { + min-inline-size: 36ch; + margin: calc(var(--block-space) * 1) auto calc(var(--block-space) * -0.33); + padding: 0.5em 0.75em; + + #header:has(&) { + position: relative; + z-index: 1; + } + + .switch__input:checked + .switch__btn { + background-color: var(--card-color) !important; + } strong { - font-weight: 900; - } + flex: 1 0 42%; + text-align: end; - .separator { - height: calc(2lh + 2ex); - } - } - - .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__stages { - flex: 1 1 25%; - } - - .card__tag { - color: var(--card-color); - font-weight: 700; - } - - .card__tags { - color: var(--card-color); - } - - .card__title { - --hover-size: 0; - --input-border-radius: 0; - - 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; - } + &:last-of-type { + text-align: start; } } + } - .card__title-link { - --lines: 3; + .card-container__cutout--bottom { + padding-inline-start: 0.5ch; + } - color: inherit; + .card-container__closure-message { + color: var(--card-color); + } + + /* Filters + /* -------------------------------------------------------------------------- */ + + .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% -4em; + margin-inline-start: -1em; + position: absolute; + transform: translateX(-50%); + + #header:has(&) { + position: relative; + z-index: 1; } } @@ -497,62 +541,4 @@ inset: 1em 1em auto auto; } } - - .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; - } - } - - .card__closed { - align-items: center; - aspect-ratio: 7/4; - border: var(--block-space-half) solid var(--card-color); - position: absolute; - 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); - transform: rotate(-10deg); - z-index: -1; - } - - .card__closed-by { - border-block-end: 1px dashed currentcolor; - } - - .card__closed-title { - color: var(--color-ink-reversed); - font-size: var(--text-rel-large); - font-weight: 900; - text-shadow: - -2px -2px 0 var(--card-color), - 2px -2px 0 var(--card-color), - -2px 2px 0 var(--card-color), - 2px 2px 0 var(--card-color); - } } diff --git a/app/assets/stylesheets/inputs.css b/app/assets/stylesheets/inputs.css index 0edd2a841..5e3ba772c 100644 --- a/app/assets/stylesheets/inputs.css +++ b/app/assets/stylesheets/inputs.css @@ -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; + } + } } diff --git a/app/views/cards/_closure_toggle.html.erb b/app/views/cards/_closure_toggle.html.erb index 6ad45c388..ff527e4bd 100644 --- a/app/views/cards/_closure_toggle.html.erb +++ b/app/views/cards/_closure_toggle.html.erb @@ -1,6 +1,6 @@ -
+
<% if card.closed? %> - Completed by <%= card.closed_by.name %> on <%= local_datetime_tag(card.closed_at, style: :shortdate) %>. + Completed by <%= card.closed_by.name %> on <%= local_datetime_tag(card.closed_at, style: :shortdate) %>. <%= button_to card_closure_path(card), method: :delete, class: "btn btn--plain borderless fill-transparent" do %> Un-do <% end %> @@ -19,7 +19,7 @@
- + <% if card.doing? %> Returns to Considering if no activity <%= local_datetime_tag(card.auto_reconsider_at, style: :indays) -%>. <% else %> diff --git a/app/views/cards/show.html.erb b/app/views/cards/show.html.erb index 2bc13a4a3..44cb49554 100644 --- a/app/views/cards/show.html.erb +++ b/app/views/cards/show.html.erb @@ -23,7 +23,7 @@ <%= link_to_home %> <%= link_to_back fallback_path: cards_path(collection_id: @card.collection) %> -
+
Considering <% if @card.doing? %> <%= form_with url: card_engagement_path(@card), method: :delete, data: { controller: "form" }, class: "flex" do %> @@ -51,16 +51,16 @@ <% end %>
-
" style="--card-color: <%= @card.color %>;"> +
" style="--card-color: <%= @card.color %>;"> + <%= render "cards/display/perma", card: @card %> -
- - <%= render "cards/color", card: @card %> <%= render "cards/image", card: @card %> <%= button_to collection_card_path(@card.collection, @card), @@ -70,19 +70,18 @@ <%= icon_tag "trash" %> Delete <% end %> -
- + <% if @card.published? %> -
+
+ <% end %> -
+ <% unless @card.drafted? || @card.creating? %> -
+
<%= render "cards/closure_toggle", card: @card %>
<% end %> From f319c22f62e72653ca96a653c70502cbed15aca1 Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Thu, 10 Apr 2025 13:02:38 -0500 Subject: [PATCH 04/21] Use grid for card-container --- app/assets/stylesheets/cards.css | 77 +++++++++++------------ app/views/cards/display/_preview.html.erb | 2 +- app/views/cards/show.html.erb | 10 +-- 3 files changed, 42 insertions(+), 47 deletions(-) diff --git a/app/assets/stylesheets/cards.css b/app/assets/stylesheets/cards.css index bf689e22c..19a714805 100644 --- a/app/assets/stylesheets/cards.css +++ b/app/assets/stylesheets/cards.css @@ -22,6 +22,7 @@ color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink)); display: flex; flex-direction: column; + inline-size: 100%; max-inline-size: 75ch; position: relative; text-align: start; @@ -204,7 +205,7 @@ .card--small {} .card--mini {} - /* Card containers + /* Card columns (I think?) /* -------------------------------------------------------------------------- */ .card-columns { @@ -359,6 +360,37 @@ } } + .card__hide-on-index { + .cards &, + .cards--grid & { + display: none; + } + } + + /* Card container for perma + /* -------------------------------------------------------------------------- */ + + .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)); + + align-items: start; + column-gap: var(--inline-space); + display: grid; + grid-template-columns: auto minmax(0, 960px) auto; + inline-size: fit-content; + max-inline-size: 100%; + margin-inline: auto; + + &:has(.card-container__star-input:checked) { + .card { + outline: 4px solid var(--color-negative); + } + } + } + .card-container--pointing { --arrow-size: 20em; --aspect-ratio: 7; @@ -381,61 +413,22 @@ } } - .card__hide-on-index { - .cards &, - .cards--grid & { - display: none; - } - } - - /* Card container for perma - /* -------------------------------------------------------------------------- */ - - /* On the perma */ - .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)); - + .card-container__bg { 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); - position: relative; - - &:has(.card-container__star-input:checked) { - .card { - outline: 4px solid var(--color-negative); - } - } - - .card & { - inline-size: calc(100dvw - var(--actions-inline-inset) * 2 - var(--btn-size) * 2); - } } .card-container__actions { display: grid; gap: var(--block-space-half); - inset-block-start: var(--actions-block-inset); - position: absolute; - z-index: 0; &:has([open]) { + position: relative; z-index: 1; } } - .card-container__actions--left { - inset-inline-start: calc(-1 * var(--actions-inline-inset)); - } - - .card-container__actions--right { - inset-inline-end: calc(-1 * var(--actions-inline-inset)); - } - .card-container__cutout { --border-radius: 1em; diff --git a/app/views/cards/display/_preview.html.erb b/app/views/cards/display/_preview.html.erb index 035c72e58..7da30ae8c 100644 --- a/app/views/cards/display/_preview.html.erb +++ b/app/views/cards/display/_preview.html.erb @@ -1,5 +1,5 @@ <% cache [ card ] do %> -
diff --git a/app/views/cards/show.html.erb b/app/views/cards/show.html.erb index 44cb49554..6a4e50bec 100644 --- a/app/views/cards/show.html.erb +++ b/app/views/cards/show.html.erb @@ -53,9 +53,7 @@
" style="--card-color: <%= @card.color %>;"> - <%= render "cards/display/perma", card: @card %> - -
- <% unless @card.drafted? || @card.creating? %> - <%= render "cards/closure_toggle", card: @card %> - <% end %> <% if @card.published? %> <%= render "cards/messages", card: @card %> From 7ef49ccffa121f0e0f683ceb9254acc0d5961807 Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Thu, 10 Apr 2025 16:16:36 -0500 Subject: [PATCH 10/21] Polish up columns --- app/assets/stylesheets/card-columns.css | 35 ++++++++----------- app/assets/stylesheets/cards.css | 8 +++-- app/views/cards/display/common/_meta.html.erb | 6 ++-- .../cards/index/_workflow_filter.html.erb | 2 +- .../cards/index/engagement/_closed.html.erb | 22 ++++++------ .../index/engagement/_considering.html.erb | 3 +- .../cards/index/engagement/_doing.html.erb | 2 +- 7 files changed, 36 insertions(+), 42 deletions(-) diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css index 9204019f7..e01aec12c 100644 --- a/app/assets/stylesheets/card-columns.css +++ b/app/assets/stylesheets/card-columns.css @@ -8,15 +8,14 @@ grid-template-columns: repeat(2, 50%); margin: auto; max-inline-size: 100ch; - padding-block: var(--block-space-half); .cards:first-child { border-inline-end: var(--border); - padding-inline-end: var(--cards-padding); + padding-inline-end: var(--cards-gap); } .cards:last-child { - padding-inline-start: var(--cards-padding); + padding-inline-start: var(--cards-gap); } } @@ -25,7 +24,7 @@ .cards { --cards-padding: 2cqi; - --cards-gap: var(--block-space); + --cards-gap: 2ch; align-items: center; container-type: inline-size; @@ -33,14 +32,14 @@ flex-direction: column; gap: var(--cards-gap); justify-content: start; - padding-block: var(--cards-padding); + padding-block: var(--cards-gap); - .card { + :where(.card) { --block-space: 1em; --block-space-half: 0.5em; --text-xx-large: 2em; - font-size: 1.8cqi; + font-size: 2.25cqi; } .card__title { @@ -52,12 +51,19 @@ } } + .cards__heading { + display: inline-flex; + font-size: var(--text-medium); + inline-size: 100%; + justify-content: center; + text-transform: uppercase; + } + /* Considering /* ------------------------------------------------------------------------ */ .cards--considering { .card { - --card-color: var(--color-ink) !important; --text-xx-large: 1.6em; --text-small: 1.1em; @@ -75,19 +81,10 @@ } } - .card__collection, .card__background { display: none; } - .card__header { - margin: 0; - } - - .card__body { - padding-block-start: 0; - } - .card__title { margin-block-start: 0.1em; min-block-size: 0; @@ -118,10 +115,7 @@ max-inline-size: 120ch; .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; @@ -129,7 +123,6 @@ inline-size: var(--card-size); } - .card__meta, .card__stages { display: none; } diff --git a/app/assets/stylesheets/cards.css b/app/assets/stylesheets/cards.css index b56b14bac..8cc1d1752 100644 --- a/app/assets/stylesheets/cards.css +++ b/app/assets/stylesheets/cards.css @@ -73,7 +73,7 @@ background-color: var(--card-color); border-radius: var(--border-radius) 0 var(--border-radius) 0; font-weight: 800; - letter-spacing: 0.5ch; + letter-spacing: 0.4ch; padding: var(--block-space-half) var(--inline-space-double); } @@ -132,7 +132,11 @@ --border-size: 1px; --row-gap: 0.25em; - margin-inline-start: var(--inline-space-double); + align-items: center; + display: flex; + max-inline-size: 100%; + min-inline-size: 0; + text-transform: uppercase; strong { font-weight: 900; diff --git a/app/views/cards/display/common/_meta.html.erb b/app/views/cards/display/common/_meta.html.erb index e90348331..a039c1c99 100644 --- a/app/views/cards/display/common/_meta.html.erb +++ b/app/views/cards/display/common/_meta.html.erb @@ -1,4 +1,4 @@ -
+
<%= avatar_image_tag card.creator, class: "avatar margin-inline-end" %>
@@ -9,12 +9,12 @@
- Reported by <%= familiar_name_for(card.creator) %> + Reported by <%= familiar_name_for(card.creator) %>
- +
<%= card.creating? ? "Created" : "Updated" %> <%= local_datetime_tag(card.updated_at, style: :daysago) %> diff --git a/app/views/cards/index/_workflow_filter.html.erb b/app/views/cards/index/_workflow_filter.html.erb index 3294010f4..3a890907d 100644 --- a/app/views/cards/index/_workflow_filter.html.erb +++ b/app/views/cards/index/_workflow_filter.html.erb @@ -1,5 +1,5 @@
-
<% if card.closed? %> -
+
<%= card.closure.reason %> <%= card.closed_at.strftime("%b %d, %Y") %> by <%= card.closed_by.name %> diff --git a/app/views/cards/display/preview/_stages.html.erb b/app/views/cards/display/preview/_stages.html.erb index d320f5711..1ab34b675 100644 --- a/app/views/cards/display/preview/_stages.html.erb +++ b/app/views/cards/display/preview/_stages.html.erb @@ -1,9 +1,9 @@ <% workflow = card.collection.workflow %> <% if workflow %> -
+
<% 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 %>
<% end %> diff --git a/app/views/cards/stagings/_stages.html.erb b/app/views/cards/stagings/_stages.html.erb index fe8f86869..71885bce9 100644 --- a/app/views/cards/stagings/_stages.html.erb +++ b/app/views/cards/stagings/_stages.html.erb @@ -1,7 +1,7 @@ <% workflow = card.collection.workflow %> <% if workflow %> -
" class="card__stages flex flex-column max-width min-width pad-block"> +
" class="card__stages"> <% workflow.stages.each do |stage| %> <%= button_to_set_stage card, stage %> <% end %> diff --git a/app/views/my/pins/index.html.erb b/app/views/my/pins/index.html.erb index d4c176587..519070aec 100644 --- a/app/views/my/pins/index.html.erb +++ b/app/views/my/pins/index.html.erb @@ -1,3 +1,7 @@ <%= turbo_frame_tag "pins" do %> - <%= render collection: @pins, partial: "my/pins/pin" %> + <% @pins.map(&:card).each do |card| %> +
+ <%= render partial: "cards/display/preview", locals: { card: card } %> +
+ <% end %> <% end %> From c9b1d6d86882dc96ab7b436d2d068154492a5c71 Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Fri, 11 Apr 2025 11:09:04 -0500 Subject: [PATCH 13/21] Style pinned cards --- app/assets/stylesheets/cards.css | 41 +++++++++++---- app/assets/stylesheets/pins.css | 52 +++++++++++++++---- app/views/cards/display/common/_meta.html.erb | 29 ++++------- app/views/cards/display/perma/_tags.html.erb | 2 +- .../cards/display/preview/_tags.html.erb | 2 +- app/views/events/_event.html.erb | 2 +- 6 files changed, 85 insertions(+), 43 deletions(-) diff --git a/app/assets/stylesheets/cards.css b/app/assets/stylesheets/cards.css index 631c1ee85..8e83d2e4e 100644 --- a/app/assets/stylesheets/cards.css +++ b/app/assets/stylesheets/cards.css @@ -23,10 +23,6 @@ --avatar-size: 2.75em; } - .local-time-value { - font-weight: bold; - } - @media (prefers-color-scheme: dark) { --border-color: var(--color-subtle-dark); } @@ -78,7 +74,9 @@ } .card__tags { + align-items: center; color: var(--card-color); + display: flex; } .card__tag { @@ -133,22 +131,45 @@ } .card__meta { - --border-color: var(--card-color); - --border-size: 1px; - --row-gap: 0.25em; + --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 { + strong, + .local-time-value { font-weight: 900; } - .separator { - height: calc(2lh + 2ex); + &: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; } } diff --git a/app/assets/stylesheets/pins.css b/app/assets/stylesheets/pins.css index dc2631242..95b0979f4 100644 --- a/app/assets/stylesheets/pins.css +++ b/app/assets/stylesheets/pins.css @@ -6,7 +6,7 @@ --z: calc(10 - var(--position)); container-type: inline-size; - font-size: 0.5cqi; + font-size: 10px; &:nth-child(7) { --position: 7; } &:nth-child(8) { --position: 8; } @@ -16,26 +16,56 @@ &:nth-child(1n + 11) { display: none; } } - .card { - --block-space: 1em; - --block-space-half: 0.5em; - --text-xx-large: 2em; - } - + .avatar, .card__tags, + .card__meta .btn, + .card__meta-item:not(.card__meta-item--updated), .workflow-stage:not(.workflow-stage--current), .card__closed { display: none; } - .workflow-stage--current { - position: absolute; - inset: 0 0 auto auto; - inline-size: fit-content; + .card { + --block-space: 1em; + --block-space-half: 0.5em; + --text-xx-large: 2em; + + box-shadow: 0 0 0 1px var(--color-bg); + } + + .card__collection { + padding-block: 0.25ch; + } + + .card__body { + padding-block-end: 0; } .card__title { + font-size: var(--text-small); + font-weight: bold; min-block-size: 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; + } } } diff --git a/app/views/cards/display/common/_meta.html.erb b/app/views/cards/display/common/_meta.html.erb index a039c1c99..50f9492cc 100644 --- a/app/views/cards/display/common/_meta.html.erb +++ b/app/views/cards/display/common/_meta.html.erb @@ -1,28 +1,18 @@
<%= avatar_image_tag card.creator, class: "avatar margin-inline-end" %> -
- Added - <%= local_datetime_tag(card.created_at, style: :daysago) %> +
+ + Added <%= local_datetime_tag(card.created_at, style: :daysago) %> - -
- - - Reported by <%= familiar_name_for(card.creator) %> - -
- -
- -
- <%= card.creating? ? "Created" : "Updated" %> + + <%= card.creating? ? "Created" : "Updated" %> <%= local_datetime_tag(card.updated_at, style: :daysago) %> - -
- - + + Reported by <%= familiar_name_for(card.creator) %> + + Assigned to <%= card.assignees.any? ? card.assignees.map { |assignee| "#{familiar_name_for(assignee)}" }.to_sentence.html_safe : "no one" %>
@@ -31,3 +21,4 @@ <%= yield %>
+ diff --git a/app/views/cards/display/perma/_tags.html.erb b/app/views/cards/display/perma/_tags.html.erb index f600986c0..d9ce056f7 100644 --- a/app/views/cards/display/perma/_tags.html.erb +++ b/app/views/cards/display/perma/_tags.html.erb @@ -1,4 +1,4 @@ -
+
<% if card.tags.any? || card.creating? %> # diff --git a/app/views/cards/display/preview/_tags.html.erb b/app/views/cards/display/preview/_tags.html.erb index 3283efed8..35f7c41dc 100644 --- a/app/views/cards/display/preview/_tags.html.erb +++ b/app/views/cards/display/preview/_tags.html.erb @@ -1,4 +1,4 @@ -
+
<% if card.tags.any? %> # diff --git a/app/views/events/_event.html.erb b/app/views/events/_event.html.erb index 19c27733a..6aa094d94 100644 --- a/app/views/events/_event.html.erb +++ b/app/views/events/_event.html.erb @@ -2,7 +2,7 @@ <% link = event.action == "commented" ? collection_card_path(card.collection, card, anchor: dom_id(event.comment)) : collection_card_path(card.collection, card) %> <%= link_to link, - class: "event panel center center-block flex-inline align-start justify-start gap position-relative", + class: "event panel center center-block flex-inline align-start justify-start gap position-relative full-width", style: "--card-color: #{ card.color }; background-color: color-mix(in srgb, var(--card-color) 10%, var(--color-bg)); color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink));", data: { related_element_target: "related", From 4a8398e3180454073d2dd94a3bd2a5770752ca28 Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Fri, 11 Apr 2025 11:11:16 -0500 Subject: [PATCH 14/21] Remove unused partials --- app/views/cards/display/_mini.html.erb | 23 ---------------- app/views/my/pins/_pin.html.erb | 36 -------------------------- 2 files changed, 59 deletions(-) delete mode 100644 app/views/cards/display/_mini.html.erb delete mode 100644 app/views/my/pins/_pin.html.erb diff --git a/app/views/cards/display/_mini.html.erb b/app/views/cards/display/_mini.html.erb deleted file mode 100644 index 2dd1ff438..000000000 --- a/app/views/cards/display/_mini.html.erb +++ /dev/null @@ -1,23 +0,0 @@ -
-
- - <%= card.collection.name %> - - -
<%= render "cards/display/mini/tags", card: card %>
-
- -
-
-

- <%= card_title(card) %> -

-
- - <%= render "cards/display/mini/meta", card: card %> -
- - <%= link_to collection_card_path(card.collection, card), class: "card__link" do %> - <%= card_title(card) %> - <% end %> -
diff --git a/app/views/my/pins/_pin.html.erb b/app/views/my/pins/_pin.html.erb deleted file mode 100644 index 2a3e35689..000000000 --- a/app/views/my/pins/_pin.html.erb +++ /dev/null @@ -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 %> -
-
-
- <%= pin.card.collection.name %> -
- - <% if pin.card&.stage %> - - <%= pin.card&.stage&.name %> - - <% end %> -
- - <%= card_title(pin.card) %> - -
-
- Updated <%= local_datetime_tag(pin.card.updated_at, style: :ago) -%> -
- - <%= " · " if pin.card.tags.any? %> -
- <%= "#" if pin.card.tags.any? %> - <%= pin.card.tags.map(&:title).join(", ") %> -
-
-
- <% end %> - <% end %> -<% end %> From 29fbfe3b9ff778d4855170cdac2e1a1043ad8cd2 Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Fri, 11 Apr 2025 12:27:15 -0500 Subject: [PATCH 15/21] Remove comments --- app/assets/stylesheets/card-columns.css | 62 ++----------------------- 1 file changed, 4 insertions(+), 58 deletions(-) diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css index 6d8a933f6..49b337f5b 100644 --- a/app/assets/stylesheets/card-columns.css +++ b/app/assets/stylesheets/card-columns.css @@ -55,6 +55,10 @@ .card__link { z-index: 1; } + + .card__hide-on-index { + display: none; + } } .cards__heading { @@ -127,63 +131,5 @@ inline-size: calc((100% - var(--cards-gap)) / 2); } } - - /* .card { - --card-size: calc(100% - (var(--container-padding) * 2) / 2); - - block-size: 50%; - font-size: 3cqi; - flex: 0 0 var(--card-size); - inline-size: var(--card-size); - } - - .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__hide-on-index { - .cards &, - .cards--grid & { - display: none; - } } } From d678ce1f60d5c87e344bc50f5b877877d3c4ca89 Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Fri, 11 Apr 2025 12:43:16 -0500 Subject: [PATCH 16/21] Cleanup after merge --- app/assets/stylesheets/card-columns.css | 7 ++ app/views/cards/_doing_toggle.html.erb | 42 ++++----- db/schema_cache.yml | 112 ++++++++++++------------ 3 files changed, 85 insertions(+), 76 deletions(-) diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css index 49b337f5b..022201a26 100644 --- a/app/assets/stylesheets/card-columns.css +++ b/app/assets/stylesheets/card-columns.css @@ -91,6 +91,13 @@ } } + .card--drafted { + --card-color: var(--color-subtle-dark) !important; + + border-color: var(--card-color) !important; + border-style: dashed !important; + } + .card__background { display: none; } diff --git a/app/views/cards/_doing_toggle.html.erb b/app/views/cards/_doing_toggle.html.erb index f2075f6b0..660d29cfb 100644 --- a/app/views/cards/_doing_toggle.html.erb +++ b/app/views/cards/_doing_toggle.html.erb @@ -1,21 +1,23 @@ -
- Considering - <% if @card.doing? %> - <%= form_with url: card_engagement_path(@card), method: :delete, data: { controller: "form" }, class: "flex" do %> - +<% if @card.published? %> +
+ Considering + <% if @card.doing? %> + <%= form_with url: card_engagement_path(@card), method: :delete, data: { controller: "form" }, class: "flex" do %> + + <% end %> + <% else %> + <%= form_with url: card_engagement_path(@card), method: :post, data: { controller: "form" }, class: "flex" do %> + + <% end %> <% end %> - <% else %> - <%= form_with url: card_engagement_path(@card), method: :post, data: { controller: "form" }, class: "flex" do %> - - <% end %> - <% end %> - Doing -
+ Doing +
+<% end %> diff --git a/db/schema_cache.yml b/db/schema_cache.yml index 1a83eece7..aff4afdac 100644 --- a/db/schema_cache.yml +++ b/db/schema_cache.yml @@ -50,26 +50,6 @@ columns: default_function: collation: comment: - - &9 !ruby/object:ActiveRecord::ConnectionAdapters::SQLite3::Column - auto_increment: - name: updated_at - cast_type: *3 - sql_type_metadata: *4 - 'null': false - default: - default_function: - collation: - comment: - - &30 !ruby/object:ActiveRecord::ConnectionAdapters::SQLite3::Column - auto_increment: - name: user_id - cast_type: *1 - sql_type_metadata: *2 - 'null': false - default: - default_function: - collation: - comment: - !ruby/object:ActiveRecord::ConnectionAdapters::SQLite3::Column auto_increment: name: involvement @@ -90,6 +70,26 @@ columns: default_function: collation: comment: + - &9 !ruby/object:ActiveRecord::ConnectionAdapters::SQLite3::Column + auto_increment: + name: updated_at + cast_type: *3 + sql_type_metadata: *4 + 'null': false + default: + default_function: + collation: + comment: + - &30 !ruby/object:ActiveRecord::ConnectionAdapters::SQLite3::Column + auto_increment: + name: user_id + cast_type: *1 + sql_type_metadata: *2 + 'null': false + default: + default_function: + collation: + comment: accounts: - *5 - *6 @@ -463,6 +463,16 @@ columns: default_function: collation: comment: + - !ruby/object:ActiveRecord::ConnectionAdapters::SQLite3::Column + auto_increment: + name: last_active_at + cast_type: *3 + sql_type_metadata: *4 + 'null': false + default: + default_function: + collation: + comment: - !ruby/object:ActiveRecord::ConnectionAdapters::SQLite3::Column auto_increment: name: stage_id @@ -494,16 +504,6 @@ columns: collation: comment: - *9 - - !ruby/object:ActiveRecord::ConnectionAdapters::SQLite3::Column - auto_increment: - name: last_active_at - cast_type: *3 - sql_type_metadata: *4 - 'null': false - default: - default_function: - collation: - comment: closure_reasons: - *5 - !ruby/object:ActiveRecord::ConnectionAdapters::SQLite3::Column @@ -516,6 +516,7 @@ columns: default_function: collation: comment: + - *6 - !ruby/object:ActiveRecord::ConnectionAdapters::SQLite3::Column auto_increment: name: label @@ -526,12 +527,21 @@ columns: default_function: collation: comment: - - *6 - *9 closures: - *5 - *21 - *6 + - !ruby/object:ActiveRecord::ConnectionAdapters::SQLite3::Column + auto_increment: + name: reason + cast_type: *7 + sql_type_metadata: *8 + 'null': false + default: + default_function: + collation: + comment: - *9 - !ruby/object:ActiveRecord::ConnectionAdapters::SQLite3::Column auto_increment: @@ -543,16 +553,6 @@ columns: default_function: collation: comment: - - !ruby/object:ActiveRecord::ConnectionAdapters::SQLite3::Column - auto_increment: - name: reason - cast_type: *7 - sql_type_metadata: *8 - 'null': false - default: - default_function: - collation: - comment: collections: - *5 - &32 !ruby/object:ActiveRecord::ConnectionAdapters::SQLite3::Column @@ -1410,10 +1410,11 @@ indexes: valid: true - !ruby/object:ActiveRecord::ConnectionAdapters::IndexDefinition table: cards - name: index_cards_on_stage_id + name: index_cards_on_last_active_at_and_status unique: false columns: - - stage_id + - last_active_at + - status lengths: {} orders: {} opclasses: {} @@ -1426,11 +1427,10 @@ indexes: valid: true - !ruby/object:ActiveRecord::ConnectionAdapters::IndexDefinition table: cards - name: index_cards_on_last_active_at_and_status + name: index_cards_on_stage_id unique: false columns: - - last_active_at - - status + - stage_id lengths: {} orders: {} opclasses: {} @@ -1461,11 +1461,10 @@ indexes: closures: - !ruby/object:ActiveRecord::ConnectionAdapters::IndexDefinition table: closures - name: index_closures_on_card_id_and_created_at - unique: false + name: index_closures_on_card_id + unique: true columns: - card_id - - created_at lengths: {} orders: {} opclasses: {} @@ -1478,10 +1477,11 @@ indexes: valid: true - !ruby/object:ActiveRecord::ConnectionAdapters::IndexDefinition table: closures - name: index_closures_on_card_id - unique: true + name: index_closures_on_card_id_and_created_at + unique: false columns: - card_id + - created_at lengths: {} orders: {} opclasses: {} @@ -2017,11 +2017,10 @@ indexes: tags: - !ruby/object:ActiveRecord::ConnectionAdapters::IndexDefinition table: tags - name: index_tags_on_account_id_and_title - unique: true + name: index_tags_on_account_id + unique: false columns: - account_id - - title lengths: {} orders: {} opclasses: {} @@ -2034,10 +2033,11 @@ indexes: valid: true - !ruby/object:ActiveRecord::ConnectionAdapters::IndexDefinition table: tags - name: index_tags_on_account_id - unique: false + name: index_tags_on_account_id_and_title + unique: true columns: - account_id + - title lengths: {} orders: {} opclasses: {} From 11ecc5d48902dc67bd86ddc77f7dd525b328862a Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Fri, 11 Apr 2025 15:39:07 -0500 Subject: [PATCH 17/21] Merge in latest from main --- app/views/cards/_doing_toggle.html.erb | 34 ++++++++++++-------------- 1 file changed, 15 insertions(+), 19 deletions(-) diff --git a/app/views/cards/_doing_toggle.html.erb b/app/views/cards/_doing_toggle.html.erb index 660d29cfb..19efea0f2 100644 --- a/app/views/cards/_doing_toggle.html.erb +++ b/app/views/cards/_doing_toggle.html.erb @@ -1,23 +1,19 @@ -<% if @card.published? %> -
- Considering - <% if @card.doing? %> - <%= form_with url: card_engagement_path(@card), method: :delete, data: { controller: "form" }, class: "flex" do %> - +<% if @card.published? && !@card.closed? %> +
+
+ <%= 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" } %> + Considering + <% end %> <% end %> - <% else %> - <%= form_with url: card_engagement_path(@card), method: :post, data: { controller: "form" }, class: "flex" do %> - + + <%= 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" } %> + Doing + <% end %> <% end %> - <% end %> - Doing +
<% end %> From 019c16b3e36df567ca876082f33ad1fc98c304ee Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Fri, 11 Apr 2025 16:09:44 -0500 Subject: [PATCH 18/21] Fix issues after merge --- app/assets/stylesheets/buttons.css | 10 ++-- app/assets/stylesheets/card-perma.css | 70 +++++++++++------------- app/assets/stylesheets/pins.css | 11 +++- app/views/cards/_closure_toggle.html.erb | 2 +- app/views/cards/_doing_toggle.html.erb | 2 +- 5 files changed, 48 insertions(+), 47 deletions(-) diff --git a/app/assets/stylesheets/buttons.css b/app/assets/stylesheets/buttons.css index 693ba2429..210c81bd7 100644 --- a/app/assets/stylesheets/buttons.css +++ b/app/assets/stylesheets/buttons.css @@ -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; } diff --git a/app/assets/stylesheets/card-perma.css b/app/assets/stylesheets/card-perma.css index 85e8ff02f..e7df0ac4f 100644 --- a/app/assets/stylesheets/card-perma.css +++ b/app/assets/stylesheets/card-perma.css @@ -12,9 +12,9 @@ column-gap: var(--inline-space); display: grid; grid-template-areas: - "qw cutout-top we" + "qw notch-top we" "actions-left card actions-right" - "er cutout-bottom rt"; + "er notch-bottom rt"; grid-template-columns: 48px minmax(0, 960px) 48px; inline-size: fit-content; max-inline-size: 100%; @@ -56,11 +56,11 @@ .card-perma__actions--left { grid-area: actions-left; } .card-perma__actions--right { grid-area: actions-right; } - /* Cutouts + /* Notches /* -------------------------------------------------------------------------- */ - .card-perma__cutout { - --card-cutout-padding-block: 0.5ch; + .card-perma__notch { + --card-notch-padding: 0.5ch; --border-radius: 1em; align-items: center; @@ -72,12 +72,36 @@ gap: var(--inline-space); justify-content: center; margin-inline: auto; - padding: var(--card-cutout-padding-block) 1.5ch; + padding: var(--card-notch-padding); position: relative; text-align: center; z-index: 0; + } - grid-columns-start: 2; + .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-inline-end: 1.5ch; + translate: 0 -50%; &:has([open]) { z-index: 1; @@ -95,38 +119,6 @@ } } - .card-perma__cutout--top { - grid-area: cutout-top; - min-inline-size: 36ch; - position: absolute; - inset-inline-start: 50%; - translate: -50% -50%; - - #header:has(&) { - position: relative; - z-index: 1; - } - - .switch__input:checked + .switch__btn { - background-color: var(--card-color) !important; - } - - strong { - flex: 1 0 42%; - text-align: end; - - &:last-of-type { - text-align: start; - } - } - } - - .card-perma__cutout--bottom { - grid-area: cutout-bottom; - padding-inline-start: 0.5ch; - translate: 0 -50%; - } - .card-perma__closure-message { color: var(--card-color); } diff --git a/app/assets/stylesheets/pins.css b/app/assets/stylesheets/pins.css index 95b0979f4..e42f2d3e7 100644 --- a/app/assets/stylesheets/pins.css +++ b/app/assets/stylesheets/pins.css @@ -30,7 +30,7 @@ --block-space-half: 0.5em; --text-xx-large: 2em; - box-shadow: 0 0 0 1px var(--color-bg); + border: 1px solid var(--color-bg); } .card__collection { @@ -38,6 +38,7 @@ } .card__body { + display: block; padding-block-end: 0; } @@ -47,6 +48,14 @@ 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); diff --git a/app/views/cards/_closure_toggle.html.erb b/app/views/cards/_closure_toggle.html.erb index fe0c6c043..5cd93b41c 100644 --- a/app/views/cards/_closure_toggle.html.erb +++ b/app/views/cards/_closure_toggle.html.erb @@ -1,4 +1,4 @@ -
"> +
"> <% if card.closed? %> Completed by <%= card.closed_by.name %> on <%= local_datetime_tag(card.closed_at, style: :shortdate) %>. <%= button_to card_closure_path(card), method: :delete, class: "btn btn--plain borderless fill-transparent" do %> diff --git a/app/views/cards/_doing_toggle.html.erb b/app/views/cards/_doing_toggle.html.erb index 19efea0f2..54aa661b9 100644 --- a/app/views/cards/_doing_toggle.html.erb +++ b/app/views/cards/_doing_toggle.html.erb @@ -1,5 +1,5 @@ <% if @card.published? && !@card.closed? %> -
+
<%= 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 %> From dc474627cb7681359cf88735b2f9bfc669fbdb79 Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Fri, 11 Apr 2025 16:11:28 -0500 Subject: [PATCH 19/21] Add padding to message when closed --- app/assets/stylesheets/card-perma.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/app/assets/stylesheets/card-perma.css b/app/assets/stylesheets/card-perma.css index e7df0ac4f..4d3165886 100644 --- a/app/assets/stylesheets/card-perma.css +++ b/app/assets/stylesheets/card-perma.css @@ -121,6 +121,10 @@ .card-perma__closure-message { color: var(--card-color); + + &:first-child { + padding-left: 1ch; + } } /* Variants From 47974b5e3b9fc3b90f5ddfdc64c287df3dd85cd6 Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Fri, 11 Apr 2025 16:14:56 -0500 Subject: [PATCH 20/21] Fix failing pin test --- app/controllers/cards/pins_controller.rb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/controllers/cards/pins_controller.rb b/app/controllers/cards/pins_controller.rb index 1f6c1aaa8..76c5aa723 100644 --- a/app/controllers/cards/pins_controller.rb +++ b/app/controllers/cards/pins_controller.rb @@ -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) From f60ce4f7a60ca372e036ff7f0b94717de1b65f51 Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Fri, 11 Apr 2025 16:40:54 -0500 Subject: [PATCH 21/21] Fix notch padding --- app/assets/stylesheets/card-perma.css | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/app/assets/stylesheets/card-perma.css b/app/assets/stylesheets/card-perma.css index 4d3165886..3b64b2200 100644 --- a/app/assets/stylesheets/card-perma.css +++ b/app/assets/stylesheets/card-perma.css @@ -72,7 +72,6 @@ gap: var(--inline-space); justify-content: center; margin-inline: auto; - padding: var(--card-notch-padding); position: relative; text-align: center; z-index: 0; @@ -100,7 +99,7 @@ .card-perma__notch--bottom { grid-area: notch-bottom; - padding-inline-end: 1.5ch; + padding: calc(var(--block-space) * 0.75) calc(var(--block-space) * 0.66); translate: 0 -50%; &:has([open]) {