diff --git a/app/assets/stylesheets/bubble.css b/app/assets/stylesheets/bubble.css new file mode 100644 index 000000000..0b330b06a --- /dev/null +++ b/app/assets/stylesheets/bubble.css @@ -0,0 +1,63 @@ +@layer components { + .bubble { + --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: var(--color-ink); + container-type: inline-size; + font-size: 1.7rem; + font-weight: bold; + inline-size: var(--bubble-size, var(--bubble-size-default)); + padding: 0.5cqi; + position: absolute; + inset-block-start: 50%; + + &:before { + background: radial-gradient( + color-mix(in srgb, var(--bubble-color) 8%, var(--color-canvas)) 50%, + color-mix(in srgb, var(--bubble-color) 48%, var(--color-canvas)) 100% + ); + border-radius: var(--bubble-shape); + content: ""; + inset: 0; + position: absolute; + transform: rotate(var(--bubble-rotate)); + z-index: -1; + } + + @media (any-hover: hover) { + &:hover:before { + animation: wobble 1200ms; + } + } + + svg { + display: block; + letter-spacing: 0.1ch; + 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%; +} + +.bubble--considering { + inset-inline-end: 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/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/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 07ec072e2..6c25054aa 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 %> + <%= render "cards/display/preview/bubble", label: "Closes", days: card.days_until_close, class: "bubble--closing" %> + <% end %> + + <% if card.reconsidering_soon? %> + <%= render "cards/display/preview/bubble", label: "Falls Back", 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 e9401ffec..41319eef8 100644 --- a/app/views/cards/display/preview/_bubble.html.erb +++ b/app/views/cards/display/preview/_bubble.html.erb @@ -1,14 +1,15 @@ -
+
- <%= days < 1 ? "Closes" : "Closes in" %> + <%= local_assigns[:label] %> + <%= " in" if days > 1 %> - + <%= days < 1 ? "!" : days %>