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

Ensure checkboxes in menus have full size click targets

Browse Source
This commit is contained in:
Jason Zimdars
2025-05-12 21:50:32 -05:00
parent 64e366efd2
commit 9c4a359865
3 changed files with 17 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/views/cards/index/_collections_filter.html.erb
+5 -5
View File
@@ -5,7 +5,7 @@
<% end %>
<% if Current.user.collections.one? %>
<%= link_to cards_path(filter.as_params.except(:collection_ids)), class: "popup__group flex align-center", style: "--hover-size: 0" do %>
<%= link_to cards_path(filter.as_params.except(:collection_ids)), class: "popup__group flex align-center" do %>
<%= tag.div class: "btn popup__item min-width flex-item-grow" do %>
<span class="overflow-ellipsis"><%= Current.user.collections.first.name %></span>
<span class="txt-ink translucent flex-item-no-shrink flex-item-justify-end"><span class="txt-x-small txt-uppercase">GO TO</span> ›</span>
@@ -13,14 +13,14 @@
<% end %>
<% elsif Current.user.collections.many? %>
<%= link_to cards_path(filter.as_params.except(:collection_ids)), class: "popup__group flex align-center", style: "--hover-size: 0" do %>
<div class="btn txt-xx-small flex-item-no-shrink">
<label class="btn txt-xx-small flex-item-no-shrink" style="--hover-size: 0.15rem">
<input type="checkbox" <%= "checked" if filter.collection_ids.empty? %>>
<span class="for-screen-reader">
See everything in all collections
</span>
<%= icon_tag "check", size: 18, class: "checked" %>
</div>
</label>
<%= tag.div class: "btn popup__item min-width flex-item-grow" do %>
<span class="overflow-ellipsis">All collections</span>
<span class="txt-ink translucent flex-item-no-shrink flex-item-justify-end"><span class="txt-x-small txt-uppercase">GO TO</span> ›</span>
@@ -29,7 +29,7 @@
<% Current.user.collections.order(:name).each do |collection| %>
<li class="popup__group flex align-center" data-value="<%= collection.name.downcase %>">
<div class="btn txt-xx-small flex-item-no-shrink">
<label class="btn txt-xx-small flex-item-no-shrink">
<%= form.check_box "collection_ids[]", {
checked: filter.collections.include?(collection),
data: { action: "change->form#submit" },
@@ -40,7 +40,7 @@
Toggle filter for <%= collection.name %>
</span>
<%= icon_tag "check", size: 18, class: "checked" %>
</div>
</label>
<%= link_to cards_path(collection_ids: [ collection ]), class: "btn popup__item min-width flex-item-grow" do %>
<span class="overflow-ellipsis"><%= collection.name %></span>
app/views/events/filter/_all_collections_option.html.erb
+10 -13
View File
@@ -6,21 +6,18 @@
<% end %>
<% end %>
<% elsif Current.user.collections.many? %>
<div class="popup__group flex align-center" style="--hover-size: 0">
<div class="btn txt-xx-small flex-item-no-shrink">
<%= link_to events_path(clear_filter: true), style: "--hover-size: 0" do %>
<div class="popup__group flex align-center">
<%= link_to events_path(clear_filter: true), class: "btn txt-xx-small flex-item-no-shrink" do %>
<%= check_box_tag "filter_collections", nil, filter.collections.blank?, class: "form-checkbox" %>
<span class="for-screen-reader">
See everything in all collections
</span>
<%= icon_tag "check", size: 18, class: "checked" %>
<% end %>
<span class="for-screen-reader">
See everything in all collections
</span>
<%= icon_tag "check", size: 18, class: "checked" %>
</div>
<%= link_to cards_path(filter.as_params.except(:collection_ids)), class: "btn popup__item min-width flex-item-grow" do %>
<span class="overflow-ellipsis">All collections</span>
<span class="txt-ink translucent flex-item-no-shrink flex-item-justify-end"><span class="txt-x-small txt-uppercase">GO TO</span> ›</span>
<% end %>
<%= link_to cards_path(filter.as_params.except(:collection_ids)), class: "btn popup__item min-width flex-item-grow" do %>
<span class="overflow-ellipsis">All collections</span>
<span class="txt-ink translucent flex-item-no-shrink flex-item-justify-end"><span class="txt-x-small txt-uppercase">GO TO</span> ›</span>
<% end %>
</div>
<% end %>
app/views/events/filter/_collection_option.html.erb
+2 -2
View File
@@ -1,5 +1,5 @@
<li class="popup__group flex align-center" data-value="<%= collection.name.downcase %>">
<div class="btn txt-xx-small">
<label class="btn txt-xx-small">
<%= form.check_box "collection_ids[]", {
checked: filter.collections.include?(collection),
data: { action: "change->form#submit" },
@@ -10,7 +10,7 @@
Toggle filter for <%= collection.name %>
</span>
<%= icon_tag "check", size: 18, class: "checked flex-item-justify-end" %>
</div>
</label>
<%= link_to cards_path(collection_ids: [ collection ]), class: "btn popup__item min-width flex-item-grow" do %>
<span class="overflow-ellipsis"><%= collection.name %></span>