From d568a7ff13c5f82b3f3d994e1faaef0c15e30a9e Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Wed, 14 May 2025 14:39:33 -0500 Subject: [PATCH 1/6] Create space for bubbles in containers --- app/assets/stylesheets/bubble.css | 53 +++++++++++++++++ app/assets/stylesheets/card-columns.css | 5 +- app/assets/stylesheets/cards.css | 59 +------------------ app/views/cards/display/_preview.html.erb | 2 +- .../cards/display/preview/_bubble.html.erb | 4 +- 5 files changed, 62 insertions(+), 61 deletions(-) create mode 100644 app/assets/stylesheets/bubble.css diff --git a/app/assets/stylesheets/bubble.css b/app/assets/stylesheets/bubble.css new file mode 100644 index 000000000..ad84df421 --- /dev/null +++ b/app/assets/stylesheets/bubble.css @@ -0,0 +1,53 @@ +@layer components { + .bubble { + --bubble-color: radial-gradient(oklch(var(--lch-blue-medium) / 10%) 50%, oklch(var(--lch-blue-medium) / 50%) 100%); + --bubble-shape: 54% 46% 61% 39% / 57% 49% 51% 43%; + --bubble-rotate: 0deg; + --bubble-size-default: 4rem; + + block-size: var(--bubble-size, var(--bubble-size-default)); + container-type: inline-size; + font-size: 1.75rem; + font-weight: bold; + inline-size: var(--bubble-size, var(--bubble-size-default)); + padding: 0.5cqi; + position: absolute; + inset-block-start: 50%; + + &:before { + background: var(--bubble-color); + border-radius: var(--bubble-shape); + content: ""; + inset: 0; + position: absolute; + transform: rotate(var(--bubble-rotate)); + } + + @media (any-hover: hover) { + &:hover:before { + animation: wobble 1200ms; + } + } + + svg { + display: block; + letter-spacing: 0.125ch; + text-transform: uppercase; + } + } + + .bubble__number { + display: grid; + font-size: 40cqi; + font-weight: 900; + inset: 0; + place-content: center; + position: absolute; + text-align: center; + } +} + +.bubble--closing { + inset-inline-start: calc(-1 * var(--bubble-gap)); + translate: -100% -50%; +} diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css index 9664e1abc..0fe0d6a0e 100644 --- a/app/assets/stylesheets/card-columns.css +++ b/app/assets/stylesheets/card-columns.css @@ -10,10 +10,13 @@ } .card-columns { + --bubble-size: 4rem; + --bubble-gap: 0.5rem; + display: grid; grid-template-columns: repeat(2, 50%); margin: auto; - max-inline-size: 1080px; + max-inline-size: calc(100% - (var(--bubble-size) + var(--bubble-gap)) * 2); position: relative; &:before { diff --git a/app/assets/stylesheets/cards.css b/app/assets/stylesheets/cards.css index 9cc44fa67..239d6e7fc 100644 --- a/app/assets/stylesheets/cards.css +++ b/app/assets/stylesheets/cards.css @@ -25,7 +25,6 @@ } .card--golden.card--doing { - /* --lch-golden: var(--lch-yellow-medium); */ --lch-golden: 89.1% 0.178 95.7; background-color: var(--color-canvas); @@ -290,60 +289,6 @@ border-block-end: 1px dashed currentcolor; } - .card__bubble { - --bubble-color: radial-gradient(oklch(var(--lch-blue-medium) / 10%) 50%, oklch(var(--lch-blue-medium) / 50%) 100%); - --bubble-shape: 54% 46% 61% 39% / 57% 49% 51% 43%; - --bubble-rotate: 0deg; - --size: 5cqi; - - block-size: var(--size); - container-type: inline-size; - font-size: 1.75rem; - font-weight: bold; - inline-size: var(--size); - inset: 50% auto auto -0.5ch; - padding: 0.5cqi; - position: absolute; - translate: -100% -50%; - - &:before { - background: var(--bubble-color); - border-radius: var(--bubble-shape); - content: ""; - inset: 0; - position: absolute; - transform: rotate(var(--bubble-rotate)); - } - - @media (any-hover: hover) { - &:hover:before { - animation: wobble 1200ms; - } - } - - span { - display: grid; - font-size: 40cqi; - font-weight: 900; - inset: 0; - place-content: center; - position: absolute; - text-align: center; - } - - svg { - display: block; - letter-spacing: 0.125ch; - text-transform: uppercase; - } - - .card:nth-child(2n+1) & { --bubble-rotate: -90deg; } - .card:nth-child(3n+1) & { --bubble-rotate: 45deg; } - } - - .card__bubble--today { - span { - font-size: 30cqi; - } - } + .card:nth-child(2n+1) .bubble { --bubble-rotate: -90deg; } + .card:nth-child(3n+1) .bubble { --bubble-rotate: 45deg; } } diff --git a/app/views/cards/display/_preview.html.erb b/app/views/cards/display/_preview.html.erb index 07ec072e2..986b622fd 100644 --- a/app/views/cards/display/_preview.html.erb +++ b/app/views/cards/display/_preview.html.erb @@ -30,7 +30,7 @@ <%= render "cards/display/common/background", card: card %> <% if card.closing_soon? %> - <%= render "cards/display/preview/bubble", days: card.days_until_close %> + <%= render "cards/display/preview/bubble", days: card.days_until_close, class: "bubble--closing" %> <% end %> <% end %> <% end %> diff --git a/app/views/cards/display/preview/_bubble.html.erb b/app/views/cards/display/preview/_bubble.html.erb index e9401ffec..d6c9e5734 100644 --- a/app/views/cards/display/preview/_bubble.html.erb +++ b/app/views/cards/display/preview/_bubble.html.erb @@ -1,4 +1,4 @@ -
+
"> @@ -8,7 +8,7 @@ - + <%= days < 1 ? "!" : days %> From 95298d4fce2a3a0b8dbc6d3ce5c883f522b099a3 Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Wed, 14 May 2025 14:53:09 -0500 Subject: [PATCH 2/6] Stub out considering bubble --- app/assets/stylesheets/bubble.css | 5 +++++ app/models/card/closeable.rb | 7 ++++++- app/views/cards/display/_preview.html.erb | 6 +++++- app/views/cards/display/preview/_bubble.html.erb | 5 +++-- 4 files changed, 19 insertions(+), 4 deletions(-) diff --git a/app/assets/stylesheets/bubble.css b/app/assets/stylesheets/bubble.css index ad84df421..b928b3cac 100644 --- a/app/assets/stylesheets/bubble.css +++ b/app/assets/stylesheets/bubble.css @@ -51,3 +51,8 @@ inset-inline-start: calc(-1 * var(--bubble-gap)); translate: -100% -50%; } + +.bubble--considering { + inset-inline-end: calc(-1 * var(--bubble-gap)); + translate: 100% -50%; +} diff --git a/app/models/card/closeable.rb b/app/models/card/closeable.rb index 121a0e2d4..4db284ebd 100644 --- a/app/models/card/closeable.rb +++ b/app/models/card/closeable.rb @@ -2,7 +2,7 @@ module Card::Closeable extend ActiveSupport::Concern AUTO_CLOSE_AFTER = 30.days - AUTO_CLOSE_REMINDER_BEFORE = 7.days + AUTO_CLOSE_REMINDER_BEFORE = 29.days included do has_one :closure, dependent: :destroy @@ -37,6 +37,11 @@ module Card::Closeable considering? && auto_closing? && Time.current >= auto_close_at - AUTO_CLOSE_REMINDER_BEFORE end + # TMP + def considering_soon? + true + end + def closed? closure.present? end diff --git a/app/views/cards/display/_preview.html.erb b/app/views/cards/display/_preview.html.erb index 986b622fd..ed689b6bf 100644 --- a/app/views/cards/display/_preview.html.erb +++ b/app/views/cards/display/_preview.html.erb @@ -30,7 +30,11 @@ <%= render "cards/display/common/background", card: card %> <% if card.closing_soon? %> - <%= render "cards/display/preview/bubble", days: card.days_until_close, class: "bubble--closing" %> + <%= render "cards/display/preview/bubble", label: "Closes", days: card.days_until_close, class: "bubble--closing" %> + <% end %> + + <% if card.considering_soon? %> + <%= render "cards/display/preview/bubble", label: "Considering", days: card.days_until_close, class: "bubble--considering" %> <% end %> <% end %> <% end %> diff --git a/app/views/cards/display/preview/_bubble.html.erb b/app/views/cards/display/preview/_bubble.html.erb index d6c9e5734..d5300c9f1 100644 --- a/app/views/cards/display/preview/_bubble.html.erb +++ b/app/views/cards/display/preview/_bubble.html.erb @@ -1,9 +1,10 @@ -
"> +
- <%= days < 1 ? "Closes" : "Closes in" %> + <%= local_assigns[:label] %> + <%= " in" if days < 1 %> From 15e3802a3344fcad1222efdcb675e806762358c9 Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Wed, 14 May 2025 15:25:17 -0500 Subject: [PATCH 3/6] Add basic rules for reconsider bubble --- app/assets/stylesheets/bubble.css | 3 ++- app/models/card/closeable.rb | 7 +------ app/models/card/engageable.rb | 9 +++++++++ app/views/cards/display/_preview.html.erb | 4 ++-- app/views/cards/display/preview/_bubble.html.erb | 2 +- 5 files changed, 15 insertions(+), 10 deletions(-) diff --git a/app/assets/stylesheets/bubble.css b/app/assets/stylesheets/bubble.css index b928b3cac..e7af36acb 100644 --- a/app/assets/stylesheets/bubble.css +++ b/app/assets/stylesheets/bubble.css @@ -6,6 +6,7 @@ --bubble-size-default: 4rem; block-size: var(--bubble-size, var(--bubble-size-default)); + color: oklch(var(--lch-blue-darkest)); container-type: inline-size; font-size: 1.75rem; font-weight: bold; @@ -31,7 +32,7 @@ svg { display: block; - letter-spacing: 0.125ch; + letter-spacing: 0.1ch; text-transform: uppercase; } } diff --git a/app/models/card/closeable.rb b/app/models/card/closeable.rb index 4db284ebd..121a0e2d4 100644 --- a/app/models/card/closeable.rb +++ b/app/models/card/closeable.rb @@ -2,7 +2,7 @@ module Card::Closeable extend ActiveSupport::Concern AUTO_CLOSE_AFTER = 30.days - AUTO_CLOSE_REMINDER_BEFORE = 29.days + AUTO_CLOSE_REMINDER_BEFORE = 7.days included do has_one :closure, dependent: :destroy @@ -37,11 +37,6 @@ module Card::Closeable considering? && auto_closing? && Time.current >= auto_close_at - AUTO_CLOSE_REMINDER_BEFORE end - # TMP - def considering_soon? - true - end - def closed? closure.present? end diff --git a/app/models/card/engageable.rb b/app/models/card/engageable.rb index f59ef2ab3..493d5b9ae 100644 --- a/app/models/card/engageable.rb +++ b/app/models/card/engageable.rb @@ -2,6 +2,7 @@ module Card::Engageable extend ActiveSupport::Concern STAGNATED_AFTER = 30.days + AUTO_RECONSIDER_REMINDER_BEFORE = 7.days included do has_one :engagement, dependent: :destroy, class_name: "Card::Engagement" @@ -28,6 +29,10 @@ module Card::Engageable last_active_at + STAGNATED_AFTER if last_active_at end + def days_until_reconsider + (auto_reconsider_at.to_date - Date.current).to_i if auto_reconsider_at + end + def doing? open? && published? && engagement.present? end @@ -36,6 +41,10 @@ module Card::Engageable open? && published? && engagement.blank? end + def reconsidering_soon? + doing? && Time.current >= auto_reconsider_at - AUTO_RECONSIDER_REMINDER_BEFORE + end + def engage unless doing? transaction do diff --git a/app/views/cards/display/_preview.html.erb b/app/views/cards/display/_preview.html.erb index ed689b6bf..5cd440870 100644 --- a/app/views/cards/display/_preview.html.erb +++ b/app/views/cards/display/_preview.html.erb @@ -33,8 +33,8 @@ <%= render "cards/display/preview/bubble", label: "Closes", days: card.days_until_close, class: "bubble--closing" %> <% end %> - <% if card.considering_soon? %> - <%= render "cards/display/preview/bubble", label: "Considering", days: card.days_until_close, class: "bubble--considering" %> + <% if card.reconsidering_soon? %> + <%= render "cards/display/preview/bubble", label: "Consider", days: card.days_until_close, class: "bubble--considering" %> <% end %> <% end %> <% end %> diff --git a/app/views/cards/display/preview/_bubble.html.erb b/app/views/cards/display/preview/_bubble.html.erb index d5300c9f1..41319eef8 100644 --- a/app/views/cards/display/preview/_bubble.html.erb +++ b/app/views/cards/display/preview/_bubble.html.erb @@ -4,7 +4,7 @@ <%= local_assigns[:label] %> - <%= " in" if days < 1 %> + <%= " in" if days > 1 %> From 3854d1e27e8fa43f45a80a8ae9c7bb2b026dbadc Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Wed, 14 May 2025 15:44:27 -0500 Subject: [PATCH 4/6] Bubble matches card color --- app/assets/stylesheets/bubble.css | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/app/assets/stylesheets/bubble.css b/app/assets/stylesheets/bubble.css index e7af36acb..5ff41f248 100644 --- a/app/assets/stylesheets/bubble.css +++ b/app/assets/stylesheets/bubble.css @@ -1,12 +1,12 @@ @layer components { .bubble { - --bubble-color: radial-gradient(oklch(var(--lch-blue-medium) / 10%) 50%, oklch(var(--lch-blue-medium) / 50%) 100%); + --bubble-color: var(--card-color, oklch(var(--lch-blue-medium))); --bubble-shape: 54% 46% 61% 39% / 57% 49% 51% 43%; --bubble-rotate: 0deg; --bubble-size-default: 4rem; block-size: var(--bubble-size, var(--bubble-size-default)); - color: oklch(var(--lch-blue-darkest)); + color: var(--color-ink); container-type: inline-size; font-size: 1.75rem; font-weight: bold; @@ -16,12 +16,16 @@ inset-block-start: 50%; &:before { - background: var(--bubble-color); + background: radial-gradient( + color-mix(in srgb, var(--bubble-color) 8%, var(--color-canvas)) 50%, + color-mix(in srgb, var(--bubble-color) 48%, var(--color-canvas)) 100% + ); border-radius: var(--bubble-shape); content: ""; inset: 0; position: absolute; transform: rotate(var(--bubble-rotate)); + z-index: -1; } @media (any-hover: hover) { From e7495046d93534ebaacc3aa020921978c1210f64 Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Thu, 15 May 2025 09:49:54 -0500 Subject: [PATCH 5/6] Update label to "Falls back" --- app/assets/stylesheets/bubble.css | 2 +- app/models/card/engageable.rb | 2 +- app/views/cards/container/_closure.html.erb | 2 +- app/views/cards/display/_preview.html.erb | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/app/assets/stylesheets/bubble.css b/app/assets/stylesheets/bubble.css index 5ff41f248..0b330b06a 100644 --- a/app/assets/stylesheets/bubble.css +++ b/app/assets/stylesheets/bubble.css @@ -8,7 +8,7 @@ block-size: var(--bubble-size, var(--bubble-size-default)); color: var(--color-ink); container-type: inline-size; - font-size: 1.75rem; + font-size: 1.7rem; font-weight: bold; inline-size: var(--bubble-size, var(--bubble-size-default)); padding: 0.5cqi; diff --git a/app/models/card/engageable.rb b/app/models/card/engageable.rb index 493d5b9ae..32f7f6610 100644 --- a/app/models/card/engageable.rb +++ b/app/models/card/engageable.rb @@ -2,7 +2,7 @@ module Card::Engageable extend ActiveSupport::Concern STAGNATED_AFTER = 30.days - AUTO_RECONSIDER_REMINDER_BEFORE = 7.days + AUTO_RECONSIDER_REMINDER_BEFORE = 30.days included do has_one :engagement, dependent: :destroy, class_name: "Card::Engagement" diff --git a/app/views/cards/container/_closure.html.erb b/app/views/cards/container/_closure.html.erb index 766b1feb6..462bdfffd 100644 --- a/app/views/cards/container/_closure.html.erb +++ b/app/views/cards/container/_closure.html.erb @@ -23,7 +23,7 @@ <% if card.doing? %> - Returns to Considering if no activity <%= local_datetime_tag(card.auto_reconsider_at, style: :indays) -%>. + Falls back to Considering if no activity <%= local_datetime_tag(card.auto_reconsider_at, style: :indays) -%>. <% elsif card.auto_closing? %> Auto-closes if no activity <%= local_datetime_tag(card.auto_close_at, style: :indays) -%>. <% end %> diff --git a/app/views/cards/display/_preview.html.erb b/app/views/cards/display/_preview.html.erb index 5cd440870..6c25054aa 100644 --- a/app/views/cards/display/_preview.html.erb +++ b/app/views/cards/display/_preview.html.erb @@ -34,7 +34,7 @@ <% end %> <% if card.reconsidering_soon? %> - <%= render "cards/display/preview/bubble", label: "Consider", days: card.days_until_close, class: "bubble--considering" %> + <%= render "cards/display/preview/bubble", label: "Falls Back", days: card.days_until_close, class: "bubble--considering" %> <% end %> <% end %> <% end %> From ece60df51676567f4101ce6811ecc34159b25428 Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Thu, 15 May 2025 09:50:48 -0500 Subject: [PATCH 6/6] Fix reconsider window --- app/models/card/engageable.rb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/models/card/engageable.rb b/app/models/card/engageable.rb index 32f7f6610..493d5b9ae 100644 --- a/app/models/card/engageable.rb +++ b/app/models/card/engageable.rb @@ -2,7 +2,7 @@ module Card::Engageable extend ActiveSupport::Concern STAGNATED_AFTER = 30.days - AUTO_RECONSIDER_REMINDER_BEFORE = 30.days + AUTO_RECONSIDER_REMINDER_BEFORE = 7.days included do has_one :engagement, dependent: :destroy, class_name: "Card::Engagement"