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

Handle the case where you can only see one collection

Browse Source
This commit is contained in:
Jason Zimdars
2025-05-02 18:08:57 +02:00
parent 360d37d6ff
commit 4cf0242443
7 changed files with 61 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/stylesheets/card-filters.css
+2
View File
@@ -2,6 +2,8 @@
.card-filter--collection {
> button {
--hover-size: 0;
inline-size: auto;
}
}
app/helpers/filters_helper.rb
+1 -1
View File
@@ -1,7 +1,7 @@
module FiltersHelper
def filter_title(filter)
if filter.collections.none?
"All collections"
Current.user.collections.one? ? Current.user.collections.first.name : "All collections"
elsif filter.collections.one?
filter.collections.first.name
else
app/views/cards/index/_collections_filter.html.erb
+36 -27
View File
@@ -4,40 +4,49 @@
<%= filter_hidden_field_tag key, value %>
<% end %>
<%= 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">
<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>
<%= 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>
<% 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 %>
<%= 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>
<% end %>
<% end %>
<% end %>
<% Current.user.collections.order(:name).each do |collection| %>
<li class="popup__group flex align-center" data-value="<%= collection.name.downcase %>">
<% 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">
<%= form.check_box "collection_ids[]", {
checked: filter.collections.include?(collection),
data: { action: "change->form#submit" },
include_hidden: false,
}, collection.id %>
<input type="checkbox" <%= "checked" if filter.collection_ids.empty? %>>
<span class="for-screen-reader">
Toggle filter for <%= collection.name %>
See everything in all collections
</span>
<%= icon_tag "check", size: 18, class: "checked" %>
</div>
<%= link_to cards_path(collection_ids: [ collection ]), class: "btn popup__item min-width flex-item-grow" do %>
<span class="overflow-ellipsis"><%= collection.name %></span>
<span class="translucent flex-item-no-shrink flex-item-justify-end"> ›</span>
<%= 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>
<% end %>
</li>
<% end %>
<% 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">
<%= form.check_box "collection_ids[]", {
checked: filter.collections.include?(collection),
data: { action: "change->form#submit" },
include_hidden: false,
}, collection.id %>
<span class="for-screen-reader">
Toggle filter for <%= collection.name %>
</span>
<%= icon_tag "check", size: 18, class: "checked" %>
</div>
<%= link_to cards_path(collection_ids: [ collection ]), class: "btn popup__item min-width flex-item-grow" do %>
<span class="overflow-ellipsis"><%= collection.name %></span>
<span class="translucent flex-item-no-shrink flex-item-justify-end"> ›</span>
<% end %>
</li>
<% end %>
<% end %>
<% end %>
app/views/cards/index/_header.html.erb
+1 -3
View File
@@ -24,15 +24,13 @@
filter_active_class: "filter--active",
filter_selected_class: "selected" } do %>
<div class="flex align-center full-width gap-half">
<span class="btn borderless" style="pointer-events: none; --icon-size: 1.3em; --btn-padding: 0 0.4em 0 0.6em;">
<%= icon_tag "filter" %>
</span>
<strong class="popup__title txt-medium">Collections</strong>
<button class="btn borderless txt-x-small flex-item-justify-end" data-action="click->dialog#close" >
<%= icon_tag "remove-med" %>
<span class="for-screen-reader">Close</span>
</button>
</div>
<%= render "events/filter/new_collection_option" %>
<% if Current.user.collections.count > 15 %>
<input placeholder="Find a collection…" class="input input--transparent txt-small" type="search" autocorrect="off" autocomplete="off" data-1p-ignore="true" data-action="input->filter#filter" autofocus=>
<% end %>
app/views/events/_filter.html.erb
+6 -3
View File
@@ -26,9 +26,12 @@
<%= form_with url: events_path, method: :get, class: "flex flex-column max-width popup__list full-width",
data: { controller: "form" } do |form| %>
<%= render "events/filter/all_collections_option", form: form, filter: filter %>
<menu data-filter-target="list" contents>
<%= render partial: "events/filter/collection_option", collection: Current.user.collections.alphabetically, as: :collection, locals: { form: form, filter: filter } %>
</menu>
<% if Current.user.collections.many? %>
<menu data-filter-target="list" contents>
<%= render partial: "events/filter/collection_option", collection: Current.user.collections.alphabetically, as: :collection, locals: { form: form, filter: filter } %>
</menu>
<% end %>
<% end %>
<p class="txt-small txt-nowrap txt-align-center margin-block-half full-width">
app/views/events/filter/_all_collections_option.html.erb
+14 -5
View File
@@ -1,17 +1,26 @@
<div class="popup__group flex align-center" style="--hover-size: 0">
<% 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 %>
<%= 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>
<% 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 %>
<%= check_box_tag "filter_collections", nil, filter.collections.blank?, class: "form-checkbox" %>
<% end %>
<span class="for-screen-reader">
See everything in all collections
</span>
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 %>
<%= 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>
</div>
<% end %>
app/views/events/filter/_new_collection_option.html.erb
+1 -1
View File
@@ -2,6 +2,6 @@
<%= link_to new_collection_path, class: "btn popup__new popup__item", style: "view-transition-name: new-collection" do %>
<%= icon_tag "add" %>
<span>Add a new collection</span>
<hr class="full-width separator--horizontal margin-none" style="--border-color: transparent;">
<% end %>
<hr class="full-width separator--horizontal margin-none" style="--border-color: transparent;">
</div>