diff --git a/app/assets/stylesheets/buttons.css b/app/assets/stylesheets/buttons.css index 5c787aeea..072ee1a1b 100644 --- a/app/assets/stylesheets/buttons.css +++ b/app/assets/stylesheets/buttons.css @@ -185,8 +185,10 @@ --btn-border-radius: 0; --radius: 0.3em; + flex: 1 0 33%; inline-size: 100%; justify-content: center; + white-space: nowrap; } form { @@ -197,7 +199,6 @@ border-end-start-radius: var(--radius); border-inline-end: 0; border-start-start-radius: var(--radius); - flex: 1 0 50%; padding-inline-end: 0.8em; } @@ -205,7 +206,6 @@ border-end-end-radius: var(--radius); border-inline-start: 0; border-start-end-radius: var(--radius); - flex: 1 0 50%; padding-inline-start: 0.8em; } diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css index 9e92e2327..bdd2bf065 100644 --- a/app/assets/stylesheets/card-columns.css +++ b/app/assets/stylesheets/card-columns.css @@ -7,7 +7,7 @@ #main:has(.card-columns) { --cards-gap: min(2cqi, 1rem); --gradient-border: linear-gradient(to right,var(--color-canvas), var(--color-ink-lighter) 3%, var(--color-ink-lighter) 97%, var(--color-canvas)); - --reserved-bubble-space: calc(var(--bubble-size) + var(--bubble-gap)); + --reserved-bubble-space: calc(var(--bubble-size) / 2 + var(--bubble-gap)); --bubble-gap: 0.5rem; --bubble-size: 4rem; @@ -17,13 +17,13 @@ @media (max-width: 639px) { --bubble-gap: -0.5rem; --bubble-size: 3rem; - --reserved-bubble-space: calc(var(--bubble-size) / 2 + var(--bubble-gap)); } } .card-columns { margin: auto; max-inline-size: 100%; + padding-inline: var(--reserved-bubble-space); position: relative; &:before { @@ -36,7 +36,7 @@ @media (min-width: 640px) { display: grid; - grid-template-columns: repeat(2, 50%); + grid-template-columns: repeat(3, 33%); } } @@ -59,7 +59,7 @@ @media (max-width: 639px) { padding-block-end: calc(var(--cards-gap) * 2); - padding-inline-start: var(--reserved-bubble-space); + padding-inline-start: var(--cards-gap); } .card { @@ -155,7 +155,7 @@ .cards--considering { @media (min-width: 640px) { - padding-inline: var(--reserved-bubble-space) var(--cards-gap); + padding-inline: var(--cards-gap); &:after { background: linear-gradient(var(--color-canvas), var(--color-ink-lighter) 1%, var(--color-ink-lighter) 99%, var(--color-canvas)); @@ -222,12 +222,42 @@ } } + /* On Deck + /* ------------------------------------------------------------------------ */ + + .cards--on-deck { + @media (min-width: 640px) { + padding-inline: var(--cards-gap); + + &:after { + background: linear-gradient(var(--color-canvas), var(--color-ink-lighter) 1%, var(--color-ink-lighter) 99%, var(--color-canvas)); + block-size: calc(100% + 1.2em); + content: ""; + display: block; + inline-size: 1px; + inset: -0.6em 0 -0.6em 100%; + position: absolute; + z-index: 3; + } + } + + @media (max-width: 639px) { + &::before { + background: var(--gradient-border); + block-size: 1px; + content: ""; + inset: 0 0 auto; + position: absolute; + } + } + } + /* Doing /* ------------------------------------------------------------------------ */ .cards--doing { @media (min-width: 640px) { - padding-inline: var(--cards-gap) var(--reserved-bubble-space); + padding-inline: var(--cards-gap); } @media (max-width: 639px) { diff --git a/app/controllers/cards/drops_controller.rb b/app/controllers/cards/drops_controller.rb index 25f7997a8..c6c19b7a1 100644 --- a/app/controllers/cards/drops_controller.rb +++ b/app/controllers/cards/drops_controller.rb @@ -8,7 +8,7 @@ class Cards::DropsController < ApplicationController end private - VALID_DROP_TARGETS = %w[ considering doing ] + VALID_DROP_TARGETS = %w[ considering on_deck doing ] def set_card @card = Current.user.accessible_cards.find(params[:dropped_item_id]) @@ -26,6 +26,8 @@ class Cards::DropsController < ApplicationController case @drop_target when :considering @card.reconsider + when :on_deck + @card.move_to_on_deck when :doing @card.engage end @@ -33,6 +35,6 @@ class Cards::DropsController < ApplicationController def render_column_replacement page_and_filter = page_and_filter_for @filter.with(engagement_status: @drop_target.to_s), per_page: CardsController::PAGE_SIZE - render turbo_stream: turbo_stream.replace("#{@drop_target}-cards", method: :morph, partial: "cards/index/engagement/#{@drop_target}", locals: page_and_filter.to_h) + render turbo_stream: turbo_stream.replace("#{@drop_target.to_s.gsub('_', '-')}-cards", method: :morph, partial: "cards/index/engagement/#{@drop_target}", locals: page_and_filter.to_h) end end diff --git a/app/controllers/cards/engagements_controller.rb b/app/controllers/cards/engagements_controller.rb index 50a6daa83..73b8e9c9d 100644 --- a/app/controllers/cards/engagements_controller.rb +++ b/app/controllers/cards/engagements_controller.rb @@ -2,7 +2,12 @@ class Cards::EngagementsController < ApplicationController include CardScoped def create - @card.engage + case params[:engagement] + when "doing" + @card.engage + when "on_deck" + @card.move_to_on_deck + end render_card_replacement end diff --git a/app/controllers/cards_controller.rb b/app/controllers/cards_controller.rb index 84627b625..b6a2833a3 100644 --- a/app/controllers/cards_controller.rb +++ b/app/controllers/cards_controller.rb @@ -10,6 +10,7 @@ class CardsController < ApplicationController def index @considering = page_and_filter_for @filter.with(engagement_status: "considering"), per_page: PAGE_SIZE + @on_deck = page_and_filter_for @filter.with(engagement_status: "on_deck"), per_page: PAGE_SIZE @doing = page_and_filter_for @filter.with(engagement_status: "doing"), per_page: PAGE_SIZE @closed = page_and_filter_for_closed_cards end diff --git a/app/models/card/engageable.rb b/app/models/card/engageable.rb index 7d26308a2..dbca51465 100644 --- a/app/models/card/engageable.rb +++ b/app/models/card/engageable.rb @@ -5,18 +5,24 @@ module Card::Engageable has_one :engagement, dependent: :destroy, class_name: "Card::Engagement" scope :considering, -> { published_or_drafted_by(Current.user).open.where.missing(:engagement) } - scope :doing, -> { published.open.joins(:engagement) } + scope :on_deck, -> { published.open.joins(:engagement).where(card_engagements: { status: "on_deck" }) } + scope :doing, -> { published.open.joins(:engagement).where(card_engagements: { status: "doing" }) } scope :by_engagement_status, ->(status) do case status.to_s when "considering" then considering.with_golden_first + when "on_deck" then on_deck.with_golden_first when "doing" then doing.with_golden_first end end end def doing? - open? && published? && engagement.present? + open? && published? && engagement&.status == "doing" + end + + def on_deck? + open? && published? && engagement&.status == "on_deck" end def considering? @@ -26,6 +32,8 @@ module Card::Engageable def engagement_status if doing? "doing" + elsif on_deck? + "on_deck" elsif considering? "considering" end @@ -35,7 +43,20 @@ module Card::Engageable unless doing? transaction do reopen - create_engagement! + create_engagement!(status: "doing") + end + end + end + + def move_to_on_deck + unless on_deck? + transaction do + reopen + if engagement.present? + engagement.update!(status: "on_deck") + else + create_engagement!(status: "on_deck") + end end end end diff --git a/app/models/card/engagement.rb b/app/models/card/engagement.rb index 6cdcdf45e..e9a46428f 100644 --- a/app/models/card/engagement.rb +++ b/app/models/card/engagement.rb @@ -1,3 +1,5 @@ class Card::Engagement < ApplicationRecord belongs_to :card, class_name: "::Card", touch: true + + validates :status, presence: true, inclusion: { in: %w[doing on_deck] } end diff --git a/app/views/cards/container/_engagement.html.erb b/app/views/cards/container/_engagement.html.erb index 54aa661b9..47a1e9d74 100644 --- a/app/views/cards/container/_engagement.html.erb +++ b/app/views/cards/container/_engagement.html.erb @@ -2,14 +2,23 @@
<%= 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.label :engagement, value: "considering", class: "btn", aria: { label: "Move to Considering"} do %> <%= form.radio_button :engagement, "considering", checked: @card.considering?, class: "for-screen-reader", data: { action: "change->form#submit" } %> Considering <% 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.hidden_field :engagement, value: "on_deck" %> + <%= form.label :engagement, value: "on_deck", class: "btn", aria: { label: "Move to On Deck"} do %> + <%= form.radio_button :engagement, "on_deck", checked: @card.on_deck?, class: "for-screen-reader", data: { action: "change->form#submit" } %> + On Deck + <% end %> + <% end %> + + <%= form_with url: card_engagement_path(@card), method: :post, data: { controller: "form" } do |form| %> + <%= form.hidden_field :engagement, value: "doing" %> + <%= form.label :engagement, value: "doing", class: "btn", aria: { label: "Move to Doing"} do %> <%= form.radio_button :engagement, "doing", checked: @card.doing?, class: "for-screen-reader", data: { action: "change->form#submit" } %> Doing <% end %> diff --git a/app/views/cards/index.html.erb b/app/views/cards/index.html.erb index 377483dc6..1b5f95849 100644 --- a/app/views/cards/index.html.erb +++ b/app/views/cards/index.html.erb @@ -50,6 +50,7 @@ dragend->drag-and-drop#dragEnd" } do %>
<%= render "cards/index/engagement/considering", **@considering.to_h %> + <%= render "cards/index/engagement/on_deck", **@on_deck.to_h %> <%= render "cards/index/engagement/doing", **@doing.to_h %>
diff --git a/app/views/cards/index/_workflow_filter.html.erb b/app/views/cards/index/_workflow_filter.html.erb index 018fc2045..c1b4a5aba 100644 --- a/app/views/cards/index/_workflow_filter.html.erb +++ b/app/views/cards/index/_workflow_filter.html.erb @@ -1,7 +1,7 @@