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

Update filter on events screen

Browse Source 
- Allow proper sizing
- Bring back All Collections option
This commit is contained in:
Jason Zimdars
2025-04-23 14:16:41 -05:00
parent 4bce7f1b5c
commit db5df1a596
3 changed files with 35 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/stylesheets/events.css
-4
View File
@@ -60,10 +60,6 @@
.events__popup {
margin-block-start: var(--block-space-double);
.events__index-header:has(&) {
position: relative;
}
}
.event {
app/presenters/collection_filter_presenter.rb
+2 -2
View File
@@ -7,9 +7,9 @@ class CollectionFilterPresenter
def filter_text
if selected_collection_ids.present?
"Showing activity for #{selected_collection_names_bold}".html_safe
"Activity in #{selected_collection_names_bold}".html_safe
else
"Showing everything"
"Activity in all collections"
end
end
app/views/events/_filter.html.erb
+33 -14
View File
@@ -7,28 +7,46 @@
</span>
</button>
<dialog class="events__popup popup popup--animated panel flex-column full-width align-start gap-half fill-white shadow"
<dialog class="events__popup popup popup--animated panel flex-column align-start gap-half fill-white shadow"
style="z-index: 5;" data-dialog-target="dialog" data-action="turbo:before-cache@document->dialog#close">
<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.6em 0 0.3em;">
<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>
<%= form_with url: events_path, method: :get, class: "flex flex-column full-width popup__list",
<div class="popup__group flex align-center full-width gap-half overflow-ellipsis">
<%= 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>
<% end %>
</div>
<hr class="full-width separator--horizontal margin-none" style="--border-color: transparent;">
<%= form_with url: events_path, method: :get, class: "flex flex-column max-width popup__list full-width",
data: { controller: "form" } do |form| %>
<%#= link_to "Show everything", events_path(clear_filter: true), class: "btn popup__item txt-nowrap" %>
<div class="popup__group flex align-center full-width gap-half overflow-ellipsis">
<%= 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>
<%= link_to events_path(clear_filter: true), 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" unless params[:collection_ids] || cookies[:collection_filter] %>>
<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>
<% end %>
</div>
<hr class="full-width separator--horizontal" style="--border-color: transparent;">
<span class="translucent flex-item-no-shrink"> ›</span>
<% end %>
<% @collections.each do |collection| %>
<div class="popup__group flex align-center full-width gap-half overflow-ellipsis">
<div class="popup__group flex align-center">
<div class="btn txt-xx-small">
<%= form.check_box "collection_ids[]", {
checked: (params[:collection_ids] || cookies[:collection_filter]&.split(","))&.include?(collection.id.to_s),
@@ -42,10 +60,11 @@
<%= icon_tag "check", size: 18, class: "checked flex-item-justify-end" %>
</div>
<%= link_to cards_path(collection_ids: [ collection ]), class: "btn popup__item flex-item-grow justify-space-between" do %>
<span class="overflow-ellipsis flex-item-grow"><%= collection.name %></span>
<span class="translucent"> ›</span>
<%= link_to cards_path(collection_ids: [ collection ]), class: "btn popup__item min-width flex-item-grow" do %>
<span class="overflow-ellipsis"><%= collection.name %></span>
<% end %>
<span class="translucent flex-item-no-shrink"> ›</span>
</div>
<% end %>
<% end %>