diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css index 4f3f9de4a..210892472 100644 --- a/app/assets/stylesheets/card-columns.css +++ b/app/assets/stylesheets/card-columns.css @@ -182,10 +182,14 @@ .cards__transition-container { block-size: 100%; border-radius: calc(var(--column-width-collapsed) / 2); - translate: 0 0.5ch; // Allow a little room for the mini bubble */ + translate: 0 0.5ch; /* Allow a little room for the mini bubble */ transition: translate var(--column-transition-duration) var(--ease-out-overshoot-subtle); @media (min-width: 640px) { + .is-expanded & { + translate: 0 0.5ch; /* Allow a little room for the mini bubble */ + } + .is-collapsed & { translate: 0 var(--column-width-collapsed); } @@ -366,6 +370,7 @@ font-weight: 600; gap: 0.5ch; grid-area: expander; + justify-content: center; outline: none; outline-offset: -2px; position: relative; diff --git a/app/views/public/boards/show/_columns.html.erb b/app/views/public/boards/show/_columns.html.erb index 59f2b5e39..17db6228e 100644 --- a/app/views/public/boards/show/_columns.html.erb +++ b/app/views/public/boards/show/_columns.html.erb @@ -3,6 +3,7 @@ data-controller="collapsible-columns" data-collapsible-columns-board-value="<%= board.id %>" data-collapsible-columns-collapsed-class="is-collapsed" + data-collapsible-columns-expanded-class="is-expanded" data-collapsible-columns-no-transitions-class="no-transitions" data-collapsible-columns-title-not-visible-class="is-off-screen"> diff --git a/app/views/public/boards/show/_stream.html.erb b/app/views/public/boards/show/_stream.html.erb index 9d041c1cd..08037800b 100644 --- a/app/views/public/boards/show/_stream.html.erb +++ b/app/views/public/boards/show/_stream.html.erb @@ -1,11 +1,17 @@ -
-
+ + <%# render "boards/show/expander", title: "Maybe?", count: column.cards.active.count, column_id: dom_id(column) %> + <%= render "boards/show/expander", title: "Maybe?", count: 2, column_id: "maybe" %> + <%= link_to public_board_columns_stream_url(board.publication.key), class: "cards__maximize-button btn btn--circle txt-x-small borderless", data: { turbo_frame: "_top" } do %> <%= icon_tag "grid", class: "translucent" %> Maximize column