bterkuile/fizzy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Position expander menu

Browse Source
This commit is contained in:
Andy Smith
2025-09-29 10:34:15 -05:00
parent 75379d1305
commit 27ccde8419
3 changed files with 15 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/stylesheets/card-columns.css
+7 -1
View File
@@ -194,7 +194,8 @@
inline-size: 100%;
margin-block-end: calc(-0.5 * var(--cards-gap));
&:hover {
&:hover,
&:has(~ .cards__expander-menu:hover) {
background-color: var(--column-color);
filter: none;
}
@@ -222,6 +223,11 @@
}
.cards__expander-menu {
inset: 0 0 auto auto;
position: absolute;
translate: calc(var(--column-gap) * -2);
z-index: var(--z-popup);
.btn--circle {
--btn-background: transparent;
app/views/collections/show/_expander.html.erb
+6 -8
View File
@@ -1,8 +1,6 @@
<div>
<header class="cards__expander" data-collapsible-columns-target="button" data-action="click->collapsible-columns#toggle"
style="--card-count: <%= [ count, 20 ].min %>" role="button" aria-controls="<%= column_id %>" aria-expanded="false">
<span class="cards__expander-count" data-drag-and-drop-counter="true"><%= count > 99 ? "99+" : count %></span>
<h2 class="cards__expander-title"><%= title %></h2>
</header>
<%= yield if block_given? %>
</div>
<header class="cards__expander" data-collapsible-columns-target="button" data-action="click->collapsible-columns#toggle"
style="--card-count: <%= [ count, 20 ].min %>" role="button" aria-controls="<%= column_id %>" aria-expanded="false">
<span class="cards__expander-count" data-drag-and-drop-counter="true"><%= count > 99 ? "99+" : count %></span>
<h2 class="cards__expander-title"><%= title %></h2>
</header>
<%= yield if block_given? %>
app/views/collections/show/menu/_column.html.erb
+2 -1
View File
@@ -1,4 +1,4 @@
<div class="cards__expander-menu position-relative" data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
<div class="cards__expander-menu" data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
<button class="btn btn--circle txt-x-small borderless" data-action="click->dialog#open">
<%= icon_tag "menu-dots-horizontal", class: "translucent" %>
<span class="for-screen-reader">Column options</span>
@@ -18,6 +18,7 @@
<%= button_to "Delete column", collection_column_path(column.collection, column),
method: :delete,
class: "popup__btn btn",
form_class: "display-contents",
form: { data: { turbo_confirm: "Are you sure you want to delete this column? This will move the cards back to the stream." } } %>
</li>
</ul>