diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css index 675f3fe13..083a4da6a 100644 --- a/app/assets/stylesheets/card-columns.css +++ b/app/assets/stylesheets/card-columns.css @@ -45,8 +45,9 @@ min-block-size: 20lh; } - @media (max-width: 639px) { - --bubble-size: 3rem; + /* Hide on small, fat-finger touch devices */ + @media (hover: none) and (pointer: coarse) and (max-width: 519px) { + display: none; } } @@ -730,4 +731,52 @@ } } } + + /* Mobile columns + /* -------------------------------------------------------------------------- */ + + .mobile-card-columns { + --column-gap: 8px; + --column-padding-expanded: calc(var(--column-gap) * 2); + --column-width-collapsed: 40px; + --progress-increment: var(--progress-max-width) / var(--progress-max-cards); + --progress-max-cards: 20; + --progress-max-width: 100%; + + padding-inline: 3vw; + + /* Hide on larger devices with cursors */ + @media (hover: hover) and (min-width: 520px) { + display: none; + } + + .cards.is-collapsed { + inline-size: auto; + display: block; + padding-block: 0.5ch; + + .cards__expander { + flex-direction: row; + inline-size: auto; + + &:before { + block-size: 1px; + inline-size: 100%; + inset: 50% 0 auto; + translaate: 0 -50%; + } + + &:after { + block-size: var(--column-width-collapsed); + inline-size: calc(var(--column-width-collapsed) + var(--card-count) * var(--progress-increment)); + margin-inline-start: 0; + max-inline-size: var(--progress-max-width); + } + } + + .cards__expander-title { + writing-mode: revert; + } + } + } } diff --git a/app/controllers/cards/comments/reactions_controller.rb b/app/controllers/cards/comments/reactions_controller.rb index 0a728fbb2..54f63dda7 100644 --- a/app/controllers/cards/comments/reactions_controller.rb +++ b/app/controllers/cards/comments/reactions_controller.rb @@ -10,29 +10,16 @@ class Cards::Comments::ReactionsController < ApplicationController end def create - reaction = @comment.reactions.create!(params.expect(reaction: :content)) - - broadcast_create(reaction) - redirect_to card_comment_reactions_path(@card, @comment) + @reaction = @comment.reactions.create!(params.expect(reaction: :content)) end def destroy - reaction = @comment.reactions.find(params[:id]) - reaction.destroy - - broadcast_remove(reaction) + @reaction = @comment.reactions.find(params[:id]) + @reaction.destroy end private def set_comment @comment = @card.comments.find(params[:comment_id]) end - - def broadcast_create(reaction) - reaction.broadcast_append_to @card, target: [ @comment, :reactions ], partial: "cards/comments/reactions/reaction" - end - - def broadcast_remove(reaction) - reaction.broadcast_remove_to @card - end end diff --git a/app/controllers/cards/taggings_controller.rb b/app/controllers/cards/taggings_controller.rb index 23bac85e3..16227011d 100644 --- a/app/controllers/cards/taggings_controller.rb +++ b/app/controllers/cards/taggings_controller.rb @@ -8,7 +8,6 @@ class Cards::TaggingsController < ApplicationController def create @card.toggle_tag_with sanitized_tag_title_param - render_card_replacement end private diff --git a/app/controllers/my/menus_controller.rb b/app/controllers/my/menus_controller.rb index 2b20d2188..a2c1c96eb 100644 --- a/app/controllers/my/menus_controller.rb +++ b/app/controllers/my/menus_controller.rb @@ -5,6 +5,6 @@ class My::MenusController < ApplicationController @tags = Tag.all.alphabetically @users = User.active.alphabetically - # fresh_when etag: [ @user_filtering, Current.session ] + fresh_when etag: [ @filters, @boards, @tags, @users ] end end diff --git a/app/helpers/filters_helper.rb b/app/helpers/filters_helper.rb index 49f175067..0b04f6f44 100644 --- a/app/helpers/filters_helper.rb +++ b/app/helpers/filters_helper.rb @@ -30,7 +30,7 @@ module FiltersHelper tag.dialog class: "margin-block-start-half popup panel flex-column align-start gap-half fill-white shadow txt-small", data: { action: "turbo:before-cache@document->dialog#close keydown->navigable-list#navigate filter:changed->navigable-list#reset toggle->filter#filter", aria: { label: label, aria_description: label }, - controller: "filter navigable-list", + controller: "navigable-list", dialog_target: "dialog", navigable_list_focus_on_selection_value: false, navigable_list_actionable_items_value: true diff --git a/app/javascript/controllers/dialog_controller.js b/app/javascript/controllers/dialog_controller.js index 4fbf25dc5..b2b8cb6fa 100644 --- a/app/javascript/controllers/dialog_controller.js +++ b/app/javascript/controllers/dialog_controller.js @@ -5,7 +5,8 @@ import { limitHeightToViewport } from "helpers/sizing_helpers" export default class extends Controller { static targets = [ "dialog" ] static values = { - modal: { type: Boolean, default: false } + modal: { type: Boolean, default: false }, + sizing: { type: Boolean, default: true } } connect() { @@ -22,7 +23,7 @@ export default class extends Controller { orient(this.dialogTarget) } - limitHeightToViewport(this.dialogTarget, true) + limitHeightToViewport(this.dialogTarget, this.sizingValue) this.#loadLazyFrames() this.dialogTarget.setAttribute("aria-hidden", "false") @@ -43,6 +44,7 @@ export default class extends Controller { this.dialogTarget.blur() orient(this.dialogTarget, false) limitHeightToViewport(this.dialogTarget, false) + this.dispatch("close") } closeOnClickOutside({ target }) { diff --git a/app/javascript/controllers/filter_controller.js b/app/javascript/controllers/filter_controller.js index 7f3770a8e..77a974bcc 100644 --- a/app/javascript/controllers/filter_controller.js +++ b/app/javascript/controllers/filter_controller.js @@ -20,4 +20,9 @@ export default class extends Controller { this.dispatch("changed") } + + clearInput() { + if (!this.hasInputTarget) return + this.inputTarget.value = "" + } } diff --git a/app/views/boards/show.html.erb b/app/views/boards/show.html.erb index bd3266ac3..9f0c2ebee 100644 --- a/app/views/boards/show.html.erb +++ b/app/views/boards/show.html.erb @@ -26,5 +26,6 @@ <%= render "boards/show/filtered_cards", page: @page %> <% else %> <%= render "boards/show/columns", page: @page, board: @board %> + <%= render "boards/show/mobile_columns", page: @page, board: @board %> <% end %> <% end %> diff --git a/app/views/boards/show/_columns.html.erb b/app/views/boards/show/_columns.html.erb index 5223b9254..31938ef28 100644 --- a/app/views/boards/show/_columns.html.erb +++ b/app/views/boards/show/_columns.html.erb @@ -25,4 +25,3 @@ <%= render "boards/show/menu/columns", board: board %> <% end %> - diff --git a/app/views/boards/show/_mobile_columns.html.erb b/app/views/boards/show/_mobile_columns.html.erb new file mode 100644 index 000000000..fd0b29b58 --- /dev/null +++ b/app/views/boards/show/_mobile_columns.html.erb @@ -0,0 +1,39 @@ +
+ <%= link_to board_columns_not_now_path(board), class: "cards cards--on-deck is-collapsed", style: "--card-color: var(--color-card-complete);", data: { turbo_frame: "_top" } do %> +
+ <%= board.cards.postponed.count %> +

+ Not Now +

+
+ <% end %> + + <%= link_to board_columns_stream_path(board), class: "cards cards--considering is-collapsed", data: { turbo_frame: "_top" } do %> +
+ <%= board.cards.awaiting_triage.count %> +

+ Maybe? +

+
+ <% end %> + + <% board.columns.sorted.each do |column| %> + <%= link_to board_column_path(column.board, column), class: "cards cards--doing is-collapsed", style: "--card-color: #{column.color}", data: { turbo_frame: "_top" } do %> +
+ <%= column.cards.active.count %> +

+ <%= column.name %> +

+
+ <% end %> + <% end %> + + <%= link_to board_columns_closed_path(board), class: "cards cards--on-deck is-collapsed", style: "--card-color: var(--color-card-complete);", data: { turbo_frame: "_top" } do %> +
+ <%= board.cards.closed.count %> +

+ Done +

+
+ <% end %> +
diff --git a/app/views/cards/comments/_new.html.erb b/app/views/cards/comments/_new.html.erb index cd46d7cb4..9aaa063fd 100644 --- a/app/views/cards/comments/_new.html.erb +++ b/app/views/cards/comments/_new.html.erb @@ -17,7 +17,7 @@ <%= form.button class: "comment__submit btn btn--reversed", data: { form_target: "submit" }, disabled: true do %> - Post + Post this comment <% end %> <%= hotkey_label([ "ctrl", "enter" ]) %> diff --git a/app/views/cards/comments/reactions/create.turbo_stream.erb b/app/views/cards/comments/reactions/create.turbo_stream.erb new file mode 100644 index 000000000..7ac4b61df --- /dev/null +++ b/app/views/cards/comments/reactions/create.turbo_stream.erb @@ -0,0 +1,3 @@ +<%= turbo_stream.replace([ @comment, :reacting ]) do %> + <%= render "cards/comments/reactions/reactions", comment: @comment.reload %> +<% end %> diff --git a/app/views/cards/comments/reactions/destroy.turbo_stream.erb b/app/views/cards/comments/reactions/destroy.turbo_stream.erb new file mode 100644 index 000000000..936436e11 --- /dev/null +++ b/app/views/cards/comments/reactions/destroy.turbo_stream.erb @@ -0,0 +1 @@ +<%= turbo_stream.remove @reaction %> diff --git a/app/views/cards/container/footer/_draft.html.erb b/app/views/cards/container/footer/_draft.html.erb index 1c898c30d..30e9aa02b 100644 --- a/app/views/cards/container/footer/_draft.html.erb +++ b/app/views/cards/container/footer/_draft.html.erb @@ -1,13 +1,19 @@
- <%= button_to card_publish_path(card), name: "creation_type", value: "add", class: "btn", - form: { data: { controller: "form" } }, - data: { form_target: "submit", controller: "clicker", action: "keydown.ctrl+enter@document->clicker#click keydown.meta+enter@document->clicker#click" } do %> - Create card - <% end %> +
+ <%= button_to card_publish_path(card), name: "creation_type", value: "add", class: "btn", + form: { data: { controller: "form" } }, + data: { form_target: "submit", controller: "clicker", action: "keydown.ctrl+enter@document->clicker#click keydown.meta+enter@document->clicker#click" } do %> + Create card + <% end %> + <%= hotkey_label([ "ctrl", "enter" ]) %> +
- <%= button_to card_publish_path(card), method: :post, class: "btn btn--reversed", name: "creation_type", value: "add_another", - title: "Create and add another (ctrl+shift+enter)", form: { data: { controller: "form" } }, - data: { form_target: "submit", controller: "clicker", action: "keydown.ctrl+shift+enter@document->clicker#click keydown.meta+shift+enter@document->clicker#click" } do %> - Create and add another - <% end %> +
+ <%= button_to card_publish_path(card), method: :post, class: "btn btn--reversed", name: "creation_type", value: "add_another", + title: "Create and add another (ctrl+shift+enter)", form: { data: { controller: "form" } }, + data: { form_target: "submit", controller: "clicker", action: "keydown.ctrl+shift+enter@document->clicker#click keydown.meta+shift+enter@document->clicker#click" } do %> + Create and add another + <% end %> + <%= hotkey_label([ "ctrl", "shift", "enter" ]) %> +
diff --git a/app/views/cards/taggings/create.turbo_stream.erb b/app/views/cards/taggings/create.turbo_stream.erb new file mode 100644 index 000000000..cd4671820 --- /dev/null +++ b/app/views/cards/taggings/create.turbo_stream.erb @@ -0,0 +1 @@ +<%= turbo_stream.replace([ @card, :tags ], partial: "cards/display/perma/tags", method: "morph", locals: { card: @card.reload }) %> diff --git a/app/views/events/index/_filter.html.erb b/app/views/events/index/_filter.html.erb index 37dab9e2b..0fdc6bfb8 100644 --- a/app/views/events/index/_filter.html.erb +++ b/app/views/events/index/_filter.html.erb @@ -5,8 +5,8 @@ data: { controller: "form", turbo_frame: "cards_container", turbo_action: "advance" } do |form| %> <%= tag.div class: "flex-inline position-relative quick-filter", data: { - controller: "dialog multi-selection-combobox", - action: "keydown.esc->dialog#close click@document->dialog#closeOnClickOutside turbo:morph@window->multi-selection-combobox#refresh", + controller: "dialog filter multi-selection-combobox", + action: "keydown.esc->dialog#close click@document->dialog#closeOnClickOutside turbo:morph@window->multi-selection-combobox#refresh dialog:close@document->filter#clearInput", filter_show: user_filtering.show_boards?, multi_selection_combobox_no_selection_label_value: user_filtering.selected_boards_label } do %>